/ 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
Hvordan centreres 3 billeder horisontalt
Fra : Jens R. rasmussen


Dato : 05-09-08 16:42

Jeg har 3 små billeder som jeg gerne vil have til at stå
centreret i det aktuelle broservindue.
I mit css-dokument har jeg skrevet
img.billedeA {float:left;}
img.billedeB {float:left;}
img.billedeC {float:right;}


Billedet A og C står fint i hhv. venstre og højre side af
skærmen. Og billede B står med margin-afstand til billede A. Men
hvordan får jeg billede B til at stå midt imellem billede A og C?
Der findes vist ikke en center- eller middle-værdi, vel?

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Birger Sørensen (05-09-2008)
Kommentar
Fra : Birger Sørensen


Dato : 05-09-08 17:14

Den 05-09-2008, skrev Jens R. rasmussen:
> Jeg har 3 små billeder som jeg gerne vil have til at stå
> centreret i det aktuelle broservindue.
> I mit css-dokument har jeg skrevet
> img.billedeA {float:left;}
> img.billedeB {float:left;}
> img.billedeC {float:right;}
>
>
> Billedet A og C står fint i hhv. venstre og højre side af
> skærmen. Og billede B står med margin-afstand til billede A. Men
> hvordan får jeg billede B til at stå midt imellem billede A og C?
> Der findes vist ikke en center- eller middle-værdi, vel?

Sæt text-align:center på det element du indsætter billederne i og
undlad float på billede B.

Birger



Jens R. rasmussen (05-09-2008)
Kommentar
Fra : Jens R. rasmussen


Dato : 05-09-08 19:14

Birger Sørensen wrote in dk.edb.internet.webdesign.html:
> Den 05-09-2008, skrev Jens R. rasmussen:
> > Jeg har 3 små billeder som jeg gerne vil have til at stå
> > centreret i det aktuelle broservindue.
> > I mit css-dokument har jeg skrevet
> > img.billedeA {float:left;}
> > img.billedeB {float:left;}
> > img.billedeC {float:right;}
> >
> >
> > Billedet A og C står fint i hhv. venstre og højre side af
> > skærmen. Og billede B står med margin-afstand til billede A. Men
> > hvordan får jeg billede B til at stå midt imellem billede A og C?
> > Der findes vist ikke en center- eller middle-værdi, vel?
>
> Sæt text-align:center på det element du indsætter billederne i og
> undlad float på billede B.
>
> Birger

Ja undskyld jeg kommer igen. Men jeg kan fortsat ikke få det til at
virke. Jeg gør nok noget galt. Du kan se min hjemmeside med de 3
billeder på www.vinvenner.dk.
I mit html-dokument står de 3 billeder i en paragraf - altså:
<p>
<img src="billedeA" class="billedeA" />
<img src="billedeB" class="billedeB" />
<img src="billedeC" class="billedeC" />
</p>

og i mit css-dokument står så
img.billedeA {float:left;}
img.billedeB {float:left;}
img.billedeC {float:right;}

Det hjælper ikke i html-dokumentet, at ændre <p> til <p
text-align="center"> og slette class for billede B.

Det hjælper heller ikke, at ændre <p> til <p class="centrer"> og
sætte følgende i css p.centrer {text-align: center;} - hverken med
eller uden class B i html-dokumentet.

Ka' du gennemskue hvad jeg gør galt? På forhånd tak.

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Birger Sørensen (05-09-2008)
Kommentar
Fra : Birger Sørensen


Dato : 05-09-08 20:37

Jens R. rasmussen skrev:
> Birger Sørensen wrote in dk.edb.internet.webdesign.html:
>> Den 05-09-2008, skrev Jens R. rasmussen:
>>> Jeg har 3 små billeder som jeg gerne vil have til at stå
>>> centreret i det aktuelle broservindue.
>>> I mit css-dokument har jeg skrevet
>>> img.billedeA {float:left;}
>>> img.billedeB {float:left;}
>>> img.billedeC {float:right;}
>>>
>>>
>>> Billedet A og C står fint i hhv. venstre og højre side af
>>> skærmen. Og billede B står med margin-afstand til billede A. Men
>>> hvordan får jeg billede B til at stå midt imellem billede A og C?
>>> Der findes vist ikke en center- eller middle-værdi, vel?
>>
>> Sæt text-align:center på det element du indsætter billederne i og
>> undlad float på billede B.
>>
>> Birger
>
> Ja undskyld jeg kommer igen. Men jeg kan fortsat ikke få det til at
> virke. Jeg gør nok noget galt. Du kan se min hjemmeside med de 3
> billeder på www.vinvenner.dk.
> I mit html-dokument står de 3 billeder i en paragraf - altså:
> <p>
> <img src="billedeA" class="billedeA" />
> <img src="billedeB" class="billedeB" />
> <img src="billedeC" class="billedeC" />
> </p>
>
> og i mit css-dokument står så
> img.billedeA {float:left;}
> img.billedeB {float:left;}
> img.billedeC {float:right;}
>
> Det hjælper ikke i html-dokumentet, at ændre <p> til <p
> text-align="center"> og slette class for billede B.
>
> Det hjælper heller ikke, at ændre <p> til <p class="centrer"> og
> sætte følgende i css p.centrer {text-align: center;} - hverken med
> eller uden class B i html-dokumentet.
>
> Ka' du gennemskue hvad jeg gør galt? På forhånd tak.

Det forstår jeg ikke.
I FF2.0.0.26 med Firebug, kan jeg gå ind og fjerne class fra billedet i
midten, og tilføje text-align:center til paragraffen der indeholder
billederne (burde måske være en div, men lad det nu ligge...).
Det rykker billedet hen til midten.

Problemet er så at rækkefølgen skal være de floatede elementer før det
de skal floate om.
Så du skal altså i kilden have billedet i midten sidst.
(Mener at kunne huske noget med at IE også gerne vil have højrefloatede
elementer før venstrefloatede... Så kildekoden skal først have billede
C, så billede A, og sidst billede B)
Så burde det være som du gerne vil have det...

Birger



Jens R. rasmussen (05-09-2008)
Kommentar
Fra : Jens R. rasmussen


Dato : 05-09-08 20:38

Jens R. rasmussen wrote in dk.edb.internet.webdesign.html:
> Birger Sørensen wrote in dk.edb.internet.webdesign.html:
> > Den 05-09-2008, skrev Jens R. rasmussen:
> > > Jeg har 3 små billeder som jeg gerne vil have til at stå
> > > centreret i det aktuelle broservindue.
> > > I mit css-dokument har jeg skrevet
> > > img.billedeA {float:left;}
> > > img.billedeB {float:left;}
> > > img.billedeC {float:right;}
> > >
> > >
> > > Billedet A og C står fint i hhv. venstre og højre side af
> > > skærmen. Og billede B står med margin-afstand til billede A. Men
> > > hvordan får jeg billede B til at stå midt imellem billede A og C?
> > > Der findes vist ikke en center- eller middle-værdi, vel?
> >
> > Sæt text-align:center på det element du indsætter billederne i og
> > undlad float på billede B.
> >
> > Birger
>
> Ja undskyld jeg kommer igen. Men jeg kan fortsat ikke få det til at
> virke. Jeg gør nok noget galt. Du kan se min hjemmeside med de 3
> billeder på www.vinvenner.dk.
> I mit html-dokument står de 3 billeder i en paragraf - altså:
> <p>
> <img src="billedeA" class="billedeA" />
> <img src="billedeB" class="billedeB" />
> <img src="billedeC" class="billedeC" />
> </p>
>
> og i mit css-dokument står så
> img.billedeA {float:left;}
> img.billedeB {float:left;}
> img.billedeC {float:right;}
>
> Det hjælper ikke i html-dokumentet, at ændre <p> til <p
> text-align="center"> og slette class for billede B.
>
> Det hjælper heller ikke, at ændre <p> til <p class="centrer"> og
> sætte følgende i css p.centrer {text-align: center;} - hverken med
> eller uden class B i html-dokumentet.
>
> Ka' du gennemskue hvad jeg gør galt? På forhånd tak.

Ups - jeg fandt fejlen. Jeg havde en generel img som satte en margin i
css. Derfor skulle min specielle her lige have tilføjet
margin-right:none. Nu ser det pænt ud: se bare www.vinvenner.dk.

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Birger Sørensen (05-09-2008)
Kommentar
Fra : Birger Sørensen


Dato : 05-09-08 20:48

Jens R. rasmussen frembragte:
> Jens R. rasmussen wrote in dk.edb.internet.webdesign.html:
>> Birger Sørensen wrote in dk.edb.internet.webdesign.html:
>>> Den 05-09-2008, skrev Jens R. rasmussen:
>>>> Jeg har 3 små billeder som jeg gerne vil have til at stå
>>>> centreret i det aktuelle broservindue.
>>>> I mit css-dokument har jeg skrevet
>>>> img.billedeA {float:left;}
>>>> img.billedeB {float:left;}
>>>> img.billedeC {float:right;}
>>>>
>>>>
>>>> Billedet A og C står fint i hhv. venstre og højre side af
>>>> skærmen. Og billede B står med margin-afstand til billede A. Men
>>>> hvordan får jeg billede B til at stå midt imellem billede A og C?
>>>> Der findes vist ikke en center- eller middle-værdi, vel?
>>>
>>> Sæt text-align:center på det element du indsætter billederne i og
>>> undlad float på billede B.
>>>
>>> Birger
>>
>> Ja undskyld jeg kommer igen. Men jeg kan fortsat ikke få det til at
>> virke. Jeg gør nok noget galt. Du kan se min hjemmeside med de 3
>> billeder på www.vinvenner.dk.
>> I mit html-dokument står de 3 billeder i en paragraf - altså:
>> <p>
>> <img src="billedeA" class="billedeA" />
>> <img src="billedeB" class="billedeB" />
>> <img src="billedeC" class="billedeC" />
>> </p>
>>
>> og i mit css-dokument står så
>> img.billedeA {float:left;}
>> img.billedeB {float:left;}
>> img.billedeC {float:right;}
>>
>> Det hjælper ikke i html-dokumentet, at ændre <p> til <p
>> text-align="center"> og slette class for billede B.
>>
>> Det hjælper heller ikke, at ændre <p> til <p class="centrer"> og
>> sætte følgende i css p.centrer {text-align: center;} - hverken med
>> eller uden class B i html-dokumentet.
>>
>> Ka' du gennemskue hvad jeg gør galt? På forhånd tak.
>
> Ups - jeg fandt fejlen. Jeg havde en generel img som satte en margin i
> css. Derfor skulle min specielle her lige have tilføjet
> margin-right:none. Nu ser det pænt ud: se bare www.vinvenner.dk.

Nydeligt. Men det behøver du vist ikke bruge float for .
Det er kun hvis du vil have de yderste billeder helt ud til siden.
Som det ser ud nu, kan du blot sætte passende margin på billederne, og
så angive text-align:center i elementet der indeholder dem.
<p> betyder paragraf, og er beregnet til inddeling af tekster.
Så IMHO bør du anvende en <div> som container for billederne.
Det virker fint med en <p>. Men det låser dig lidt, hvis du senere får
brug for en generel styling af paragraffer (og der er text-align:center
sikkert ikke noget du ønsker...)

Birger



Søg
Reklame
Statistik
Spørgsmål : 177461
Tips : 31964
Nyheder : 719565
Indlæg : 6408202
Brugere : 218881

Månedens bedste
Årets bedste
Sidste års bedste