Gå til innhold

Hvordan får jeg footer på bunnen på denne siden?

andgob

Anbefalte innlegg

andgob

andgob

Skrevet
Skrevet

Hei,

 

Jeg har kodet mesteparten av en webside, men jeg får rett og slett ikke til å putte footeren nederst på siden. Jeg har kanskje kodet litt kludrete siden jeg har brukt position: absolute; på hoveddelen av siden. Derfor lurer jeg rett og slett på om noen kunne hjulpet meg med å plassere footeren nederst.

 

Legger ved css og html filene...

 

css:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {
margin:0;
padding:0;
} 

body {
font-size: 75%;
font-family:georgia, "times new roman", serif;
background: #dedede;
}

html>body {
font-size: 12px; 
}



#featured {
width: 940px;
height: 264px;
margin: 0 auto;
}

#featuredinside {
position: absolute;
top: 96px;
}

#main {
width: 940px;
margin: 0 auto; 
}

#right {
position: relative;
top: -23px;
background: #fff;
width: 298px;
height: 600px;
border: 1px solid #999;
margin: 0 0 20px 640px;
}

#top {
width: 100%;
height: 119px;
background: #000000;
background-image:url('../images/bg-top.gif');
background-repeat:repeat-x;
}

#left {
position: absolute;
top: 96px;
background: #fff;
width: 618px;
border: 1px solid #999;
margin: 0 0 2em 0;
}

#footer {
position: static;
width: 100%;
height: 50px;
background-color: #000000;
text-align: center;
color: #fff;
clear: both;
}

p {
font-size:1em;
line-height:1.5em;
margin:0 1.5em 1em 1.5em;
}

p span {
float: right;
}


h1 {
line-height:1em;
font-size:1.5em;
font-weight:normal;
margin:1em 0 0.5em 1em;
}
h2 {
line-height:1.5em;
font-size:1em;
font-weight:600;
padding:2em 0 0 0;
}

h3 {
line-height:1em;
font-size:1.5em;
font-weight:normal;
margin:1em 1em 0.5em 1em;
border-bottom: 1px dashed #ccc;
}

h3 span {
float: right;
}

.imageborder {
padding: 1px; 
border: 1px solid #999;
margin: 0 0 1em 0;
}

a#showreel { display: inline-block; width: 16px; height: 16px; background-image: url(/images/icons/showreel.png); background-position: 0 0; margin: 0 auto; }
a#showreel:hover { background-position: -16px 0; }

a#cv { display: inline-block; width: 16px; height: 16px; background-image: url(/images/icons/cv.png); background-position: 0 0; margin: 0 auto; }
a#cv:hover { background-position: -16px 0; }

a#email { display: inline-block; width: 16px; height: 16px; background-image: url(/images/icons/email.png); background-position: 0 0; margin: 0 auto; }
a#email:hover { background-position: -16px 0; }

a#facebook { display: inline-block; width: 16px; height: 16px; background-image: url(/images/icons/facebook.png); background-position: 0 0; margin: 0 auto; }
a#facebook:hover { background-position: -16px 0; }

a#lastfm { display: inline-block; width: 16px; height: 16px; background-image: url(/images/icons/lastfm.png); background-position: 0 0; margin: 0 auto; }
a#lastfm:hover { background-position: -16px 0; }

a#vimeo { display: inline-block; width: 16px; height: 16px; background-image: url(/images/icons/vimeo.png); background-position: 0 0; margin: 0 auto; }
a#vimeo:hover { background-position: -16px 0; }



a .alt { display: none; }



#nav-menu ul {
list-style: none;
}

#nav-menu li span {
font-size: 10px; color: #666; font-family: Arial;
}

#nav-menu li span:hover {
font-size: 10px; color: #999; font-family: Arial;
}

#nav-menu li {
float: right;
}

#nav-menu li a {
float: left;
width: 100px;
height: 96px;
display: block;
color: #ffffff;
text-decoration: none;
text-align: right;
margin: 0;
padding: 0 1em 0 0;
}

#nav-menu li a:hover {
background-image:url('../images/bg-top-hover.gif');
background-repeat:repeat-x;
color: #dbc0c0;
}


/* Hide from IE5-Mac \*/
#nav-menu li a {
float: none
}
/* End hide */

#nav-menu {
width: 940px;
height: 264px;
margin: 0 auto;
}

 

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

 <title>testsite</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

	<link rel="stylesheet" type="text/css" href="css/style.css" />

	<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
	<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>

	<script src="js/jquery.kwicks-1.5.1.js" type="text/javascript"></script>

	<script type="text/javascript">
		$().ready(function() {
			$('.kwicks').kwicks({
				max : 700,
				spacing : 20
			});
		});
	</script>

</head>
<body>

<div id="top">

<div id="nav-menu">
<ul>
	<li><a href="about.php" class="grid_1"><h2>ABOUT</h2><span>Who are we?</span></a></li>
	<li><a href="forums.php" class="grid_1"><h2>FORUMS</h2><span>Talk madness</span></a></li>
	<li><a href="authors.php" class="grid_1"><h2>AUTHORS</h2><span>Our portfolios</span></a></li>
	<li><a href="films.php" class="grid_1"><h2>FILMS</h2><span>All our clips</span></a></li>
	<li><a href="index.php" class="grid_1"><h2>HOME</h2><span>Frontpage</span></a></li>
</ul>
</div><!-- nav-menu end -->

</div><!-- top end -->

<div id="main">
<div id="left">

	<p>Hovedinnhold</p>

</div><!-- left end -->

<div id="right">

	<p>right</p>

</div><!-- right end -->

</div><!-- main end -->

<div id="footer">
Dette er footer
</div><!-- footer end -->

</body>
</html>

 

Beklager det lange innlegget, håper noen med litt bedre peil enn meg forstår hva jeg har gjort.

 

Takk

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
andgob

andgob

Skrevet
  • Forfatter
Skrevet (endret)

Hvis man fyller inn ting i "left" eller "right" så blir det styr.

 

Footeren er festet til den høyre kolonnen på en måte så den blir automatisk hengende under den (altså ikke på bunnen av siden hvis "left" er lang).

 

Forslag?

 

Håper ikke noen stjeler designet mitt nå..

Endret av andgob
Lenke til kommentar
greygenic

greygenic

Skrevet
Skrevet (endret)

Nettopp.

 

Noen forslag til hvordan jeg kan få det til å se likt ut uten å bruke denne slags koding?

Jeg bruker kun absolutte verdier når jeg f.eks. skal lage en drop-down sak eller lignende, og derfor slipper jeg mye herk.

 

Hadde jeg vært deg tror jeg nok at jeg heller satset på å få det dynamisk, men nå har ikke jeg studert koden din noe særlig og kan derfor ikke bastant slå fast at det vil være den beste løsningen.

 

Du får bare prøve å fordele innholdet så godt du kan, eventuelt forandre på padding/margin og tekststørrelse for å jevne det ut

 

edit: Bruker du forresten Dreamweaver, eller lignende? De filnavnene virket kjente..

(Skriver som regel all kode i notisblokk jeg..)

Endret av greygenic
Lenke til kommentar
andgob

andgob

Skrevet
  • Forfatter
Skrevet

Jeg bruker bare notepad. Er bare sånn jeg har startet å kode/navngi ting.

 

Jeg skal prøve litt forskjellige ting, tror det kan være litt vanskelig å få footeren til å fungere dynamisk sånn som jeg har satt det opp nå. Virker ikke som om footeren er "under" hovedboksen på en måte, den plasserer seg bare ettersom hvor høy høyre kolonna er.

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...