Div nebeneinander

[THRALL]

Habe für meine IMG free page nen Valid button in CSS gemacht


Nur werden die Buttons untereinander platziert sie sollen aber nebeneinander.
Was muss ich da machen ???

<style type="text/css"><!-- 
#validframe{
background-color:white;
border:1px solid black;
width:160px;
height:20px;
font-size:xx-small;
}
#validleft{
text-align:center;
background-color:#006000;
float:left;
color:white;
border:1px solid white;
border-right:1px solid white;
font-family:small-caption;
height:10px;
padding:4px;
padding-right:10px;
padding-left:10px;
line-height:8px;
vertical-align:middle;
font-weight:bold;


}

#validright{
height:10px;
text-align:#004000;
background-color:green;
width: 150px;
color:white;
padding:4px;
border:1px solid white;
font-family:small-caption;
line-height:7px;
vertical-align:middle;
font-weight:bold;
text-align:center;
}

--></style>
<body bgcolor=white>
<div id=validframe><div id=validleft>W3C</div><div id=validright>Valid HTML</div></div>
<div id=validframe><div id=validleft>W3C</div><div id=validright>Valid CSS</div></div>
<div id=validframe><div id=validleft>PGP</div><div id=validright>Get My Key</div></div>
</body>

 

[Mackz]

Füge bei #validframe einfach noch

float:left;

ein.

 

[boernd]

Wenn du Container nebeneinander platzieren willst, musst du statt "div" "span" benutzen. "span" stellt ein inline-Element dar, dass dir erlaubt ein solches in eine bereits vorhandene Zeile oder mehrere in eine Zeile zu schreiben. Ein "div" wird immer in einer neuen Zeile erscheinen oder halt per Positionsangabe dargestellt.

Also sieht das dann ungefähr so aus:

<div id=validframe><span id=validleft>W3C</span><span id=validright>Valid HTML</span></div>

Gibst du mir bitte Rückmeldung, ob das auch funktioniert hat! Ist nämlich schon ne Weile her, dass ich HTML und CSS auf die Tasten gekloppt hab ^^

boernd

 

[THRALL]

@Mackz
Danke es geht jezt
@boernd
ne geht nicht die Zeilen sind dann merkwürdig verschoben (und immer noch untereinander)


Noch ne Frage:
Wie bekomm ich das Zentriert ?

 

[shano]

<div id=validframe align="center"><span id=validleft>W3C</span><span id=validright>Valid HTML</span></div>

Oder

<div id=validframe><span id=validleft align="center">W3C</span><span id=validright>Valid HTML</span></div>

 

[THRALL]

Hab ich auch schon probiert aber bei mir ist dann alles verrutscht

 

[boernd]

Also, das mit span funktioniert, wenn du in validframe "position:relative;" einfügst und in den andern beiden (left und right) "position:absolute;" und "left"-Angaben.

Du musst allerdings bei den Positionsangaben (left) dieser beiden etwas genauer hinschauen, da du die border-, margin- und padding-Größe auch miteinrechnen musst. Beide Container zusammen _plus_ border und margins müssen dann so groß sein, wie der frame-Container.

Dann nimmst du einen <div>-Tag um alle drei validframe-spans und definierst den div so:

<div style="position:absolute;left:50%;margin-left:-300px;">

Das margin-left bedeutet im Klartext: halbe Größe (und in diesem Fall *3, da du drei Container hast).

Hier nochmal der komplette Code:

<html>
<head>
<style type="text/css"><!-- 
#validframe{
position:relative;
background-color:white;
border:1px solid black;
width:200px;
height:20px;
font-size:xx-small;
float:left;
}
#validleft{
position: absolute;
left:0px;
vertical-align:middle;
text-align:center;
line-height:8px;
font-weight:bold;
font-family:small-caption;
color:white;
background-color:#006000;
width: 30px;
height:10px;

border:1px solid white;
border-right:1px solid white;
padding:4px;
padding-right:10px;
padding-left:10px;
}
#validright{
position:absolute;
left:51px;

height:10px;
width: 127px;
text-align:center;
vertical-align:middle;
line-height:7px;
font-weight:bold;
font-family:small-caption;
background-color:green;
color:white;
padding:4px;
padding-right:10px;
padding-left:10px;
border:1px solid white;
}
--></style>
</head>
<body bgcolor=white>

<div style="position:absolute;left:50%;margin-left:-300px;">

<span id=validframe><span id=validleft>W3C</span><span id=validright>Valid HTML</span></span>
<span id=validframe><span id=validleft>W3C</span><span id=validright>Valid CSS</span></span>
<span id=validframe><span id=validleft>PGP</span><span id=validright>Get My Key</span></span>

</div>


</body>
</html>

Deine styles mussten noch für ein anderes Prob herhalten, daher stimmen die Größenangaben und die Reihenfolge nicht mehr ^^

boernd