Notifikationer

Markér alle som læst Log ud

jakobdo Ekspert

27. marts 2005 - 21:58 Der er 12 kommentarer og
1 løsning

Hvordan laver en div med flere div inden i

Som i nok efterhånden har regnet ud, så er jeg ved at lave en hjemmeside!

Den kan ses på denne side:

http://www.fb4.dk/testSide2.html

Hvorfor kan jeg ikke få DIV'en omkring login-div'erne til at være 6 px omkring alt?
I bunden er den forskellig, både i ff og ie!

Css kan ses her: http://www.fb4.dk/css/styleTest.css

Synes godt om

jakobdo Ekspert

27. marts 2005 - 22:22 #1

Hvordan laver man en div, som kan placeres static, hvor indhold f.eks. er 4 div, og som alle har 6px mellem sig, vandret eller lodret, og 6 px til kanten af hoved-div'en!
Jeg kan lave det med position:absolute, men indholdet kan variere, så derfor skal hoved-div'en kunne flyttes dynamisk!

Synes godt om

roenving Novice

27. marts 2005 - 22:28 #2

<div class="containerDiv">

</div>

-- og i stylesheet:

.containerDiv{
padding:6px;
}

.containerDiv div{
margin:6px;
}

Synes godt om

roenving Novice

27. marts 2005 - 22:34 #3

F.eks.

.containerDiv{
padding:6px;
width:55px;
background-color:#ffa;
}

.containerDiv div{
margin-top:6px;
width:55px;
background-color:#faf;
}

<div class="containerDiv">
<div>Tekst<br>Tekst</div>
<div> </div>
<div>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst <br>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst</div>
<div> </div>
</div>

Synes godt om

jakobdo Ekspert

28. marts 2005 - 09:41 #4

Roenving, dit sidste forslag var næsten ok!
I IE er den ok, men i FF har den 12px i toppen.
Hvorfor vil de ikke være ens i både IE og FF?

Her er alt min kode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Roenving CSS Test</title>
<meta http-equiv="Content-type" content='text/html; charset="iso-8859-1"'>
<style type="text/css">
.containerDiv{
padding:6px;
width:55px;
background-color:#ffa;
}

.containerDiv div{
margin-top:6px;
width:55px;
background-color:#faf;
}
</style>
</head>
<body>
<div class="containerDiv">
<div>Tekst<br>Tekst</div>
<div> </div>
<div>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst <br>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst</div>
<div> </div>
</div>
</body>
</html>

Synes godt om

roenving Novice

28. marts 2005 - 14:52 #5

-- så kan du måske bedre leve med at det er margin-bottom, som gør det ?-)

-- og hvis det giver en uacceptabel afstand i bunden heller, kan man i hvert fald bruge en mellemrumsting:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Roenving CSS Test</title>
<meta http-equiv="Content-type" content='text/html; charset="iso-8859-1"'>
<style type="text/css">
.containerDiv{
padding:6px;
width:55px;
background-color:#ffa;
}

.containerDiv div{
/* margin-top:6px;
width:55px;*/
background-color:#faf;
}
.containerDiv .mellemrum{
font-size:0;
line-height:0;
margin:0;
padding;0;
height:6px;
background-color:transparent;
}
</style>
</head>
<body>
<div class="containerDiv">
<div>Tekst<br>Tekst</div>
<div class="mellemrum"> </div>
<div> </div>
<div class="mellemrum"> </div>
<div>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst <br>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst</div>
<div class="mellemrum"> </div>
<div> </div>
</div>
</body>
</html>

Synes godt om

jakobdo Ekspert

28. marts 2005 - 14:58 #6

Dette ser ud til at kunne bruges:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Roenving CSS Test</title>
<meta http-equiv="Content-type" content='text/html; charset="iso-8859-1"'>
<style type="text/css">
.containerDiv{
padding:6px;
width:55px;
background-color:#ffa;
}

.containerDiv div{
background-color:#faf;
}

.containerDiv .mellemrum{
font-size:0;
line-height:0;
margin:0;
padding;0;
height:6px;
background-color:transparent;
}
</style>
</head>
<body>
<div class="containerDiv">
<div>Tekst<br>Tekst</div>
<div class="mellemrum"> </div>
<div>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst <br>Tekst<br>Tekst<br>Tekst<br>Tekst<br>Tekst</div>
</div>
</body>
</html>

Smid et svar roenving...
(hvorfor skal det være så besværligt?) :o(

Synes godt om

jakobdo Ekspert

28. marts 2005 - 15:21 #7

Pis, jeg fandt fejlen!
Min form skulle også have padding og margin 0px!
Men jeg takker stadig for hjælpen!

Synes godt om

roenving Novice

28. marts 2005 - 15:22 #8

Fordi en af problemerne i forskellen mellem de fortolkninger, de forskellige browsere anlægger, præcis er sådanne specielle hjørner af box-modellen ...

Her er problemet, at Gecko-maskinen åbenbart ikke accepterer at en padding og en margin, som støder op til hinanden lægges oveni hinanden, mens IE gør det ...

-- og vi er langt ude i et specielt hjørne af box-modellen, for hvis det havde været samme type property (som f.eks. margins !-) er der ikke nogen tvivl, for så skal de nemlig ovenpå hinanden, og den største værdi skal bruges ...

Velbekomme '-)

Synes godt om

roenving Novice

28. marts 2005 - 15:27 #9

-- og tak for point ;~}

Synes godt om

jakobdo Ekspert

28. marts 2005 - 19:50 #10

Har du lige lidt ekstra tid:

http://www.fb4.dk/udvikling/div.html

Siden her.
Hvordan får jeg min div: content til at udvide sig sammen med: leftContent,mainContent og rightContent ??

Skal jeg lave det anderledes end her?

Synes godt om

jakobdo Ekspert

28. marts 2005 - 19:52 #11

PS: I IE vises den som den skal.
I FF gør den ikke!
Der ses man slet ikke div'en: content.

Synes godt om

roenving Novice

29. marts 2005 - 05:13 #12

Min Mozillas og IEs eneste forskel er noget linjehøjde ...

Synes godt om

jakobdo Ekspert

29. marts 2005 - 07:55 #13

Jeg har også rettet i den siden hen. (jeg valgte tabel-løsningen)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS