seite will nicht mittig

k-f-r-123 · #1 (**permalink**) 28.12.2009, 00:02

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>

hubspe · #2 (**permalink**) 28.12.2009, 08:10

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?

k-f-r-123 · #3 (**permalink**) 28.12.2009, 12:12

ok kann ich jetzt nachvollziehen. werde noch mal beginnen. Danke dir dennoch!

Muamicus · #4 (**permalink**) 28.12.2009, 13:45

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

heiko_rs · #5 (**permalink**) 28.12.2009, 13:49

Nie so zentrieren (auch nicht vertikal)! Bei schmalem Viewport verschwindet die Seite im Nirwana. Horiz. zentriert wird ein Blockelement schlicht & einfach per margin: 0 auto;.

Muamicus · #6 (**permalink**) 28.12.2009, 13:53

Hmm also ich zentriere meine Seiten immer so.
Und hatte noch nie Probleme. Auch auf kleinen Viewports nicht.
(unter 14)

heiko_rs · #7 (**permalink**) 28.12.2009, 14:02

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>

Muamicus · #8 (**permalink**) 28.12.2009, 14:08

Stimmt. Mir ist das noch nie aufgefallen?!?
Mein Wrapper ist meist nicht mehr als 800 - 900 px breit.

k-f-r-123 · #9 (**permalink**) 28.12.2009, 14:15

ist es dann jetzt besser neu zu beginnen oder zu versuchen den rest mittig zu zuppeln.

lg

fricca · #10 (**permalink**) 28.12.2009, 14:20

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.

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