kostenloser Webspace werbefrei: lima-city


Paar Fragen zu CSS

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    n0x3l

    Kostenloser Webspace von n0x3l

    n0x3l hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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
  4. Autor dieses Themas

    n0x3l

    Kostenloser Webspace von n0x3l

    n0x3l hat kostenlosen Webspace.

    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.
  5. lokishomepage

    Kostenloser Webspace von lokishomepage

    lokishomepage hat kostenlosen Webspace.

    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
  6. Autor dieses Themas

    n0x3l

    Kostenloser Webspace von n0x3l

    n0x3l hat kostenlosen Webspace.

    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.
  7. lokishomepage

    Kostenloser Webspace von lokishomepage

    lokishomepage hat kostenlosen Webspace.

    <!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>
  8. Autor dieses Themas

    n0x3l

    Kostenloser Webspace von n0x3l

    n0x3l hat kostenlosen Webspace.

    Ganz sicher, das der Code richtig ist?
    Bei mir wird das trotzdem ganz oben rechts angezeigt und nicht zentriert.
  9. lokishomepage

    Kostenloser Webspace von lokishomepage

    lokishomepage hat kostenlosen Webspace.

    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 :biggrin: so siehts bei mir aus.
  10. Autor dieses Themas

    n0x3l

    Kostenloser Webspace von n0x3l

    n0x3l hat kostenlosen Webspace.

    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
  11. lokishomepage

    Kostenloser Webspace von lokishomepage

    lokishomepage hat kostenlosen Webspace.

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

    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
  12. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!