|
| Centrering af en række div-bokse Fra : Jesper H |
Dato : 29-08-05 11:45 |
|
Hej gruppe
Jeg har et problem, som jeg håber I kan hjælpe mig med. Jeg har en
række div-bokse med samme højde men forskellige bredder, som skal
stå på række efter hinanden - det har jeg så fundet ud af, at jeg
f.eks. kan gøre med float: left;, så langt så godt. Men problemet
opstår så, da jeg vil forsøge at centrere denne række af div-bokse
- det virker ikke, øv øv. Hvad gør jeg galt? Hvad skal man gøre?
Jeg har lavet et eksempel, som kan ses her:
http://fdf.dk/landsdel1/nyheder.php
Øverst er der et par bokse omkring disse div-bokse, men jeg kan ikke
få centeret det - hvad gør jeg?
Nogle vil måske spørge hvorfor jeg ikke bare bruger img-bokse i
stedet for div-bokse, når deres eneste formål er at vise et billede -
grunden er, at billedet er et png-billede, som er halv-transparent, og
det her er en måde at løse problemet, så både IE og alle andre kan
understøtte korrekt visning af billedet - men andre forslag modtages
meget gerne, hvis det kan løse problemet med at få overskriften til
at stå centreret.
Mvh
Jesper
| |
Jens Gyldenkærne Cla~ (29-08-2005)
| Kommentar Fra : Jens Gyldenkærne Cla~ |
Dato : 29-08-05 12:04 |
|
Jesper H skrev:
> Hvad gør jeg galt? Hvad skal man gøre? Jeg har lavet et
> eksempel, som kan ses her: http://fdf.dk/landsdel1/nyheder.php
> Øverst er der et par bokse omkring disse div-bokse, men jeg
> kan ikke få centeret det - hvad gør jeg?
Du kan starte med at validere din kode. Man må fx ikke placere div
inden i a.
NB: Hvorfor bruger du enkelte bogstaver i stedet for en samlet
grafik?
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html
| |
Jens Gyldenkærne Cla~ (29-08-2005)
| Kommentar Fra : Jens Gyldenkærne Cla~ |
Dato : 29-08-05 14:25 |
|
Jesper H skrev:
> Okay, tak for det, det var jeg ikke klar over at man ikke
> måtte. Det var for at kunne lave en TITLE på billederne, hvis
> nu man holdt musen over dem.
Title-parameteren kan bruges på meget andet end a-elementet.
Du kan fx sætte det direkte på billedet:
<img src="n.png" alt="n" title="n">
> Jeg kunne også godt have brugt en samlet grafik, tænkte også
> på det, men jeg vil gerne have muligheden for at sammensætte
> overskriften dynamisk (ikke nødvendigt lige på den side, jeg
> bruger som eksempel, men på andre), uden at skulle lave
> billederne hver gang.
O.k. - du skal bare være opmærksom på at det kan give problemer med
indekseringen af siden. En grafisk overskrift kan godt indekseres
hvis der er tilknyttet en alt-parameter (og evt. en title-
parameter) til billedet. Men hvis du deler billedoverskriften op i
enkeltbogstaver, vil søgemaskinerne formentlig ikke indeksere det
ord som din overskrift danner.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html
| |
Allan Vebel (29-08-2005)
| Kommentar Fra : Allan Vebel |
Dato : 29-08-05 20:09 |
|
Jens Gyldenkærne Clausen <jens@gyros.invalid> skrev:
> Du kan fx sætte det direkte på billedet:
>
> <img src="n.png" alt="n" title="n">
Der er bare nogle af disse accessibility-programmer der
brokker sig hvis alt og title har samme ordlyd - jeg mener
det er http://wave.webaim.org
--
Allan Vebel
http://html-faq.dk
| |
Jens Gyldenkærne Cla~ (29-08-2005)
| Kommentar Fra : Jens Gyldenkærne Cla~ |
Dato : 29-08-05 21:44 |
|
Allan Vebel skrev:
> Der er bare nogle af disse accessibility-programmer der
> brokker sig hvis alt og title har samme ordlyd - jeg mener
> det er http://wave.webaim.org
Det lyder meget mærkeligt - der bør ikke være noget
tilgængelighedsproblem i at have samme tekst i title og alt.
Jeg kan ikke lige finde en side der kan bruges til at teste
validatoren med, men jeg tjekkede deres ikonoversigt
(< http://www.wave.webaim.org/wave/explanation.htm>) for punkter med
alt/title. Der er en "alt=txt"-advarsel med forklaringen "an image
has the same alt text as an adjacent piece of text". Jeg tror bare
at man med "adjacent piece of text" her tænker på reel tekst der
vises i browseren - ikke på en title-parameter. Det vil i hvert
fald give mening for mig.
Men jeg har som nævnt ikke selv afprøvet hvad validetoren reagerer
på.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html
| |
Allan Vebel (29-08-2005)
| Kommentar Fra : Allan Vebel |
Dato : 29-08-05 22:54 |
|
Jens Gyldenkærne Clausen <jens@gyros.invalid> skrev:
>> det er http://wave.webaim.org
> Jeg kan ikke lige finde en side der kan bruges
Lavede lige http://html-faq.dk/b.htm
> "an image has the same alt text as an adjacent piece of
> text". Jeg tror bare at man med "adjacent piece of
> text" her tænker på reel tekst der vises i browseren
Ja, det giver forklaringen.
> Men jeg har som nævnt ikke selv afprøvet hvad validetoren
> reagerer på.
Det er ellers en god øvelse. Jeg fik et par af de røde med
"Label missing" og "problem with form label" på søgefeltet.
Det er ikke nemt når der ikke er en label-tekst at henvise til,
så jeg måtte snyde lidt
--
Allan Vebel
http://html-faq.dk
| |
Jesper H (29-08-2005)
| Kommentar Fra : Jesper H |
Dato : 29-08-05 13:02 |
|
Okay, tak for det, det var jeg ikke klar over at man ikke måtte. Det
var for at kunne lave en TITLE på billederne, hvis nu man holdt musen
over dem. Jeg fjerner a-tagget.
Jeg kunne også godt have brugt en samlet grafik, tænkte også på
det, men jeg vil gerne have muligheden for at sammensætte overskriften
dynamisk (ikke nødvendigt lige på den side, jeg bruger som eksempel,
men på andre), uden at skulle lave billederne hver gang.
Mvh
Jesper
| |
Knud Gert Ellentoft (29-08-2005)
| Kommentar Fra : Knud Gert Ellentoft |
Dato : 29-08-05 15:09 |
|
Jesper H skrev:
>Okay, tak for det, det var jeg ikke klar over at man ikke måtte. Det
>var for at kunne lave en TITLE på billederne, hvis nu man holdt musen
>over dem. Jeg fjerner a-tagget.
<img src=".... title="titeltekst">
--
Knud
Topposter du svar, så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html
| |
Jesper H (29-08-2005)
| Kommentar Fra : Jesper H |
Dato : 29-08-05 13:19 |
|
Hej Jens (og andre)
Jeg har nu fjernet det illegale a-tag omkring mine div-bokse, men det
virker stadig ikke med at få sat div-boksene i center - nogle idéer?
Hvis ikke jeg bruger float, sætter boksene sig bare under hinanden -
kan man forhindre det på andre måder end float og absolut
positionering af hver enkelt boks?
Mvh
Jesper
| |
Knud Gert Ellentoft (29-08-2005)
| Kommentar Fra : Knud Gert Ellentoft |
Dato : 29-08-05 15:04 |
|
Jesper H skrev:
>Men problemet
>opstår så, da jeg vil forsøge at centrere denne række af div-bokse
>- det virker ikke, øv øv. Hvad gør jeg galt? Hvad skal man gøre
Prøv at kig på http://html-faq.dk/2007.asp
--
Knud
Topposter du svar, så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html
| |
Jesper H (29-08-2005)
| Kommentar Fra : Jesper H |
Dato : 29-08-05 22:19 |
|
Takker til jer, der har foreslået en alt-property eller title-property
til img-tagget - men problemet er, at det ikke er et img-tag, jeg
bruger til at vise billederne, men derimod et div-tag, hvor billedet
sættes til at være baggrunden. Alt efter om det så er IE eller en
anden browser, er der så to forskellige måder at sætte billedet ind
på:
Generelt for begge:
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
For IE:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src='/landsdel1/layout/tegn/0.png');
For alle andre:
background-image: url('/landsdel1/layout/tegn/0.png');
Begge disse ting er defineret i separate CSS-filer.
Så alt- eller title-tagget gør ikke meget nytte lige her. Men bør
jeg istedet forsøge at bruge img-tagget, da to img-tags godt vil stå
ved siden af hinanden, i modsætning til div-tags?
Mvh
Jesper
| |
Knud Gert Ellentoft (29-08-2005)
| Kommentar Fra : Knud Gert Ellentoft |
Dato : 29-08-05 22:47 |
|
Jesper H skrev:
>Takker til jer, der har foreslået en alt-property eller title-property
>til img-tagget - men problemet er, at det ikke er et img-tag, jeg
>bruger til at vise billederne, men derimod et div-tag,
Jamen, så sætter du bare title på <div> i stedet for.
--
Knud
Topposter du svar, så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html
| |
Jesper H (29-08-2005)
| Kommentar Fra : Jesper H |
Dato : 29-08-05 22:40 |
|
Hej Knud
Tak for dit svar. Det eksempel, du refererer til, kræver at man kender
bredden af den boks, man gerne vil have centreret - men hvad nu hvis
jeg ikke gør det? Bogstaverne varierer i bredde...
Mvh
Jesper
| |
Knud Gert Ellentoft (29-08-2005)
| Kommentar Fra : Knud Gert Ellentoft |
Dato : 29-08-05 22:50 |
|
Jesper H skrev:
>Tak for dit svar. Det eksempel, du refererer til, kræver at man kender
>bredden af den boks, man gerne vil have centreret - men hvad nu hvis
>jeg ikke gør det? Bogstaverne varierer i bredde...
Så er det straks sværere, som jeg ikke har nogen ordentlig
løsning på.
Der findes en IE-only løsning, som ikke kan anbefales, da den
bygger på en fejl i IE.
Det er text-align: center, på en <div>.
--
Knud
Topposter du svar, så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html
| |
Jesper H (29-08-2005)
| Kommentar Fra : Jesper H |
Dato : 29-08-05 22:52 |
|
Hermed gjort, det virker vist fint, så er den del af det jo på plads.
Takker for'et.
Mvh
Jesper
| |
|
|