css: innhold i div i bunn og header øverst

Fløffi · 7. august 2006

Hvordan får man innholdet (teksten) til å ligge i bunnen av en div? finner ikke ut, og har søkt masse. Finner bare hvordan man legger et bakgrunnsbilde i bunn :mad:

Endret 7. august 2006 av Fløffi

Kannutt · 7. august 2006

Hvordan får man innholdet (teksten) til å ligge i bunnen av en div? finner ikke ut, og har søkt masse. Finner bare hvordan man legger et bakgrunnsbilde i bunn

6627133[/snapback]

Tror vertical-align: bottom; funker. Mulig at det kun virker dersom du har definert høyde på diven.

haugsand · 7. august 2006

CSS-egenskapen vertical-align kan ikke brukes til dette, med mindre det er snakk om en tabell-celle.

Fløffi: Hvordan ser div-en din ut? Har den fast høyde?

Fløffi · 7. august 2006

Nei, ikke en tabell-celle.

det er en div som ser slik ut:

#header {             
background: url('gfx/header.jpg') no-repeat top;
height: 217px;
width: 917px;
margin-top: auto;
padding: 0px;
}

der jeg skal ha en meny i bunnen av headeren.

tror jeg fikk header-menyen til å ligge i bunnen med

#headermenu{
margin-left: 200px;
min-height: 10px;
margin-top: 200px;
margin-bottom: 0px;
}

nå er problemet at headeren legger seg på midten av siden :w00t: -om jeg ikke setter på en border:1px solid; på headeren. Skjønner ingen ting. Det er et Firefox-problem. Har ikke begynt å løse problemer i IE enda. Gleder meg.

limer inn hele koden jeg:

* {
margin: 0;
padding: 0;
}

html {
background: url("gfx/mainbg.jpg") fixed top center;
height: 100%;
width: 100%
}

body {
background: url("gfx/writebg.jpg") fixed top center repeat-y;
min-height: 100%;
height: 100%;
font-family: verdana;
letter-spacing: 0.5px;
}

.clear {
 height: 1px;
 overflow: hidden;
 clear: both;
}

#wrap {
width: 920px;
min-height: 100%;
margin-top: 0;
margin-right: auto;
margin-left: auto;
}

#header {             
background: url('gfx/header.jpg') no-repeat top;
height: 217px;
width: 917px;
margin-top: auto;
padding: 0px;
}

#headermenu {
margin-left: 200px;
min-height: 10px;
margin-top: 200px;
margin-bottom: 0px;
border:1px solid red;
}

#headermenu ul {
list-style: none;
line-height:19px;
font-size: 10px;
text-align: center;
}

#headermenu ul li {
margin-left: 0;
padding: 0px 18px !important; 
border-left: 1px solid #000;
list-style: none;
display: inline;
}

#headermenu ul li.first {
margin-left: 0;	
border-left: none;
list-style: none;
display: inline;
}

#headermenu li a {
color: #000000;
text-decoration: none;
}

#headermenu li a:hover {
color: #777;
}

#contents {
padding:0px;
width: 655px;
float: right;
margin-right: 20px;
}

#contents p {
font-size: 10px;
padding: 0px;
line-height: 1.7;
font-weight:normal;
}

#contents p a {border-bottom: dashed 1px; text-decoration: none;}
#contents p a:link {color: #FF0000;}
#contents p a:visited {color: #00FF00;}
#contents p a:hover {color: #FF00FF}
#contents p a:active {color: #0000FF}

#contents h1 { 
margin-top: 0px;
margin-bottom: 0px;
padding: 0;
line-height: 1.7;
text-transform: uppercase;
font-size: 12px;
}

#contents h2 { 
margin-top: 10px;
margin-bottom: 0px;
padding: 0;
line-height: 1.7;
text-transform: uppercase;
font-size: 10px;
}

#menu {
float: left;
margin-left: 21px;
padding:0px;
voice-family: "\"}\"";
voice-family:inherit;
width:200px;
font-weight:normal;
}

#menu ul {
list-style: none;
font-size: 10px;
}

#menu ul li {
padding: 0 9px !important;
margin: 0px !important;
line-height:17px;
}

#menu li a {
color: #000000;
text-decoration: none;
}

#menu li a:hover {
color: #777;
}

har ikke fått domenet opp enda så legger med 2 printscreens av hvordan det ser ut:

vanlig kode:

og når jeg legger til border:1px solid red; i header diven:

Her er index-fila:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Wraeaea</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<body>

<div id="wrap">

<div id="header">
<div id="headermenu">
<ul>
<li class="first"><a href=#>PSP7</a></li>
<li><a href=#>HTML</a></li>
<li><a href=#>CSS</a></li>
<li><a href=#>Animations</a></li>
<li><a href=#>Guest tutorials</a></li>
<li><a href=#>Free stuff</a></li>
<li><a href=#>Links</a></li>
</ul>
</div>
</div>


<div id="contents">

<h1>Header</h1>
<h2>Header 2</h2>
<p>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
</p>

<h2>Header 2</h2>
<p>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
</p>
</div>

<div id="menu">
<ul>
<li><a href=#>link</a></li>
<li><a href=#>link</a></li>
<li><a href=#>link</a></li>
<li><a href=#>link</a></li>
</ul>
</div>

</div>
</body>
</html>

Endret 7. august 2006 av Fløffi

mikk- · 7. august 2006

Har aldri testet dette, men vil det ikke bare være å sette display: table-cell;? Eller er det en halvveisløsning?

haugsand · 7. august 2006

Har aldri testet dette, men vil det ikke bare være å sette display: table-cell;? Eller er det en halvveisløsning?

6631342[/snapback]

IE støtter dessverre ikke denne løsningen. :hrm:

Fløffi · 8. august 2006

Men hvorfor legger headeren seg på midten av sia? :dontgetit:

edit: ok, denne jækeln her

margin-top: 200px;

inni headermenu gjorde at banneren la seg under 200px.

men hvordan får jeg header menu til å ligge i bunnen av den head-diven? :hmm:

og denne, som jeg må ha på content for å få det til å ligge på høyre side: float: right;

får bakrunnsbildet til å slutte midt på sia. tar jeg akkurat den vekk, går bg-bildet helt ned til slutte av sia. det er jo fullstendig ulogisk :mad:

Endret 8. august 2006 av Fløffi

funkweb · 9. august 2006

hver gang jeg lager side, har jeg med universal selector for å gjøre meg sellv oppmerkksomhet at jeg på en måte starter 0.0

Altså helt i toppen/venstre.. så.

Da kan du jo forsette der ifra..

Svish · 10. august 2006

hva med å bare legge dem etterhverandre istedet for inni hverandre?

mener nemlig å huske at jeg slet med det samme på min hjemmeside. det å ha en header, og skulle legge menyen nederst inni. men droppa det til slutt, og putta denheller rett etterpå funka mye greiere og ser helt likt ut :w00t:

et annet tips kan vel være å kode litt saktere, for eksempel fra toppen og nedover, og så være sikker på at hver bit funker. nå vet du jo hvordan du vil ha det sånn ca, og har sikket laget grafikken og slikt du trenger, og da er det jo bare å starte fra scratch med ideene og grafikken det er i hvert fall mitt tips.. jeg er ikke ekstremt dreven på css liksom, så jeg koder litt mer.. sammen med css, enn bare å kode css

Fløffi · 11. august 2006

skjedde noe galt da jeg lasta opp svaret mitt. husker ikke hva jeg egentlig skrev :S takker for svar i allefall..

Endret 14. august 2006 av Fløffi

Svish · 11. august 2006

*ekko, ekko* :hmm:

Logg inn

css: innhold i div i bunn og header øverst

Anbefalte innlegg

Fløffi

Lenke til kommentar

Videoannonse

Kannutt

Lenke til kommentar

haugsand

Lenke til kommentar

Fløffi

Lenke til kommentar

mikk-

Lenke til kommentar

haugsand

Lenke til kommentar

Fløffi

Lenke til kommentar

funkweb

Lenke til kommentar

Svish

Lenke til kommentar

Fløffi

Lenke til kommentar

Svish

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Trump 2025 1 2 3 4 51

Hvem er aktive 0 medlemmer