zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden seite will nicht mittig

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.12.2009, 00:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.12.2009
Beiträge: 22
k-f-r-123 befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.12.2009, 08:10
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.12.2009, 12:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.12.2009
Beiträge: 22
k-f-r-123 befindet sich auf einem aufstrebenden Ast
Standard

ok kann ich jetzt nachvollziehen. werde noch mal beginnen. Danke dir dennoch!
Mit Zitat antworten
  #4 (permalink)  
Alt 28.12.2009, 13:45
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

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

Mit Zitat antworten
  #5 (permalink)  
Alt 28.12.2009, 13:49
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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;.
__________________
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.)
Mit Zitat antworten
  #6 (permalink)  
Alt 28.12.2009, 13:53
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Hmm also ich zentriere meine Seiten immer so.
Und hatte noch nie Probleme. Auch auf kleinen Viewports nicht.
(unter 14)
Mit Zitat antworten
  #7 (permalink)  
Alt 28.12.2009, 14:02
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
Mit Zitat antworten
  #8 (permalink)  
Alt 28.12.2009, 14:08
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Stimmt. Mir ist das noch nie aufgefallen?!?
Mein Wrapper ist meist nicht mehr als 800 - 900 px breit.
Mit Zitat antworten
  #9 (permalink)  
Alt 28.12.2009, 14:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.12.2009
Beiträge: 22
k-f-r-123 befindet sich auf einem aufstrebenden Ast
Standard

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


lg
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 28.12.2009, 14:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:58 Uhr.