✔ IE zickt wegen zentrieren

Peter Klein · 9. Mai 2007

Hallo

Habe eigentlich keine Probleme eine Seite zu zentrieren.

Nur diesmal zickt der IE (v.7) rum.

Hier mal der Code.

Code:

<!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="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>www.klein-peter.eu | The finest in privacy</title>


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


</head>
	
<body>
<div id="wrap">
<div id="logo">klein-peter.eu</div>
<div id="diag" title="Logo" alt="Logo"></div>
	<div id="header">
	
	 <div id="nav">
		<ul class="ln">
			<li><a href="#" title="Startseite">Start</a></li>
			<li><a href="#" title="Über den Autor und diese Seite">Über</a></li>
			<li><a href="#" title="Unterwegs">Unterwegs</a></li>
			<li><a href="#" title="Bildergalerie">Bilder</a></li>
			<li><a href="#" title="Noch mehr">Mehr</a></li>
			<li><a href="#" title="Kontakt">Kontakt</a></li>
		</ul>
	 </div>
	
	
	</div>

		<div id="content">
		
			<div id="nav2">
				<span class="search">
				<form>
				<input class="searchfield" type="text" name="Suche" title="Suche" size="15"/>
				<input class="searchsubmit" type="submit" name="" value="Suche" />
				</form>
				</span>
					
					<span class="navr">
					
					</span>
					
			</div>
			<div id="cloumn"></div>
		
			
		</div>

</div>

</body>
</html>

CSS:

Code:

* {
	margin: 0; 
	padding: 0; 
	border: 0;
	}

html, body {
	background-image: url(images/bg.png);
	text-align: center;
	min-height: 100%;
	color: #333;
	}

h1,h2 {
	margin: 2px;}
	
a {
	color: #1c1c1c;
	text-decoration: none;
	}

image {
	border: 0;
	}

ul {
	list-style-type: none;
	margin: 0;
	}
	
li {
	padding: 0;
	margin: 0;
	}
	
#wrap {
	position: relative;
	text-align: center;
	margin-left: -400px;
	left: 50%;
	width: 800px;
	}	

#logo {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	font-size: 2em;
	}

#diag {
	background-image: url(images/diag.png);
	position: fixed;
	right: 0;
	top: 0;
	height: 150px;
	width: 150px;
	}	
	
#header {
	background-image: url(images/head.png);
	background-color: #ffffff;
	border-left: 1px solid #666;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	height: 120px;
	width: 800px;
	}

#content {
	background-color: #ffffff;
	margin-top: 10px;
	width: 800px;
	height: 600px;
	border-top: 3px solid #666;
	border-left: 1px solid #666;
	border-right: 1px solid #666;
	padding: 0px;
	text-align: left;
	}
	
#column {
	float: right;
	width: 580px;
	}
	
#nav2 {
	border-left: 1px solid #666;
	float: right;
	width: 200px;
	height: 400px;}
		
	
#nav {
	padding-top: 5.3em;
	font-size: 1em;
	}

#nav a {
	background-color: #def4f7;
	-moz-opacity: 0.6;
	border: 1px solid #666;
	display: block;
	float: left;
	padding: 2px;
	margin: 10px 0 0 -1px;
	text-decoration: none;
	width: 6em;
	text-align: center;
	}	
	
#nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: inline;
	}	
	
#nav li {
	display: inline;
	list-style-type: none;
	margin: 0;
	padding: 0;
	}

#nav a:link {
	}	
	
#nav a:hover {
	background-color: #ccdfe2;
	-moz-opacity: 0.3;
	}
	
/* ALLGEMEINE KLASSEN  */

.search {
	text-align: center;
	margin: 5px;
	}
	
.searchfield {
	}

Maik · 9. Mai 2007

Hi,

entweder verwendest du für das DIV wrap position:absolute anstelle von position:relative, oder du setzt einen "Conditional Comment" für die Vorgängerversionen des IE6 ein, um die text-align:center-Angabe aus dem Stylesheet style.css herauszunehmen:

Code:

html, body {
        background-image: url(images/bg.png);
        /*text-align: center;*/ /* auskommentiert = deaktiviert */
        min-height: 100%;
        color: #333;
        }

Code:

<!--[if lt IE 6]>
<style type="text/css">
html, body {
        text-align: center;
}
</style>
<![endif]-->

Peter Klein · 9. Mai 2007

Hi

Lese mich gerade rei in die Sache mit den Conditional Comments.

Also deine Lösung funktioniert net habe ich gerade festgestellt.

So Kleinigkeiten regen mich ja so auf, wen ich sie nicht hinbekomme..Gleich drücke ich Strg+A und danach die Backspace und fange wieder ganz von vorne an.

Maik · 9. Mai 2007

Seltsam, beide Lösungswege funktionieren bei mir einwandfrei.

Peter Klein · 9. Mai 2007

Hm, ich habe auch verschiedene darstellungen gehabt eben zwischen lokal und online. Und es waren exakt die gleichen dateien.

teste es mal wieder lade es mal wieder neu hoch.

Manchmal ist es zum ausflippen...

Maik · 9. Mai 2007

Kannst du mal den Link zur Seite nennen?

Peter Klein · 9. Mai 2007

http://klein-peter.eu/

Maik · 9. Mai 2007

Du hast da wohl einiges durcheinandergebracht, denn nun wird das Layout im Firefox nicht zentriert

Code:

html, body {
	background-image: url(images/bg.png);
	text-align: center; /*auskommentiert wegen IE*/
	min-height: 100%;
	color: #333;
	}

#wrap {
	text-align: center;
	width: 800px;
	}

Und wo ist die text-align:center-Angabe auskommentiert?

Peter Klein · 9. Mai 2007

Hatte es eben wieder rückgängig gemacht weil es nicht klappte hier lokal.

Hab den 2.Kommentar vergessen zu entfernen

Maik · 9. Mai 2007

Peter Klein | PN hat gesagt.:
Hallo Michael

Sag mal würdest du mir nen gefallen tun und mir die Dateien mal schicken wie es bei dir klappte? Habe jetzt schon so viele Versuche gestartet, aber irgendwo hakts und ich komm nicht drauf.

Dann kann ich direkt vergleichen und mir den fehler anschauen.

Wäre nett

Lg

Peter

Kein Problem

Code:

* {
        margin: 0;
        padding: 0;
        border: 0;
        }

html, body {
        background-image: url(images/bg.png);
        min-height: 100%;
        color: #333;
        }

h1,h2 {
        margin: 2px;}

a {
        color: #1c1c1c;
        text-decoration: none;
        }

image {
        border: 0;
        }

ul {
        list-style-type: none;
        margin: 0;
        }

li {
        padding: 0;
        margin: 0;
        }

#wrap {
        position: relative;
        text-align: center;
        margin-left: -400px;
        left: 50%;
        width: 800px;
        }

#logo {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        font-size: 2em;
        }

#diag {
        background-image: url(images/diag.png);
        position: fixed;
        right: 0;
        top: 0;
        height: 150px;
        width: 150px;
        }

#header {
        background-image: url(images/head.png);
        background-color: #ffffff;
        border-left: 1px solid #666;
        border-right: 1px solid #666;
        border-bottom: 1px solid #666;
        height: 120px;
        width: 800px;
        }

#content {
        background-color: #ffffff;
        margin-top: 10px;
        width: 800px;
        height: 600px;
        border-top: 3px solid #666;
        border-left: 1px solid #666;
        border-right: 1px solid #666;
        padding: 0px;
        text-align: left;
        }

#column {
        float: right;
        width: 580px;
        }

#nav2 {
        border-left: 1px solid #666;
        float: right;
        width: 200px;
        height: 400px;}


#nav {
        padding-top: 5.3em;
        font-size: 1em;
        }

#nav a {
        background-color: #def4f7;
        -moz-opacity: 0.6;
        border: 1px solid #666;
        display: block;
        float: left;
        padding: 2px;
        margin: 10px 0 0 -1px;
        text-decoration: none;
        width: 6em;
        text-align: center;
        }

#nav ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        display: inline;
        }

#nav li {
        display: inline;
        list-style-type: none;
        margin: 0;
        padding: 0;
        }

#nav a:link {
        }

#nav a:hover {
        background-color: #ccdfe2;
        -moz-opacity: 0.3;
        }

/* ALLGEMEINE KLASSEN  */

.search {
        text-align: center;
        margin: 5px;
        }

.searchfield {
        }

Code:

<!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="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>www.klein-peter.eu | The finest in privacy</title>

<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 6]>
<style type="text/css">
html, body {
        text-align: center;
}
</style>
<![endif]-->

</head>

<body>
<div id="wrap">
<div id="logo">klein-peter.eu</div>
<div id="diag" title="Logo" alt="Logo"></div>
        <div id="header">

         <div id="nav">
                <ul class="ln">
                        <li><a href="#" title="Startseite">Start</a></li>
                        <li><a href="#" title="Über den Autor und diese Seite">Über</a></li>
                        <li><a href="#" title="Unterwegs">Unterwegs</a></li>
                        <li><a href="#" title="Bildergalerie">Bilder</a></li>
                        <li><a href="#" title="Noch mehr">Mehr</a></li>
                        <li><a href="#" title="Kontakt">Kontakt</a></li>
                </ul>
         </div>


        </div>

                <div id="content">

                        <div id="nav2">
                                <span class="search">
                                <form>
                                <input class="searchfield" type="text" name="Suche" title="Suche" size="15"/>
                                <input class="searchsubmit" type="submit" name="" value="Suche" />
                                </form>
                                </span>

                                        <span class="navr">

                                        </span>

                        </div>
                        <div id="cloumn"></div>


                </div>

</div>

</body>
</html>

✔ IE zickt wegen zentrieren

Peter Klein

Erfahrenes Mitglied

Maik

Peter Klein

Erfahrenes Mitglied

Maik

Peter Klein

Erfahrenes Mitglied

Maik

Peter Klein

Erfahrenes Mitglied

Maik

Peter Klein

Erfahrenes Mitglied

Maik

Neue Beiträge