![[HaBo]](/styles/default/logoklein.png)
Hallo zusammen,
ich habe nun von einem professionellem Designer ein Design geschustert bekommen und habe dies gestern nun mit ihm gemeinsam eingebunden.
Nun habe ich aber folgendes Problem, in meinem CSS-(Un)wissen habe ich das Layout so gemacht, dass ich der Content feststeht obwohl der Wrapper auf 100% steht.
Wie man erkennt ist auch der Footer zwar am Ende der Seite aber unter diesem sind noch schätzungsweise 400px, was aber eigentlich nicht so sein sollte.
Meine CSS sieht wie folgt aus:
Der Body-Bereich der index.html sieht so aus:
Die einzelnen Grafiken kann man sich ja im Markup ansehen.
Habt ihr da eventuell Dinge die ich falsch gemacht habe oder wo ich schlichtweg einen Denkfehler gemacht habe?
Über Hilfen bin ich sehr sehr dankbar, da ich die Seite gerne schnellstmöglich online setzen möchte.
Vielen Dank schon einmal!
ich habe nun von einem professionellem Designer ein Design geschustert bekommen und habe dies gestern nun mit ihm gemeinsam eingebunden.
Nun habe ich aber folgendes Problem, in meinem CSS-(Un)wissen habe ich das Layout so gemacht, dass ich der Content feststeht obwohl der Wrapper auf 100% steht.
Wie man erkennt ist auch der Footer zwar am Ende der Seite aber unter diesem sind noch schätzungsweise 400px, was aber eigentlich nicht so sein sollte.
Meine CSS sieht wie folgt aus:
HTML:
html,
body
{
height:100%;
}
body {
margin: 0;
padding: 0;
text-align: center;
background: url(../images/design/bg.jpg) repeat top left;
font: 400 0.7em verdana, arial, sans-serif;
line-height: 170%;
width:100%;
color: #555;
padding-bottom:none;
margin-bottom:-300px;
}
#wrapper
{
width:1000px;
height:110%;
min-height:100%;
margin-left:auto;
margin-right:auto;
margin-bottom: 100px;
padding-bottom: 100px;
top:0px;
left:0px;
border-left:1px solid transparent;
border-right:1px solid transparent;
background-color:transparent;
vertical-align:top;
}
#header {
position: relative;
height: 193px;
top:0px;
margin: 0 auto;
background: transparent url(../images/design/headerbg.png) repeat-x bottom left;
border-bottom: 2px solid transparent;
background-color: transparent;
z-index:1;
}
#logotop {
position: relative;
top:0px;
height: 193px;
margin-top:-195px;
background: url(../images/design/headerani.gif) repeat-x bottom left;
z-index:2;
clear:both;
left:-2px;
}
#buttonbar{
width:1000px;
height:56px;
margin-top:-58px;
}
#streambutton{
background: url(../images/design/buttons/bt_stream_off.png) repeat-x bottom left;
position: relative;
top:3px;
left:300px;
height: 56px;
width:170px;
margin-top:-58px;
z-index:3;
}
#streambutton:hover{
background: url(../images/design/buttons/bt_stream_on.png) repeat-x bottom left;
}
#eventbutton{
background: url(../images/design/buttons/bt_events_off.png) repeat-x bottom left;
position: relative;
top:5px;
height: 56px;
width:170px;
left:470px;
margin-top:-58px;
z-index:3;
}
#eventbutton:hover{
background: url(../images/design/buttons/bt_events_on.png) repeat-x bottom left;
}
#registerbutton{
background: url(../images/design/buttons/bt_register_off.png) repeat-x bottom left;
position: relative;
top:7px;
height: 56px;
left:640px;
width:170px;
margin-top:-58px;
z-index:3;
}
#registerbutton:hover{
background: url(../images/design/buttons/bt_register_on.png) repeat-x bottom left;
}
#loginbutton{
background: url(../images/design/buttons/bt_login_off.png) repeat-x bottom left;
position: relative;
top:9px;
height: 56px;
left:810px;
width:170px;
margin-top:-58px;
z-index:3;
}
#loginbutton:hover{
background: url(../images/design/buttons/bt_login_on.png) repeat-x bottom left;
}
#spacer{
width:1000px;
position:relative;
top:0px;
height:10px;
background: url(../images/design/headerspacer.png) repeat-x bottom left;
z-index:4;
}
#songticker{
width:1000px;
position:relative;
top:0px;
height:23px;
}
#songtickerleft{
width:80px;
position:relative;
top:0px;
height:23px;
background: url(../images/design/ticker_links.png) repeat-x bottom left;
}
#songtickerbg{
width:780px;
position:relative;
top:0px;
left:80px;
height:22px;
margin-top:-23px;
background: url(../images/design/ticker_bg.png) repeat-x bottom left;
overflow:hidden;
padding-left:110px;
padding-right:10px;
text-align:left;
}
#songtickerright{
width:20px;
position:relative;
top:0px;
left:980px;
height:23px;
margin-top:-22px;
background: url(../images/design/ticker_rechts.png) repeat-x bottom left;
}
#songtickeroverlay{
width:890px;
position:relative;
top:0px;
left:80px;
height:23px;
margin-top:-22px;
text-align:left;
font-weight:bold;
background: url(../images/design/ticker_overlay.png) repeat-x bottom left;
padding-left:10px;
padding-right:10px;
}
#songtickeroverlay a:link{
text-decoration:none;
color:#00558D;
}
#songtickeroverlay a:hover{
text-decoration:none;
}
#contentwrapper{
width:1000px;
position:absolute;
top:221px;
height:100%;
vertical-align:top;
float:left;
}
#content_bg1_links{
background: url(../images/design/content_bg1_links.png) repeat-y top left;
width:80px;
position:relative;
top:0px;
height:80px;
Display:block;
float:left;
}
#content_bg2_links{
background: url(../images/design/content_bg2_links.png) repeat-y top left;
width:80px;
position:relative;
top:0px;
height:91%;
Display:block;
left:-80px;
float:left;
}
#bg_content_links{
background: url(../images/design/bg_content_links.gif) repeat-y top left ;
width:220px;
position:relative;
height:100%;
top:0px;
left:80px;
Display:block;
float:left;
}
#content{
background: url(../images/design/bg_content_mitte.jpg) repeat-y top left;
width:473px;
position:relative;
top:0px;
left:80px;
height:100%;
Display:block;
float:left;
}
#bg_content_rechts{
background: url(../images/design/bg_content_rechts.jpg) repeat-y top left ;
width:207px;
position:relative;
height:100%;
top:0px;
left:80px;
float:left;
}
#bg_content_rechts_shadow
{
background: url(../images/design/content_bg_rechts.png) repeat-y top left ;
width:20px;
position:relative;
height:100%;
top:0px;
left:80px;
float:left;
}
#footer{
position:relative;
clear:both;
width:1000px;
background: url(../images/design/footer_bg.png) ;
height:36px;
z-index:11;
}
#footeroverlay{
position:relative;
top:-145px;
clear:both;
width:1000px;
background: url(../images/design/footer_overlay.png) ;
height:110px;
z-index:11;
}
#content_bg3_links{
background: url(../images/design/content_bg3_links.png) ;
width:80px;
position:relative;
height:73px;
top:-70px;
float:left;
z-index:10;
margin-bottom:0px;
}
#ero4design{
position:relative;
top:0px;
left:773px;
width:227px;
height:100px;
background: url(../images/design/bt_ero4design_off.png) ;
}
#ero4design:hover{
background: url(../images/design/bt_ero4design_on.png) ;
}Der Body-Bereich der index.html sieht so aus:
HTML:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="logotop"></div>
<div id="show" class="slideshow"></div>
<div id="buttonbar">
<div id="streambutton"></div>
<div id="eventbutton"></div>
<div id="registerbutton"></div>
<div id="loginbutton"></div>
</div>
<div id="spacer"></div>
<div id="songticker">
<div id="songtickerleft"></div>
<div id="songtickerbg">Noisecontrollers - Attack Again</div>
<div id="songtickeroverlay"><a href="/stream/">Track / Show:</a></div>
<div id="songtickerright"></div>
</div>
<div id="content_bg1_links"></div>
<div id="content_bg2_links"></div>
<div id="contentwrapper">
<div id="bg_content_links"></div>
<div id="content">
</div>
<div id="bg_content_rechts"></div>
<div id="bg_content_rechts_shadow"></div>
</div>
<div id="footer">
<div id="content_bg3_links"></div>
</div>
<div id="footeroverlay">
<div id="ero4design"></div>
</div>
</div>
</body>Die einzelnen Grafiken kann man sich ja im Markup ansehen.
Habt ihr da eventuell Dinge die ich falsch gemacht habe oder wo ich schlichtweg einen Denkfehler gemacht habe?
Über Hilfen bin ich sehr sehr dankbar, da ich die Seite gerne schnellstmöglich online setzen möchte.
Vielen Dank schon einmal!
Zuletzt bearbeitet: