CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede runeneesgaard Nybegynder
20. august 2012 - 22:53 Der er 9 kommentarer og
1 løsning

Galleriopsætning af billeder (evt.) vha. tabel

Jeg vil gerne sætte nogle thumbnails op som en slags galleri, men jeg er lidt i tvivl om den bedste metode.

Hvis jeg f.eks. gerne vil have fire thumbs lige efter hinanden horisontalt og så fire mere lige nede under, alle med én pixels mellemrum til den næste, så kunne jeg forestille mig, at en tabel ville være den smarteste måde at gøre det på.

Men kan man på en eller anden måde style hver enkel celle i en tabel og i så fald hvordan? Meget gerne via mit eksterne style sheet.

Grunden til, at jeg gerne vil kunne det er, at nogle celler gerne skal have 1 px cell spacing eller 1 px transparent stroke på højre side, andre på venstre osv.

Tak!
Avatar billede olebole Juniormester
20. august 2012 - 23:10 #1
<ole>

Den bedste metode kommer an på, hvordan det præcist skal se ud. Vi kan komme med masser af bud - men ingen begavede før vi ved noget mere om det ønskede udseende  =)

/mvh
</bole>
Avatar billede runeneesgaard Nybegynder
20. august 2012 - 23:31 #2
Du har ret, jeg skulle lige have vedhæftet et billede. Det kommer her!

Der er tre typer, #2 er det, jeg omtalte i første post.

http://i47.tinypic.com/140atzd.jpg
Avatar billede olebole Juniormester
21. august 2012 - 00:23 #3
Det kunne vel være noget i denne stil:

<style type="text/css">
.thumb-row {
    line-height: 0;
}
.thumb-row div {
    display: inline-block;
    width: 200px;
    height: 100px;
    line-height: normal;
    border: 1px solid black;
}
</style>

<div class="thumb-row">
    <div></div><div></div><div></div><div></div>
</div>
<div class="thumb-row">
    <div></div><div></div><div></div><div></div>
</div>
Avatar billede runeneesgaard Nybegynder
21. august 2012 - 00:37 #4
Tak for svaret!

Problemet med den løsning er, at der mellem hver thumb kommer et 2 px stroke og ude i kanten, hvor der helst ikke skal være noget stroke, er der så et 1 px stroke. Den duer heller ikke helt, hvis jeg vil have en baggrund med noget tekstur f.eks., fordi der ikke er spacing imellem thumbs'ne (medmindre, jeg har lavet en fejl).

Nogle andre forslag?
Avatar billede olebole Juniormester
21. august 2012 - 00:49 #5
Så lægger du vel bare border på de kanter, der skal have borders og fjerner dem, hvor de ikke skal være.

"fordi der ikke er spacing imellem thumbs'ne (medmindre, jeg har lavet en fejl)" >> Hvis der skal være mellemrum, har du lavet en fejl i billedet, du uploadede. Der har kasserne sorte kanter.

Skal vi ikke være enige om, at du uploader et billede, der præcist viser, hvad du ønsker?  =)
Avatar billede runeneesgaard Nybegynder
21. august 2012 - 01:23 #6
Du har ret i, at jeg vel kan lægge border på, hvor jeg har lyst, det havde jeg ikke lige tænkt på.

Men for god ordens skyld, vil jeg lige nævne, at det billede, jeg uploadede, er nøjagtig, hvad jeg ønsker, og der er ikke sorte kanter på - der er mellemrum mellem boksene, så en evt. ikke ensfarvet baggrund ville kunne ses igennem :) Og det er det, jeg ville foretrække at kunne lave i HTML.
Avatar billede olebole Juniormester
21. august 2012 - 01:49 #7
Jamen, så forstår jeg. Så vil jeg foreslå at slette borders og bruge en margin til at skabe afstand:

<style type="text/css">
body {
    background: black;
}
.thumb-row {
    line-height: 0;
    margin-bottom: 1px;
}
.thumb-row div {
    display: inline-block;
    width: 200px;
    height: 100px;
    line-height: normal;
    margin-right: 1px;
    background: red;
}
</style>

<div class="thumb-row">
    <div></div><div></div><div></div><div></div>
</div>
<div class="thumb-row">
    <div></div><div></div><div></div><div></div>
</div>
Avatar billede olebole Juniormester
21. august 2012 - 01:52 #8
PS: Det er vigtigt, at du lader de indre DIV stå på samme linje. Skriver du dem på hver sin, renderes de med et helt mellemrum (spacebar) imellem sig
Avatar billede runeneesgaard Nybegynder
21. august 2012 - 11:24 #9
Fedt fedt fedt, det ser godt ud, tak! Jeg tillader mig lige at komme med to follow-ups:

Jeg har ikke prøvet at "tale til" div'er på den måde før uden at give dem et ID - kan jeg give dem et, så jeg kan differentiere dem (hvis jeg f.eks. skal have forskellige billeder i dem)?

Har du et forslag til, hvordan jeg sætter "Type 1" op?

http://i47.tinypic.com/140atzd.jpg
Avatar billede runeneesgaard Nybegynder
18. februar 2013 - 23:58 #10
Lukker.
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
Se alle it-kurser fra Computerworld Kurser
IT-kurser om Microsoft 365, sikkerhed, personlig vækst, udvikling, digital markedsføring, grafisk design, SAP og forretningsanalyse.
Se alle it-kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Bredde på div elementer Af dane022 i HTML 2 16/02/202408:29 20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML 2 21/12/202322:51 22/12/202308:03
validering <input tlfnr. Af slein55 i HTML 5 15/10/202311:43 15/10/202314:51
Link fra form input Af jnrmgs i HTML 9 19/09/202319:10 23/09/202313:11
includere i HTML Af slein55 i HTML 3 15/09/202313:47 16/09/202309:40
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 22:23 ='uge 25'!H$31 Af lurup i Excel
I går 15:12 Tekstoplæsning - fjerne talebesked Af 1Dorte i Android
I går 12:57 End Down Af PGFfyn i Excel
I går 11:37 Hvilken type adapter skal man bruge - USB Af clausito i PC
I går 11:11 Appel Copy Paste Af HenningFr i iOS, iPhone & iPad
White papers
Flere white papers »


Premium
Teaser billede
Virksomheder af en vis størrelse får det svært i AI-ræset: Men bestemte tiltag kan sende dem frem i feltet
Læs mere »
På Bornholm jagter Computerworld bekymret svar på det store spørgsmål
NIS2-implementeringen er nu i gang: Varsler omfattende tilsyn og store bøder
Staten mister i stor stil teknisk kyndige it-folk: Vigtig viden om samfundskritiske systemer overlades til konsulenter
Se alle »
Computerworld
Teaser billede
Prøvekørt: Polestar 3 er en rendyrket designer-bil, som er ude på at forføre dig
Læs mere »
Test af to nye robotplæneklippere: En dyr og en mere overkommelig
Her er de enheder der får det nye Apple AI – vil du have det, skal du nok ud og købe en ny iPhone
Test: Her er den smarte økonomi-robot til din græsplæne
Se alle »
CIO
Teaser billede
OUH's fynske hosting-leverandør på vej mod konkurs efter ransomware-angreb: Kan ikke genoprette ramte systemer
Læs mere »
Microsoft dropper ny funktion i Copilot få måneder efter lanceringen
CIO hos Alm. Brand rydder op i legacy-systemer og skaber en ny it-arkitektur: Stripper alt ned til standardkode for at sikre fremtiden
Vælg it-sikkerhed, hvis du gerne vil tjene mange penge: Disse cheftitler scorer de højeste lønninger i it-branchen
Se alle »
Job & Karriere
Teaser billede
Her er Danmarks fem bedste CIO’er lige nu: Se de fem nominerede til prisen som Årets CIO 2024
Læs mere »
Medarbejderne fik udleveret badetøfler ved indflytningen: Kom med inden for i IBM Danmarks nye topmoderne hovedkontor
Google fyrer hele sit Python-team
Bo solgte sit software-system for et treciftret millionbeløb: Brugte pengene på at købe 80 medarbejdere til ny storsatsning
Se alle »
White paper
Teaser billede
Vejen væk fra WAN: Sådan skifter du til en moderne infrastruktur
Læs mere »
Unbreakable - sådan sikrer du dig vedvarende og uafbrudt adgang til dine data
MDR: Transparent sikkerhed og overvågning i realtid
Sådan høster du forretningsfordelene ved Internet of Things
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »