IE will nicht zentrieren

Flow09 · 21.05.2003, 15:56

Hallo!

Erstmal der Code:
CSS:

Code:

body { font-family:arial, helvetica, sans-serif; font-size:80%; background-color:#FFFFFF; background-image:url(../image/dot.gif); background-attachment:fixed; margin:0px }
a:link { color: black; text-decoration: underline }
a:visited { color: black; text-decoration: underline }
a:hover { color: #004D85; text-decoration: none }
a:active { color: #004D85; text-decoration: none }

.main { position:relative; width:760px; height:500px; margin-left: auto; margin-right: auto; margin-top:1px; margin-bottom:0px; background-color:#FFFFFF; border:1px solid #000000 }

HTML:

Code:

<body>
<div class="main">
	<div id="logo"></div>
	<div id="nav_con">
	<a href="index.php" title="Startseite">Home</a>
	</div>
</div>
</body>

Netscape7 und Opera7 stellen es wie gewünscht zentriert da! IE6 will natürlich mal wieder nicht und legt alles oben links hin! Wo ist da der Fehler??

lg
Flow

Krypthonas · 22.05.2003, 09:30

PHP-Code:


			
</div>

  <div align="center" id="nav_con"> <a href="index.php" title="Startseite">Home</a>

Flow09 · 22.05.2003, 09:35

OK, das ist die simple Art!

Gibts auch einen weg das ganze über CSS zu steuern???

lg
Flow

prefix · 22.05.2003, 09:45

welches dtd?

prefix · 22.05.2003, 09:51

und mein freund - was hab ich dir gestern noch gesagt: achte auf das DOCTYPE!!!

hier die lösung:

xhtml-datei:

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="de">
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="main">&nbsp;</div>

</body>
</html>

hier die css-datei:

Code:

body {
	margin-top: 20px;
}
.main { 
	position:relative; 
	width:760px; 
	height:500px; margin-left: auto; 
	margin-right: auto; 
	margin-top:1px; 
	margin-bottom:0px; 
	background-color:#FFFFFF; 
	border:1px solid #000000 
	}

bei div-class "main" gib noch ein geschütztes leerzeichen rein (sicher ist sicher) - das forum hat es verschluckt!

ausserdem überleg, ob du die klasse nicht zu einer id machen willst - wenn du sie nur einmal brauchst, ist es besser als id:

#main { }

dann im xhtml:

<div id = "main"></div>

Flow09 · 22.05.2003, 09:57

Bin ich auch gerade drauf gekommen!

Hab die Angabe vom DTD einfach vergessen!
Jetzt funktioniert es!

mea culpa, mea culpa!!!

lg
Flow

prefix · 22.05.2003, 10:01

:-) nur durch erfahrung und "schmerzen" lernt man css *lol*

folgende stati durchwandert man:

1. css?? was ist das? kann man das wo downloaden?
2. ah, mit css kann ich mir im dw verschiedene linkfarben zusammenklicken
3. interessant, sogar rahmen und abstände usw. kann man damit erstellen -> erstmaliges css-coding per hand
4. css interessiert mich jetzt! ich pack es mal an, verzichte auf tabellen und layoute die site mit css
5. so ein sch....! schaut ja auf den browsern teilweise ganz unterschiedlich aus - ich nehm doch lieber tabellen!
6. na, einmal probier ich es aber noch mit reinem css!
7. erste erfolge - es entsteht eine hass-liebe :-)
8. ja, es klappt und man macht aber immer noch neue fehler
9. gibt es nicht *gggg* - man bleibt ewig bei 8! man wird nur immer besser, macht dafür aber immer neue erfahrungen

Flow09 · 22.05.2003, 10:03

Bin gerade bei 7. angelangt!

prefix · 22.05.2003, 10:04

brav mein junger padavan - kriegst heute einen css-cafe von mir

btw: immer validieren (xhtml und css) - immer auf allen browsern die du hast testen - nach jeder änderung

Flow09 · 22.05.2003, 10:05

Danke, Meister!!!

Und möge der validierte Code mit Dir sein!

prefix · 22.05.2003, 13:39

so mein flo :-)

hier die versprochenen links rund um css:

erklärung: was ist der bmh (box-model-hack)

schriftgrößen - verwende "em"

fniffi · 26.05.2003, 00:41

Hallo,
ich zentriere mit fixen Layouts, da ich mit margin-auto nicht so gute erfahrungen gemacht habe (z.B konqueror Linux).

Bis jetzt habe ich es so gemacht :
Bei einer Layoutbreite von 740px:
.LYR {width:740px;left:50%;margin-left:-340px;}

IMHO funzt margin-left bei allen Browsern und margin-right sowie margin-bottom ist problematisch (e.g. IE MAC und Opera 4-5 )
margin-top ist auch nicht sicher und mit Vosicht zu geniessen. Die Effekte sind ähnlich denen von float und clear.

Ich hab hier ein kleines JavaScript zum testen und experimentieren:
http://www.iaweb.org/schachbrett.html
(aber ja nicht in Deine website einbauen - das ist nur ein Demo-Tool)

prefix · 26.05.2003, 07:42

also ich hab es immer noch geschafft, layouts auch ohne feste breiten - also liquid - rein durch css zu zentrieren.

besonders nötig ist hiefür natürlich in bezug auf op / nn das child-element :-)

fniffi · 26.05.2003, 13:57

hi prefix, was meinst Du mit child-Element -- sind das relativ-positionierte Container in einem mit text-align gebauten Layout ?

Hast Du vielleicht ein Beispiel - bin ja nicht allwissend aber interessiert an Deiner Bauweise ;-)

prefix · 26.05.2003, 14:06

ein beispiel für ein child-element:

Code:

body {
	margin:0px 0px 0px 0px;
	padding:0px;
	color:black;
	background-color: #faebcc;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .75em;
	/*background-image: url(../images/maske_beige.jpg);
	background-attachment: fixed;
	background-position: -120px -60px;
	background-repeat: no-repeat;*/
	
	}

/* es folgt das CHILD */
	
html>body { /* stellen wir auch nn, moz und op zufrieden */
	margin-top: 10px;
}

mein gesamtes stylesheet kannst du gerne hier runterladen :-)

im wesentlichen hat das child-element nichts mit relativer oder absoluter positionierung zu tun.

oft werden werte von ie und op / nn / moz verschieden dargestellt.

das child-element, z.b.

html>body #container { }

wird nicht vom ie, sehr wohl aber von den moz-basierten browsern interpretiert! somit kann man das ganze schön steuern!