nicht angemeldet
Mittlere flexible Spalte und IE7 / FF / Opera-Problem
Hallo zusammen,
ich habe mir jetzt ein Lyout mit Css zusammen gebaut, welches fast fertig ist. Es gibt nur zwei Probleme:
1. Ih habe nach dem Header un Co. drei Spalten. Die beiden äußeren sind mit floats positioniert. Nun soll die mittlere Spalte automatisch den Raum dazwischen füllen. Wie kann ich das erreichen?
2. Im IE7 sieht das Layout genau so aus, wie es sein sollte. Im FF und in Opera aber nicht! Da fehlen z.B. die ganzen Button-JPGs und die linke Spaltengraphik.
Vermutlich ist hier mal wieder ein Bug im IE schuld.
Ich poste jetzt mal den ganzen Code, auch wenn es ein bissel viel ist, aber ich weiß halt echt nicht woran des liegt.
html-Datei:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN">
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="design_4.css">
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="subnav">
<span style="float: left; margin-left:5px; margin-top:2px">Hier kommt die akt. Pos. hin:</span>
<span style="float:right; margin-right:5px; margin-top:2px;">Login / Logout</span>
</div>
<div id="contentfloatholder">
<div id="left">
<div id="menu">
<div class="menu_button"><a class="menu_link" href="#"><div class="link_font">HOME</div></a></div>
<div class="menu_button"><a class="menu_link" href="#"><div class="link_font">News</div></a></div>
<div class="menu_button"><a class="menu_link" href="#"><div class="link_font">Stufe</div></a></div>
<div class="menu_button"><a class="menu_link" href="#"><div class="link_font">Gremien</div></a></div>
<div class="menu_button"><a class="menu_link" href="#"><div class="link_font">Downloads</div></a></div>
<div class="menu_button"><a class="menu_link" href="#"><div class="link_font">Kontakt</div></a></div>
</div>
<div id="status_screen">
Die Seite ist im Alpha-Stadium!
</div>
</div>
<div id="centerwrap">
test
</div>
<div id="right">
</div>
</div>
<div id="footer">TullaAbi08Homepage<br>© spacegaier 2007</div>
</div>
</body>
</html>
CSS-Datei:
*
{
margin: 0px;
padding: 0px;
border: 0px;
font-family: Tahoma, 14pt;
}
body
{
background: #fff;
min-width: 700px;
font-family: Tahoma;
}
#wrapper
{
width: 90%;
margin: 0 -5% 0 5%;
border: 1px solid #000;
}
#header, #subnav, #footer
{
clear: both;
width: 100%;
}
#header
{
background-image: url(header_4.jpg);
height: 70px;
}
#subnav
{
background-image: url(subnav_4.jpg);
color: #377593;
height: 25px;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
#contentfloatholder
{
background: #ffffff;
width: 100%;
height:100%;
}
#centerwrap
{
float:left;
height: 100%;
background-image: url(middle_4.jpg);
}
#right
{
float: right;
width: 180px;
background-image: url(right_column_4.jpg);
height: 100%;
border-left: 1px solid #000;
}
#left
{
width: 180px;
float:left;
background-image: url(left_column_4.jpg);
height: 100%;
border-right: 1px solid #000;
}
#menu
{
padding-top: 25px;
}
a
{
text-decoration: none;
}
.menu_button
{
height: 30px;
width: 100%;
border-top: 1px solid #fff;
border-bottom: 1px solid #C0D1D3;
margin-bottom: 3px;
}
a.menu_link
{
width: 100%;
height: 100%;
color: #000;
background-image: url(link_4.jpg);
}
a.menu_link:hover
{
width: 100%;
height: 100%;
color: #000;
font-weight: bold;
background-image: url(link_4_hover.jpg);
}
a.menu_link:active
{
font-weight: bold;
background-image: url(link_4_active.jpg);
}
div.link_font
{
padding-left: 35px;
margin-top: 5px;
}
#status_screen
{
color: #000;
font-size: 10pt;
font-style: italic;
margin-left: 15px;
margin-right: 15px;
margin-top: 35px;
text-align: center;
color: #fff;
}
#footer
{
background-image: url(subnav_4.jpg);
color: #000;
height: 35px;
font-size: 8pt;
text-align: center;
padding-top: 5px;
border-top: 1px solid #000;
}
Hier auch noch zwei Screenshots:
www.spacegaier.de/ie7.jpg
www.spacegaier.de/opera.jpg
Ich hoffe des sind alle nötigen Infos und dass sich jemand findet der mir sagen kann wo hier was schief läuft.
Grüße - spacegaier
-
Hi spacegaier,
sieht nach ner guten Planung aus und soweit auch vernünftig gecodet (nichts gravierendes gesehen).
Problem ist: so funktioniert nicht, was du erreichen möchtest, auch wenn man denkt das sollte doch so gehen.
Lösung ist: center muss 100% haben und links und rechts floaten mit festen Breiten in die margins mit festen Breiten von center (deine paddings u. borders dann natürlich noch mit einrechnen). Code und Erklärung hier:
http://www.alistapart.com/articles/multicolumnlayouts
(Für dein Modell scroll ziemlich weit runter zu "Three-column liquid layouts" (musst du nur dann nur deinen wrapper, header und footer wieder dranbauen)
Gruß
Antipitch -
Hi,
- Im IE7 sieht das Layout genau so aus, wie es sein sollte.
kein Wunder, da er sich bei dem total veraltetem
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN">
wie ein 5er verhält.
<div id="subnav">
<span style="float: left; margin-left:5px; margin-top:2px">Hier kommt die akt. Pos. hin:</span>Es gibt übrigens auch Elemente mit einer vermutlich passenden Bedeutung...
<div id="menu">
<div class="menu_button"><a class="menu_link" href="#"><div class="link_font">HOME</div></a></div>dito (hier wäre eine Liste angebracht).
Davon abgesehen ist diese Klasse überflüssig, wenn Du einfach Nachfahren-Selektoren verwendest.#contentfloatholder
{
background: #ffffff;
width: 100%;
height:100%;
}die Höhenangabe bezieht sich standardkonform auf die Höhe des Elternelements (welche nicht definiert ist).
Vielleicht schaust Du Dir besser zunächst mal http://de.selfhtml.org/css/layouts/mehrspaltige.htm an?
freundliche Grüße
Ingo