Tekst oven på billede

Tags:    html css

På http://netkoder.dk/netkoder/kode_canvas_demoer.php har jeg nogen billeder hvor jeg så har en halvgennemsigtig boks med tekst på oven på billedet.

Det fungere ikke helt så godt.

Hvordan ville i lave det fra bunden så det blev godt ?

Jeg har haft problemer med at centere det også kan man ikke besøge linket ved at klikke på den gennemsigtige boks, det er specielt et problem på små skærme hvor den gennemsigtige boks næsten fylder hele billedet.

Måske i har en god ide. Eller måske skulle jeg bare have teksten lige under billedet.



Indlæg senest redigeret d. 20.01.2013 20:15 af Bruger #13010
8 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 10 karma
Sorter efter stemmer Sorter efter dato
Fold kodeboks ind/udHTML kode 


CSS vil jeg bare absolute position teksten oven på billedet med figure position relative.



Indlæg senest redigeret d. 21.01.2013 09:50 af Bruger #17081
smid et a tag rundt om figure :)



God ide med figure men hvordan med at placer og ville jo gerne have man kunne klikke over det hele.



Nu har jeg lavet a om figure men så har jeg det problem at når jeg vandret centrer a tagget så bliver det plads der er til højre og venstre for billedet også klikbart.

Så med andre ord hvordan centrer jeg det vandret så kun figure bliver klikbar ?

Fold kodeboks ind/udHTML kode 


Prøv og kig igen : http://netkoder.dk/netkoder/kode_canvas_demoer.php



Indlæg senest redigeret d. 21.01.2013 17:51 af Bruger #13010
smid display: inline-block; på dit figure tag



Og mig der troede at inline-block var dårligt understøttet.
Men det ser ud til at være fint understøttet : http://caniuse.com/inline-block

Nu er det sådan nogenlunde borset fra det fylder lidt mere når man gør skærmen smal end det skal.

Nu har jeg skjult teksten som standard over kommer den første frem ved hover. Er det bedre teksten står der hele tiden heller er det meget sjov den først kommer frem ved hover ?



Du kan prøve, at sætte max-width: 100% og height: auto på billederne... det kan være de opfører sig så :)



Det er netop det jeg har gjort men med inline-block der går der ged i det.

Med block det ser det godt ud.

Men så har jeg så det før omtalte problem med at man kan klikke ude i siderne.



Indlæg senest redigeret d. 21.01.2013 22:40 af Bruger #13010
t