DIV's som finner størrelse selv

Finnduz · 13. desember 2008

Hei,

Har et lite problem. Problemet mit er at jeg har en banner på 800px men på hver side skal jeg ha en div box som skal inneholde en spesefikk bakgrunn. Men, jeg trenger en måte å få div boxene til å "automatisk" sjekke bredden selv, se her f.eks

Hvordan kan jeg gjøre dette med css? jeg prøvde med "width: auto;" men kom ikke så langt med noe av det jeg prøvde.. noen forslag?

plusminus · 13. desember 2008

Dersom div1 og div2 skal inneholde samme bakgrunn kan du la de flyte over hele lengden og legge banneret over.

Skagen · 13. desember 2008

Om jeg ikke misforstår deg, så er det enklest slik plusminus foreslår at du lager f.eks en body-tag som fyller ut hele siden, og inni den legger du en banner-DIV-tag.

CSS:

.body {
width: 100%;
background-image: url('bakgrunnsbilde.jpg')
}

#banner {
margin-left: auto;
margin-right: auto;
width: 800px;
}

HTML:

<html>
<head>
</head>
<body class="body">
	<div id="banner">
	</div>
</body>
</html>

Endret 13. desember 2008 av Skagen

Finnduz · 13. desember 2008

Nei, dette går ikke. fordi, bakgrunnen skal matche opp med selve banneren. Den er ikke lik på venstre og høyre side. Hvis dette hadde vært likt kunne jeg bare lagd en bakgrunn av banneren men det kan jeg altså ikke. Derfor trenger jeg en div på hver side av banneren.

ThomasQ · 14. desember 2008

Nei, dette går ikke. fordi, bakgrunnen skal matche opp med selve banneren. Den er ikke lik på venstre og høyre side. Hvis dette hadde vært likt kunne jeg bare lagd en bakgrunn av banneren men det kan jeg altså ikke. Derfor trenger jeg en div på hver side av banneren.

Javel, da bruker du float.

Rinox · 14. desember 2008

Eneste måten jeg tenker du kan gjøre dette på er ved å sette en spesifikk bredde på layouten din. Ellers kan du bruke Javascript eller noe for å finne ut hva skjerm-oppløsningen er og jobbe deg videre derfra.

.body {
width: 1200px;
background-image: url('bakgrunnsbilde.jpg')
}

#banner {
margin-left: auto;
margin-right: auto;
width: 800px;
}

#venstre {
float: left;
width: 200px;
}

#hoyre {
float: right;
width: 200px;
}

Logg inn

DIV's som finner størrelse selv

Anbefalte innlegg

Finnduz

Videoannonse

plusminus

Skagen

Finnduz

ThomasQ

Rinox

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer