zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Designfehler: IE stellt Design falsch dar; FF macht alles richtig...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.08.2007, 00:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.06.2007
Beiträge: 6
surffix befindet sich auf einem aufstrebenden Ast
Standard Designfehler: IE stellt Design falsch dar; FF macht alles richtig...

Hallo zusammen.

ich habe folgendes einfaches Design entworfen. Der "center" Bereich rutscht ziemlich weit nach unten.... Wo ist der Fehler bei der Positionierung?

anbei der Code:
design.html

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Titel</title>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

	<style type="text/css" media="all">@import "images/style.css";</style>
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="rss/" />
</head>

<body>


<div class="content">
<div class="toph"></div>

<div class="logo">
<a href="#"><img src="images/logo.jpg" alt="" width="158" height="165" border="0" /></a>
</div>

  <div class="menu">
  
      <div id="sidenav">
      <a class="section" href="#1">Startseite</a><span class="hideMe"><br /></span>
      <a class="section" href="#3">Kontakt</a><span class="hideMe"><br /></span>
      <a class="section" href="#4">Impressum</a><span class="hideMe"><br /></span>
      </div>
			
  </div>

<div class="center">

		<h2>Überschrift</h2>	    
		<p>Haupttext</p>
  </div>
<div class="footer">
	  <div class="footer_text"><a href="#">Login</a> | <a href="impressum.php">Impressum</a> </div>
  </div>
</div>

</body>
</html>
style.css:
Code:
body { 
	margin:15px 0; 
	padding:0; 
	color:#685E43;  
	line-height: 1.4em; 
	background : url(bg.gif);
	
	font-family: Arial, Helvetica, sans-serif;
}

.logo {
	height: 158px;
	width:  165px;
	position:relative;
	left:39px; 
	top:-70px;
}

.toph { 
	background: #3D3E42 url(top.jpg) no-repeat center; 
	height: 67px; 
	/* width: 665px; */ 
	margin:0; 
	padding:0; 
}

.content { 
    color: #a0a0a0; 
	margin: 0 auto;
	padding: 0; 
	width: 665px; 
	background: #3D3E42 url(bg-mid.jpg) repeat-y center;
}

.menu {
	width: 149px;
	position:absolute;
	left: 340px; 
	top: 195px;	
	color:#A90209;
}


/*	Links des Menu	*/
a.mainlevel:link, a.mainlevel:visited {
	color:#A90209;
}
/*	Links des Menu	*/
a.mainlevel:hover {
	color:#A90209;
}


.center { 
	float:left; 
	width: 396px; 
	font-size: 95%; 
	margin: 0px 0 0px 225px !important;
	margin: 0px 0 0px 20px; 
	padding: 0; 
	background: #eee7d2;
	color: #685E43;
}


.footer { 
	clear:both;
	width: 665px;
	height: 70px;
	color:#888;  
	font-size:90%;
	background: #3D3E42 url(bot.jpg) no-repeat center;
	text-align:center; 
}


.footer_text {
	width: 665px;
	color:#FFFFFF;
	font-size:90%;
	text-align:center;
	padding: 26px; 
}

A.footer {
	COLOR: #FFFFFF; 
}
A.footer:link {
	COLOR: #FFFFFF;
}
A.footer:visited {
	COLOR: #FFFFFF;
}
A.footer:active {
	COLOR: #FFFFFF;
}
A.footer:hover {
	COLOR: #FFFFFF;
}


/*	Überschriften	*/
.contentheading { 
	color:#685E43; 

}

.componentheading { 
	color:#685E43; 

}

/*	Menu	*/

.hideMe {
	DISPLAY: none
}

A.section {
	font-size: 13px; 
	PADDING-RIGHT: 2px; 
	BORDER-TOP: #eee7d2 1px solid; 
	DISPLAY: block; 
	PADDING-LEFT: 6px; 
	BACKGROUND: #DDD5BE; 
	PADDING-BOTTOM: 4px; 
	MARGIN: 0px; 
	COLOR: #DDD5BE; 
	PADDING-TOP: 4px; 
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
	TEXT-DECORATION: none; 
	font-stretch: narrower;
}
A.section:link {
	BACKGROUND: #DDD5BE; 
	COLOR: #A90209;
}
A.section:visited {
	COLOR: rgb(255,255,255);
}
A.section:active {
	COLOR: rgb(255,255,255);
}
A.section:hover {
	BACKGROUND: #A90209; 
	COLOR: rgb(255,255,255);
}
Ferner gefällt mir noch folgendes nicht: Wenn der Haupttext sehr gering ist oder gar nicht vorhanden.... dann rutscht der "footer" Bereich unter dem "menu" Bereich herunter. Ein Teil des Menus wird dann nicht mehr von dem Design-Rahmen umfasst. Wie kann man festlegen, dass sie die mindest Höhe sich an dem "menu" Befehl bemisst!?

Danke für eure Hilfe...
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.08.2007, 03:03
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von surffix Beitrag anzeigen
Der "center" Bereich rutscht ziemlich weit nach unten.... Wo ist der Fehler bei der Positionierung?
Der Grund liegt bei .logo - es hat position: relative;, und das läßt alle übrigen Elemente immer unbeeinflußt von der Verschiebung des Elementes mit position: relative;. Setze top auf Null und Du siehst, daß .center genau unterhalb von .logo beginnt.

Zitat:
Zitat von surffix Beitrag anzeigen
Wenn der Haupttext sehr gering ist oder gar nicht vorhanden.... dann rutscht der "footer" Bereich unter dem "menu" Bereich herunter.
.menu hat position: absolute; und wird daher von allen übrigen Elementen "ignoriert", als wäre es gar nicht vorhanden. Wirf pos. abs. raus und lasse .menu stattdessen floaten. Der Footer bekommt dann clear, damit er immer unterhalb des/der Floats steht. Siehe dazu auch FAQ Punkt 2.
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
IE stellt div container falsch dar . Wurmpastete CSS 2 22.02.2007 10:55
IE zeigt falsch, FF richtig - change - FF zeigts falsch, IE richtig nick CSS 6 19.08.2006 03:02
Wie stelle ich das in XHTML richtig dar? Timmi (X)HTML 1 07.02.2006 23:53
Darstellung erst falsch... bei reload dann richtig..? chow180976 CSS 13 01.07.2005 15:55
FireFox stellt height:100% nicht richtig dar Cathness CSS 7 14.06.2005 14:20


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