Søg
Avatar billede dennism Nybegynder
25. september 2008 - 19:06 Der er 20 kommentarer og
2 løsninger

HTML: Problem med float

Jeg har et lille eksempel liggende her:
http://demaweb.dk/uploads/float.html

Som I kan se, så har jeg et margin-right på billedet på 30px. Teksten overholder denne margin, men som I kan se, så opfylder baggrunden i div-boksen ikke denne margin.

Hvad gør jeg forkert?
Avatar billede w13 Novice
25. september 2008 - 19:53 #1
Marginen påvirker bare ikke teksten i boksen. Du må nok sætte marginen på boksen i stedet.
Avatar billede dennism Nybegynder
25. september 2008 - 20:19 #2
Jeg fik det vist ikke forklaret godt nok. Prøv at se linket igen:
http://demaweb.dk/uploads/float.html

Jeg har sat en border på mit div. Som I kan se, så kan man ikke se den venstre side af div'et fordi det ligger bagved billedet. Meningen er, at det skal stå til højre for billedet på linie med teksten.

Hvad er det galt?
Avatar billede w13 Novice
25. september 2008 - 20:46 #3
Ja, du mangler at sætte marginen på boksen i stedet for på billedet.
Avatar billede dennism Nybegynder
25. september 2008 - 20:53 #4
Jeg har sat en margin på 30px på div-boksen?
Avatar billede w13 Novice
25. september 2008 - 21:15 #5
Den skal have sat margin helt ud til kanten af siden. Dvs. billedets bredde + 30.
Avatar billede dennism Nybegynder
25. september 2008 - 21:53 #6
Ja, det virker - men det er ikke særlig hensigtsmæssigt, da jeg ikke altid ved hvilken bredde billedet har. Finder der ikke en måde at løse det på, uden at kende billedets bredde?
Avatar billede w13 Novice
25. september 2008 - 23:05 #7
Så vidt jeg ved kun JavaScript. Ellers skal det bygges helt anderledes op.
Avatar billede w13 Novice
25. september 2008 - 23:06 #8
Prøv at lægge alle de andre elementer end billedet i en div, som du også floater f.eks.
Avatar billede dennism Nybegynder
25. september 2008 - 23:12 #9
Jeg vil også gerne have, at teksten flyder UNDER billedet hvis den er længere end billedet er højt - hvis du forstår.
Avatar billede w13 Novice
26. september 2008 - 11:48 #10
Det skulle gerne komme mener jeg.
Avatar billede roenving Novice
27. september 2008 - 11:08 #11
Hvorfor har du ikke bare billede og tekst i samme boks, så kan billedet alignes til venstre og teksten flyde rundt om !-)

-- skal du have special-effekter inde i teksten kan du jo bruge f.eks. p- eller span-tags, som du styler ...
Avatar billede dennism Nybegynder
27. september 2008 - 11:17 #12
Jeg forstår ikke helt hvad du mener. Kan du ikke give et eksempel?
Avatar billede w13 Novice
27. september 2008 - 11:50 #13
<div>

<img style="float:left" ...>

tekst her

</div>
Avatar billede roenving Novice
27. september 2008 - 11:56 #14
F.eks.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fremhæv i omkringflydende tekst</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#minDiv{width:400px;}
.fremhaev{background-color:#aad;padding:3px;}
</style>
</head>
<body>
<div id="minDiv"><img src="http://www.eksperten.dk/img/elogo.png" style="width:99px;float:left;margin:0 5px 5px 0;">
En div-tekst<br>
-- og noget mere tekst<br>
<span class="fremhaev">Og denne tekst skal være speciel, da den skal fremhæves ved at have en særlig baggrundsfarve, evt. kunne man også style den med f.eks. kursiv eller border !-)</span><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lectus elit, sagittis at, accumsan id, dictum et, erat. Etiam non sapien. Quisque aliquet gravida mi. Integer vitae tortor quis wisi scelerisque vestibulum. Duis pulvinar magna non mauris laoreet volutpat. Aenean et purus. Cras accumsan justo sed arcu. Quisque urna. Sed mi. Ut sed nunc at lorem aliquet vulputate. Proin quis nibh. Proin ut dui vitae urna lacinia posuere. Ut vulputate purus facilisis nunc. Morbi ultrices euismod leo. Integer dui tellus, dictum in, viverra at, sagittis id, sem. Donec nonummy, sem eu hendrerit vulputate, nunc urna molestie eros, et semper nunc mi at ipsum. Praesent tempus malesuada felis.
</div>
</body>

</html>
Avatar billede dennism Nybegynder
29. september 2008 - 10:29 #15
Se koden her:
http://demaweb.dk/uploads/float.html

Problemer er, når jeg bruger et span, at boksen ikke vil fylder helt ud til højre siden. Hvordan får jeg den til det?
Avatar billede w13 Novice
29. september 2008 - 11:05 #16
width:100%;
måske?

Evt. også med en display:block; for at det fungerer ens i alle browsere.
Avatar billede roenving Novice
29. september 2008 - 14:35 #17
Hvilke browsere har du problemer i (det virker fint i min IE6 ?-)
Avatar billede dennism Nybegynder
15. december 2008 - 21:55 #18
Vil I smide et svar?
Avatar billede w13 Novice
16. december 2008 - 01:10 #19
Her er et fra mig, hvis det kunne bruges.
Avatar billede dennism Nybegynder
16. december 2008 - 08:35 #20
Mangler lige roenving
Avatar billede roenving Novice
19. december 2008 - 16:05 #21
Oki '-)
Avatar billede roenving Novice
19. december 2008 - 16:43 #22
-- og tak for point ;~}
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
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 13:53 Icloud mail via Outlook Af lbc i E-mail programmer
I går 08:32 USB NØGLE gratis Af nu_igen i Andet hardware
20/0121:11 Hvordan får jeg reCAPTCHA på min hjemmeside? Af Strawberry i PHP
20/0116:10 Tomt felt i Start Af ErikHg i Windows
19/0123:00 Hyperlink til tekst Af Nanarsi i Excel
White papers
Flere white papers »