nicht angemeldet
Hallo allesamt,
ich habe ein kleines Problem mit einem img in einem Div. Der Div hat einen float left, aber das img scheint den nicht mitzumachen. Es befindet sich unter einem mittigen Contentdiv, für den user nicht sichtbar. Fast mittig, horizintal wie vertikal. Dieses Verhalten erschließt sich mir nicht/ ist für mich nicht nachvollziehbar.
Eigentlich müsste doch alles innerhalb des Floats diesen auch mitmachen, oder täusche ich mich da?
Hab bereits alles versucht, was mir einfiel, aber ich krieg es nicht dahin, wohin es soll. Hoffe ihr könnt mir weiter helfen. Wahrscheinlich nur ein kleiner Fehler, aber wie des halt so ist - man steht auf dem Schlauch.
Zum Aufbau - 3 Hauptdivs, eines mittig platziert um das ganze zsam zu halten, 2 weitere jeweils mit float left und float right.
Hoffe ihr blickt durch, schreibe das erste mal in CSS eine ganze Site, ist daher noch etwas unstrukturiert. Werde das Script, wenn alles so klappt wie's soll, noch optimieren.
Hier erstmal die Testhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<meta http-equiv="Content-Type" content=
"text/html; charset=ISO-8859-1">
<title>XYZ</title>
<link rel="stylesheet" href="stiles/first.css" type="text/css">
</head>
<body>
<div id="MainBox">
<div id="leftcontent">
<div id="toplogo">
<!-- DAS IST BESAGTES IMAGE, was nicht so will wie es soll -->
<img src="images/logo.gif" alt="" />
</div>
<div id="left">
<ul class="leftnav">
<li><a href="">Hauptkatalog</a></li>
<li><a href="">Aktionskatalog</a></li>
<li><a href="">Aluminiumfüllungen</a></li>
<li><a href="">Nebeneingangstüren</a></li>
<li><a href="">Ganzglasfüllungen</a></li>
<li class="lastli"> <br/> </li>
</ul>
</div>
</div>
<div id="rightcontent">
<div id="top"><input type="text" name="searchartnr" value="suchen"></div>
<div id="nav">
<ul id="topnav">
<li><a href="">Willkommen</a></li>
<li><a href="">Kataloge</a></li>
<li><a href="">Zeichnungen</a></li>
<li><a href="">Preislisten</a></li>
<li><a href="">Formulare</a></li>
<li><a href="">Kontakt</a></li>
<li><a href="">Impressum</a></li>
</ul>
</div>
<div id="main">
</div>
<div id="bottom"><span class="copyright" >XYZ
</span></div>
<div id="clear"></div>
</div>
</div>
</body>
</html>
und die passende CSS-File:
@CHARSET "ISO-8859-1";
/* =Layout */
* {margin:0; padding:0;}
body{
text-align:center;
font-size:68.75%;
background-color: #666;
}
#MainBox {
margin: 0 auto;
width:70.6em;
text-align:left;
max-width:100%;
margin-top:2em;
}
#leftcontent{
float:left;
width:15em;
}
#rightcontent{
float:right;
width:55em;
}
#toplogo {
width:15em;
background-color: #FDFDFD;
height:15em;
color:#99CC00;
border-bottom:0.6em solid #CCC;
}
#left{
width:15em;
min-width:20%;
margin-top:0.6em;
}
#top{
width:55em;
min-width:50%;
background-color: #FDFDFD;
margin-bottom:0.6em;
}
#nav{
float:right;
width:55em;
min-width:50%;
background-color: #FDFDFD;
margin-bottom:0.6em;
}
#main{
clear:both;
width:55em;
min-width:50%;
background-color: #FDFDFD;
margin-bottom:0.6em;
height:30em;
}
#bottom{
width:55em;
text-align:right;
background-color: #FDFDFD;
margin-bottom:0.6em;
}
/* =Navigation */
.leftnav{
list-style-type:none;
margin:0;
padding:0;
}
#topnav{
list-style-type:none;
margin:0;
padding:0;
padding-left:1.2em;
}
#topnav li{
float:left;
}
.lastli{
background-color: white;
height:100%;
display:block;
border-top:0.6em solid #CCC;
}
/* =aLinks */
a{ text-decoration:none;
}
.leftnav a{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:black;
padding:0.7em;
display:block;
margin-bottom:0.6em;
padding-left:20px;
background-image: url("images/list.gif");
}
.leftnav a:link{
background-color:white;
border-right:0.6em solid #99CC00;
}
.leftnav a:visited{
background-color:white;
border-right:0.6em solid #99CC00;
}
.leftnav a:hover{
background-color: #99CC00;
color:white;
border-right:0.6em solid white;
}
.leftnav a:active{
background-color: #99CC00;
color:black;
border-right:0.6em solid white;
}
/* =aRechts */
#topnav a{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:white;
display:block;
padding:0.6em;
margin-right:0.6em;
}
#nav a:link {
background-color:#99CC00;
border-left:1px solid #99CC00;
border-right:1px solid #99CC00;
}
#nav a:visited {
background-color:#99CC00;
border-left:1px solid #99CC00;
border-right:1px solid #99CC00;
}
#nav a:hover {
background-color: white;
color:black;
border-left:1px solid #99CC00;
border-right:1px solid #99CC00;
}
#nav a:active{
background-color: white;
color:#99CC00;
border-left:1px solid #99CC00;
border-right:1px solid #99CC00;
}
/* Text */
.copyright{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:90%;
color:black;
padding:0.6em;
display:block;
border-right: 0.6em solid #99CC00;
}
Hoffe ihr könnt mir helfen :)
Eine Kleinigkeit ist mir ebenfalls noch nicht geläufig. Im IE6 (mal wieder..) sind die Abstände (bottom/top) der linken navigationsliste extrem groß, mindestens das doppelte meines eigenen margins. Habe bereits alle anderen margins ausgestellt, aber das Problem konnte ich nicht lösen. Firefox stellt alles dar wie es auch sein soll. Gibt es einen hack dafür?
Danke im Voraus!
mfg.
Rash