2 fragen (ff, bild)

  • ich hab 2 probleme
    1. jedes kästchen sollte gleich lang sein, es geht beim ie
    beim ff werden die kästchen nur so lang wie das wort .

    2. ich möchte unter dem <hr> tag ein hintergrundbild einfügen

    bitte helft mir, sorry das ich euch nerve aber ich
    mach das noch nicht so lange.
    also danke schon im voraus.

    das ist der qt:


    <html>

    <head>
    <style>

    body {
    scrollbar-face-color: 000000;
    scrollbar-shadow-color: ff0000;
    scrollbar-highlight-color:ff0000;
    scrollbar-3dlight-color:000000;
    scrollbar-darkshadow-color:000000;
    scrollbar-track-color:000000;
    scrollbar-arrow-color:ff0000; }
    </style>

    <style type="text/css">
    <!--

    #navi {
    margin:auto;
    width: 800px;
    }

    body {text-align:center
    }

    body {
    font-family:arial,sans-serif;
    font-size:10pt;
    }

    body {
    background-color: #000000;
    }
    a:link, a:visited, a:active, a:focus {
    color:#ff0000;
    text-decoration: none;
    }

    a.cssmenu:link {
    width : 100px;
    color : black;
    background-color : #ff0000;
    text-align : center;
    text-decoration : none;
    font-size : 12px;
    border-top : 1px solid silver;
    border-right : 1px solid black;
    border-left : 1px solid silver;
    border-bottom : 1px solid black;
    padding-top : 2px;
    padding-right : 4px;
    padding-left : 4px;
    padding-bottom : 2px;
    margin-top : 30px;
    margin-right : 10px;
    }

    a.cssmenu:visited {
    width : 100px;
    color : black;
    background-color : #ff0000;
    text-align : center;
    text-decoration : none;
    font-size : 12px;
    border-top : 1px solid silver;
    border-right : 1px solid black;
    border-left : 1px solid silver;
    border-bottom : 1px solid black;
    padding-top : 2px;
    padding-right : 4px;
    padding-left : 4px;
    padding-bottom : 2px;
    margin-right : 10px;
    }


    a.cssmenu:hover {
    width : 100px;
    color : #ff0000;
    background-color : #0000ff;
    text-align : center;
    text-decoration : none;
    font-size : 12px;
    border-top : 1px solid silver;
    border-right : 1px solid black;
    border-left : 1px solid silver;
    border-bottom : 1px solid black;
    padding-top : 2px;
    padding-right : 4px;
    padding-left : 4px;
    padding-bottom : 2px;
    margin-right : 10px;
    }

    //-->
    </style>
    </head>

    <div id="navi">
    Home
    About me
    Photos
    Videos
    Contact
    </div>

    <hr>


    </body>
    </html>

  • Damit die feste Breite funktioniert muss man display:block definieren. Damit sie dann trotzdem nebeneinander sind habe ich sie alle nach links gefloatet. Damit es mittig ist, habe ich dann die Breite des navi divs auf genau 600 pixel gesetzt, sodass er genau passt.


    edit: 2. geht glaube ich geht nicht wirklich, allerdings kannst du hinter dem definieren des Hintergrundbildes die Angabe background-position machen. Die kannst du so einstellen, dass es ungefähr passt.

    Code
    body {
    	background-image:url(dsf);
    	background-position:0px 100px;
    }
  • <html>

    <head>

    <style>

    body {
    scrollbar-face-color: 000000;
    scrollbar-shadow-color: ff0000;
    scrollbar-highlight-color:ff0000;
    scrollbar-3dlight-color:000000;
    scrollbar-darkshadow-color:000000;
    scrollbar-track-color:000000;
    scrollbar-arrow-color:ff0000; }
    </style>

    <style type="text/css">
    <!--

    #navi {
    margin:auto;
    width: 600px;
    }

    body {text-align:center
    }

    body {
    background-image:url(mypic.jpg);
    background-position:0px 100px;
    }

    body {
    font-family:arial,sans-serif;
    font-size:10pt;
    }

    a.cssmenu:link {
    width : 100px;
    color : black;
    background-color : #ff0000;
    text-align : center;
    text-decoration : none;
    font-size : 12px;
    border-top : 1px solid silver;
    border-right : 1px solid black;
    border-left : 1px solid silver;
    border-bottom : 1px solid black;
    padding-top : 2px;
    padding-right : 4px;
    padding-left : 4px;
    padding-bottom : 2px;
    margin-top : 30px;
    margin-right : 10px;
    }

    a.cssmenu:visited {
    width : 100px;
    color : black;
    background-color : #ff0000;
    text-align : center;
    text-decoration : none;
    font-size : 12px;
    border-top : 1px solid silver;
    border-right : 1px solid black;
    border-left : 1px solid silver;
    border-bottom : 1px solid black;
    padding-top : 2px;
    padding-right : 4px;
    padding-left : 4px;
    padding-bottom : 2px;
    margin-right : 10px;
    }


    a.cssmenu:hover {
    width : 100px;
    color : #ff0000;
    background-color : #0000ff;
    text-align : center;
    text-decoration : none;
    font-size : 12px;
    border-top : 1px solid silver;
    border-right : 1px solid black;
    border-left : 1px solid silver;
    border-bottom : 1px solid black;
    padding-top : 2px;
    padding-right : 4px;
    padding-left : 4px;
    padding-bottom : 2px;
    margin-right : 10px;
    }

    //-->
    </style>
    </head>

    <body style="background-color:#000000;">

    <div id="navi">
    Home
    About me
    Photos
    Videos
    Contact
    </div>

    <hr>


    </body>
    </html>

  • ja, aber gibts keine möglichkeit oben einen schwarzen hintergrund zu machen und unter dem zeilenumbruch ein hintergrundbild zu machen ?

  • doch, das ist eigentlich schon so gewesen, nur hat der schwarze hintergrund das bild überlagert, da er zuletzt definiert wurde. So gehts:

    Code
    body {
    background-color:#000000;
    background-image:url(mypic.jpg);
    background-position:0px 100px;
    background-repeat:no-repeat;
    }