✔ Ausrichtung von Navi zu Content

  • Themenstarter Themenstarter psycotis
  • Beginndatum Beginndatum
Status
Nicht offen für weitere Antworten.
P

psycotis

Hallo,

ich will mal schnell mein Problem schildern:

Also ich habe eine Navigation linksseitig und rechts daneben den Content.
Alles ist zueinander nicht absolut, sondern per margin und float ausgerichtet.
Wenn ich die Seite jetzt jedoch im IE anschaue, fängt der Content erst underhalb des Menues an und nicht bündig oben rechts daneben.
Auch die einzelnen Links werden nicht direkt untereinander sondern mit einem kleinen vertikalen Abstand angezeigt.

Zum besseren Veranschaulichung hier der Link zur Seite:
http://www.entirerockfestival.de/main.php

Hier die main.php:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>- Entire Rockfestival | 25. Februar 2006 -</title>
<script type="text/javascript"></script>
	
<style type="text/css" media="all">
	@import "./css/main.css";
</style>
</head>

<body>
	<div id="main">
		<div id="menue">
			<div id="top_">
				<img id="top" src="./gfx/menue/top.gif" width="209" height="186" alt="" />
			</div>
			<div id="news_">
				<a href="./main.php?s=news" target="_self">
					<img id="news" src="./gfx/menue/news.gif" width="209" height="23" border="0" alt="" /></a>
			</div>
			<div id="about_">
				<a href="./main.php?s=about" target="_self">
					<img id="about" src="./gfx/menue/about.gif" width="209" height="24" border="0" alt="" /></a>		</div>
			<div id="bands_">
				<a href="./main.php?s=bands" target="_self">
					<img id="bands" src="./gfx/menue/bands.gif" width="209" height="25" border="0" alt="" /></a>		</div>
			<div id="info_">
				<a href="./main.php?s=info" target="_self">
					<img id="info" src="./gfx/menue/info.gif" width="209" height="25" border="0" alt="" /></a>		</div>
			<div id="shoutbox_">
				<a href="./main.php?s=shoutbox" target="_self">
					<img id="shoutbox" src="./gfx/menue/shoutbox.gif" width="209" height="23" border="0" alt="" /></a>		</div>
			<div id="kontakt_">
				<a href="./main.php?s=kontakt" target="_self">
					<img id="kontakt" src="./gfx/menue/kontakt.gif" width="209" height="24" border="0" alt="" /></a>		</div>
			<div id="sponsoren_">
				<a href="./main.php?s=sponsoren" target="_self">
					<img id="sponsoren" src="./gfx/menue/sponsoren.gif" width="209" height="25" border="0" alt="" /></a>		</div>
			<div id="bottom_">
				<img id="bottom" src="./gfx/menue/bottom.gif" width="209" height="142" alt="" />		</div>
		</div>
		<div id="head">
			<div id="content">
				<div id="title">
					hello
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Und hier die main.css:
HTML: 
/* Main.css */

/* menue */

#menue {
	margin:0;
	padding:0;
	width:209px;
	height:497px;
	float:left;
}

#top_ {
	margin:0;
	padding:0;
	width:209px;
	height:186px;
}

#news_ {
	margin:0;
	padding:0;
	width:209px;
	height:23px;
}

#about_ {
	margin:0;
	padding:0;
	width:209px;
	height:24px;
}

#bands_ {
	margin:0;
	padding:0;
	width:209px;
	height:25px;
}

#info_ {
	margin:0;
	padding:0;
	width:209px;
	height:25px;
}

#shoutbox_ {
	margin:0;
	padding:0;
	width:209px;
	height:23px;
}

#kontakt_ {
	margin:0;
	padding:0;
	width:209px;
	height:24px;
}

#sponsoren_ {
	margin:0;
	padding:0;
	width:209px;
	height:25px;
}

#bottom_ {
	margin:0;
	padding:0;
	width:209px;
	height:142px;
}

/* end menue */

body {
	text-align:center;
	}

#main {
	text-align:left;
	margin:auto;
	width:900px;
	padding:0px;
	}
/* content */

#head {
	background-image:url(../gfx/head.jpg);
	background-repeat:no-repeat;
	margin:0 0 0 209px;
	width:691px;
	height:496px;
	}
	
#content {
	margin-top:240px;
	margin-left:34px;
	width:657px;
}

#title {
	margin:0;
	padding:0;
	font-family:Impact;
	font-size:24px;
	color:#000000;
}

Falls mir jemand helfen kann, bitte schnell antworten sonst werd ich noch wahnsinnig.

Mfg
 
Hier der überarbeitete und erweiterte CSS- / HTML-Code:

Code: 
body {
        margin-left:20px;
        margin-top:50px;
}

#main {
border: 1px solid #000000;
width:900px;
}

#menue {
        background:url(../gfx/menue.jpg) no-repeat top left;
        width:209px;
        float:left;
        padding:0;
}

a {
display:block;
}

#head {
        background:url(../gfx/head.jpg) no-repeat top left;
        width:691px;
        padding:0;
        float:right;
        }

#content {
        margin-top:240px;
        margin-left:34px;
        width:657px;
}

#title {
        margin:0;
        padding:0;
        font-family:Impact;
        font-size:24px;
        color:#000000;
}

div.clear {
clear:left;
height:0;
font-size:0;
margin:0;
padding:0;
}
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>- Entire Rockfestival | 25. Februar 2006 -</title>
<script type="text/javascript"></script>

<style type="text/css" media="all">
        @import "./css/main.css";
</style>
</head>

<body>

<div id="main">

        <div id="menue">
        <div id="top_"><img id="top" src="./gfx/menue/top.gif" width="209" height="186" alt="" /></div>
        <div id="news_"><a href="./main.php?s=news" target="_self"><img id="news" src="./gfx/menue/news.gif" width="209" height="23" border="0" alt="" /></a></div>
        <div id="about_"><a href="./main.php?s=about" target="_self"><img id="about" src="./gfx/menue/about.gif" width="209" height="24" border="0" alt="" /></a></div>
        <div id="bands_"><a href="./main.php?s=bands" target="_self"><img id="bands" src="./gfx/menue/bands.gif" width="209" height="25" border="0" alt="" /></a></div>
        <div id="info_"><a href="./main.php?s=info" target="_self"><img id="info" src="./gfx/menue/info.gif" width="209" height="25" border="0" alt="" /></a></div>
        <div id="shoutbox_"><a href="./main.php?s=shoutbox" target="_self"><img id="shoutbox" src="./gfx/menue/shoutbox.gif" width="209" height="23" border="0" alt="" /></a></div>
        <div id="kontakt_"><a href="./main.php?s=kontakt" target="_self"><img id="kontakt" src="./gfx/menue/kontakt.gif" width="209" height="24" border="0" alt="" /></a></div>
        <div id="sponsoren_"><a href="./main.php?s=sponsoren" target="_self"><img id="sponsoren" src="./gfx/menue/sponsoren.gif" width="209" height="25" border="0" alt="" /></a></div>
        <div id="bottom_"><img id="bottom" src="./gfx/menue/bottom.gif" width="209" height="142" alt="" /></div>
        </div>

        <div id="head">
                <div id="content">
                        <div id="title">
                                sadfhello
                        </div>
                </div>
        </div>

        <div class="clear">&nbsp;</div>

</div>

</body>
</html>
 
ersteinmal vielen Dank für die Antwort.

aber jetzt habe ich immer noch ein Problem.
Unzwar, dass Menü wird jetzt richtig angezeigt aber der Browser zeigt immer noch einen kleinen Abstand zwischen dem Menü und dem Content an.

Hast du auch eine Lösung für dieses Problem?

Und könntest du mir erklären was es mit dem div.clear auf sich hat.

mfg
 
Zuletzt bearbeitet von einem Moderator:
Ich kann in meinem Lösungsvorschlag zwar keine Lücke zwischen Menü und Content entdecken, wenn du aber vom IE sprichst, dann probier's mal so:

Code: 
#head {
        background:url(../gfx/head.jpg) no-repeat top left;
        width:691px;
        padding:0;
        float:right;
        margin-left: 0 !important; 
        margin-left: -3px;
        }
Das DIV.clear dient dazu, um nach den floatenden DIVs den Textumfluss aufzuheben und nachfolgende Elemente wieder im normalen Textfluss auszurichten.

Die modernen Browsers, zu denen der IE nicht zählt, benötigen ein Block-Element mit der CSS-Eigenschaft clear, um die floatenden DIVs innerhalb des umschliessenden DIV#main darzustellen.
 
psycotis hat gesagt.:
Alles ist zueinander nicht absolut, sondern per margin und float ausgerichtet.
Zum Vergrößern anklicken....
Wie ich gerade sehe, ist das Layout mittlerweile doch absolut positioniert und das Darstellungsproblem im IE auf diese Weise gelöst.

Daher wird der Thread von mir als erledigt markiert.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück