gesamten website inhalt zentrieren

saibo · 3 Juni 2007

hallo wir bekomme ich es hin den gesamten website inhalt in die mitte der seite zu setzen so dass er auf verschiedenen bildschirmgrößen immer mittig ausgerichtet ist?

es gibt ja verschiedene möglichkeiten mit html und css. was würdet ihr empfehlen? hier mein code:

HTML:

<html>
<head>


<link rel="stylesheet" type="text/css" href="CSS/css.css">

<style type="text/css">


#PicOben
{
position: absolute;
background-image:url(bilder/head1.jpg);
left: 40px;
top: 115px;
border: solid 1px #FFFFFF;
width:720px;
height:200px;
z-index:2;
}



</style>

<script type="text/javascript">
function outline(divid)
{

 if(document.getElementById(divid).style.display == 'none')
 {
  document.getElementById(divid).style.display = 'block';

 }
 else
 {
  document.getElementById(divid).style.display = 'none';

 }
}
</script>


</head>
<body>



<div id="Kategorie1">
<a name="oben"></a>
 <span class="Hauptmenue">
 
 <div class="box">
  <b class="top">
    <b class="r1"></b><b class="r2"></b>
    <b class="r3"></b><b class="r4"></b>
  </b>

 <a href="index.html">&nbsp;&nbsp;Willkommen</a>
  
  <b class="bottom">
    <b class="r4"></b><b class="r3"></b>
    <b class="r2"></b><b class="r1"></b>
  </b>
</div>
 
 </span>
</div>



<div id="Kategorie2">
<span class="Hauptmenue">
 <div class="box">
  <b class="top">
    <b class="r1"></b><b class="r2"></b>
    <b class="r3"></b><b class="r4"></b>
  </b>

<a href="speisen.html" onMouseOver="outline('ID2'); return false;">&nbsp; &nbsp;Speisekarte</a>
  <b class="bottom">
    <b class="r4"></b><b class="r3"></b>
    <b class="r2"></b><b class="r1"></b>
  </b>
</div>
</span>

<span id="ID2" style="display:none">
<span id="IDAllgemein">
 <div class="box">
  <b class="top">
    <b class="r1"></b><b class="r2"></b>
    <b class="r3"></b><b class="r4"></b>
  </b>
<br>
  &nbsp; &nbsp;<a href="speisen.html#Spaghetti">Spaghetti</a><br><br>
  &nbsp; &nbsp;<a href="speisen.html#Cannelloni">Cannelloni</a><br><br>
  &nbsp; &nbsp;<a href="speisen.html#Lasagne">Lasagne</a><br><br>
  &nbsp; &nbsp;<a href="speisen.html#Makkaroni">Makkaroni</a><br><br>
   <b class="bottom">
    <b class="r4"></b><b class="r3"></b>
    <b class="r2"></b><b class="r1"></b>
  </b>
</div>

</span>
</span>
</div>


<div id="Kategorie3">
<span class="Hauptmenue">
 <div class="box">
  <b class="top">
    <b class="r1"></b><b class="r2"></b>
    <b class="r3"></b><b class="r4"></b>
  </b>

<a href="bestell.html">  &nbsp; &nbsp;Bestellung</a>

  <b class="bottom">
    <b class="r4"></b><b class="r3"></b>
    <b class="r2"></b><b class="r1"></b>
  </b>
</div>

</span>
</div>


<div id="Kategorie4">
<span class="Hauptmenue">
 <div class="box">
  <b class="top">
    <b class="r1"></b><b class="r2"></b>
    <b class="r3"></b><b class="r4"></b>
  </b>


<a href="mitarbeiter.html"  onMouseOver="outline('ID4'); return false;">  &nbsp; &nbsp;Mitarbeiter</a>
  <b class="bottom">
    <b class="r4"></b><b class="r3"></b>
    <b class="r2"></b><b class="r1"></b>
  </b>
</div>


</span>
<span id="ID4" style="display:none">
<span id="IDAllgemein">
 <div class="box">
  <b class="top">
    <b class="r1"></b><b class="r2"></b>
    <b class="r3"></b><b class="r4"></b>
  </b>
<br>
  &nbsp;&nbsp;<a href="http://www.amazon.de">Option 1</a><br><br>
  &nbsp;&nbsp;<a href="http://www.ebay.de">Option 2</a><br><br>
    <b class="bottom">
    <b class="r4"></b><b class="r3"></b>
    <b class="r2"></b><b class="r1"></b>
  </b>
</div>
</span>
</span>


</div>



<div id="Kategorie5">
<span class="Hauptmenue">
 <div class="box">
  <b class="top">
    <b class="r1"></b><b class="r2"></b>
    <b class="r3"></b><b class="r4"></b>
  </b>
<a href="gewinn.html">&nbsp; &nbsp;Gewinnspiel</a>
  <b class="bottom">
    <b class="r4"></b><b class="r3"></b>
    <b class="r2"></b><b class="r1"></b>
  </b>
</div>

</span>
</div>



<div id="Kategorie6">
<span class="Hauptmenue">
 <div class="box">
  <b class="top">
    <b class="r1"></b><b class="r2"></b>
    <b class="r3"></b><b class="r4"></b>
  </b>
<a href="kontakt.html">&nbsp; &nbsp;Kontakt</a>
  <b class="bottom">
    <b class="r4"></b><b class="r3"></b>
    <b class="r2"></b><b class="r1"></b>
  </b>
</div>

</span>
</div>



<div id="PicOben">
</div>

<div id="Text">

  <pa>
  <p>Herzlich Willkommen    auf pastalampo,</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
   
</p>
  </p>
 
 
 <div id="Unten">
 <div class="box2">
  <b class="top">
    <b class="r1"></b><b class="r2"></b>
    <b class="r3"></b><b class="r4"></b>
  </b>

<p style="margin:2px;">
Copyright: Tobias Willmann. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  
<br><a href="agb.html"><b>Allgemeine Geschäftsbedingungen</b></a>
</p>
  <b class="bottom">
    <b class="r4"></b><b class="r3"></b>
    <b class="r2"></b><b class="r1"></b>
  </b>
</div>
</div> 
  <br><br><input type="button" value="nach oben" onClick="location='#oben'" /><p/>

   <br>
  
</div>


</body>

</html>

css datei:

Code:

#Kategorie1
{position:absolute;
left:40px;
top:82px;
border: solid 1px #FFFFFF;
}
#Kategorie2
{position:absolute;
left:160px;
top:82px;
border: solid 1px #FFFFFF;
}
#Kategorie3
{position:absolute;
left:280px;
top:82px;
border: solid 1px #FFFFFF;
}
#Kategorie4
{position:absolute;
left:400px;
top:82px;
border: solid 1px #FFFFFF;
}
#Kategorie5
{position:absolute;
left:520px;
top:82px;
border: solid 1px #FFFFFF;
}
#Kategorie6
{position:absolute;
left:640px;
top:82px;
border: solid 1px #FFFFFF;

}

#PicTitel
{
position: absolute;
background:url(../bilder/titel.jpg);
left: 40px;
top: 60px;
border: solid 1px #FFFFFF;
width:720px;
height:20px;
z-index:10;
}

#Text
{
position: absolute;
font-family:Arial, Helvetica, sans-serif;
left:40px;
top:350px;
border: solid 1px #FFFFFF;
width:720px;
}


#IDAllgemein
{
position:absolute;
background-color:#FFFF66;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
display:block;
width:118px;
z-index:4;
}

#Unten
{

font-family:Arial, Helvetica, sans-serif;
font-size:11px;
display:block;
width:726px;
}

.HauptMenue
{
    background-color:#ffffff;
    width:120px;
    height:30px;
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    border: solid 1px #FFFFFF;
    display:block;
    z-index:5;
}
a:link {  color:#990000; text-decoration:none; }
a:visited { color:#990000; text-decoration:none; }
a:focus { color:#000000; text-decoration:none; }
a:hover { color:#000000; text-decoration:none; }
a:active { color:#990000; text-decoration:none; }


.box { width: 118px; background:#FFFF33;}
.box h1, .box p {margin: 0 10px;}
.box h1 {font-size:150%; color:#FFFF33; }
.box .top, .box .bottom{display:block;background:
#ffffff;}
.box .top b, .box .bottom b
{
  display:block;height: 1px; overflow: hidden; background:#FFFF33;
}
.box .r1{margin: 0 5px;}
.box .r2{margin: 0 3px;}
.box .r3{margin: 0 2px;}
.box .top .r4, .box .bottom .r4{margin: 0 1px;height: 2px;}





.box2 { width: 720px; background:#FFFF33;}
.box2 h1, .box p {margin: 0 10px;}
.box2 h1 {font-size:150%; color:#FFFF33; }
.box2 .top, .box2 .bottom{display:block;background:
#ffffff;}
.box2 .top b, .box2 .bottom b
{
  display:block;height: 1px; overflow: hidden; background:#FFFF33;
}
.box2 .r1{margin: 0 5px;}
.box2 .r2{margin: 0 3px;}
.box2 .r3{margin: 0 2px;}
.box2 .top .r4, .box2 .bottom .r4{margin: 0 1px;height: 2px;}

DrunkenDX · 3 Juni 2007

am einfachsten finde ich den ganzen inhalt in einen div zu schreiben, dessen inhalt man dann zentriert.

3UGENE · 3 Juni 2007

css:

Code:

#container {//Du musst einem Div die ID 'container' zuweisen
 margin: 0px auto;
}

Maxi · 4 Juni 2007

oder du zentrierst gleich die Textausrichtung des gesamten Body.

gesamten website inhalt zentrieren

saibo

Neues Mitglied

DrunkenDX

Neues Mitglied

3UGENE

Guest

Maxi

Neues Mitglied

Neueste Beiträge