Paar Fragen zu CSS
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ausrichten
auto
boxen
code
dokument
eins
element
entfernen
frage
grundlinie
http
inhalt
negative angabe
oberen rand
position
tag
text
unteren rand
vier
wort
-
Hallo liebe Freunde,
Wie man an der Überschrift sehen kann habe ich ein paar tag/frage">Fragen zu CSS!
Hier erst mal der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unbenanntes Dokument</title> <style type="text/css"> .eins { border:solid; height:100px; width:300px; background-color:#CCC; position:relative; top:100px; left:100px; padding-left:10px; padding-right:0px; } .zwei { border:solid; height:50px; width:50px; margin-left:20px; float:left; margin-top:20px; } .drei { border:solid; height:50px; width:50px; float:left; margin-top:20px; } .vier { border:solid; height:50px; width:50px; float:left; margin-top:20px; } .fuenf { border:solid; height:50px; width:50px; float:left; margin-top:20px; b { text-align:left; } </style> <body> <div class="eins"> <b>Eins:</b> <div class="zwei"> zwei </div> <div class="drei"> drei </div> <div class="vier"> vier </div> <div class="fuenf"> fuenf </div> </div> </body> </html>
Ich wollte nur was ausprobieren :P
Also erwartet keine HP.
Jetzt zu dem wesentlichen:
1:Wie kann ich die vier Kästchen (zwei,drei,vier und fuenf) zentriert in dem DIV-Tag "eins" ausrichten?
Ich habe es auch schon mit padding und margin versucht aber nicht hinbekommen.
2:Wie bekomme ich das Wort "EINS:" links zentriert?
Ich habe das mit align usw. probiert, allerdings hat das auch nicht geklappt. Ich denke mal, das liegt daran weil
alles verschachtelt ist.
3:Die vier Kästchen sind ja sozusagen nebebeinander gekettet und aus diesem Grund ist bei den drei Mittleren Rändern die
Breite doppelt so dick. Wie bekomme ich das alles gleich dick?
Ich hoffe ihr könnt mir helfen.
n0x3l -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo
Ich habe nur mit dem ersten erfahrung gemacht, ist zwar länger her aber ich hab gegooglt [würde ich dir auch empfehlen ]
2:Wie bekomme ich das Wort "EINS:" links zentriert?
Ich habe das mit align usw. probiert, allerdings hat das auch nicht geklappt. Ich denke mal, das liegt daran weil
alles verschachtelt ist.
vertical-align:
Werte:
- sub Tiefgestellt
- super Hochgestellt
- baseline An der Grundlinie ausrichten
- top Am oberen Rand des Elternelements
- bottom Am unteren Rand des Elternelements
- middle Mittig zwischen den oberen und unteren Rand des Elternelements
- text-top Am oberen Textrand
- text-bottom Am unteren Textrand
- Längen- oder
Prozentangabe Eine positive oder negative Angabe verschiebt das Element über oder unter die Grundlinie.
Viel Spaß
frmakus -
frmarkus schrieb: Hallo
Werte:
- sub Tiefgestellt
- super Hochgestellt
- baseline An der Grundlinie ausrichten
- top Am oberen Rand des Elternelements
- bottom Am unteren Rand des Elternelements
- middle Mittig zwischen den oberen und unteren Rand des Elternelements
- text-top Am oberen Textrand
- text-bottom Am unteren Textrand
- Längen- oder
Prozentangabe Eine positive oder negative Angabe verschiebt das Element über oder unter die Grundlinie.
Viel Spaß
frmakus
Das hat nicht geklappt keine Ahnung warum. Kannst du vielleicht den Code direkt ändern, ich weiß nicht was ich falsch mache. -
b]1:[/b]Wie kann ich die vier Kästchen (zwei,drei,vier und fuenf) zentriert in dem DIV-Tag "eins" ausrichten?
Ich habe es auch schon mit padding und margin versucht aber nicht hinbekommen.
So im Div Tag selber text:align
2:Wie bekomme ich das Wort "EINS:" links zentriert?
Ich habe das mit align usw. probiert, allerdings hat das auch nicht geklappt. Ich denke mal, das liegt daran weil
alles verschachtelt ist.
Die lösung ist zwar nicht sehr schön aber Funktioniert. setz noch ein div box um 2,3,4,5.
Inhalt:
.center {position:absolute; margin-top:auto;margin-left:40px;}
Aus 1 die padding tags entfernen. Aus 2,3,4,5 die margin tags entfernen.
3:Die vier Kästchen sind ja sozusagen nebebeinander gekettet und aus diesem Grund ist bei den drei Mittleren Rändern die
Breite doppelt so dick. Wie bekomme ich das alles gleich dick?
Du musst einfach beim 2 Kästchen,3 und 4 border-right: 0px; setzen.
MFG
Beitrag zuletzt geändert: 23.7.2009 20:35:44 von lokishomepage -
lokishomepage schrieb:
Die lösung ist zwar nicht sehr schön aber Funktioniert. setz noch ein div box um 2,3,4,5.
Inhalt:
.center {position:absolute; margin-top:auto;margin-left:40px;}
Aus 1 die padding tags entfernen. Aus 2,3,4,5 die margin tags entfernen
Bei mir klappt das nicht warum auch immer. :S
Kannst du vielleicht den Code ändern und posten, dann kann ich gucken was ich falsch gemacht habe. -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unbenanntes Dokument</title> <style type="text/css"> .eins { border:solid; height:100px; width:300px; background-color:#CCC; position:relative; top:100px; left:100px; } .zwei { border:solid; border-right: 0px; height:50px; width:50px; float:left; } .center {position:absolute; margin-top:auto;margin-left:40px;} .drei { border:solid; border-right: 0px; height:50px; width:50px; float:left; } .vier { border:solid; border-right: 0px; height:50px; width:50px; float:left; } .fuenf { border:solid; height:50px; width:50px; float:left; </style> <body> <div class="eins"> <b>Eins:</b> <div class="center"> <div class="zwei"> zwei </div> <div class="drei"> drei </div> <div class="vier"> vier </div> <div class="fuenf"> fuenf </div> </div> </div> </body> </html> -
Ganz sicher, das der Code richtig ist?
Bei mir wird das trotzdem ganz oben rechts angezeigt und nicht zentriert. -
Hmm, was hast du fürn Browser?
http://lokishomepage.lima-city.de/test.html
http://lokishomepage.lima-city.de/blubb.jpg
Vll hab ich auch was falsch verstanden
so siehts bei mir aus.
-
Sorry das war mein Fehler. Du hast alles richtig gemacht und jetzt klappt das bei mir auch. Ich habe das mit Dreamweaver gemacht und hatte die Live-Ansicht nicht aktiviert. So, jetzt hast du mir das ja gezeigt, kannst du auch sagen wie du das gemacht hast, also was dieses "auto" hat und wie du auf diese 40px gekommen bist?
Soryy, wenn ich zu viele Fragen stelle, aber ich würde das gerne mal wissen. Das ist hier ja auch ein Forum. :D -
Kla also das auto richtet in diesem Fall die center Box automatisch aus
weiß nich genau wie das passiert wusste bis gestern auch nicht das man das vertikal nutzen kann. Normaler weise nutze ich das um meinen wrapper Horizontal zu zentrieren, um vertikal nutze ich dann
Vertical:
postion: relativ; top:50%; margin-top:- HälfteDerBoxGrößeInPx
Horizontal
postion: relativ; margin:0px auto;
Das mit 40 Px hab ich geschätzt
Aber kp benutz normale DIV Boxen eig. nie außer wenn ich was für Templates schreibe und nicht weiß wie hoch der Content wird, sonst immer nur Ap-Divs also die postion: ;
Beitrag zuletzt geändert: 24.7.2009 18:19:19 von lokishomepage -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
