|
|||
seite will nicht mittig
hi an alle
ich habe dieses layout gebastelt und nun bekomme ich es nicht mittig was mache ich falsch? mit "margin:0 auto;" habe ich es bereits versucht im body hier mal die seite online Fotograf Rostock und hier mal der code Code:
<style type="text/css"> body { position:absolute; margin:0 auto; top:0px; left:0px; width:1100px; height:850px; background-color: 000000; } #rand_oben { position:absolute; top:0px; left:80px; height:11px; width:960px; background-color:ffffff; } #banner { position:absolute; top:11px; left:80px; height:190px; width:960px; background-color:ffffff; } #linker_rand { position:absolute; top:0px; left:0px; width:80px; height:850px; background-color:ffffff; } #rechter_rand { position:absolute; top:0px; left:1040px; width:60px; height:850px; background-color:ffffff; } #menu_home { position:absolute; top:201px; left:80px; width:120px; height:28px; background-color:ffffff; } #menu_face { position:absolute; top:201px; left:200px; width:120px; height:28px; background-color:ffffff; } #menu_fashion { position:absolute; top:201px; left:320px; width:120px; height:28px; background-color:ffffff; } #menu_various { position:absolute; top:201px; left:440px; width:120px; height:28px; background-color:ffffff; } #menu_akt { position:absolute; top:201px; left:560px; width:120px; height:28px; background-color:ffffff; } #menu_about { position:absolute; top:201px; left:680px; width:120px; height:28px; background-color:ffffff; } #menu_kontakt { position:absolute; top:201px; left:800px; width:120px; height:28px; background-color:ffffff; } #menu_impressum { position:absolute; top:201px; left:920px; width:120px; height:28px; background-color:ffffff; } #boddy_home { position:absolute; top:229px; left:80px; width:960px; height:521px; background-color:ffffff; } #rand_unten { position:absolute; top:750px; left:80px; width:960px; height:40px; background-color:ffffff; } #rand_unten_2 { position:absolute; top:790px; left:80px; width:960px; height:60px; background-color:ffffff; } .Stil1 {color: #FFFFFF} </style> <script type="text/JavaScript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onLoad="MM_preloadImages('Bilder/menue-farbe_05.jpg','Bilder/menue-farbe_07.jpg','Bilder/menue-farbe_08.jpg','Bilder/menue-farbe_09.jpg','Bilder/menue-farbe_10.jpg','Bilder/menue-farbe_12.jpg','Bilder/menue-farbe_13.jpg')"> <div id="rand_oben" style="background-image:url(rand-oben_02.jpg);"></div> <div id="banner" style="background-image:url(banner_04.jpg);"></div> </div> <div id="linker_rand" style="background-image:url(rand-liks_01.jpg);"> </div> <div id="rechter_rand" style="background-image:url(rand-rehts_03.jpg);"> </div> <div id="menu_home"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','Bilder/menue-farbe_05.jpg',1)"><img src="Bilder/menue-sw_05.jpg" alt="home" name="home" width="120" height="28" border="0"></a></div> <div id="menu_face"><a href="face.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('face','','Bilder/menue-farbe_06.jpg',1)"><img src="Bilder/menue-sw_06.jpg" alt="face" name="face" width="120" height="28" border="0"></a></div> <div id="menu_fashion"><a href="fashion.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('fashion','','Bilder/menue-farbe_07.jpg',1)"><img src="Bilder/menue-sw_07.jpg" alt="fashion" name="fashion" width="120" height="28" border="0"></a></div> <div id="menu_various"><a href="various.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('various','','Bilder/menue-farbe_08.jpg',1)"><img src="Bilder/menue-sw_08.jpg" alt="various" name="various" width="120" height="28" border="0"></a></div> <div id="menu_akt"><a href="akt.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('akt','','Bilder/menue-farbe_09.jpg',1)"><img src="Bilder/menue-sw_09.jpg" alt="akt" name="akt" width="120" height="28" border="0"></a></div> <div id="menu_about"><a href="about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('about','','Bilder/menue-farbe_10.jpg',1)"><img src="Bilder/menue-sw_10.jpg" alt="about" name="about" width="120" height="28" border="0"></a></div> <div id="menu_kontakt"><a href="kontakt.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('kontakt','','Bilder/menue-farbe_12.jpg',1)"><img src="Bilder/menue-sw_12.jpg" alt="kontakt" name="kontakt" width="120" height="28" border="0"></a></div> <div id="menu_impressum"><a href="impressum.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('impressum','','Bilder/menue-farbe_13.jpg',1)"><img src="Bilder/menue-sw_13.jpg" alt="impressum" name="impressum" width="120" height="28" border="0"></a></div> <div id="boddy_home"></div> <div id="rand_unten" style="background-image:url(rand-unten-2_19.jpg);"> </div> <div id="rand_unten_2" style="background-image:url(rand-unten_21.jpg);"> </div> </body> </html> |
Sponsored Links |
|
||||
kein Wunder das es nicht geht, wenn du alles mit position:absolute in den Viewport nagelst.
Wie wärs wenn du dich erst mal um die Grundlagen kümmern würdest?
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
Sponsored Links |
|
|||
Packe in den body einen wrapper der alles umschließt.
<body> <div id="wrapper"> ... ... ... .. </div> </body> </html> Den, nur dem gibst du position:absolute; [CODE]#wrapper {position:absolute; width:deine maße; height:deine maße; margin-left:- hälfte deine maße //z.b. -350px; left:50%; } /CODE] Alle anderen div`s musst du relativ positionieren oder floaten. Schaue dir beides an - wie du besser klar kommst. Hat alles sein für und wieder. lesenlesenlesenlesen |
|
||||
Dann ziehe mal bei folgendem Code das Fenster schmal und verrate mir, wohin der Text verschwindet
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <style type="text/css"> * { margin: 0; padding: 0; } div { background: red; width: 1200px; position: absolute; left: 50%; margin-left: -600px; } </style> </head> <body> <div>Text</div> </body> </html>
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Es ist eindeutig das beste, wenn du Hubspes Rat folgst.
Was du da bisher hast ist wirklich nicht tauglich. Nach der empfohlenen Lektüre wirst du ganz anders an diese Aufgabe herangehen.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Überprüfen, ob eine Seite von einer externen Seite im Frameset geladen wurde | naitsab | Javascript & Ajax | 2 | 11.05.2009 18:53 |
Für jede Seite eine CSS datei? | Spähling | CSS | 11 | 02.04.2009 17:30 |
Problem mit einbinden von Dropdown-Navigation in Seite... | epsylon2 | CSS | 4 | 28.03.2009 23:25 |
Probleme auf Seite für den Mainchat | Nightrider | CSS | 12 | 08.01.2007 09:49 |
CSS und Tabelle mittig | tom39 | CSS | 9 | 19.04.2005 08:19 |