Avatar billede runeneesgaard Nybegynder
07. oktober 2009 - 03:34 Der er 7 kommentarer og
2 løsninger

At putte ramme rundt om billeder og centrere dem

Jeg er i gang med at lave en hjemmeside som et skoleprojekt, men der er en enkelt ting, som jeg simpelthen bare ikke kan se systemet i, hvordan man gør, og det er ved at drive mig til vanvid (måske forklare det den sene post tid?) ;)

Jeg er på ingen måde en haj til .html, så måske er min forklaring ikke så god, men jeg skal gøre mit bedste:

Som min overskrift udtrykker det vil jeg gerne lave en ramme rundt om nogle billeder og centrere dem. Der er to sider:

Den ene viser en række thumbnails og de linker videre til en side hvor man ser thumb'erne i stort format. Jeg er bekendt med eksterne style sheets, inline styles osv., dog uden at være særlig god til det.

Det der forvirrer mig er, at jeg ikke kan finde rundt i om jeg skal...

Lave en class med regler om rammer og centrering og skal den i så fald stå i img tag'et, i en div der indeholder tag'et, som et p-element eller noget helt tredje?

Eller skal jeg lave en inline style for centreringen i en div og en class med rammen til hvert billed?

Skal jeg bruge en <div id="et-eller-andet"> og lave en regel for denne eller måske en <p id="et-eller-andet">?

Eller...?

Jeg ved ikke om det er helt uforståeligt hvad jeg skriver, men det jeg i bund og grund spørger efter er, om der er nogen der kan undvære lidt tid til at forklare mig denne, formentlig utrolig simple, ting?

På forhånd tak!
Avatar billede ebusiness Nybegynder
07. oktober 2009 - 09:56 #1
Som altid er der 117 måder at gøre tingene på. Det her er nok den letteste:

img{
border:5px solid red;
margin:0px auto;
display:block;
}
Avatar billede runeneesgaard Nybegynder
07. oktober 2009 - 15:06 #2
Tak for svaret, ebusiness.

Om man laver din løsning som en .img eller #img og om man putter den i en div eller fx et p-element er underordnet?
Avatar billede Gudiik Nybegynder
07. oktober 2009 - 15:27 #3
Nu er jeg ikke den skrappeste til CSS.
Men vil dog lige mene der skal en tilføjelse på det overstående, hvis den skal centeres (er dog ikke sikker).

img{
border:5px solid red;
margin:0px auto;
display:block;
align:center;
}

Om du bruger .img eller #img er ligemeget, det giver samme resultat.

Mvh.
Avatar billede ebusiness Nybegynder
07. oktober 2009 - 16:35 #4
Nej Gudiik, der findes ikke nogen align attribut i CSS, det er vha. margin at centreringen opstår.

Du kan bruge lige den identifier som du ønsker, eller sætte det ind som inline CSS hvis du ønsker. Container elementet er underordnet, så længe det fylder hele sidens bredde.
Avatar billede runeneesgaard Nybegynder
07. oktober 2009 - 20:14 #5
Jeg forsøgte lige at sætte den CSS ind som I anbefaler. Resultatet er dette: http://www.runee.monline.dk/mitsite10_medphpgalleri/vis_billed.php?billednr=1

Er der nogen der kan gennemskue hvad problemet er?

P.S. Sitet er som sagt et skoleprojekt, derfor den ringe kvalitet og ikke mindst indhold ;)
Avatar billede ebusiness Nybegynder
07. oktober 2009 - 22:05 #6
Det ser fint nok ud i mine browsere, at koden bagved er noget frygteligt rod er så en anden ting.
Avatar billede runeneesgaard Nybegynder
07. oktober 2009 - 22:54 #7
Jeg har også netop rettet det. Jeg prøvede noget nyt. Problemet, hvis jeg skrev:

img{
border:5px solid red;
margin:0px auto;
display:block;
}

...var, at rammen røg rundt om div'en. Hvis jeg derimod nøjes med at centrere div'en med en text-align: center og sætter rammen på i selve mit img tag så ser det ordenligt ud. Jeg ved ikke, om dette er en ligeså god måde at gøre det på? Det virker i hvert fald indtil videre.

Jeg kan ikke se, at koden roder, men det er måske netop det, der er problemet :)
Avatar billede ebusiness Nybegynder
07. oktober 2009 - 23:21 #8
Det ligner to HTML dokumenter klippet sammen på en eller anden frankensteinisk måde.
Avatar billede runeneesgaard Nybegynder
07. oktober 2009 - 23:53 #9
HTML er ikke min stærke side :)

Anyways, tak for hjælpen!
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