/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
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


Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408848
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste