✔ Div Footer

Status
Nicht offen für weitere Antworten.
metty

metty

Erfahrenes Mitglied
Hallo Jungs und Mädels!

Uff, kleiner Gestalter versucht sich endlich mit Divs und Layern auseinander zu setzen. Programmiere folgende Seite neu: http://www.nopedose.de
Allerdings will der Footer nicht so richtig. Könnt ihr mir ein wenig helfen?
Der Footer, der da jetzt so komisch oben ist soll also nach unten, ca. 20 Pixel vom unteren Rand...aber ich bekomme es einfach nicht hin...
Meine Version liegt hier: http://www.testserver.de/wds_matthias/nopedose/index.php

HTML Code:
HTML: 
<div id="site">
  <!-- BEGIN HEADER -->

  <div id="header"><a href="index.php"><img 
  	src="images/header/img_logo01.gif" alt="nopedose" name="logo1" width="211" height="76" border="0" id="logo1" /></a><img 
	src="images/header/img_top01.jpg" alt="" name="header1" width="100" height="76" id="header1" /><img 
	src="images/header/img_top02.jpg" alt="" name="header2" width="100" height="76" id="header2" /><img 
	src="images/header/img_top03.jpg" alt="" name="header3" width="100" height="76" id="header3" /><img 
	src="images/header/img_top04.jpg" alt="" name="header4" width="100" height="76" id="header4" /><img 
	src="images/header/img_top05.jpg" alt="" name="header5" width="100" height="76" id="header5" /><img 
	src="images/header/img_top06.jpg" alt="" name="header6" width="58" height="76" id="header6" />
  </div>
  <!-- END HEADER -->
  <!-- BEGIN NAVIGATION -->
  <div id="navigation"><img src="images/header/img_logo02.jpg" alt="nopedose" name="logo2" width="202" height="16" id="logo2" /><a 
	  	href="?go=1.0" onmouseover="MM_swapImage('nav_news','','images/navigation/nav_news_o.gif',1); MM_showHideLayers('subnavgigs','','hide','subnavgallery','','hide');" onmouseout="MM_swapImgRestore()"><img 
		src="images/navigation/nav_news.gif" alt="news" name="nav_news" width="81" height="16" border="0" id="nav_news" /></a><a 
		href="?go=2.0" onmouseover="MM_swapImage('nav_band','','images/navigation/nav_band_o.gif',1); MM_showHideLayers('subnavgigs','','hide','subnavgallery','','hide');" onmouseout="MM_swapImgRestore()"><img 
		src="images/navigation/nav_band.gif" alt="band" name="nav_band" width="81" height="16" border="0" id="nav_band" /></a><a 
		href="?go=3.0" onmouseover="MM_swapImage('nav_discography','','images/navigation/nav_discography_o.gif',1); MM_showHideLayers('subnavgigs','','hide','subnavgallery','','hide');" onmouseout="MM_swapImgRestore()"><img 
		src="images/navigation/nav_discography.gif" alt="discography" name="nav_discography" width="81" height="16" border="0" id="nav_discography" /></a><a 
		href="?go=4.0" onmouseover="MM_swapImage('nav_gigs','','images/navigation/nav_gigs_o.gif',1); MM_showHideLayers('subnavgigs','','show','subnavgallery','','hide');" onmouseout="MM_swapImgRestore()"><img 
		src="images/navigation/nav_gigs.gif" alt="gigs" name="nav_gigs" width="81" height="16" border="0" id="nav_gigs" /></a><a 
		href="?go=5.0" onmouseover="MM_swapImage('nav_gallery','','images/navigation/nav_gallery_o.gif',1); MM_showHideLayers('subnavgigs','','hide','subnavgallery','','show');" onmouseout="MM_swapImgRestore()"><img 
		src="images/navigation/nav_gallery.gif" alt="gallery" name="nav_gallery" width="81" height="16" border="0" id="nav_gallery" /></a><a 
		href="?go=6.0" onmouseover="MM_swapImage('nav_guestbook','','images/navigation/nav_guestbook_o.gif',1); MM_showHideLayers('subnavgigs','','hide','subnavgallery','','hide');" onmouseout="MM_swapImgRestore()"><img 
		src="images/navigation/nav_guestbook.gif" alt="guestbook" name="nav_guestbook" width="81" height="16" border="0" id="nav_guestbook" /></a><a 
		href="?go=7.0" onmouseover="MM_swapImage('nav_links','','images/navigation/nav_links_o.gif',1); MM_showHideLayers('subnavgigs','','hide','subnavgallery','','hide');" onmouseout="MM_swapImgRestore()"><img 
		src="images/navigation/nav_links.gif" alt="links" name="nav_links" width="81" height="16" border="0" id="nav_links" /></a>	</div>
	<div id="subnavgigs"><a 
		href="?go=4.1" onmouseover="MM_swapImage('unv_gigs_last','','images/navigation/unav_gigs_last_o.gif',1)" onmouseout="MM_swapImgRestore()"><img 
		src="images/navigation/unav_gigs_last.gif" alt="last" name="unv_gigs_last" width="81" height="15" border="0" id="unv_gigs_last" /></a><a 
		href="?go=4.2" onmouseover="MM_swapImage('unav_gigs_upcoming','','images/navigation/unav_gigs_upcoming_o.gif',1)" onmouseout="MM_swapImgRestore()"><img 
		src="images/navigation/unav_gigs_upcoming.gif" alt="upcoming" name="unav_gigs_upcoming" width="81" height="15" border="0" id="unav_gigs_upcoming" style="*margin-top:-19px;" /></a><a 
		href="?go=4.3" onmouseover="MM_swapImage('unav_gigs_archive','','images/navigation/unav_gigs_archive_o.gif',1)" onmouseout="MM_swapImgRestore()"><img 
		src="images/navigation/unav_gigs_archive.gif" alt="archive" name="unav_gigs_archive" width="81" height="16" border="0" id="unav_gigs_archive" style="*margin-top:-23px;" /></a>
	</div>
	<div id="subnavgallery"><a 
		href="?go=5.1" onmouseover="MM_swapImage('unav_gallery_band','','images/navigation/unav_gallery_band_o.gif',1)" onmouseout="MM_swapImgRestore()"><img 
		src="images/navigation/unav_gallery_band.gif" alt="band" name="unav_gallery_band" width="81" height="15" border="0" id="unav_gallery_band" /></a><a 
		href="?go=5.2" onmouseover="MM_swapImage('unav_gallery_gigs','','images/navigation/unav_gallery_gigs_o.gif',1)" onmouseout="MM_swapImgRestore()"><img 
		src="images/navigation/unav_gallery_gigs.gif" alt="gigs" name="unav_gallery_gigs" width="81" height="15" border="0" id="unav_gallery_gigs" style="*margin-top:-19px;" /></a><a 
		href="?go=5.3" onmouseover="MM_swapImage('unav_gallery_stuff','','images/navigation/unav_gallery_stuff_o.gif',1)" onmouseout="MM_swapImgRestore()"><img 
		src="images/navigation/unav_gallery_stuff.gif" alt="stuff" name="unav_gallery_stuff" width="81" height="16" border="0" id="unav_gallery_stuff" style="*margin-top:-23px;" /></a>

    </div>
    <!-- END NAVIGATION -->
	<!-- BEGIN HEADLINE -->
	<div id="headline"><img src="images/headlines/news.gif" width="107" height="50" alt="news" border="0" /></div>
	<!-- END HEADLINE -->
	<!-- BEGIN CONTENT -->
	<div id="content">news<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br />Lorem<br /></div>

	<div id="footer"><img src="images/img_footer_01.jpg" alt="" width="150" height="16" /><img src="images/img_footer_02.jpg" alt="" width="150" height="16" /><img src="images/img_footer_03.jpg" alt="" width="155" height="16" /></div>
	<!-- END CONTENT -->
</div>

Die dazugehörige CSS:
HTML: 
body {
	background-color: #000000;
	background-image: url(../images/img_background.gif);
	background-repeat: repeat-x;
	margin: 0px;
	color: #FFFFFF;
	vertical-align: top;
}
div {
	vertical-align:top;
}
div#site {
	position: relative;
	left: 0px;
	top: 0px;
	margin: 0px;
	width: 769px;
	min-height: 100%;
}
div#header {
	position: absolute;
	margin-left: 0px;
	margin-top: 0px;
	width: 769px;
	height: 76px;
}
div#navigation {
	position: absolute;
	margin-left: 0px;
	margin-top: 76px;
	width: 769px;
	height: 16px;
}
div#subnavgigs {
	position: absolute;
	margin-left: 446px;
	margin-top: 91px;
	width: 81px;
	height: 45px;
	visibility: hidden;
}
div#subnavgallery {
	position: absolute;
	margin-left: 527px;
	margin-top: 91px;
	width: 81px;
	height: 45px;
	visibility: hidden;
}
div#headline {
	position: absolute;
	margin-left: 10px;
	margin-top: 92px;
	width: 107px;
	height: 50px;
}
div#content {
	position: absolute;
	margin-left: 80px;
	margin-top: 142px;
	width: 609px;
	background-image: url(../images/img_schaf.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
	min-height: 100%;
	*height: 100%;
}
div#footer {
	position: absolute;
	margin-top: 20px;
	width: 100%;
	height: 16px;
	background-image: url(../images/img_footer_bg.gif);
	background-repeat: repeat-x;
}

Freue mich über jede Hilfe, Danke!
Matthias
 
Hi,

positionier mal die IDs #header, #navigation, #headline, #content und #footer relativ:

Code: 
div#header {
        position: relative;
        margin-left: 0px;
        margin-top: 0px;
        width: 769px;
        height: 76px;
}
div#navigation {
        position: relative;
        margin-left: 0px;
        /*margin-top: 76px;*/ /* auskommentiert = deaktiviert */
        width: 769px;
        height: 16px;
}
div#subnavgigs {
        position: absolute;
        margin-left: 446px;
        margin-top: 0px;
        width: 81px;
        height: 45px;
        visibility:hidden;
}
div#subnavgallery {
        position: absolute;
        margin-left: 527px;
        margin-top: 0px;
        width: 81px;
        height: 45px;
        visibility:hidden;
}
div#headline {
        position: relative;
        margin-left: 10px;
        /*margin-top: 92px;*/ /* auskommentiert = deaktiviert */
        width: 107px;
        height: 50px;
}
div#content {
        position: relative;
        margin-left: 80px;
        /*margin-top: 142px;*/ /* auskommentiert = deaktiviert */
        width: 609px;
        background-image: url(../images/img_schaf.gif);
        background-position: bottom right;
        background-repeat: no-repeat;
        min-height: 100%;
        height:auto !important;
        height: 100%;
}
div#footer {
        position: relative;
        margin-bottom: 20px;
        width: 100%;
        height: 16px;
        background-image: url(../images/img_footer_bg.gif);
        background-repeat: repeat-x;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück