zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit Mehrspaltigem Layout

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.09.2004, 17:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.04.2004
Beiträge: 17
RalfEggert befindet sich auf einem aufstrebenden Ast
Standard Probleme mit Mehrspaltigem Layout

Hallo,

ich habe zwei Probleme mit einem mehrspaltigen Layout. Hier kommt erstmals der Code.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Testlayout</title>
<style type="text/css">
<!-- 
html
{
	font-family: Arial, Helvetica, sans-serif;
}

h1
{
	margin: 0px;
	margin-bottom: 10px;
	padding: 0px;
	padding-left: 5px;
	font-size: 1.3em;
	font-weight: bold;
	background-color: #F0F0F0;
}

h2
{
	margin: 0px;
	margin-bottom: 10px;
	padding: 0px;
	padding-left: 5px;
	font-weight: bold;
	font-size: 1.0em;
	background-color: #F0F0F0;
}

h3
{
	border-top: 1px dotted;
	border-bottom: 1px dotted;
	margin: 0px;
	margin-bottom: 10px;
	padding: 0px;
	padding-left: 5px;
	padding-bottom: 2px;
	font-weight: bold;
	font-size: 1.0em;
}

#container
{
	width: 100%;
	margin: 5px;
	margin-left: auto;
	margin-right: auto;
}

#header
{
	height: 60px;
	margin-bottom: 5px;
}

#subnavi
{
	border: 1px solid #3148CF;
	margin-bottom: 5px;
	padding: 2px 5px;
	background-color: #FDD7A8;
	font-size: 0.8em;
}

#mainnavi
{
	float: left;
	width: 130px;
	border: 1px solid #3148CF;
	margin: 0px;
	margin-bottom: 5px;
	padding-left:5px;
	padding-right:5px;
	padding-bottom:10px;
	background-color: #FDD7A8;
	font-size: 0.8em;
}

* html #mainnavi   /* for IE only */
{
	position: absolute;
	left: 10px;
}

#content
{
	margin-top: 0px;
	margin-left: 140px;
	margin-bottom: 5px;
	font-size: 0.8em;
	padding-left: 10px;
	padding-bottom: 0px;
}

#footer
{
	clear: both;
	border: 1px solid #3148CF;
	padding: 2px 5px;
	margin-top: 0px;
	background-color: #FDD7A8;
	font-size: 0.7em;
	text-align: center;
}

.contentmiddle
{
	clear: left;
	padding-top: 10px;
}

.contentwrapper
{
	clear: both;
	width: 100%;
	padding-top: 0px;
	margin-bottom: 10px;
}

.contentright
{
	margin-left: 51%;
}

.contentleft
{
	position: relative;
	float: left;
	width: 49%;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">Header</div>
<div id="subnavi">
Hier steht was
</div>
<div id="mainnavi">
Menu 1

Menu 2

Menu 3

Menu 4

Menu 5

Menu 6

Menu 7

Menu 8

Menu 9

Menu 10

Menu 11

Menu 12

Menu 13

</div>
<div id="content">
<div class="contentmiddle1">
<h1>Überschrift</h1>
</div>
<div class="contentwrapper">
<div class="contentleft">
<h2>Überschrift 2</h2>
</div>
<div class="contentright">
<h2>Überschrift 3</h2>


Hier steht der Text</p>
</div>
</div>
<div class="contentmiddle">
<h1>Überschrift</h1>
</div>
</div>
<div id="footer">Fusszeile</div>
</div>
</body>
</html>
Problem 1: Auf dem Mozilla (getestet 1.7) sieht das Layout genauso aus, wie es soll. Auf dem IE (getestet 6.0) hängt die Fusszeile leider viel zu weit oben. Sie soll wie beim Mozilla erst unter dem Ende der Menuspalte links erscheinen. Bei Opera (getestet 7.23) ist das Problem, dass die beiden Überschriften 2 und 3 erst unter dem Ende der Menuspalte links erscheinen. Wenn ich folgende Zeilen entferne, erscheint auf dem IE und auf Opera das gleiche Ergebnis.

Code:
* html #mainnavi   /* for IE only */
{
	position: absolute;
	left: 10px;
}
Wie kann ich es lösen, dass das Layout auf dem IE und dem Opera genauso aussieht wie auf dem Mozilla?

Problem 2: Wenn ich in der Menüspalte die Zeilen für Menu 4 bis 13 entferne, dann würde ich es auf allen Browsern gerne so haben, dass die Menuspalte links genauso weit nach unten gezogen wird, wie der Content Bereich rechts.

Wie kann ich dies lösen?

Zusatz: Ich habe so ein bisschen das Gefühl, dass beide Probleme zusammen hängen.

Wer kann mir einen Tipp geben?

Danke,

Ralf
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
Layout Probleme!!! Silverhawk1988 CSS 15 21.12.2008 16:12
Probleme mit Layout kruemelchen26 CSS 0 15.05.2007 23:40
Positionierung und Layout Probleme dabidu CSS 9 22.10.2006 10:57
Layout Probleme SchwarzerMagier CSS 18 01.08.2006 14:06
Problem mit mehrspaltigem Layout RalfEggert CSS 2 05.04.2004 17:20


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:28 Uhr.