Webdesign mit CSS

Webdesign mit CSS

Posts 1-9 of 9
  • Bernhard Krämer
    Bernhard Krämer    Premium Member   Group moderator
    The company name is only visible to registered members.
    HILFE! Menüs streiken!
    Hallo Zusammen!

    Ich hoffe jemand kann mir helfen!

    Ich habe eine Website mit CSS gebaut! Die Seite beinhaltet ein Menü ca. 150 px von oben (horizontal) jetzt soll links auch noch ein Menü hin, aber vertikal.

    Hier der CSS-CODE:
    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>START<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    body, html {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    background:url('../images/design/bg.jpg');
    width: 766px;
    background-repeat: repeat-y;
    }
    #kopf {
    color: #e3edfc;
    background:url('../images/design/head.jpg');
    text-align: center;
    height: 149px;
    width: 766px;
    }
    #inhalt {
    width: 400px;
    margin-left: 295px;
    margin-top: 50px;
    float: left;
    padding: 0;
    font-size: 11pt;
    }
    #menu_head_a {
    float: left;
    width: 294px;
    height: 71px;
    top: 149px;
    left: 0;
    position:absolute;
    }
    #navigation {
    width: 766px;
    top: 149px;
    left: 295px;
    position:absolute;
    }
    #navi {
    padding: 0;
    display: inline;
    line-height:300%;
    width:auto;
    margin:1em 50%;
    text-align: center;
    }
    #navi ul, #navi li {
    margin: 0;
    padding: 0;
    display: inline;
    list-style-type: none;
    left: 249px;
    }
    #navi li a:link, #navi li a:visited {
    text-decoration: none;
    background:url('../images/design/menu_head_b.jpg');
    float: left;
    width: 103px;
    height: 71px;
    top: 149px;
    }
    #navi li.sub a:link, #navi li.sub a:visited {
    text-decoration: none;
    font-weight: bold;
    padding: 0;
    border-left: 12px solid #0c0cfc;
    background-color: #e3edfc;
    color: #4455ee;
    width: 100%;
    }
    #navi li a:hover, #navi li a:active, #navi li a:focus {
    text-decoration: none;
    font-weight: bold;
    background:url('../images/design/menu_head_b.jpg');
    height: 71px;
    background-repeat: no-repeat;
    }
    #navigation_left{
    width: 290px;
    top: 149px;
    float: left;
    position: absolute;
    clear: both;
    }
    #navi_left{
    padding: 0;
    display: block;
    line-height: 100%;
    width: auto;
    }
    #navi_left ul, #navi_left li{
    list-style-type: none;
    }
    #navi_left li a:link, #navi_left li a:visited{
    display: block;
    text-decoration: none;
    background-image: url('../images/design/menu_left_a.jpg');
    background-repeat: repeat-x;
    float: left;
    width: 290px;
    height: 35px;
    }
    #navi_left li a:hover, #navi_left li a:active, #navi_left li a:focus{
    display: block;
    text-decoration: none;
    background-image: url('../images/design/menu_left_b.jpg');
    background-repeat: repeat-x;
    height: 35px;
    width: 290px;
    float: left;
    }
    #fuss {
    background: url('../images/design/footer.jpg');
    width: 766px;
    height: 74px;
    clear: both;
    }
    >>>>>>>>>>>>>>>>>>>>>>>ENDE<<<<<<<<<<<<<<<<<<<<<<<<<<<

    Meine frage ist nun warum funktioniert das nicht? Das Zweitemenü (nav_left) wird nämlich ohne Hintergrundbild horizontal über dem anderen aber weiter links angezeigt!
    Wer es sich ansehen möchte: http://www.pixxeldesign.de/neu und dann auf Webdesign klicken, da ich den Code für die Navigation in der index.php noch nicht eingefügt habe!

    Ich danke schonmal für alle Antworten!!!

    mfg
    Bernhard Krämer

    EDIT: Habe es gerade an verschiedenen Browsern versucht: IE, Safari, Opera, Firefox und NN. Ergebnis: Es geht nur beim Safari einigermaßen! aber sonst gar nicht!
    This post was modified on 08 Oct 2008 at 05:35 pm.
    • 08 Oct 2008, 3:39 pm
  • User photo
    Phelan Leroux
    (not a XING member)
    Re: HILFE! Menüs streiken!
    Ich habe mal Ihr CSS auf Ihrer Seite verwendet

    * {
    margin:0;
    padding:0;
    }
    body, html {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background:url('../images/design/bg.jpg');
    width: 766px;
    background-repeat: repeat-y;
    }
    #kopf {
    color: #e3edfc;
    background:url('../images/design/head.jpg');
    text-align: center;
    height: 149px;
    }
    #menu_head_a {
    float: left;
    width: 294px;
    height: 71px;
    }
    #navigation {
    margin-left: 295px;
    }
    #navi {
    line-height: 300%;
    }
    #navi ul, #navi li {
    display: inline;
    list-style-type: none;
    text-align: center;

    }
    #navi li a:link, #navi li a:visited {
    text-decoration: none;
    background: url('../images/design/menu_head_b.jpg');
    float: left;
    width: 103px;
    height: 71px;

    }
    #navi li.sub a:link, #navi li.sub a:visited {
    text-decoration: none;
    font-weight: bold;
    border-left: 12px solid #0c0cfc;
    background-color: #e3edfc;
    color: #4455ee;
    width: 100%;
    }
    #navi li a:hover, #navi li a:active, #navi li a:focus {
    font-weight: bold;
    background: url('../images/design/menu_head_b.jpg') no-repeat;
    }
    #navigation_left{
    width: 290px;
    float: left;
    }
    #navi_left ul, #navi_left li{
    list-style-type: none;
    line-height: 200%;
    }
    #navi_left li {
    background-image: url('../images/design/menu_left_a.jpg');
    }
    #navi_left li a:link, #navi_left li a:visited{
    display: block;
    text-decoration: none;
    background-repeat: repeat-x;
    height: 35px;
    margin-left: 50px;
    }
    #navi_left li a:hover, #navi_left li a:active, #navi_left li a:focus{
    margin-left: 50px;
    background-color: #CCC;
    }
    #inhalt {
    margin:0 50px 0 295px;
    font-size: 11pt;
    }
    #fuss {
    background: url('../images/design/footer.jpg');
    height: 74px;
    clear: both;
    }

    So funktioniert es im FF. Andere Browser sind nicht getestet da ich das CSS Live bearbeitet habe.
    • 14 Oct 2008, 2:56 pm
  • Post visible to registered members
  • Bernhard Krämer
    Bernhard Krämer    Premium Member   Group moderator
    The company name is only visible to registered members.
    Re^2: HILFE! Menüs streiken!
    Also es funktioniert jetzt!
    Wenn es interessiert woran es lag:
    http://www.tutorials.de/forum/css/325543-zwei-menues-einer-d...

    mfg
    Bernhard
    • 15 Oct 2008, 4:18 pm
  • Post visible to registered members
  • Bernhard Krämer
    Bernhard Krämer    Premium Member   Group moderator
    The company name is only visible to registered members.
    Re^4: HILFE! Menüs streiken!
    Ja das ist im Moment dass einzige Problem (der Text muss weiter nach rechts) Aber vorher war es ja nicht vertikal sondern horizontal und ab dem 2. Menüpunkt waren alle über einander!

    Wenn also jemand eine Idee hat, wie ich den Text des Menüs (nicht das ganze Menü! Nur den Text!) dann wäre es sehr nett wenn er es hierher posten würde!

    Danke!
    mfg
    BernhardK

    P.S. Gerne auch Kritik zum Design!
    • 16 Oct 2008, 2:35 pm
  • Post visible to registered members
  • Bernhard Krämer
    Bernhard Krämer    Premium Member   Group moderator
    The company name is only visible to registered members.
    Re^6: HILFE! Menüs streiken!
    Stimmt! Daran habe ich gar nicht gedacht! Ich lege ja 2 Bilder übereinander! Wie dumm von mir! Ich werde es gleich morgen ändern! Danke! Ich meld mich nochmal, wenn es funktioniert!
    • 17 Oct 2008, 8:08 pm
  • Bernhard Krämer
    Bernhard Krämer    Premium Member   Group moderator
    The company name is only visible to registered members.
    Re^6: HILFE! Menüs streiken!
    Also ich habs jetzt versucht und es funktioniert einwandfrei! Danke!
    • 18 Oct 2008, 12:53 pm