Avatar billede netsrac Praktikant
16. februar 2009 - 09:03 Der er 8 kommentarer

Div elementer med procent bredde + overlap

Hej

Er der ikke en måde hvorpå man kan tvinge en div med procent bredde til at blive større når indholdet fylder mere.

Se: http://web.jelling-bogtryk.dk/test/div.html

Billedet går henover overskriften i venstre kolonne, er der ikke en måde hvor man kan tvinge venstre kolonne til at blive større?

I får lige koden her også:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<style>
#left { float: left; width:20%}
#right { width: 80%; }
</style>

</head>
<body>

<div id="left">
<h1>Loreipsumdolorsitametconse</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui. Maecenas facilisis nisl vitae nibh. Proin vel est vitae eros pretium dignissim. Aliquam aliquam sodales orci. Suspendisse potenti. Nunc adipiscing euismod arcu. Quisque facilisis mattis lacus. Fusce bibendum, velit in venenatis viverra, tellus ligula dignissim felis, quis euismod mauris tellus ut urna.
</div>
<div id="right">

<img src="sunset.jpg">
</div>


</body>
</html>
Avatar billede olebole Juniormester
16. februar 2009 - 10:33 #1
<ole>

Nok ikke uden brug af claivoyance attributten  ;o)

Hvordan skulle browseren vide, hvor store elemeterne så skal være?

/mvh
</bole>
Avatar billede netsrac Praktikant
16. februar 2009 - 11:47 #2
Hvilke værdien kan man give claivoyance attributten? :)

Jamen det ved jeg da ikke hvordan den skulle regne ud, på en eller anden måde. Hvis man laver det i en tabel, så finder den jo ud af at tilpasse sig.

Hvad gør man så når man skal lave noget som har en høj grad af tilgængelighed og layoutet skal tilpasse sig når man f.eks. skalerer teksten?
Avatar billede olebole Juniormester
16. februar 2009 - 12:55 #3
Nu blander du to scenarier sammen  ;o)

Tekst skalering tillader du ved at bruge 'em':

<style type="text/css">
#left { float: left; width:20em}
</style>

- men det løser ikke det andet problem, at én eller anden kan finde på at skrive en vanvittig lang overskrift uden mellemrum  ;o)
Avatar billede netsrac Praktikant
16. februar 2009 - 14:23 #4
Ved nu ikke helt om jeg blander 2 scenarier sammen, problemet opstår fordi jeg har et div baseret site, hvor alle tekststørrelser er angivet i em og hvis man kører normal browser indstilling ser det fint ud, men skalerer man teksten meget op, "forsvinder" noget af teksten.

Kan man ikke få div elementet til at opføre sig som tabellen gør? Se f.eks. http://web.jelling-bogtryk.dk/test/div.html hvor jeg har indsat en tabel under div elementerne som ser ud som jeg gerne vil have det.

Altså at størrelsen skal opfattes som en minimum størrelse, men hvis indholdet er større så stjæler den noget plads fra de andre elementer?
Avatar billede olebole Juniormester
16. februar 2009 - 15:20 #5
Dit ene problem (det, som du omtaler og viser i spørgsmålet) handler om en meget lang, ubrudt tekst i venstre kolonne.

Det andet problem handler om skalering af tekst. I den forbindelse forstår jeg ikke helt, hvorfor du ikke forholder dig til det, jeg viste dig  =)
Avatar billede netsrac Praktikant
17. februar 2009 - 14:06 #6
Hej Ole

Kan vi starte forfra? Så vidt jeg ved bruges em betegnelsen til at angive størrelser relativt til normalen, altså hvor 1em = normal og 1.1em svarer til normal gange 1,1.

Det jeg vil frem til er om jeg kan få et div til at opføre sig som en kollonne i en tabel.

Jeg har ændret lidt på siden http://web.jelling-bogtryk.dk/test/div.html - øvert en div opsætning, nederst en tabel.

Når browseren står på textside medium så ser begge dele fint ud, hvis jeg så vælger textsizse largest så bliver overskriften ædt i div eksemplet, men tabellens venstre kolonne bliver bare større.

Kan jeg komme ud over det?
Avatar billede olebole Juniormester
17. februar 2009 - 14:45 #7
Du kan ikke få div til opføre sig som en tabel - eller omvendt. Tabeller er tabeller og div er div. Hvis du skal bruge en tabels egenskaber, bruger du naturligvis en tabel. Hvis du ønsker et divs egenskaber, bruger du det  =)

Den lange, ubrudte overskrift, kan CSS f.eks. ikke tage højde for, når du bruger floatede divs - og slet ikke med en relativ bredde
Avatar billede netsrac Praktikant
16. november 2010 - 21:18 #8
Ole, smider du ikke et svar, vil gerne give point for din hjælp og ha lukket spørgsmålet.
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