✔ Menuleiste springt über die Seite hinaus..

Status
Nicht offen für weitere Antworten.
Fruitgum

Fruitgum

Erfahrenes Mitglied
Hallo,

habe mir ein Layout gebastelt und wollte nun im Header oder darunter eine Menueleiste bauen. Die geht auch, nur geht die größe über das Layout drüber und im IE6 wird gleich alles verschoben. Bin kurz vorm durchdrehen.

hier die direkt.css


PHP: 
body {
text-align:center;
background:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;


}

body{
 text-align:center
}

#seite{
margin:0 auto;
text-align:left;
width:800px;

background:#ececec;
border:1px solid #ccc;
max-width:800px;
min-width:800px;

}

#header {
text-align:left;
margin:0px 0px 0px 0px ;
width:100%;
height:140px;
padding:0px;
background:url(img/head_l.png) #fff no-repeat;

}

#nav {
float:left;
width:100%;
height:35px;
margin:0;
padding:10px 0px opx 36px;
list-style:none;
background:#ff6600;
}




#nav li {
float:left;
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;

}

#nav a {
float:left;
display:block;
text-decoration:none;
background:#f9f9f9;
border:1px solid #ececec;
border-bottom:none;
margin:0 1px 0 0;
padding:4px 8px;
color:#333;

}

#nav a:hover, body#intro #t-intro a {


}



#content {
float:left;
margin:0%;
width: 70%;
background:#ececec url(img/bg_content.png)  repeat-x;
}

#content div {
padding:20px;
background:#fff;
margin:1% 1% 1% 1%;
background:url(img/rechts_s2.png) #fff no-repeat;
}

#content h2 {
margin: 0 0 1em 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:normal;
color:#ff6600;
}

#seitenleiste {
float:right;
width:30%;
background:#ececec;
text-decoration:none;


}

#seitenleiste div  {
margin:2.4% 2.4% 2.4% 0%;
padding:20px;
background:#fff;
text-decoration:none;
border:0px dotted #ccc;
background:url(img/links_s2.png) #fff no-repeat top right;
}

#seitenleiste a {
text-decoration:none;
color:#333;
font-style:inherit;
}

#seitenleiste h3 {
margin:0;

font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:normal;
color:#ff6600;
border-bottom:0px dotted #ccc;
background:#fff ;

}

#seitenleiste h3 a:hover {
background:#FFf url(img/box_o_hover.png);

}

#seitenleiste p, .box ul {
margin:0;
padding:12px;
color:#666;
list-style:none;

}

#seitenleiste ul li {
margin:0 0 0 0px;
padding:0 0 0 18px;
list-style:none;
text-decoration:none;
font-size:10px;

}

#seitenleiste a:hover {
color:#ff6600;
background:#FFf ;
text-decoration:underline;
}

/*footer*/

#footer {
margin:0px 0px 0px 0px;
clear:both;
background:#fff url(img/bg_footer.png) top repeat-x;


}

#footer p {
margin:0;
text-decoration:none;
padding:5px 0px 5px 25px;
font-size:9px;
color:#fff;
}

#footer a {
text-decoration:none;
font-size:9px;
color:#fff;
}

#footer a:hover {
text-decoration:underline;
font-size:9px;
color:#fff;
}


und die index.php

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ein Titel</title>
<link href="direkt.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="seite"> <!-- Anfang -->
<div id="header">

  
	
	


</div>
<ul id="nav">
<li id="t-intro"><a href="#">Startseite</a></li>
<li id="t-mark"><a href="#">Link</a></li>
<li id="t-vera"><a href="#">Link</a></li>
<li id="t-profil"><a href="#">Link</a></li>
<li id="t-kontakt"><a href="#">Link</a></li>
</ul>

<div id="content">
	<div><h2>Mehr Erfolg mit Die Michkühe.de</h2>
	"Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
	</div>
	<div><h2>Zeichen der Zeit?</h2>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimat
	
	</div>
</div>


<div id="seitenleiste">
	<div><h3>Headline </h3>
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	<p>Termine:</p>
	<ul>
	<li></li>
	<li><a href="#">23.12.2008</a></li>
	<li><a href="#">23.12.2008</a></li>
</ul>
	</div>
	<div>
<h3>headline</h3>
<br>
Die letzten Artikel:
<ul>
<?php
mysql_connect("$host", "$username", "$password")or die("Keine Verbindung möglich"); 
mysql_select_db("$db_name")or die("Datenbank nicht vorhanden!");
$sql = "SELECT DISTINCT YEAR(post_date) AS yyear, MONTH(post_date) AS mmonth FROM wp_posts WHERE post_type = 'post' ORDER BY post_date DESC";
 
//$sql = 'SELECT `ID`,`post_title` FROM `wp_posts` ORDER BY `ID` DESC LIMIT $how_many'

$query = mysql_query($sql);
while($row = mysql_fetch_assoc($query))
{
//$id = $row['wp_posts'];
//$link = $row['guid'];
$title = $row['post_title'];
echo "<li><a href=\"wer\">$title</a></li>";
}
?>
</ul>

</div>

</div>
<div id="footer">
<p>&copy; <strong>Copyright </strong>  2008 ---> <a href="Impressum.php" title="Impressum"><strong> Impressum</strong></a> . 
<a href="sitemap/Sitemap.html" title="Sitemap"><strong>Sitemap</strong></a> . <a href="wordpress/index.php" title="Sitemap"><strong>Blog</strong></a></p>

</div>

















</div>
</body>
</html>


Vielleicht weiß einer von euch was ich machen kann. Ich will aber die weite mit 100% weiter angeben. Keine absoluten größen.
 
Hi,

gemäß dem CSS-Boxmodell wird die padding-Eigenschaft zu width und height hinzugezählt, was die Box derzeit um den linken Innenabstand verbreitert, der von der Breite subtrahiert gehört.

Wenn du keine absolute Größen angeben willst, obwohl ja das Gesamtlayout eine solche mit 800px besitzt :p, dann entferne die float:left- und width:100%-Dekaration aus der Regel, so besitzt das Blockelement seine typische "Block-Level-Charakteristika", die u.a. eine 100%-Breite beinhaltet, von der der linke Innenabstand dann "automatisch" subtrahiert wird.

Beim dritten padding-Wert hast du übrigens anstelle der "0" ein kleines "o" angegeben:

Code: 
#nav {
float:left;
width:764px;
height:35px;
margin:0;
padding:10px 0px 0px 36px;
list-style:none;
background:#ff6600;
}

mfg Maik
 
Gut... ich habe den Float und die 1005 aus der #nav genommen und es geht.

habe aber noch ein Problem. Im IE6 überlabt die 2 textbox unten den footer ein stück und die linke obere ist aus der form!?

Nee ideeeee? :)
 
Gib für #footer eine Höhe an, die der Höhe des Hintergrundbildes entspricht.

Code: 
#seitenleiste div  {
margin:2.4% 2.4% 2.4% 0% !important;
margin:1.2% 2.4% 1.2% 0%; /* Für IE6 */
padding:20px;
background:#fff;
text-decoration:none;
border:0px dotted #ccc;
background:url(img/links_s2.png) #fff no-repeat top right;
}
Fruitgum hat gesagt.:
Gut... ich habe den Float und die 1005 aus der #nav genommen
Zum Vergrößern anklicken....
1005? Ist das der "Special-Agent-Code" für width:100%? :suspekt:

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück