|
|||
mein erstes css layout-dazu habe ich jetzt ein paar fragen:)
hi,
also ich habe jetzt mal meine erste seite nur mit css gemacht und da gibt es ein paar sachen die ich nicht so ganz verstehe, warum ein browser etwas so macht und der andere nicht... hier mal der link http://gregor.slosh-slosh.com/galerie/test.html meine erste frage betrifft den blauen header. ich habe hier einen div container darin befinde sich die grafik und daneben der link anmelden, den würde ich gerne rechts anordnen lassen ich habe es versucht mit <span class="float:right">Anmelden</span>, aber damit gehts leider nicht, hat wer ne idee wie man das machen könnte ?? die zweite frage hast was mit den grünen kasterln zu tun im NS positioniert er die kasterln genau 5px neben dem roten menü und am ende habe ich auch wieder 5px, nur im IE macht er links 10px abstand und rechts 0px... warum ?? habe magin:5px verwendet und meine letzte frage betrifft unten die rote leiste die schwarze box ist 620 pixel breit (ergibt sich aus den grünen boxen die 200 lang sind und 5 margin haben) und die rote leiste ist 5px von links weg positioniert und 615 pixel lang warum schaut sie im NS trotzdem auf der rechten seite über die schwarze box heraus und im IE auch ? ok das wars an fragen hier der ganze css code Code:
body { background-image: url('../grafiken/mainbg.gif'); font-family:Verdana; font-size:9; } #header{ position:absolute; top:10px; left:20px; width:770px; height:35px; background-color:#0000ff; } #menubox { position:absolute; top:55px; left:20px; width:150px; height:600px; background-color:#ff0000; } #contentbox { position:absolute; top:55px; left:170px; width:620px; height:600px; background-color:#000000; } #seitenblatterbox { position:absolute; bottom:0px; width:620px; left:5px; background-color:#ff0000; padding:2px; } #thmubnailbox{ float:left; width:200px; height:66px; margin:0px 0px 5px 5px; background-color:#00ff00; } img.headerimg{ } p.menu{ margin:15px 0px 50px 5px } #eingabefeld{ border:0; margin:0px 0px 0px 5px; background-color:#ffffff; font-size:9px; color:#000000; font-family:Verdana; } #dropdown{ border:0; margin:0px 0px 0px 5px; background-color:#ffffff; font-size:9px; color:#000000; font-family:Verdana; } #button{ border:0px; margin:0px 0px 0px 5px; background-color:#4B0D01; font-size: 9px; color:#ffffff; font-family:Verdana; font-weight:bold; margin-top:5px; } #h1{ font-family:verdana; font-size:11px; font-weight:bold; color:#ffffff; margin:5px; } #h2{ font-family:verdana; font-size:10px; font-weight:bold; color:#000000; margin:5px; } #text{ font-family:verdana; font-size:10px; color:#ffffff; margin:5px; } Code:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="css/style.css" /> <title>Slosh-Slosh//</title> <meta name="Slosh-Slosh//" content="Photography"> </head> <body> <div id="header">[img]grafiken/slosh-slosh-logo.gif[/img]<span>Anmelden</span></div> <div id="menubox"> <p class="menu"> <span id="h1">Login:</span> <span id="h2">Name:</span> <input id="eingabefeld" type="Text" name="" value="" size="" maxlength=""> <span id="h2">Passwort:</span> <input id="eingabefeld" type="Password" name="" value="" size="" maxlength=""> <input id="button" type="Submit" name="" value="Login"> </p> <p class="menu"> <span id="h1">Suche:</span> <span id="h2">Stichwort:</span> <input id="eingabefeld" type="Text" name="" value="" size="" maxlength=""> <span id="h2">Fotografen:</span> <select id="dropdown" name="ff" size="1"> <option value="">rene Wallentin</option> <option value="">rene Wallentin</option> <option value="">rene Wallentin</option> <option value="">rene Wallentin</option> <option value="">rene Wallentin</option> </select> </p> </div> <div id="contentbox"> <p id="text">66 Einträge gesamt - 21 Einträge auf der Seite - von Nummer 1 bis 21</p> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="thmubnailbox">a</div> <div id="seitenblatterbox">«« « 1 2 3 4 » »»</div> </div> </body> </html> mfg, destroy90210 |
Sponsored Links |
|
|||
Zitat:
Code:
<span>Anmelden</span> Code:
<span style="float:right;">Anmelden</span> Mit class (du hast geschrieben: <span class="float:right"> ) kannst du von der abgespeicherten css datei die vorformatierten werte rausnehmen. für class müssen sie mit einem punkt (.) zuerst adressiert sein. bei id ist es ein #. Zitat:
Code:
#contentbox { position:absolute; top:55px; left:170px; width:620px; height:600px; padding-left:5px; background-color:#000000; } #thmubnailbox{ float:left; width:200px; height:66px; margin:0px 5px 5px 0px; background-color:#00ff00; } Dieses fehlende linke, wird dann vom ganzen (content) reinge'padded' und somit stimmt es auf den pixel genau (gestet in opera & IE) Auf deine 3. Frage habe ich leider keine Antwort. Könnte aber auch sehr gut mit dem Quirk Modus tun zu haben. Hoffe das hilft dir weiter ^^;; Gruss |
Sponsored Links |
|
|||
thx für deine antwort das mit den grünen boxen funktioniert jetzt super
sorry das ich jetzt erst antworte ich war ein paar tage weg... und das mit dem anmelden mit dem float right passt auch fast, keine ahnung warum ich da class statt style verwendet habe aber jetzt meine frage dazu, wenn ich das jetzt schreibe mit float right dann ordnet er den link anmelden zwar rechts an, aber leider unter der headergrafik. so habe ich das jetzt da stehen... Code:
<div id="header">[img]grafiken/slosh-slosh-logo.gif[/img]<span style="float:right;">Anmelden</span></div> ich habe jetzt mal so versucht Code:
<div id="header">[img]grafiken/slosh-slosh-logo.gif[/img]<span style="right:0px;">Anmelden</span></div> mfg, destroy90210 |
|
|||
Eventuell so..
Hilft das
Zitat:
|
|
|||
Hallo destroy90210
Ich denke mal so sollte es auch gehen: Code:
<div id="header"> [img]grafiken/slosh-slosh-logo.gif[/img] <span style="float:right;margin-top:10px;">Anmelden</span></div> benutze einfach die "margin" Deklaration. Gruß Mike |
|
|||
Hallo destroy90210
Wenn ein div container eine bestimmte Höhe zugewiesen bekommt, sei es durch die Angabe 'height', oder durch Einfügen eines Bildes und wie in deinem Beispiel der Befehl 'float:right' benutzt wird, dann richtet sich das Element "Anmelden" immer oben rechts aus. Deshalb ist nur der Befehl 'margin-top' und 'margin-right' ausführbar. Gruß Mike |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Ein paar Fragen | Liquid | CSS | 4 | 18.11.2009 20:48 |
Mein erstes CSS Layout | Sonriente | CSS | 0 | 03.04.2007 01:01 |
CSS Layout - ist das so möglich? | berlina | CSS | 18 | 12.02.2007 21:55 |
Wie findet ihr mein erstes Css layout? | Css'Benutzer | CSS | 8 | 17.05.2006 21:28 |
includes bei css layout | dan | CSS | 2 | 10.03.2004 18:21 |