nicht angemeldet
DIV Container mit variabler Breite.
Hallo zusammen,
im Bild unten sieht man das unter dem Logo ein in 5(DIV) Teile geteilter Bereich ist.
In diese 5(DIV) Teile sollen die grafischen Schnipsel für den unteren Teil des Logos eingebaut werden.
Bereich 1,3 und 5 sind von fester Breite, Bereich 2 und 4 hätte ich gerne mit Variabler Breite.
Also praktisch so: Der Klickpfad ist ein Text der mal kürzer mal länger ist, demnach soll sich auch das DIV Nr.2 mitändern.
Das Problem ist nun wenn ich keine Beite für Container 2 und 4 Angebe ist der untere Logo Teil zu kurz, dieser soll sich aber immer über die ganze Logo-Breite erstrecken.
Ich könnte das zwar starr mit min-width machen, hätte jedoch lieber eine variable CSS-Lösung.
Falls jemand von euch eine Idee dazu hat wie man das machen könnte....
Eine weitere Sache die mich sogar bei der starren Variante vor Probleme stellt ist der ie6. Dieser kennt offenbar min-width nicht und die schose ist immer zu kurz.
Gibt es eine Lösung für das min-width Problem im ie6?
Besten Dank,
Jan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Layout:versuch1</title>
<link rel="stylesheet" href="css/2010-10-21_styles.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="top">
<div id="top_header">
<div id="top_header_top">
###LOGO###
</div>
<div id="top_header_bot">
<div id="top_header_bot_corner_l">
1
</div>
<div id="top_header_bot_cpath">
2 ###KLICKPFAD###
</div>
<div id="top_header_bot_cpath_end">
3
</div>
<div id="top_header_bot_normal">
4 ###DATUM###
</div>
<div id="top_header_bot_corner_r">
5
</div>
</div>
</div>
<div id="top_login">
###LOGIN###
</div>
</div>
<div id="mid">
<div id="mid_menu">
###MENUE_LINKS###
</div>
<div id="mid_content">
###INHALT###
</div>
</div>
<div id="bot">
<center>###FOOTER###</center>
</div>
</div>
</body>
</html>
body{
background-image:url(../images/2010-10-19_BG_001.png);
margin:0px;
margin-top:10px; /* workaround ie6, container top nimmt kein margin-top an */
font-size: 100.01%;
/* text-align: center; */
}
div#container{
min-width:950px;
margin:0 auto; /* standardkonforme horizontale Zentrierung */
overflow: hidden; /* div wächst mit inhalt */
}
div#top{
margin:0 auto; /* standardkonforme horizontale Zentrierung */
margin-bottom:10px;
overflow:hidden;
width:960px;
height:100px;
}
div#top_header{
overflow:hidden;
float:left;
width:750px;
height:100px;
margin-right:10px;
}
div#top_header_top{
overflow:hidden;
float:left;
width:750px;
height:72px;
background-image:url(../images/2010-10-11_Header-top_b.gif); /* gif statt png workaround für ie6 transparenzproblematik */
margin-right:10px;
}
div#top_header_bot{
overflow:hidden;
float:left;
width:750px;
height:28px;
margin-right:10px;
}
div#top_header_bot_corner_l{
float:left;
width:15px;
height:28px;
background-image:url(../images/2010-10-11_Header-bot_corner_l.gif);
}
div#top_header_bot_cpath{
min-width:508px;
float:left;
height:28px;
background-image:url(../images/2010-10-11_Header-bot_filler_clickpath.png);
}
div#top_header_bot_cpath_end{
float:left;
width:12px;
height:28px;
background-image:url(../images/2010-10-11_Header-bot_end_clickpath.png);
}
div#top_header_bot_normal{
min-width:200px;
float:left;
height:28px;
background-image:url(../images/2010-10-11_Header-bot_filler_normal.png);
}
div#top_header_bot_corner_r{
float:left;
width:15px;
height:28px;
background-image:url(../images/2010-10-11_Header-bot_corner_r.gif);
}
div#top_login{
overflow:hidden;
float:left;
width:200px;
height:100px;
background-color:silver;
}
div#mid{
overflow:hidden;
width:960px;
margin:0 auto;
}
div#mid_menu{
overflow:hidden;
float:left;
width:200px;
background-color:silver;
}
div#mid_content{
overflow:hidden;
margin-left:10px;
width:750px;
float:left;
background-color:gray;
}
div#bot{
clear:both;
margin:0 auto; /* standardkonforme horizontale Zentrierung */
margin-top:10px;
width:960px;
background-color:silver;
}
-
Grüße,
du könntest entweder expressions nutzen (sag hallo zu laggy layout) oder die borderradien mit css3 machen um die ie6 nutzer nicht z uirrtieren - die sollen schön brav ihre medikamente nehmen und internet der modemzeiten geliefert bekommen.
denk daran die bilder als gifs mit 60 farben zu spoichern.
MFG
bleicher
