Oprettet fre. d. 13. juli 2012 kl. 16:31:36

nicolaus
nicolaus (16.919 point. Point ude: 0)

img align burde være så nemt

http://cifly.dk/ (...) har jeg en udfordring. En ganske banal ting, syntes jeg, er blevet til noget besværligt noget.

Jeg har et billede hvor tilhørende tekst skal gå udenom. Normalt løses det jo med align:left/right, men her lader det ikke til at virke. Sætter jeg img til align="right", flyder billedet ud over de to divs med overskrifterne "Lorem Ipsum ..." og "Nyheder".

Hvorfor og hvad kan jeg gøre for at nå mit resultat?

Skrevet fre. d. 13. juli 2012 kl. 16:43:28| #1

olebole
olebole (216.743 point)
<ole>

Align på et billede er ikke gangbar. Du skal bruge CSS i stedet. Men hvorfor float'er du dine DIV? Float er formodentlig den mest misbrugte feature i CSS, og den skaber næsten altid problemer.

/mvh
</bole>

Skrevet fre. d. 13. juli 2012 kl. 16:45:20| #2

olebole
olebole (216.743 point)
- og så bør du altid holde dig fra at sætte dimansioner på BODY elementet. Det skaber også tit problemer  =)

Skrevet fre. d. 13. juli 2012 kl. 19:24:08| #3

nicolaus
nicolaus (16.919 point)
Jamen da jeg ikke er en haj til CSS endnu, fandt jeg skabelonen på nettet og den var lavet med float.

Kan du anbefale nogen gangbar rute for mig herfra så jeg får det design jeg har nu?

Og tak for respons i øvrigt :o)

Skrevet fre. d. 13. juli 2012 kl. 19:55:58| #4

olebole
olebole (216.743 point)
Ja, prøv at stille alle elementer op helt uden CSS. Så vil du stort set kunne få det til at se rigtigt ud.

Derefter tilføjer du meget forsigtigt det CSS, som er nødvendigt. Hvert eneste semikolon i koden skal være gennemtænkt og begrundet. Ellers farer du vild i koden og ved ikke, hvad der er skyld i hvad  =)

Skrevet fre. d. 13. juli 2012 kl. 20:06:58| #5

nicolaus
nicolaus (16.919 point)
Det har jeg så forsøgt. Men hvordan får jeg billedet højrestillet og teksten til at kryben rundt om?

<h1>indhold</h1>

<img src="http://4.bp.blogspot.com/ (...) alt="et billede" />

<p>noget tekst</p>

Skrevet fre. d. 13. juli 2012 kl. 20:16:00| #6

nicolaus
nicolaus (16.919 point)
Nej, nu fik jeg den til det vha. float:right; i selve img tagget i html. Og det funker. Men gør jeg det i CSS funker det ikke. Har opbygget det ganske stille og roligt. Fatter nul :o?

Skrevet fre. d. 13. juli 2012 kl. 20:19:36| #7

olebole
olebole (216.743 point)
Hvis tekst i P elementet skal løbe venstre om et billede, kan du give billedet float:right - og lægge det ind i P elementet

Skrevet fre. d. 13. juli 2012 kl. 20:23:38| #8

olebole
olebole (216.743 point)
"float:right; i selve img tagget i html" >> Det er helt i hegnet, og har intet med hverken HTML eller CSS at gøre.

Grunden til, at fatter nul, er, at du fatter nul af HTML og CSS. Drop sitet for nu og læs i stedet om helt grundlæggende HTML og CSS.

Skrevet fre. d. 13. juli 2012 kl. 20:56:33| #9

nicolaus
nicolaus (16.919 point)
float:right i selve img tagget fandt jeg her http://www.squidoo.com/ (...)

Jeg syntes ikke det er rigtigt jeg fatter nul af HTML og CSS. Det er rigtigt jeg er på nybegynder stadie og det er også rigtigt, at jeg ikke har fanget positionering. Jeg har læst om emnet forskellige steder, bl.a. på w3schools og andre steder. Måske er det bare mig, men det falder mig ikke nemt.

Men nu har jeg fået det til at virke med float:right defineret i CSS og nu kører det :o)

Skrevet fre. d. 13. juli 2012 kl. 20:58:22| #10

nicolaus
nicolaus (16.919 point)
NB. Link til førnævnte side, denne gange uden punktum efter link

http://www.squidoo.com/ (...)

Og lukker samtidig spørgsmålet.

Skrevet fre. d. 13. juli 2012 kl. 20:58:43| #11


Skrevet fre. d. 13. juli 2012 kl. 21:56:13| #12

olebole
olebole (216.743 point)
"float:right i selve img tagget fandt jeg her" >> Alle eksemplerne på det site viser float brugt som CSS. I CSS kan du sætte style properties i et stylesheet - men du kan også skrive dem i en style attribut i tagget. Begge dele er CSS  =)

I HTML - og uden CSS - ville det se sådan ud:

<img src="..." float="right">

- men det er ikke valid kode, og det virker ikke.

Da WWW har gjort det fantastisk let at publicere, er der desværre opstået en veritabel skov af sites om webkode, som er skrevet af folk, der ikke har en brik begreb om, hvad de skriver om.

Om det er tilfældet med hensyn til w3schools.com, eller om tumpen bag bare er en kynisk forretningsmand, er jeg ikke helt sikker på. Under alle omstændigheder er der tale om et dybt utroværdigt site, som mange - herunder W3C - ønsker langt ned i det varmeste Helvede!

Desværre kan det være overordentlig vanskeligt at finde troværdige sites om webkode på begynderniveau. Først når du når en del ind i faget, kan du finde brugbare sites. Det skyldes dels, at niveauet så er for højt til, at begyndere kan skrive om det - og dels at du så har den fornødne erfaring til at skille skidt fra kanel.

Skriv et indlæg




Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] [img]link til billede[/img]
Web- og emailadresser omdannes automatisk til links

Log ind

   


Seneste spørgsmål

List style ved linjeskift

Oprettet den 19. maj 2013 kl. 23.57
sarcar giver 60 point for svar | Giv et svar »

line.height

Oprettet den 19. maj 2013 kl. 18.16
ZeBa giver 30 point for svar | Giv et svar »

Fat footer skal fylde hele sidens bredde

Oprettet den 17. maj 2013 kl. 14.42
13thsky giver 60 point for svar | Giv et svar »








Tips & Tricks fra PC World

Teaser billede

Fem smarte funktioner i din Mac som du sikkert ikke kender

Her har du fem muligheder for at tweake din Mac på en fed måde.


Anmeldelser fra PC World

Teaser billede

Test: Samsung Galaxy S4 er et hit - trods gøglertricks

Kan Samsung beholde førertrøjen i det store Android-race? Galaxy S4 er smækfyldt med innovative funktioner, men også med en del gøgl. Er det for meget? Få vores dom over Samsungs nye topmodel.


Seneste blogindlæg

Teaser billede

Tvangslukke spørgsmål: Hvad er den bedste løsning?

Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...


Nyheder fra PC World

Teaser billede

Ny opfindelse: Oplad din mobil på 20 sekunder

Måske er det snart slut med at lade mobilen op hver aften. Med ny opfindelse kan telefonen få fuld energi på sølle 20 sekunder.


Nyheder fra Computerworld

Teaser billede

Sådan bliver Internet of Things til dit værste mareridt

ComputerViews: Internet of Things kan revolutionere vores samfund, skabe nye forretningsmuligheder og gøre din hverdag lettere. Men glemmer vi den enorme risiko, der er forbundet med at koble alt...


IT Kurser
Samarbejdspartnere

Udgiver · © 2013 IDG Danmark A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger