[HaBo]
| (Web-) Design und webbasierte Sprachen Tipps & Tricks, Designabgleich, HTML & Javascript, Flash, ASP, PHP, Perl/CGI... |
Zuviel Abstand von Div zum Seitenende
Diskussion: Zuviel Abstand von Div zum Seitenende im Forum (Web-) Design und webbasierte Sprachen, in der Kategorie Web, Network & Multimedia Palace; Anzeige Hallo zusammen, ich habe nun von einem professionellem Designer ein Design geschustert bekommen und habe dies gestern nun mit ...
 |
17.09.10, 10:33
| #1 (permalink) |
 Registriert seit: 10.01.06     Likes: 0 |  Zuviel Abstand von Div zum Seitenende Anzeige 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: HTML-Code: 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) ;
} HTML-Code: <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> 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! Geändert von reaLInsanity (18.09.10 um 17:59 Uhr) Grund: falsche Problembeschreibung als Threadname |
|  |
|
| - Anzeige - | |
|
[HaBo] » Web, Network & Multimedia Palace » (Web-) Design und webbasierte Sprachen » CSS Zuviel Abstand von Div zum Seitenende
| Themen-Optionen | |
| Ansicht | |
Linear-Darstellung
| |
