[HaBo]

THRALL · 02.07.05, 13:58

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 ???

Code:

<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** · 02.07.05, 14:45

Füge bei #validframe einfach noch

float:left;

ein.

Anzeige

- Anzeige -

boernd · 02.07.05, 15:39

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:

Zitat:

<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 · 02.07.05, 16:13

@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 · 02.07.05, 20:07

Code:

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

Oder

Code:

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

THRALL · 02.07.05, 20:13

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

boernd · 02.07.05, 21:43

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:

Code:

<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:

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

Anzeige

- Anzeige -

02.07.05, 14:45	#2 (permalink)
Mackz Administrator Registriert seit: 02.10.01 Likes: 30	Füge bei #validframe einfach noch float:left; ein. __________________ RL sux big time... auch 2012! Deleting pr0n is like killing your best friend [HaBo] bei Facebook - Werde Fan

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
3 div nebeneinander, mittlere ohne angabe max breit	overflow	(Web-) Design und webbasierte Sprachen	2	11.10.09 00:43
2 Divs nebeneinander XHTML 1.0 STRICT	AaFreak	(Web-) Design und webbasierte Sprachen	2	16.04.09 20:40
Excel - Mehrere Seiten nebeneinander	Mackz	Applikationen	1	04.03.08 22:23
Mehrere Shells nebeneinander in 1 Fenster	Xalon	Linux/UNIX	10	17.01.08 15:56
2 mal MSN nebeneinander laufen lassen	Goofy	Applikationen	4	13.10.04 18:37

02.07.05, 16:13	#4 (permalink)
THRALL Themenstarter Registriert seit: 15.01.05 Likes: 0	@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 ?

02.07.05, 20:13	#6 (permalink)
THRALL Themenstarter Registriert seit: 15.01.05 Likes: 0	Hab ich auch schon probiert aber bei mir ist dann alles verrutscht

[HaBo]

Div nebeneinander