nicht angemeldet
Float Vererbungsproblem
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
-
Hellihello Rashid,
Eigentlich müsste doch alles innerhalb des Floats diesen auch mitmachen, oder täusche ich mich da?
float bezieht sich doch auf Blockelemente, nicht auf inline-Elemente.
Mag es sein, dass Du bei deinem Konstrukt mit
position:absoluteund entsprechenden margins (top/bottom und left/right) bei den Inhalts/Navi-elementen besser fahren würdest. Es sieht doch ein bisschen nach zuviel divs in der Suppe aus. Ein Blockelement (ul) braucht eigentlich kein Div drumrum. Ein Bild darüber kannst Du absolut positionieren mit Höhenangabe (evtl. display:block) und dem <ul> dann ein margin nach oben entsprechend der Höhe des darüberliegenden Bildes - nur so als Denkansatz.Gruß,
frankx
-
Alohahe,
mit dem Div um die linke list hast du natürlich recht. Alle anderen divs musste ich setzen, weil sich das layout leider nicht anders umsetzen ließ. Oben zB nimmt die liste nicht den ganzen Raum ein, ohne div hätte ich da noch eine viel größere suppe, um es zu kompensieren.
Das Bild um das Div muss sein, weil sonst das Blocklayout nicht aufgeht, Rest genauso.
--
Ich habe den Ansatz jetzt mal ausprobiert, innerhalb des oberen LogoDivs. Merkwürdigerweise landet er mitten [!] in der linken NavListe.
???
Ich versteh die Welt nicht mehr ;) Das landet bei absoluter Positionierung und top, left 0 im falschen div an einer unlogischen Position.
Kann sich das jemand erklären? Wahrscheinlich nur ein Anfängerfehler, aber irgendwie komm ich nicht drauf.
mfg.
Rash
-
Hellihello Rashid,
Du musst dem übergeordneten div ein position:relative verpassen, denn position:absolute orientiert sich am nächsten übergeordneten Element, dass nicht normal positioniert ist. Gibts sowas nicht, dann am body.
Das Bild um das Div muss sein, weil sonst das Blocklayout nicht aufgeht, Rest genauso.
img display:block ...?
Gruß,
frankx
-
Danke, das hatte ich nicht bedacht. Werde es gleich ausprobieren, sobald ich Zeit hab.
img display block würde funktionieren, aber ich will das Bild nicht mittig, max. im goldenen schnitt und ich brauch die border-eigenschaft noch für etwas anderes. eine andere eigenschaft fiele mir jetzt nicht ein, um einen ungleichmäßigen Rand zu entwerfen.
Danke für deine Hilfe.
mfg.
Rash
-
Hellihello Rash,
img display block würde funktionieren, aber ich will das Bild nicht mittig, max. im goldenen schnitt und ich brauch die border-eigenschaft noch für etwas anderes. eine andere eigenschaft fiele mir jetzt nicht ein, um einen ungleichmäßigen Rand zu entwerfen.
margin, padding? position:relative?
Gruß,
frankx
-
-
-
-