zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Divs lassen sich nicht zentrieren.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.08.2010, 17:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.04.2010
Beiträge: 15
snobbis befindet sich auf einem aufstrebenden Ast
Standard Divs lassen sich nicht zentrieren.

Hallo
bin neu in diesem Forum und versuche meine ersten Schritte mit XHTML und CSS.

Habe eine Webseite zusammengestellt, welche mal so beschreibe:
Die Seite ist in 4 Div's (untereinander) mit einer Breite 100% unterteilt. In jedem Div habe ich zuerst mal jeweils ein DIV erstellt, der den Inhalt zentrieren soll. Danach enthalten sind weitere Divs.

Im FF 3.6.8 sieht alles OK aus. Im IE 6 (Intranet) ist bei den ersten 2 Div's alles OK, bei Div 3 und 4 ist alles nach Links verschoben (im zentrierten Div).

Hab' schon etliches versucht mit text-align center, vertical align middle, margin 0 auto, etc. ... nichts.

Die Seite ist leider nicht online.

Hier der Code: Sorry für den langen Thread.

Kann jemand helfen/tipp geben?

-------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>996px grid system | 12 columns ~ margin left: 10px ~ margin right: 10px &mdash; based on the 1kb grid system</title>
<meta name="keywords" content="996px grid system, grid system generator, variable grid system, custom grid system, css framework, generator, xhtml, css, grid system generator, 960 grid generator, 960 grid system generator, web development workflow, web development cycle" />
<meta name="description" content="The 996px grid system | 12 columns ~ margin left: 10px ~ margin right: 10px &mdash; is a valid css / xhtml framework for rapid prototyping, development and production environments (based on the 960.gs grid system)." />
<meta name="generator" content="GridSystemGenerator.com" />
<link rel="stylesheet" type="text/css" media="all" href="css/template.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/layoutgrid.css" />
<style type="text/css" media="all">
body {
background: #efefef;
color: #333;
font-size: 11px;
}

p {
border: 1px solid #666;
overflow: hidden;
padding: 10px 0;
margin: 0 0 20px 0;
text-align: center;
font-size: 100%;
}
</style>
</head>
<body>

<!--TOPBOX ---------------------------------->
<div id="containertop">

<div id="top" class="row">
<div id="topleft" class="column grid_6"><p>Topleft 478px 80px</p></div>
<div id="topright" class="column grid_6"><p>Topright 478px 80px</p></div>
</div>
</div>

<!--HEADERBOX ---------------------------------->
<div id="containerheader">

<div id="header" class="row">
<div id="logo" class="column grid_12"><img src="images/logo.png" alt="" width="976" height="150" /></div>
<div id="headerbottom" class="column grid_12"><p>Headerbottom 976px 30px</p></div>
</div>
</div>




<!--CONTENTBOX ---------------------------------->

<div id="containercontent">

<div id="content" class="row">

<div class="row">
<div id="breadcrumbs" class="column grid_12"><p>Breadcrumbs 976px 30px</p></div>
</div>

<div class="row">
<div id="contenttop1" class="column grid_3"><p>ContentTop1 229px 100px</p></div>
<div id="contenttop2" class="column grid_3"><p>ContentTop2 229px 100px</p></div>
<div id="contenttop3" class="column grid_3"><p>ContentTop3 229px 100px</p></div>
<div id="contenttop4" class="column grid_3"><p>ContentTop4 229px 100px</p></div>
</div>

<div class="row">
<div id="maincontent" class="column grid_6"><p>MainContent 478px</p></div>
<div id="left" class="column grid_3"><p>Left 229px</p></div>
<div id="right" class="column grid_3"><p>Right 229px</p></div>
</div>
</div>
</div>

<!--FOOTERBOX ------------------------------------------->

<div id="containerfooter">

<div id="footer" class="row">
<div class="row">
<div id="footertop1" class="column grid_3"><p>FooterTop1 229px 100px</p></div>
<div id="footertop2" class="column grid_3"><p>FooterTop2 229px 100px</p> </div>
<div id="footertop3" class="column grid_3"><p>FooterTop3 229px 100px</p></div>
<div id="footertop4" class="column grid_3"><p>FooterTop4 229px 100px</p></div>
</div>

<div class="row">
<div id="footerleft" class="column grid_6"><p>FooterLeft 478px</p></div>
<div id="footerright" class="column grid_6"><p>FooterRight 478px</p></div>
</div>

<div class="row">
<div id="advertising" class="column grid_2"><p>Advertising 146px 100px</p></div>
<div id="banner" class="column grid_10"><p>Banner 810px 100px</p></div>
</div>

<div class="row">
<div id="copyright" class="column grid_12"><p>Copyright 976px 30px</p></div>
</div>

</div>
</div>

</body>
</html>
-------------------------------------
body {font:13px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif}
a:focus {outline:1px dotted invert}
hr {border:0 #ccc solid; border-top-width:1px; clear:both; height:0;}
h1 {font-size:25px}
h2 {font-size:23px}
h3 {font-size:21px}
h4 {font-size:19px}
h5 {font-size:17px}
h6 {font-size:15px}
ol {list-style:decimal}
ul {list-style:square}
li {margin-left:30px}
p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset {margin-bottom:20px}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent
}
body {line-height:1}
ol, ul {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none}
:focus {outline:0}
ins {text-decoration:none}
del {text-decoration:line-through}
table {border-collapse:collapse; border-spacing:0}


/* TEMPLATE LAYOUT TOPBOX ------------------------------*/

#containertop {
background-color: #333399;
width: 100%;
}

#top {
background-color: #0066FF;
}

#topleft, #topright {
height: 80px;
background-color: #00CCFF;
margin: 10px 10px;
}


/* TEMPLATE LAYOUT HEADERBOX ------------------------------*/

#containerheader {
background-color: #009900;
width: 100%;
}

#header {
background-color: #00CC66;
}

#logo {
height: 150px;
}


#headerbottom {
background-color: #66FF99;
height: 30px;
}


/* TEMPLATE LAYOUT CONTENTBOX ------------------------------*/
#containercontent {
background-color: #CC0000;
width: 100%;
text-align: center;
margin: 0px auto 0px;
}

#content {
background-color: #FF0000;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
margin: 0px auto 0px;
}

#breadcrumbs {
background-color: #FF9900;
height: 30px;
}

#contenttop1, #contenttop2, #contenttop3, #contenttop4 {
background-color: #FF9900;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
}

#maincontent {
background-color: #FF9900;
}

#left {
background-color: #FF9900;
}

#right {
background-color: #FF9900;
}



/* TEMPLATE LAYOUT FOOTERBOX ------------------------------*/
#containerfooter {
background-color: #663366;
width: 100%;
vertical-align: middle;
text-align: center;
margin: 0 auto;
}

#footer {
background-color: #6600CC;
padding-bottom: 10px;
text-align: center;
margin: 0 auto;
vertical-align: middle;
text-align: center;
}

#footertop1, #footertop2, #footertop3, #footertop4 {
background-color: #9933FF;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
}

#footerleft, #footerright {
background-color: #9933FF;
}

#banner, #advertising {
background-color: #9933FF;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
}

#copyright {
background-color: #9933FF;
height: 30px;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.08.2010, 09:02
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.026
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Du solltest die Art HTML-Kommentare zu schreiben überdenken, snobbis. SGML-Kommentare beginnen mit "--" und enden ebenfalls damit, der Validator meckert über deine vielen Divis und ich halte es nicht für ausgeschlossen, dass das einige Browser aus dem Tritt bringen könnte. Verzichte einfach komplett auf aufeinander folgende Divis und nutze irgendein anderes Zeichen, wenn du einen optischen Trenner schaffen willst.

Warum gibst du deinen Containern eine Breite von 100%? Divs sind Blockelemente und nehmen immer die maximal verfügbare Breite ein, solange sie statisch sind.

Warum nutzt du so viele Divs? Ich kann mir nicht vorstellen, dass das wirklich nötig ist.

@JedenTag
Kannst du bitte deine Signatur weniger auffällig gestalten? Die ist momentan sehr aufdringlich und stört den Lesefluss.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.08.2010, 16:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.04.2010
Beiträge: 15
snobbis befindet sich auf einem aufstrebenden Ast
Standard

Hallo Danke für das erste Feedback.

@ Inta: wie du feststellen konntest, bin ich eher Greenhorn was XHTML und CSS angeht. Bin aber fest interessiert, hier mich einzuarbeiten. Hab' mir heute auch ein Buch gekauft ... doch einige Infos benötige ich dringend.

Wie du aus der angehängten Datei entnehmen kannst möchte ich meine Seite wie folgt aufbauen (so erscheint sie aktuell im FF).

Ich habe 4 Bereiche, welche sich über die ganzen Fensterbreite erstrecken. Dies ermöglicht mir die Farbgestaltung/Hintergrund.

In jedem Bereich ist dann ein "Haupt-Div" (Box), der die Website zentrieren soll (996 px). Die ersten beiden Bereiche laufen soweit gut. Bereich 3 und 4 erscheinen im IE6 nach links verschoben.
Angehängte Grafiken
Dateityp: jpg site.jpg (156,5 KB, 18x aufgerufen)
Mit Zitat antworten
  #4 (permalink)  
Alt 19.08.2010, 17:29
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.135
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Stell einen Link zur Verfügung. Dann kann man leichter helfen.
Free Hoster, falls du noch nichts hast.

Gruß Manfred
Mit Zitat antworten
  #5 (permalink)  
Alt 20.08.2010, 09:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.04.2010
Beiträge: 15
snobbis befindet sich auf einem aufstrebenden Ast
Standard

996px grid system | 12 columns ~ margin left: 10px ~ margin right: 10px &mdash; based on the 1kb grid system ... im FF sieht es gut aus, im IE6 sind die Divs rot und violett nach links verschoben.

NB: generell muss ich die CSS überarbeiten.
Mit Zitat antworten
  #6 (permalink)  
Alt 20.08.2010, 15:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.04.2010
Beiträge: 15
snobbis befindet sich auf einem aufstrebenden Ast
Standard

@ jedenTag:
wie du vielleicht anhand des Links sehen kannst, steht ja die Seite und im FF (und vermutlich auch IE sieht sie OK aus.

Meine Frage wäre, was muss ich tun, damit sie auch in IE6 richtig aussieht.

Ein wenig CSS kenne ich, obwohl gegenwärtig ziemlich vieles durcheinander ist und unstrukturiert. Doch sie läuft ... werde jedoch das ganze überarbeiten.
Mit Zitat antworten
  #7 (permalink)  
Alt 21.08.2010, 18:28
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.135
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Hallo

Bereinige erstmal deine Kommentare im html
Code:
<!-- blabla -->
Ansonsten ist das ein ziemliches Gewirr von divs, ids, class ...
Du hast css im head, dann noch 2 externe css.
Das schreckt hier jeden ab...

Da du noch Anfänger bist, würde ich erstmal versuchen, das ganze etwas einfacher, Step by Step aufzubauen.
Dabei lernst du auch was, statt auf solche Grids zurückzugreifen.
Zumal das Layout mit sovielen Boxen eh ziemlich nervös/ducheinander wirkt.
Weniger ist manchmal mehr.... und einfacher.

Mit der Hilfestellung tut man sich dann natürlich auch leichter.

Gruß Manfred
Mit Zitat antworten
  #8 (permalink)  
Alt 23.08.2010, 00:26
Proggers4you cheffe
XHTMLforum-Mitglied
 
Registriert seit: 20.02.2006
Beiträge: 114
ChampS befindet sich auf einem aufstrebenden Ast
Standard

zuviele divs
unsauberer code
nich schön
aber um übers problem zu reden

margin-left:auto;
margin-right:auto;

zentriert die divs
text-align is wie der name schon sagt für text da und nich für divs oder andere elemente
__________________
Proggers4you für programmierer und scripter die Hilfe suchen oder Hilfe anbieten wollen
www.Proggers4you.de
Mit Zitat antworten
  #9 (permalink)  
Alt 28.08.2010, 01:43
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.04.2007
Beiträge: 123
firehorse befindet sich auf einem aufstrebenden Ast
Standard

.../css/template.css
Code:
* {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent
}
Dann haste auch alles auf null gesetzt.

Bin irgendwie gerade etwas faul oder auch müde. Aber haste "margin" und/oder "padding" gesetzt?

Beim IE immer problematisch. Margin heißt Abstand zum äußeren Element, was der IE aber immer verdreht.

Eine Lösung hatte ich mal gefunden wenn man in margin nur die Abstände für oben und unten definiert und die inneren seitlichen Abstände mit padding zurechtbastelt. Funktioniert besser. Wirklich problematisch wird es wenn du auch noch Grafiken einsetzen willst.

Maßgebliche Probleme hat der IE6 mit border, margin und padding. Ansonsten extra-Datei für den IE6.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 28.08.2010, 12:30
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Zitat:
Margin heißt Abstand zum äußeren Element, was der IE aber immer verdreht.
Passiert nur im IE5.x und IE6 (Quirksmode). Das ist wohl kaum "immer"
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
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
DIV Layout mit CSS: Zentrieren eines Divs und links und rechts auffüllen. darkwave CSS 5 07.04.2011 13:11
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren Alien CSS 17 20.03.2011 10:23
3 DIVs im übergeordnetem DIV zentrieren & fixieren? HELP aleksberlin CSS 2 12.12.2009 12:07
Divs mittig in Browser zentrieren doublemc CSS 15 18.02.2008 14:52
DIVS zentrieren + 100% Höhe rady CSS 12 08.04.2007 13:24


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:07 Uhr.