sammenklappet <div>

Tags:    css

Hej

Jeg sidder her med, hvad man vist kan kalde et totalt newbie/noob CSS-problem.

Jeg har et billed som jeg ønsker at benytte som baggrundsbilled i en header.

Problemet:

Er at min div er "klappet sammen" og det er selvom jeg, i mit CSS dokument, har linket til det billed jeg ønsker at få vist.

Fold kodeboks ind/udCSS kode 


Jeg har hverken givet den højde eller bredde, da jeg ikke mener dette skulle være nødvendigt - div'en burde da fylde hele sidens bredde (hvilket den gør !) når man ikke angiver en bredde til den og højden er jeg da ganske sikker på bliver lig med højden på det (billed) man lægger ind i den, når man ikke har specificeret en bestemt højde.

1. Jeg har prøvet at skrive lidt tekst inde i div'en og så åbner den sig og gøre plads til teksten - som jeg forventede.

2. jeg har prøvet at specificere en højde på div'en og kan se billedet - det er der altså "hul igennem" (linket til billedet virker !)

Så hvorfor er div'en "klappet sammen" ? - hvad er det jeg har overset/misforstået ?



4 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 2 karma
Sorter efter stemmer Sorter efter dato
En div er et block-element, og block-elementer er altid 100% bredden af deres parent, altså det element der omslutter block-elementet.

Højden er som udgangspunkt 0px og skal sættes af dig selv. Hvis den bare skal være højden af indholdet betyder det ikke noget, men det kommer som regel til at se dumt ud hvis den kun lige omkranser en tekst for eksempel.

Så for at fixe dit problem kan du evt. skrive noget indhold i din header, og tilføje noget padding ellers kan du bare sætte den ønskede højde, som jeg, ud fra det du har skrevet, går ud fra er højden af dit billede. :-)

Mvh. Andreas Voss



Det er fordi dit baggrundsbillede er blot "baggrunden" for det du fylder i den, og dit indhold skal derfor definere størrelsen på din div.
Da du ikke har noget indhold er der ikke noget der definerer størrelsen.
Din baggrund er ikke noget direkte indhold, men blot styling og definerer derfor intet omkring størrelse.
Hvis du vil have din div til tilpasse sig til størrelsen på dit billede skal du have det som aktivt indhold - altså med et <img>-tag til dit billede.
Teksten kan så blive absolut hvis du vælger den sidste løsning, og vil derfor komme "udenpå" dit billede.



En div er et block-element, og block-elementer er altid 100% bredden af deres parent, altså det element der omslutter block-elementet.

Højden er som udgangspunkt 0px og skal sættes af dig selv. Hvis den bare skal være højden af indholdet betyder det ikke noget, men det kommer som regel til at se dumt ud hvis den kun lige omkranser en tekst for eksempel.

Så for at fixe dit problem kan du evt. skrive noget indhold i din header, og tilføje noget padding ellers kan du bare sætte den ønskede højde, som jeg, ud fra det du har skrevet, går ud fra er højden af dit billede. :-)

Mvh. Andreas Voss


Hej

Tak for dit svar.

Jeg er med på at højden som udgangspunkt er 0px, hvis:

1. der ikke er noget indhold i div'en.

2. man ikke har specificeret nogen højde for div'en.

Jeg kan sagtens specificere en højde/height til div'en, men ønsker ikke dette, da jeg gerne vil bruge så få absolutte størrelser som muligt og derved lade indholdet bestemme højderne.

Jeg er stadigvæk ikke blevet helt klog på, hvorfor min div ikke tager højden fra mit baggrundsbilled ?




Fordi dit baggrundsbillede ikke nødvendigvis skal fylde din div ud.

Den måde du skal gøre det på er at angive dimensioner for din div, der er ingen anden måde at få dit baggrundsbillede vist korrekt på.

Den alternative måde er at indsætte et <img> tag inden i din div, på denne måde vil div'en blive ligeså stor som dit billede. Men så ryger ideen lidt i det, da det jo ikke er et baggrundsbillede mere.

Jeg forstår ærligt talt ikke hvorfor du ikke ønsker at angive width/height på et element? I dette tilfælde giver det ingen mening som jeg ser det.



t