Avatar billede mr_bula Nybegynder
03. januar 2007 - 15:23 Der er 15 kommentarer og
2 løsninger

Img ved siden af img

Hejsa,

Jeg vil gerne have at mine billeder er helt ved siden af hinanden, og forstår ikke hvorfor det ikke kan lade sig gøre når man gør dette:
<a href="#"><img src="test.jpg" alt="test" /></a>
<a href="#"><img src="test.jpg" alt="test" /></a>
<a href="#"><img src="test.jpg" alt="test" /></a>

Her kommer der et mellemrum på et par pixels. Men det virker hvis jeg sætter koden efter hinanden.

<a href="#"><img src="test.jpg" alt="test" /></a><a href="#"><img src="test.jpg" alt="test" /></a><a href="#"><img src="test.jpg" alt="test" /></a>

Men jeg vil gerne have en mere overskuelig kode og ikke have vertikal kode i metervis, så mit spg lyder: Hvordan kan det lade sig gøre (CSS?)?

Bruger doctype xhtml 1.1, og har prøvet med:
margin: 0;
padding: 0;
display: inline;
Avatar billede mr_bula Nybegynder
03. januar 2007 - 15:25 #1
OBS
Billeder givet også et mellemrum under billederne på et par pixels. De skal væk ;)
Avatar billede windcape Praktikant
03. januar 2007 - 15:31 #2
img {
    vertical-align: bottom;
}

Fjerner mellemrummet under billederne. Det andet skal fjernes med et kigurisk indlæg.
Avatar billede mr_bula Nybegynder
03. januar 2007 - 15:46 #3
Jep den tager bunden - smid et svar...

Den anden må da også kunne løses?
Avatar billede windcape Praktikant
03. januar 2007 - 15:48 #4
Umidbart ikke, men typisk ville der være en smartere løsning. Kan du forklare hvorfor du skal have flere anchors med images in ved siden af eachother?
Avatar billede mr_bula Nybegynder
03. januar 2007 - 15:54 #5
Fordi jeg vil lave en slags thumb oversigt over nogle gallerier. Thumbsene skal så være lige ved siden af hinanden
Avatar billede windcape Praktikant
03. januar 2007 - 15:56 #6
Det vil da se grimt ud? Desuden er det bedre accessbility at have mellemrum, så folk kan se hvor de kan trykke og ikke.

Jeg er ikke engang sikker på der rent faktisk findes en løsning ;-)
Avatar billede mr_bula Nybegynder
03. januar 2007 - 16:01 #7
Tror det er smag og behag. Men i mit tilfælde vil det ikke se grimt ud ;) og i mit tilfælde skal jeg ikke tænke på brugervenlighed.

Og hvis billederne skal afgrænses vil jeg gøre det vha border.

Men anyway smid et svar. Du løste jo halvdelen af min problematik
Avatar billede mr_bula Nybegynder
03. januar 2007 - 16:05 #8
Kan man så gøre mellemrummet mindre? for synes det er for stort, tror det er 5 pixels
Avatar billede mclemens Nybegynder
03. januar 2007 - 18:55 #9
style="float:left;" ?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title><meta name="robots" content="index, follow">

<style type="text/css">
#gallery div {clear:both;}
#gallery a {float:left;}
</style>

</head><body>
<div id="gallery"><div>
<a href="#"><img src="test.jpg" alt="test" /></a>
<a href="#"><img src="test.jpg" alt="test" /></a>
<a href="#"><img src="test.jpg" alt="test" /></a>
</div><div>
<a href="#"><img src="test.jpg" alt="test" /></a>
<a href="#"><img src="test.jpg" alt="test" /></a>
<a href="#"><img src="test.jpg" alt="test" /></a>
</div></div>

</body></html>
Avatar billede mclemens Nybegynder
03. januar 2007 - 18:57 #10
#gallery a img {border:0px;}
mangler måske i ovenstående ...
Avatar billede mr_bula Nybegynder
04. januar 2007 - 15:07 #11
Hej clemens,

Nu er det bare sådan at jeg bruger doctype xhtml 1.1, men kan ikke ikke finde en løsning til den, så det endte med at jeg bare noget langt vetikalt kode :(

Smid begge et svar
Avatar billede mclemens Nybegynder
04. januar 2007 - 15:42 #12
Jeg kører også selv xhtml 1.1, pudsigt at FF skifter visning ved doctypen ... anyhow, her er et xhtml 1.1 eksempel:


css.css
#gallery div {clear:both;}
#gallery div {width:100%;}
#gallery a, #gallery a img {float:left;}
#gallery a img {border:0px;}



og xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><meta http-equiv="content-language" content="da" /><link rel="stylesheet" type="text/css" href="css.css" /><title>s</title></head><body>

<div id="gallery"><div>
<a href="#"><img src="http://www.eksperten.dk/img/elogo.png" alt="test" /></a>
<a href="#"><img src="http://www.eksperten.dk/img/elogo.png" alt="test" /></a>
<a href="#"><img src="http://www.eksperten.dk/img/elogo.png" alt="test" /></a>
</div><div>
<a href="#"><img src="http://www.eksperten.dk/img/elogo.png" alt="test" /></a>
<a href="#"><img src="http://www.eksperten.dk/img/elogo.png" alt="test" /></a>
<a href="#"><img src="http://www.eksperten.dk/img/elogo.png" alt="test" /></a>
</div></div>


</body></html>


... samt det ene af svarene
Avatar billede mclemens Nybegynder
04. januar 2007 - 15:42 #13
float:left; på #gallery a img er tilføjet udover doctype samt meta ændringer
Avatar billede mclemens Nybegynder
04. januar 2007 - 15:45 #14
hov css.css skulle
være denne istedet:

#gallery div {clear:both;}
#gallery a img {border:0px;float:left;}

... jeg fik vist rodet lidt i den ...
Avatar billede mr_bula Nybegynder
05. januar 2007 - 12:16 #15
Det virker =) Super nu er min koden mere overskuelig og nemmere at rette i...

windcape: smider du ikke et svar?
Avatar billede windcape Praktikant
06. januar 2007 - 01:35 #16
mooooooooooooooooooo :-)
Avatar billede mclemens Nybegynder
08. januar 2007 - 00:29 #17
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
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