Gå til innhold

Noen pixler for mye. html css

Gjest Slettet-IHWlGMJn

Av Gjest Slettet-IHWlGMJn
i Programmering og webutvikling

Anbefalte innlegg

Gjest Slettet-IHWlGMJn

Gjest Slettet-IHWlGMJn

Skrevet
Skrevet (endret) 

CSS
div.rightimg {
margin-left: 10px;
background-color: #e9d91d;
padding: 2px;
font-size: 11px;
float: right;
}

HTML
<div class="rightimg" style="border: 1px solid #f00;"><img src="URL" /></div>

Som du ser på bildet er det 5px under bildet og 2px rundt på alle andre sider. Hvorfor kommer de 3 ekstra nederst??

La til den røde kanten sånn at den synes bedre på bildet

post-57766-1182610400_thumb.jpg

Endret av Slettet-IHWlGMJn

Videoannonse

Videoannonse
Annonse
Gjest Slettet-IHWlGMJn

Gjest Slettet-IHWlGMJn

Skrevet
Skrevet (endret)
Har du stilisert IMG-elementet andre stader i dokumentet?

8929212[/snapback]

Nei.. da ville jeg vel egentlig posta det :whistle:

 

Prøvde å feilsøke litt og kom fram til at dette gir bug:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<div style="margin-left: 10px; background-color: #e9d91d; padding: 2px; font-size: 11px; float: right; border: 1px solid #f00;"><img src="bilde" /></div>

Og dette gir ikke:

<div style="margin-left: 10px; background-color: #e9d91d; padding: 2px; font-size: 11px; float: right; border: 1px solid #f00;"><img src="bilde" /></div>

Altså hvis jeg fjerner doctype. Noen ideer anyone? :hmm:

P.S. Skjer ikke i IE

 

EDIT: Leif: Koden som funker skal ikke ha doctype :dontgetit:

Endret av Slettet-IHWlGMJn
Gjest Slettet-IHWlGMJn

Gjest Slettet-IHWlGMJn

Skrevet
Skrevet (endret)
Last ned Developer Tools for Opera, eller Firebug for Fx

8931665[/snapback]

Kan jo alltids gjøre det, men siden denne bugen blir borte når jeg fjerner doctypen er det vel ikke til veldig mye hjelp?

Bare prøv selv.. det jeg posta i forrige post er den hele og fulle koden..

 

EDIT:

Øhh.. sorry. Har skjedd no mongo med forrige post. Koden som funker skal ikke ha doctype. Endrer det nå..

Endret av Slettet-IHWlGMJn
funkweb

funkweb

Skrevet
Skrevet

Jeg har testet litt og kommet opp med en løsning.

 

HTML:

<div id="root">
<div id="block"><img src="image/image.gif" alt="test" width="100" height="100" /></div>
</div>

 

CSS:

#root { width: 106px; } /* 100px + 2px + 2px + 1px +1px = 106px */
img  { float: right; }
div#block {
padding: 2px;
background-color: #e9d91d;
float: left;
display: block;
border: 1px solid #f00;
}

 

Nå er det ikke lenger luft under. Var dette noe du ville ha?

Gjest Slettet-IHWlGMJn

Gjest Slettet-IHWlGMJn

Skrevet
Skrevet
Jeg har testet litt og kommet opp med en løsning.

 

HTML:

<div id="root">
<div id="block"><img src="image/image.gif" alt="test" width="100" height="100" /></div>
</div>

 

CSS:

#root { width: 106px; } /* 100px + 2px + 2px + 1px +1px = 106px */
img  { float: right; }
div#block {
padding: 2px;
background-color: #e9d91d;
float: left;
display: block;
border: 1px solid #f00;
}

 

Nå er det ikke lenger luft under. Var dette noe du ville ha?

8940894[/snapback]

Hm.. det der var jo ganske mye som ga ganske så lite.. skjønner ikke helt hvorfor du har laget root og hvorfor du bruker block. Det som faktisk løser problemet ved bruk av din kode er pga at du floater bildet. Ikke skjønner jeg hvorfor det løser noe som helst, men så fatter jeg jo heller ikke hvorfor det er luft der i utgangspunktet :no:

funkweb

funkweb

Skrevet
Skrevet

Det var luft der i utgangspunktet fordi ting gikk rundt bildet.

Float løset problemet ja, #root satte jeg fordi da er den bred som du vil ha det, fjerner du den fyller den hele linjen.

Gjest Slettet-IHWlGMJn

Gjest Slettet-IHWlGMJn

Skrevet
Skrevet

Hva slags "ting" er det som gikk rundt bildet?

 

Saken med root'n du laga er at jeg ikke vil ha en fast bredde/høyde. Bildet skal kunne variere..

 

Det jeg vil ha er en boks med et bilde som enten skal stå til venstre eller høyre. Det skal også være mulighet for å skrive en liten tekst til boksen.

 

Har sitti og koda litt og kommet fram til dette. Eneste problemet her er jo at du ikke kan skrive så mye før teksten blir bredere enn bildet.

test.html

Fløffi

Fløffi

Skrevet
Skrevet (endret)

Så rart :/ kan du ikke definere padding: 2px; padding-bottom: 2px !important; padding-bottom: 0;? så lurer du dumme IE :)

Endret av Fløffi
Gjest Slettet-IHWlGMJn

Gjest Slettet-IHWlGMJn

Skrevet
Skrevet
Så rart :/ kan du ikke definere padding: 2px; padding-bottom: 2px !important; padding-bottom: 0;? så lurer du dumme IE :)

8968844[/snapback]

Er ikke IE som gjør no feil her faktisk da. Ser faktisk ut sånn som jeg vil i IE, mens FF og opera gir en tre piksler for mye :ermm:

Kiman™

Kiman™

Skrevet
Skrevet

Kommer jo an på om den vises riktig i IE6 eller 7 det. Litt merkelig avgjørelse av Microsoft å støtte den, men allikvel har jeg opplevd minimalt med problemer i IE7, så det er kanskje ikke så dumt allikevel.

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...