css: Schaltflächen schweben nach oben. Wie richte ich sie horizontal aus?

Ich habe folgende CSS:css: Schaltflächen schweben nach oben. Wie richte ich sie horizontal aus?

img { border-style : none } 
a { text-decoration : none } 

#header { width : 100%} 
#header #topbar{width:705px; 
     padding:3px 10px 0 10px; 
     float:left; 
     height:30px; 
    line-height:22px; 
     background-color:#eee; 
     max-width:750px; 
     -moz-border-radius-bottomleft:3px; 
     -moz-border-radius-bottomright:3px; 
     -webkit-border-radius-bottom-left:3px; 
     -webkit-border-radius-bottom-right:3px; 
     } 

#header #logo { height : 61px; 
       width : 250px; 
       float : left;        

    } 

/* BUTTONS */ 

.buttons a, .buttons button{ 
    display:block; 
    float:right; 
    margin:0 7px 0 0; 
    background-color:#E0EEEE; 
    border:1px solid #dedede; 
    border-top:1px solid #eee; 
    border-left:1px solid #eee; 
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; 
    font-size:100%; 
    line-height:130%; 
    text-decoration:none; 
    font-weight:bold; 
    color:#565656; 
    cursor:pointer; 
    padding:5px 10px 6px 7px; /* Links */ 
} 
.buttons button{ 
    width:auto; 
    overflow:visible; 
    padding:4px 10px 3px 7px; /* IE6 */ 
} 
.buttons button[type]{ 
    padding:5px 10px 5px 7px; /* Firefox */ 
    line-height:17px; /* Safari */ 
} 
*:first-child+html button[type]{ 
    padding:4px 10px 3px 7px; /* IE7 */ 
} 
.buttons button img, .buttons a img{ 
    margin:0 3px -3px 0 !important; 
    padding:0; 
    border:none; 
    width:16px; 
    height:16px; 
    } 
/* POSITIVE */ 

button.positive, .buttons a.positive{ 
    color:#529214; 
} 
.buttons a.positive:hover, button.positive:hover{ 
    background-color:#E6EFC2; 
    border:1px solid #C6D880; 
    color:#529214; 
} 
.buttons a.positive:active{ 
    background-color:#529214; 
    border:1px solid #529214; 
    color:#fff; 
}

mit dem HTML-Code:

<body> 
<div id="header"> 
    <div id="topbar"> 
    <div id="logo"> 
    <a href="" > 
     <img src="images/logo-temp.png"> 
    </a> 
    </div> 
    <div id= "buttons"> 
    <div class="buttons"> 

     <a href="/password/reset/" class="positive"> 
      <img src="icons/arrow_up.png" alt=""/> 
      Send 
    </a> 

     <a href="/password/reset/" class="positive"> 
      <img src="icons/arrow_down.png" alt=""/> 
      Receive 
     </a> 

     <a href="#" class="positive"> 
      <img src="icons/user.png" alt=""/> 
      Users 
     </a> 
    </div> 
    </div> 

</div>

Problem: Gerade jetzt das Logo links schwimmt jedoch die 3 Tasten schwimmend rechts, sondern auch horizontal ausgerichtet die Spitze. Wie behebe ich das Problem, so dass alle Schaltflächen unten mit dem Logo in derselben Zeile ausgerichtet sind?

Quelle

2009-07-13 phill

#header #logo 
{ 
    height : 61px; 
    width : 100%; 
    float : left;               
}

Es gibt auch einen Fehler in Ihrem CSS, wo Sie die Klammern zweimal nach dieser Deklaration beenden.

Reasoning: Derzeit sind floating Sie die #header #logo nach links aber nicht sie die Breite des übergeordneten Container füllen, Raum auf der rechten Seite zur Verfügung zu verlassen. Wenn Sie die Knöpfe schweben lassen, fallen sie in diesen freien Raum. Sie müssen ihn füllen, indem Sie den linken Schwimmer auf die volle Breite erhöhen.

JSBin, funktionierende Demo.

Quelle

2009-07-13 01:50:03

danke für die Demo. es hilft. das verschiebt es definitiv herunter, was gut ist. irgendwelche Ratschläge, wie man sie alle nivelliert? – phill

Fügen Sie der Schaltflächenklasse einen Rand hinzu, um die Tasten zu drücken.

.buttons {margin-top:30px;}

bearbeiten nach Kommentar

Sie wollen die Marge auf dem <div class="buttons">

es Setzen Sie rechts in der CSS oben .buttons a hinzuzufügen.

/* BUTTONS */ 
.buttons {margin-top:30px;} 
.buttons a, .buttons button{ 
... 
}

Quelle

2009-07-13 02:16:33 Emily

Ich habe margin-top hinzugefügt: 30px; zu den .buttons Taste {} aber es schien nichts zu tun .. ist das der richtige Ort? – phill

.buttons button ist kein gültiger Selektor –

@ian: wirklich? warum nicht? –

css: Schaltflächen schweben nach oben. Wie richte ich sie horizontal aus?

Antwort

Verwandte Themen