zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden div box bekomme ich nett zentriert???

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.05.2005, 10:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.05.2005
Beiträge: 1
Hard@Bowl befindet sich auf einem aufstrebenden Ast
Standard div box bekomme ich nett zentriert???

hallo leute,

ich habe den weg zu diesen forum gefunden durch die seite : http://www.css4you.de/. da ich dort mehre seiten gelesen habe und dachte das ich mein problem da gelösst bekomme. aber leider hat es nicht sollen sein. aus diesen grunde habe ich mich bei euch mal angemeldet und bitte hier nun um hilfe.
so mein problem ist folgendes, ich habe eine seite mit so eine art css frame erstellt.
nur weiss ich nicht wie ich die div box zentrieren kann es handelt sich dabei um die div box " container " sie soll dynamisch immer in der mitte sein und wie sie jetzt ist immer 800 pixel breit. und es soll noch etwas nach unten also noch etwas höher werden so das es bis runter auf den footer geht .

hier mal der code den ich bis jetzt vertig habe.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"><title>title</title>

<style type="text/css">

/* the bit that does the work */

body {
  margin:0;
  border:0;
  padding:0;
  height:100%; 
  max-height:100%; 
  background:#fff; 
  font-family:arial, verdana, sans-serif; 
  font-size:76%;
  overflow: hidden; 
  }

/* for internet explorer */
* html body {
  padding:120px 0 50px 0; 
  }

#container {
	font-family:"times new roman", serif;
	font-size: 1.2em;
	position:fixed;
	top:100px;
	left:0;
	bottom:50px;
	right:0;
	overflow:auto;
	background:#fff;
	padding:10px;
	text-align:center;
	width: 800px;
	clear: both;
  }

* html #container {
  height:100%; 
  width:100%; 
  }

#header {
  position:absolute; 
  top:0; 
  left:0; 
  width:100%; 
  height:95px; 
  overflow:auto; 
  background:#53829d;
  border-bottom:4px solid #73a2bd;
  }
* html #header {height:120px;}


#footer {
  position:absolute; 
  bottom:0; 
  left:0;
  width:100%; 
  height:30px; 
  overflow:auto; 
  text-align:right; 
  background:#73a2bd;
  border-top:5px solid #53829d;
  }
* html #footer {height:50px;}

/* end of bit that does the work */

h1 {font-size:4em; margin:0; padding:0;}

#footer p {
  color:#fff; 
  margin:5px 10px 0 10px;
  }


#header img {
  margin:10px 10px 0 10px;
  }
#container img {margin:5px;}
#absolute {
  position:absolute; 
  top:400px; 
  right:100px; 
  width:200px; 
  background:#ddd; 
  padding:10px; 
  border:1px solid #000;
  }

#left {
  float:left; 
  background:#eee; 
  padding:10px; 
  border:1px solid #000; 
  color:#000; 
  width:50%;
  }

#right {
  float:right; 
  background:#ddd; 
  padding:10px; 
  border:1px solid #000; 
  color:#000; 
  }

a, a:visited {
  font-size:1.1em;
  text-decoration:none;
  color:#ddd;
  }

a:hover {
  color:#fff; 
  text-decoration:none;
  }

.grey {color:#888;}

.ltgrey {color:#ddd;}

img#mascot {float:right;}

#header ul {
  clear:both; 
  text-align:center; 
  border-top:1px solid #73a2bd;
  }

#header ul {
  margin:0; 
  padding:0; 
  list-style-type:none; 
  background:transparent; 
  height:3em;
  }

#header ul li {
  display:inline; 
  color:#73a2bd;
  }



.strike {text-decoration:line-through;}
.lft {float:left;}
.rgt{float:right;}

.columnone, .columntwo {width:31%; float:left; text-align:justify; margin-right:2%;}
.columnthree {text-align:justify; border:1px solid #fff;}
* html .columnthree {border:0;}
hr {clear:both; border:0; height:1px; color:#888; background-color:#888;}

.columnthree a, .columnthree a:visited {font-size:1em; color:#000; text-decoration:underline;}
.columnthree a:hover {color:#888; text-decoration:none;}

</style></head>


<body>
<div id="container">
  <h1 align="center">DIESE DIV BOX M&Ouml;CHTE ICH GERNE ZENTRIEREN !! </h1>
  Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!!
  

</p>
   
  

</p>
  Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!!
  

</p>
   
  

</p>
   
  

</p>
  Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!!
  

</p>
  <h1 align="center">DIESE DIV BOX M&Ouml;CHTE ICH GERNE ZENTRIEREN !! </h1>
   
  

</p>
   
  

</p>
  Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!! Hallo hier der Inhalt !!!
  

</p>
</div> 

<div id="header">
  <div align="center">

    

    

    

    

Hier der Link - Hier der Link - Hier der Link - Hier der Link - Hier der Link

  </div>
</div>

<div id="footer">
<p class="lft">Impressum - Kontakte</p>


Copyright © </p>

</div>


</body></html>
oder komme ich da besser mit iframe ?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.05.2005, 11:22
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

In der Suche findet sich dazu einiges: http://www.xhtmlforum.de/search.php?mode=results

Ich zitier mal fricca, die (der?) hat das mal kurz und knapp formuliert:
Zitat:
Code:
body {text-align:center} /*für IE*/

box {margin:0 auto}
Jeweils das Elternelement der box muss für den IE das text-align:center bekommen, den margin:0 auto bekommt das Element selbst.
Mit Zitat antworten
Sponsored Links
Antwort


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
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 10:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 19:18
Grundsatzfrage über padding, Box sprengt vorhandene div box michi-muc CSS 5 22.10.2009 14:39
div id zentriert sich nicht earworms CSS 8 21.06.2006 17:01
#boxes a:hover.info: 2.posting mit css !!! marioN CSS 5 25.01.2004 17:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:56 Uhr.