andgob Skrevet 9. juni 2010 Del Skrevet 9. juni 2010 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
greygenic Skrevet 9. juni 2010 Del Skrevet 9. juni 2010 Kopierte all koden din, og den funker "fint" den, footeren er jo synlig. Lenke til kommentar
NeEeO Skrevet 9. juni 2010 Del Skrevet 9. juni 2010 wooooooooooooooooooooooooooooowwwww, så bra side!!! Lenke til kommentar
andgob Skrevet 10. juni 2010 Forfatter Del Skrevet 10. juni 2010 (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 10. juni 2010 av andgob Lenke til kommentar
greygenic Skrevet 10. juni 2010 Del Skrevet 10. juni 2010 (endret) Var det dette du mente: Og du vil heller ha det sånn, eller: Isåfall tror jeg ikke du kan ha fastbestemt høyde for 'right' div. Endret 10. juni 2010 av greygenic Lenke til kommentar
andgob Skrevet 10. juni 2010 Forfatter Del Skrevet 10. juni 2010 Nettopp. Noen forslag til hvordan jeg kan få det til å se likt ut uten å bruke denne slags koding? Lenke til kommentar
greygenic Skrevet 10. juni 2010 Del Skrevet 10. juni 2010 (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 10. juni 2010 av greygenic Lenke til kommentar
andgob Skrevet 10. juni 2010 Forfatter Del Skrevet 10. juni 2010 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
Anbefalte innlegg
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 kontoLogg inn
Har du allerede en konto? Logg inn her.
Logg inn nå