Avatar billede reginho Nybegynder
12. november 2006 - 15:01 Der er 12 kommentarer og
2 løsninger

Hvordan placerer jeg et div tag, indeni et andet div tag?

Hej


Jeg har lavet et fiv tag kaldet "Skal". Indeni skallen skal jeg have en række kasser/bokse placeret. Hvis jeg laver flg. kode:

<div id="Skal">
<div id="Fyld">
</div>
<div id="Menu">
</div>
<div id="Topbanner2">
</div>
</div>

Så virker det fint. Men hvis jeg lukker den øverste div tag:
<div id="Skal">
</div>
<div id="Fyld">
</div>
<div id="Menu">
</div>
<div id="Topbanner2">
</div>

Så fungerer det overhovedet ikke. Nogen der kan hjælpe med med en forklaring på hvorfor det opfører sig som det gør, og hvordan jeg får det lavet korrekt?

Siden kan ses her: www.regin.dk/cms



Mvh
Regin
Avatar billede notes2c Nybegynder
12. november 2006 - 15:32 #1
Tror ikke lige jeg forstår spm. Hvad mener du med "Men hvis jeg lukker den øverste div tag". For det andet SKAL du fjerne <?xml version="1.0" encoding="iso-8859-1"?> for ellers vil IE gå i quirkmode og så bliver det svært at få det ens i forskellige browsere.
Avatar billede jowii Nybegynder
12. november 2006 - 15:32 #2
Alle dine divs ligger i dit div id="skal". Den styrer de andre, fordi det er det overordnede element på din side.

Hvis du gør det som illustreret nederst i dit eksempel, så lukker du jo alle divs. Det vil sige du har 4 divs som passer sig selv.
Avatar billede jowii Nybegynder
12. november 2006 - 15:32 #3
Hvad øsnker du, hvorfor er det ikke rigtigt som illustreret, øverst?
Avatar billede reginho Nybegynder
12. november 2006 - 21:07 #4
Notes> Hvorfor skal jeg fjerne <?xml version="1.0" encoding="iso-8859-1"?> ? Skal jeg så ikke er statte det med noget andet? Jeg bruger et cms system der hedder joomla og det genererer vist selv den bid kode. Har fjernet det fra min index.php men med det resultat at ander ting på siden ikke virkede.
Med at lukke, mener jeg at jeg afslutter med at skrive </div>. Skal jeg lukke hver div tag med </div> eller skal jeg først lukke det hele når jeg har lagt alle de div tags ind, som jeg vil have inde i min "skal"?

Jowii> Årsagen til det ikke er rigtigt som øverst, er at når jeg viser siden i Firefox, så er der en ret stor forskel fra den måde det vises i IE på.
Avatar billede notes2c Nybegynder
12. november 2006 - 22:46 #5
Til og med IE6 vil browseren gå i qurirkmode. Dvs at den har en hel masse css bugs kendt helt tilbage fra tiderns morgen. IE7 går derimod ikke i quirkmode og så vil du få problemet der. Hvis du vil have det nemt så sørg for at browseren ikke går i quirkmode. Bare et godt råd. Mht dine divs så skal et div tag altid lukkes med et slut tag. I det øverste eks har div element indeholdende 3 div elementer. I det nederste har du bare 4 div elementer efter hinanden....
Avatar billede reginho Nybegynder
12. november 2006 - 22:50 #6
Okay ... men vil det sige at hver gang jeg har lavet et div tag, så skal det afsluttes med </div>?

Hvis det er sandt, hvordan kan jeg så placere "kasser" inde i et div tag? F.eks indeholder min "skal" 5 forskellige bokse, der skal floate rundt og placeres over og under hinanden ...
Avatar billede notes2c Nybegynder
12. november 2006 - 22:57 #7
Begge dine eks er valide, de kommer an på hvad du vil lave men brug float hvis dine kasser skal stå ved siden af hinanden, eller skriv præcis hvad du vil opnå. Så kan vi jo se om vi kan få det til at lykkes... Men er først tilbage i morgen
Avatar billede roenving Novice
13. november 2006 - 01:20 #8
Prøv at se det med indrykning:

<div id="Skal">
  <div id="Fyld">
    Her er fyld
  </div>
  <div id="Menu">
    Her er menu
  </div>
  <div id="Topbanner2">
    Her er topbanner2
  </div>
</div>

Så bliver det tydeligt, at i ovenstående er de andre div'er indlejret i den ydre, i nedenstående ligger de på samme niveau, altså udenfor hinanden ...

<div id="Skal">
  Her er skal
</div>
<div id="Fyld">
  Her er fyld
</div>
<div id="Menu">
  Her er menu
</div>
<div id="Topbanner2">
  Her er topbanner2
</div>
Avatar billede jowii Nybegynder
13. november 2006 - 11:23 #9
DEr er ikke nogle af dine divs der er forkerte. Kommer an på hvad du vil lave. Vil du lave mange elementer, eller vil du lave et større element, indeholdene, mindre elementer.

Det er svært at hjælpe dig mere, når du ikke fortæller hvad du gerne vil opnå.
Avatar billede jowii Nybegynder
13. november 2006 - 11:26 #10
Og jo. Du skal bruge en dtd, så du kan validerer dine sider.
Kig eventuelt her:

http://hjemmesideskolen.dk/html/elmnt/dtd.asp
Avatar billede bgo Nybegynder
13. november 2006 - 13:08 #11
"Hvis det er sandt, hvordan kan jeg så placere "kasser" inde i et div tag?"

Det er hvad du har i dit øverste eksempel. Der er det først div blevet lukket i bunden og overholder dermed kravene ;) Med roenvings indrykninger kan du se, at den øverste er lukket, og indeholder tre andre divs, der alle er lukkede og har noget indhold.
Avatar billede bgo Nybegynder
13. november 2006 - 13:16 #12
nåja, det der sker i den nederste er, at tidspunktet du lukker den første div er før der er lagt noget i den. Det er lidt som p tagget:

<p>her er noget tekst</p>
kontra
<p></p>her er noget tekst

I dit nederste eksempel svarer det til det nederste eksempel med p-tagget.
Avatar billede reginho Nybegynder
13. november 2006 - 21:09 #13
Hej Drenge

Jeg gik lidt i sort i går aftes og kodede så det meste om indtil kl. halv fire i morges. Nu har jeg (næsten) det design jeg vil have. Og jeg har endvidere også fået svar på mine oprindelige spørgsmål + jeg nu ved havd quirksmode er.. Jeg er blevet noget mere opmærksom på hvad doctype er og hvordan det skal forstås, selvom jeg endnu ikke er helt inde i det.

Jeg kan nu også se, at en a problemerne med mit gamle design, var at jeg ikke havde forstået hvordan jeg placerer div tags ordentligt. Det tror jeg at jeg har bedre styr på nu. Så ... jeg lukker og giver point :)
Avatar billede bgo Nybegynder
14. november 2006 - 00:29 #14
Great :) Every day is a learning experience ;)
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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