✔ Problem bei horizontaler Navigation

Status
Nicht offen für weitere Antworten.
A

alex130

Erfahrenes Mitglied
Hi
Ich hab ein Problem bei meiner horizontalen Navigation, und zwar, ist sie nicht horizontal ^^
Kann mir bitte jemand helfen?
Hier mein Code:
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>Unbenanntes Dokument</title>
<style type="text/css">
#topnavi {
width: 800px;
height:46px;
}

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

.home {
display: block;
width:104px;
height:46px;
background: url(images/normal_03.jpg);
}

.home:hover {
display: block;
width:104px;
height:46px;
background: url(images/hover_03.jpg);
}
</style>
</head>

<body>

<div id="topnavi">
	<ul id="menue">
		<li><a href="#" class="home"></a></li>
		<li><a href="#" class="home"></a></li>
	</ul>
</div>

</body>
</html>
Danke
 
Hi,

das gleiche Problem hast du doch vor etwas mehr als zwei Monaten schon mal gehabt -> Horizontale Navigation. :google:

Übrigens braucht für die :hover-Pseudoklasse die display- bzw. float-, sowie die width- und height-Eigenschaft nicht wiederholt werden.
 
Hi
Danke für deine Hilfe :)
Nun hab ich wieder mal ne Frage ^^ und zwar gehts um ein Layout mit 100% height.
Hier mein Code:
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>Unbenanntes Dokument</title>
<style type="text/css">
body {
margin:0;
}

html, body {
height: 100%;
}

#header {
width: 100%;
height:185px;
background: url(images/header_bg2.jpg);
}

#topnavi {
width:100%;
height:40px;
border-top: 3px solid #e3e3e3;
border-bottom:3px solid #e3e3e3;
background: url(images/topnavi_bg2.jpg);
}

#container {
width: 800px;
margin: 0 auto;

min-height: 100%; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* !important-Regel für moderne Browser */
height: 100%; /* Mindesthöhe in IE (<7) */
}

.leftCol {
width: 515px;
float: left;
background:red;
}

.rightCol {
float: right;
width:285px;
}

#content {
width: 515px;
}

#right {
width: 285px;
background:#e3e3e3;
}

/* clearfix zum Aufheben der Floatumgebung */

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#footer {
width: 100%;
height:30px;
background: url(images/footer_bg2.jpg);
border-top: 3px solid #e3e3e3;
}
</style>
</head>

<body>

<div id="header"></div>
<div id="topnavi"></div>
<div id="container" class="clearfix">
	<div class="leftCol">
		<div id="content">
		</div>
	</div>
	<div class="rightCol">
		<div id="right">
		test<br />
		</div>
	</div>
</div>
<div id="footer"></div>

</body>
</html>
Und zwar wird mein Div #content und #right nur angezeigt wenn was drin steht, doch die müssten eigtl. 100% hoch sein.
Weißt du was ich diesmal falsch mache?
Danke
 
Hi,

wie kommst du denn darauf, dass die beiden Elemente 100% hoch sein müssten?

Ihre Höhe ergibt sich entweder durch ihren Inhalt, oder durch eine Höhenangabe.

Müsste das DIV #container im übrigen nicht vor dem Header und der TopNavi notiert, und der Footer innerhalb des Hauptcontainers eingebunden werden?

So ist zumindest in meinem CSS-Tutorial die Reihenfolge der Elemente, wo der Quellcode wohl in Auszügen herstammt.
 
Hi
Aber ich hab auch schon versucht bei dem Div #content und #right die Höhe auf 100% zu stellen, da tut sich aber auch nix.
Und das mit dem Container ist absicht, denn ich will, dass die Navi, der Header und der Footer 100% breit sind.
LG Alex
 
alex130 hat gesagt.:
Aber ich hab auch schon versucht bei dem Div #content und #right die Höhe auf 100% zu stellen, da tut sich aber auch nix.
Zum Vergrößern anklicken....
Die inneren DIVs lassen sich in dem Modell auch nicht auf eine 100%-Höhe strecken. Wenn es den Eindruck erwecken soll, dass sie bis zum Footer reichen, solltest du die angewandten und vorgestellten Techniken aus meinem Tutorial auch vollständig übernehmen.

alex130 hat gesagt.:
Und das mit dem Container ist absicht, denn ich will, dass die Navi, der Header und der Footer 100% breit sind.
Zum Vergrößern anklicken....
Na und? :)

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>Unbenanntes Dokument</title>
<style type="text/css">
* {
margin:0;
padding:0;
}

html, body {
height: 100%;
}

#header {
width: 100%;
height:185px;
background: url(images/header_bg2.jpg);
}

#topnavi {
width:100%;
height:40px;
border-top: 3px solid #e3e3e3;
border-bottom:3px solid #e3e3e3;
background: url(images/topnavi_bg2.jpg);
}

#container {
position:relative;
width: 100%;
min-height: 100%; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* !important-Regel für moderne Browser */
height: 100%; /* Mindesthöhe in IE  */
}

#innerwrap {
width:800px;
margin:0 auto;
}

.leftCol {
width: 515px;
float: left;
background: red;
padding-bottom:35px;
}

.rightCol {
float: right;
width:285px;
padding-bottom:35px;
}

#content {
width: 515px;
}

#right {
width: 285px;
background:#e3e3e3;
}

/* clearfix zum Aufheben der Floatumgebung */

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#footer {
position:absolute;
left:0;
bottom:0;
width: 100%;
height:30px;
background: url(images/footer_bg2.jpg);
border-top: 3px solid #e3e3e3;
}
</style>
</head>

<body>
<div id="container" class="clearfix">
     <div id="header">header</div>
     <div id="topnavi">topnavi</div>
     <div id="innerwrap">
        <div class="leftCol">
                <div id="content">
                     <p>content</p>
                     <!--<p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>
                     <p>content</p>-->
                </div>
        </div>
        <div class="rightCol">
                <div id="right"><p>right</p></div>
        </div>
     </div>
     <div id="footer">footer</div>
</div>

</body>
</html>
 
Hi
Danke nun is der blöde Scrollbalken endlich weg, aber wie funktioniert das, dass der #content und #right Div bis zum footer gehen? Hab mir dein Tutorial eh angeschaut aber ich komm nicht drauf :(
Danke
 
Tutorial für ein CSS-Layout mit 100%-Höhe hat gesagt.:
Code: 
div#wrapper {
position: relative;
margin: 0 auto;
width: 800px;
min-height: 100%; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* !important-Regel für moderne Browser */
height: 100%; /* Mindesthöhe in IE  */
background: url(3cols.png) repeat-y;
border-left: 1px solid #b8b8b8;
border-right: 1px solid #b8b8b8;
}
Zum Vergrößern anklicken....
Im #wrapper-DIV wird ein Hintergrundbild senkrecht wiederholt, das in sich den Hintergrund der Spalten trägt.

Und da sich mein Tutorial mit einem dreispaltigen Layout befasst, habe ich die beiden äußeren Spalten in der Grafik farblich verewigt, und für sie einen passenden Dateinamen gewählt.
 
Haut bei mir noch nicht hin, habs so gemacht:
HTML: 
#innerwrap {
width:800px;
margin:0 auto;
background: url(images/container_bg.jpg) repeat-y;
min-height: 100%;
height: auto !important;
height: 100%;
}
Müsste eigtl. richtig sein, oder?
Danke
 
Zuletzt bearbeitet:
Nö. :)

Das #wrapper-DIV ist in deinem Fall das DIV #container. Also das Element, das mit der 100%-Mindesthöhe ausgestattet ist, und alle weiteren Elemente in sich aufnimmt. Nur dieses Element alleine besitzt tatsächlich eine (Mindest)Höhe von 100% im Viewport. Die Höhe der übrigen Elemente ergibt sich nur durch ihren Inhalt.

Wenn du das Hintergrundbild im #innerwrap einbindest, wird es nur so weit wiederholt, wie es der längste Spalteninhalt von ihm abverlangt, denn keines der inneren Elemente reicht im Ausgangsstadium (also ohne jeglichen Inhalt) bis zum unteren Fensterrand.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück