Hi, sitze grad an 'nem Design, das fast fertig gecodet ist. Beim letzten Check mit IE 7, FF 2.0.0.1 und Opera 9.2 zeigt mir nur Opera 'n kleinen Fehler an (IE und FF stellen alles wie gewünscht dar).
Hier mal der Quelltext der index. Schon mal vorneweg: Wichtig ist nur am Ende, das div mit der id "rc", in dem sich Sponsoren und Umfrage befinden. Bau ich deren DIVs nämlich ein, rutschen die Inhalte der Bereiche weiter rechts (also die Inhalte von "lc" und "mc") zwei Pixel nach unten.
content.css:
lc.css
mc.css
rc.css
Die content.css ist verantwortlich für das Layout im Content-bereich (also alles zw. Header und Footer).
lc.css, mc.css und rc.css bestimmen das Design innerhalb der gleichnamigen DIVs.
Glaub, das sind alle, die dafür wichtig sind. Wenn ihr mehr braucht, sagt bescheid.
Aber wär super, wenn mir jemand helfen könnte. Hab zwar schon geguckt, aber kann einfach an den falschen Stellen gewesen sein.
Ach ja: wenn ich das Padding von spons_cont (Container, der Header und Inhalt von Sponsoren beherbergt) auf 0 setze, gehen die falsch dargestellten Bereiche wieder 1px nach oben...
Die Website im aktuellen Zustand findet ihr hier.
Hier mal der Quelltext der index. Schon mal vorneweg: Wichtig ist nur am Ende, das div mit der id "rc", in dem sich Sponsoren und Umfrage befinden. Bau ich deren DIVs nämlich ein, rutschen die Inhalte der Bereiche weiter rechts (also die Inhalte von "lc" und "mc") zwei Pixel nach unten.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Willkommen auf der Website vom S.C. Petershagen!</title>
<link rel="stylesheet" type="text/css" href="css/elements.css" />
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/content.css">
<link rel="stylesheet" type="text/css" href="css/lc.css">
<link rel="stylesheet" type="text/css" href="css/mc.css">
<link rel="stylesheet" type="text/css" href="css/rc.css">
</head>
<body>
<div id="frame">
<div id="header">
<div class="row">
<div id="heol"></div>
<div id="hor"></div>
<div id="heor"></div>
</div>
<div id="header_main">
<div id="header_bg">
<hr id="hr_up" />
<hr id="hr_down" />
</div>
</div>
</div>
<div id="content">
<div id="lc">
<div id="nav_h"></div>
<div id="navi">
<ul>
<li id="nnews"><a href="#news" title="News"></a></li>
<div class="nb"></div>
<li id="ntrain"><a href="#train" title="Training"></a></li>
<div class="nb"></div>
<li id="nhb"><a href="#hb" title="Handball"></a></li>
<div class="nb"></div>
<li id="nbs"><a href="#bs" title="Breitensport"></a></li>
<div class="nb"></div>
<li id="nspons"><a href="#spons" title="Sponsoren"></a></li>
<div class="nb"></div>
<li id="nfoto"><a href="#foto" title="Fotos"></a></li>
<div class="nb"></div>
<li id="nfor"><a href="#for" title="Forum"></a></li>
<div class="nb"></div>
<li id="ngb"><a href="#gb" title="Gästebuch"></a></li>
<div class="nb"></div>
<li id="nkont"><a href="#kont" title="Kontakt"></a></li>
<div class="nb"></div>
<li id="nimpr"><a href="#impr" title="Impressum"></a></li>
</ul>
</div>
<div id="login_h"></div>
<div id="login">
Login
</div>
<div id="partner_h"></div>
<div id="partner">
Partner
</div>
</div>
<div id="pl"></div>
<div id="mc">
<div id="tab_cont">
<div id="tab_h"></div>
<div id="tab">
<div class="th">
</div>
<div class="tds">
Tabellenstand
</div>
</div>
</div>
<div id="nextg_cont">
<div id="nextg_h"></div>
<div id="nextg">
<div class="th">
</div>
<div class="tds">
nächste Spiele
</div>
</div>
</div>
<div id="news_h"></div>
<div id="news">
<div class="th">
</div>
News
</div>
</div>
<div id="pr"></div>
<div id="rc">
<div id="spons_cont">
<div id="spons_h"></div>
Sponsoren
</div>
<div id="poll_cont">
<div id="poll_h"></div>
Umfrage
</div>
</div>
</div>
<div id="footer">
<div class="row">
<div id="feul"></div>
<div id="fur"></div>
<div id="feur"></div>
</div>
</div>
</div>
</body>
</html>content.css:
Code:
/* Layout im Contentbereich */
#lc, #mc, #rc {
display:table-cell;
border:1px solid #9b9797;
padding:1px;
}
* + html #lc, * + html #mc, * + html #rc {
display:block;
float:left;
}
#pl, #pr {
display:table-cell;
width:1px;
border:none;
}
/* Platzhalter (pl: links, pr: rechts), damit lc, mc und rc 1px Abstand voneinander haben */
* + html #pl, * + html #pr {
display:none;
}
#lc {
width:109px;
}
/* Linke Spalte (Navi, Login, Partner) */
* + html #lc {
width:109px;
margin:0 1px 0 0;
}
#mc {
width:566px;
height:200px;
}
/* mittlere Spalte (Tabellenstant, nächste Spiele, News) */
* + html #mc {
margin:0 1px 0 0;
width:567px;
}
#rc {
width:231px;
height:200px;
}
/* rechte Spalte (Sponsoren, Umfrage) */
* + html #rc {
width:230px;
}lc.css
Code:
/* linke Spalte (Navi, Login, Partner) */
#nav_h {
width:107px;
height:13px;
background:url(../gfx/bhr.gif) repeat-x;
border:1px solid #9b9797;
margin:0 0 1px 0;
}
/* Navi Header */
#navi {
width:107px;
border:1px solid #9b9797;
margin:2px 0 2px 0;
}
/* enthält Liste mit Navipunkten */
ul {
margin:0;
padding:0;
}
#nnews, #ntrain, #nhb, #nbs, #nspons, #nfoto, #nfor, #ngb, #nkont, #nimpr, a {
list-style:none;
display:block;
width:107px;
height:16px;
background:url(../gfx/nbr.gif) repeat-y;
}
* + html #nnews, * + html #ntrain, * + html #nhb, * + html #nbs, * + html #nspons, * + html #nfoto, * + html #nfor, * + html #ngb, * + html #nkont, * + html #nimpr, * + html a {
height:17px;
}
* + html #nimpr {
margin:-2px 0 0 0;
}
.nb {
width:107px;
height:2px;
background:url(../gfx/nb.gif);
}
#login_h {
width:107px;
height:13px;
background:url(../gfx/bhr.gif) repeat-x;
border:1px solid #9b9797;
margin:0 0 1px 0;
}
#login {
width:107px;
height:70px;
border:0;
margin:0 0 1px 0;
}
#partner_h {
width:107px;
height:13px;
background:url(../gfx/bhr.gif) repeat-x;
border:1px solid #9b9797;
margin:0 0 3px 0;
}
#partner {
width:107px;
height:100px;
text-align:center;
}mc.css
Code:
/* mittlere Spalte (Tabellenstand, nächste Spiele, News) */
#row1 {
border:0;
padding:0;
margin:0;
}
/* enthält "Tabellenstand" und "nächste Spiele" */
#tab_cont {
width:164px;
border:0;
margin:0;
padding:0;
float:left;
}
/* Container "Tabellenstand" */
#tab_h {
width:162px;
height:13px;
background:url(../gfx/bhr.gif) repeat-x;
border:1px solid #9b9797;
margin:0 0 1px 0;
}
/* Header von "Tabellenstand" */
#tab {
width:160px;
height:77px;
background-color:white;
border:1px solid #9b9797;
padding:1px;
}
/* enthält "Tabellenstand" */
.th {
background-color:#1e83e6;
height:10px;
width:100%;
margin:0 0 1px 0;
}
/* allg Subheader in Tabellen */
.tds {
width:100%;
height:66px;
background-color:#e1e2e2;
}
/* "Content in kleinen Zellen (tabs und nextg) */
#nextg_cont {
width:399px;
border:0;
padding:0;
margin:0 0 0 1px;;
float:left;
}
/* Container "Nächste Spiele" */
#nextg_h {
width:399px;
height:13px;
background:url(../gfx/bhr.gif) repeat-x;
border:1px solid #9b9797;
margin:0 0 1px 0;
}
/* Header von "Nächste Spiele" */
* + html #nextg_h {
width:400px;
}
#nextg {
width:397px;
height:77px;
background-color:white;
border:1px solid #9b9797;
padding:1px;
}
/* enthält "nächste Spiele" */
* + html #nextg {
width:398px;
}
#news_h {
width:564px;
height:13px;
background:url(../gfx/bhr.gif) repeat-x;
border:1px solid #9b9797;
margin:1px 0 1px 0;
float:left;
}
/* News-Header */
* + html #news_h {
width:565px;
}
#news {
width:562px;
background-color:white;
border:1px solid #9b9797;
padding:1px;
float:left;
}
/* enthält "News" */
* + html #news {
width:563px;
}rc.css
Code:
/* rechte Spalte (Sponsoren, Umfrage) */
#spons_cont {
width:227px;
border:1px solid #9b9797;
padding:1px;
float:left;
margin:0 0 2px 0;
}
/* Container "Sponsoren" */
* + html #spons_cont {
width:226px;
}
#spons_h {
width:225px;
height:13px;
background:url(../gfx/bhr.gif) repeat-x;
border:1px solid #9b9797;
margin:0 0 1px 0;
}
/* Header "Sponsoren" */
* + html #spons_h {
width:224px;
}
#poll_cont {
width:227px;
border:1px solid #9b9797;
padding:1px;
float:left;
}
/* Container "Umfrage" */
* + html #poll_cont {
width:226px;
}
#poll_h {
width:225px;
height:13px;
background:url(../gfx/bhr.gif) repeat-x;
border:1px solid #9b9797;
margin:0 0 1px 0;
}
/* Header "Sponsoren" */
* + html #poll_h {
width:224px;
}
}Die content.css ist verantwortlich für das Layout im Content-bereich (also alles zw. Header und Footer).
lc.css, mc.css und rc.css bestimmen das Design innerhalb der gleichnamigen DIVs.
Glaub, das sind alle, die dafür wichtig sind. Wenn ihr mehr braucht, sagt bescheid.
Aber wär super, wenn mir jemand helfen könnte. Hab zwar schon geguckt, aber kann einfach an den falschen Stellen gewesen sein.
Ach ja: wenn ich das Padding von spons_cont (Container, der Header und Inhalt von Sponsoren beherbergt) auf 0 setze, gehen die falsch dargestellten Bereiche wieder 1px nach oben...
Die Website im aktuellen Zustand findet ihr hier.
