/ 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 ved hjælp af CSS
Fra : jumbo


Dato : 10-11-05 00:53

Jeg arbejder på et site, som skal struktureres som på filen her:
http://www.fdp.dk/01.gif

Som det fremgår af gif'en skal bredden være 800 px, og der skal
være ialt 6 containere (hedder det vist)

Men hvordan bærer jeg mig ad med at centrere hele skidtet?

--
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

 
 
Benny Nissen (10-11-2005)
Kommentar
Fra : Benny Nissen


Dato : 10-11-05 01:02

jumbo wrote:
> Jeg arbejder på et site, som skal struktureres som på filen her:
> http://www.fdp.dk/01.gif
>
> Som det fremgår af gif'en skal bredden være 800 px, og der skal
> være ialt 6 containere (hedder det vist)
>
> Men hvordan bærer jeg mig ad med at centrere hele skidtet?
>

Du laver en div rundt om det hele og styler den med:

margin-left:auto;
margin-right:auto;
width:770px;

800 pixel er for bred til en bruger med 800 x 600 i opløsning.
Derfor bør du ikke overskride 770 pixel i bredden.

--
Benny Nissen

Jumbo (10-11-2005)
Kommentar
Fra : Jumbo


Dato : 10-11-05 11:39

Tak for svaret, og jeg er enig med dig i de 770 (eller går det ikke
også med 790)
Men jeg glemte faktisk det vigtigste:
De 6 elementer, som skal ligge inden i, vil jeg gerne kunne
positionere absolut - i hvert fald verikalt - men kan ikke finde ud
af hvordan man kan gøre det inden i et div.








Benny Nissen wrote in dk.edb.internet.webdesign.html:
> jumbo wrote:
> > Jeg arbejder på et site, som skal struktureres som på filen her:
> > http://www.fdp.dk/01.gif
> >
> > Som det fremgår af gif'en skal bredden være 800 px, og der skal
> > være ialt 6 containere (hedder det vist)
> >
> > Men hvordan bærer jeg mig ad med at centrere hele skidtet?
> >
>
> Du laver en div rundt om det hele og styler den med:
>
> margin-left:auto;
> margin-right:auto;
> width:770px;
>
> 800 pixel er for bred til en bruger med 800 x 600 i opløsning.
> Derfor bør du ikke overskride 770 pixel i bredden.
>
> --
> Benny Nissen


--
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

Jens Gyldenkærne Cla~ (10-11-2005)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 10-11-05 11:47

Jumbo skrev:

> De 6 elementer, som skal ligge inden i, vil jeg gerne kunne
> positionere absolut - i hvert fald verikalt - men kan ikke
> finde ud af hvordan man kan gøre det inden i et div.

Sæt position: relative; på din div - så kan du positionere absolut
i forhold til div'en.

NB: Læs gerne min signatur.
--
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

jumbo (10-11-2005)
Kommentar
Fra : jumbo


Dato : 10-11-05 13:00

Jens GyldenkærneClausen wrote in dk.edb.internet.webdesign.html:
> Jumbo skrev:
>
> > De 6 elementer, som skal ligge inden i, vil jeg gerne kunne
> > positionere absolut - i hvert fald verikalt - men kan ikke
> > finde ud af hvordan man kan gøre det inden i et div.
>
> Sæt position: relative; på din div - så kan du positionere absolut
> i forhold til div'en.
>

Det var også sådan noget, jeg havde spekuleret på, men nu har jeg
lavet denne CSS fil:
body, html {   font: 8pt/16pt georgia; height: 100%; margin: 0;
padding: 0;background-color:#ffffff;
}
#main {width:790px;height:100%;background:yellow;$margin:0 auto;}
#toplogo {positon:
relative;width:318px;height:50px;left:200px;top:100px;}

Og denne body:
<div id="main">

<div id="toplogo"><img src="b.gif" width="318" height="50"
align="bottom" alt=""></div>


Og det virker ikke


--
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

Jørgen Farum Jensen (10-11-2005)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 10-11-05 15:09

jumbo wrote:
> Jens GyldenkærneClausen wrote in dk.edb.internet.webdesign.html:
>
>>Jumbo skrev:
>>
>>
>>>De 6 elementer, som skal ligge inden i, vil jeg gerne kunne
>>>positionere absolut - i hvert fald verikalt - men kan ikke
>>>finde ud af hvordan man kan gøre det inden i et div.
>>
>>
>>Sæt position: relative; på din div - så kan du positionere absolut
>>i forhold til div'en.
>>
>
>
> Det var også sådan noget, jeg havde spekuleret på, men nu har jeg
> lavet denne CSS fil:
> body, html {   font: 8pt/16pt georgia; height: 100%; margin: 0;
> padding: 0;background-color:#ffffff;
> }
> #main {width:790px;height:100%;background:yellow;$margin:0 auto;}
Syntaksfejl $
> #toplogo {positon:
Syntaksfejl:positon; (position)
> relative;width:318px;height:50px;left:200px;top:100px;}
>
> Og denne body:

<div id="main">
<div id="toplogo">
<img src="b.gif" width="318" height="50"
align="bottom" alt="">
</div>

skal være

<div id="main">
<div id="toplogo">

</div>
</div>

- du manglede afsluttende div

Sæt evt. billedet ind som css-baggrund:
#toplogo {position:
relative;
width:318px;
height:50px;
left:200px;
top:100px;
background-image:url(b.gif);
background-repeat:no-repeat;
background-position:left bottom:
}


--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk


jumbo (10-11-2005)
Kommentar
Fra : jumbo


Dato : 10-11-05 18:59

Har lagt det ind her:

http://www.fdp.dk/test/

--
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

Jens Gyldenkærne Cla~ (10-11-2005)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 10-11-05 13:42

jumbo skrev:

>> Sæt position: relative; på din div - så kan du positionere
>> absolut i forhold til div'en.

> Det var også sådan noget, jeg havde spekuleret på, men nu har
> jeg lavet denne CSS fil:

Hvis du har mulighed for at lægge din side online, er det noget
lettere at hjælpe.


> #main {width:790px;height:100%;background:yellow;$margin:0
> auto;} #toplogo {positon:
> relative;width:318px;height:50px;left:200px;top:100px;}

- men jeg tror godt jeg kan se hvad problemet er her. Du skal lægge
position: relative på #main - ikke på #toplogo. Altså noget i
retning af:

#main{ position: relative; width: 790px; height: 100% }

#toplogo{
   position: absolute;
   width:318px;
   height:50px;
   left:200px;
   top:100px;
}

Vær opmærksom på at height: 100% godt kan give problemer med
positioneret indhold - husk at tjekke i flere browsere.
--
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~ (10-11-2005)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 10-11-05 22:06

jumbo skrev:

> Har lagt det ind her:
>
> http://www.fdp.dk/test/

Hvad er problemet?

"Det virker ikke" fortæller ikke så meget om hvad der er galt - se
evt. siden her: <http://infimum.dk/HTML/hjaelpmig.html>.
--
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

jumbo (10-11-2005)
Kommentar
Fra : jumbo


Dato : 10-11-05 22:42

Jens GyldenkærneClausen wrote in dk.edb.internet.webdesign.html:
> jumbo skrev:
>
> > Har lagt det ind her:
> >
> > http://www.fdp.dk/test/
>
> Hvad er problemet?

Synes du ikke, at det ser mærkeligt ud, at menu-"frame'n" ikke når
nær så langt ned som indholds-"frame'"?

--
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

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

Månedens bedste
Årets bedste
Sidste års bedste