|
|
 | Centrere en hel side med CSS?
Fra : Martin Sand |
Dato : 16-08-08 17:30 |
|
Hej Alle.
Førhen har jeg altid brugt tabeler til at bygge mine hjemmesider,
men nu vil jeg gerne gå over til css.
Men jeg har et problem, - hvad gør jeg, når jeg vil have
centreret hele siden, så den ikke bare er ude i kanten af
skærmen. kan jo selvfølgelig nemt "skubbe" den ind, så den ser ud
ti lat være centreret på min skærm, men hvis man så kører den med
en mindre opløsning, så skal man også scrole horisontalt :(
Jeg vil have en fast bredde på min side (content) kald det hvad i
vil, og fast bredde på mine menuer i siderne, så det er kun hvis
opløsningen er større end siden, at den skal komme "luft" på hver
side, så det ser ud som den er i midten.
/Martin
--
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
| |
 Lone Søderberg (16-08-2008)
| Kommentar
Fra : Lone Søderberg |
Dato : 16-08-08 17:50 |
|
Martin Sand wrote in dk.edb.internet.webdesign.html:
> Hej Alle.
>
> Førhen har jeg altid brugt tabeler til at bygge mine hjemmesider,
> men nu vil jeg gerne gå over til css.
>
> Men jeg har et problem, - hvad gør jeg, når jeg vil have
> centreret hele siden, så den ikke bare er ude i kanten af
> skærmen. kan jo selvfølgelig nemt "skubbe" den ind, så den ser ud
> ti lat være centreret på min skærm, men hvis man så kører den med
> en mindre opløsning, så skal man også scrole horisontalt :(
>
> Jeg vil have en fast bredde på min side (content) kald det hvad i
> vil, og fast bredde på mine menuer i siderne, så det er kun hvis
> opløsningen er større end siden, at den skal komme "luft" på hver
> side, så det ser ud som den er i midten.
>
> /Martin
Ved ikke om jeg forstod dig ret, men jeg plejer altid at starte min
css fil med følgende kode:
html, body {
margin: 0;
padding: 0;
}
Dette får mine sider til at blive centreret, jeg har også fast
bredde på min sider... noget som folk jo elles ikke taler for, men
kan umiddelbart ikke finde ud af at gøre layoutet flydende....
> --
> 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
--
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
| |
Martin Sand (16-08-2008)
| Kommentar
Fra : Martin Sand |
Dato : 16-08-08 18:03 |
|
en side, som har en fast bredde og hvor det er det luft på begge sider,
der ændrer størrelse, når du resizer vinduet eller har en anden
opløsning
f.eks:
http://www.komogvind.dk/
Hvis jeg laver en stor <div> rundt om hele sidens indhold (body)
kan jeg så centrere en div? det ville jo løse mit problem..
/Martin
--
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
| |
Erik Ginnerskov (16-08-2008)
| Kommentar
Fra : Erik Ginnerskov |
Dato : 16-08-08 22:55 |
| | |
 Lone Søderberg (17-08-2008)
| Kommentar
Fra : Lone Søderberg |
Dato : 17-08-08 11:29 |
|
Erik Ginnerskov wrote in dk.edb.internet.webdesign.html:
> Lone Søderberg wrote:
>
> > Ved ikke om jeg forstod dig ret, men jeg plejer altid at starte min
> > css fil med følgende kode:
> >
> > html, body {
> > margin: 0;
> > padding: 0;
> > }
> > Dette får mine sider til at blive centreret,
>
> Det centrerer ikke noget som helst. Det fjerner bare margin og padding på
> siden, så tekster lægger sig helt ud til browserkanten i begge sider.
>
> Skal man centrere siden med en fast bredde som Martin ønsker, skal man lægge
> det hele i en ydre boks, som man tildeler margin auto:
>
> http://hjemmesideskolen.dk/html/flyd.asp?id=fpx
Nej sorry, det var vist mig der var træt der...
> Med venlig hilsen
> Erik Ginnerskov
> http://hjemmesideskolen.dk - http://ginnerskov.dk
> http://vestfynswebdesign.dk - http://html-faq.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
| |
Lone Søderberg (17-08-2008)
| Kommentar
Fra : Lone Søderberg |
Dato : 17-08-08 14:29 |
|
Jeg plejer at lave et content div og laver følgende css kode:
#content {
width: 950px;
padding-top: 0px;
padding-bottom: 0px;
background-color: #ffffff;
margin-left: auto;
margin-right: auto;
}
Heri lægger jeg diverse divs til banner menu og indhold, samt footer...
--
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
| |
Erik Ginnerskov (17-08-2008)
| Kommentar
Fra : Erik Ginnerskov |
Dato : 17-08-08 22:56 |
| | |
tage jørgensen (16-08-2008)
| Kommentar
Fra : tage jørgensen |
Dato : 16-08-08 18:42 |
|
Martin Sand wrote in dk.edb.internet.webdesign.html:
> Hej Alle.
>
> Førhen har jeg altid brugt tabeler til at bygge mine hjemmesider,
> men nu vil jeg gerne gå over til css.
>
> Men jeg har et problem, - hvad gør jeg, når jeg vil have
> centreret hele siden, så den ikke bare er ude i kanten af
> skærmen. kan jo selvfølgelig nemt "skubbe" den ind, så den ser ud
> ti lat være centreret på min skærm, men hvis man så kører den med
> en mindre opløsning, så skal man også scrole horisontalt :(
>
> Jeg vil have en fast bredde på min side (content) kald det hvad i
> vil, og fast bredde på mine menuer i siderne, så det er kun hvis
> opløsningen er større end siden, at den skal komme "luft" på hver
> side, så det ser ud som den er i midten.
>
> /Martin
>
Hej Martin
der er flere måder at gøre det på. Jeg gør som dette eksempel viser.
Det kan godt virke lidt besværligt, men det fungerer.
Jeg laver et div #Container, hvori alt indhold befinder sig.
Nedennævnte et fra en af mine sider.
Du kan se en testside på: http://www.thaimad.frac.dk
#container {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
width: 800px;
position: absolute;
background-image:
background-repeat:
margin-left: -400px;
left: 50%;
font-size: 12px;
line-height: 14px;
color:
overflow: auto;
}
hilsen tage
--
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
| |
Kerim Ellentoft (16-08-2008)
| Kommentar
Fra : Kerim Ellentoft |
Dato : 16-08-08 19:18 |
| | |
Birger Sørensen (16-08-2008)
| Kommentar
Fra : Birger Sørensen |
Dato : 16-08-08 19:39 |
|
tage jørgensen skrev:
> Martin Sand wrote in dk.edb.internet.webdesign.html:
>> Hej Alle.
>>
>> Førhen har jeg altid brugt tabeler til at bygge mine hjemmesider,
>> men nu vil jeg gerne gå over til css.
>>
>> Men jeg har et problem, - hvad gør jeg, når jeg vil have
>> centreret hele siden, så den ikke bare er ude i kanten af
>> skærmen. kan jo selvfølgelig nemt "skubbe" den ind, så den ser ud
>> ti lat være centreret på min skærm, men hvis man så kører den med
>> en mindre opløsning, så skal man også scrole horisontalt :(
>>
>> Jeg vil have en fast bredde på min side (content) kald det hvad i
>> vil, og fast bredde på mine menuer i siderne, så det er kun hvis
>> opløsningen er større end siden, at den skal komme "luft" på hver
>> side, så det ser ud som den er i midten.
>>
>> /Martin
>>
> Hej Martin
>
> der er flere måder at gøre det på. Jeg gør som dette eksempel viser.
> Det kan godt virke lidt besværligt, men det fungerer.
> Jeg laver et div #Container, hvori alt indhold befinder sig.
> Nedennævnte et fra en af mine sider.
>
> Du kan se en testside på: http://www.thaimad.frac.dk
>
>
> #container {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-style: normal;
> font-weight: normal;
> width: 800px;
> position: absolute;
>
> background-image:
> background-repeat:
> margin-left: -400px;
> left: 50%;
> font-size: 12px;
> line-height: 14px;
> color:
> overflow: auto;
> }
>
>
> hilsen tage
#container {
width : 790px; /* Eller hvilken bredde der ønskes */
margin : 0px auto;
}
Al indholdet indsættes i denne container, er hvad der er nødvendigt for
at centrere og give fast bredde på den måde spørgeren beder om.
Resten er overflødigt eller tjener andre formål.
Specielt umuliggør den negative venstre-margin i kombination med
absolut position, at siden kan ses med browser størrelser mindre end
den angivne bredde.
Birger
| |
Martin Sand (16-08-2008)
| Kommentar
Fra : Martin Sand |
Dato : 16-08-08 20:29 |
|
Tusind tak, det var lige præcis de informationer jeg skulle bruge!!
igen Tak
/martin
--
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
| |
Paw Jeppesen (17-08-2008)
| Kommentar
Fra : Paw Jeppesen |
Dato : 17-08-08 06:03 |
|
Må jeg stærkt fraråde at bruge negativ margner!
Hvis man bruger denne metode til at centrerer sit site, vil man hvis vinduet
er mindre i breden end siden, ikke kunne scrolle hen til den del der ligger
uden for vinduet...
Prøv f.eks. at klikke ind på den her side:
http://webdesign101.dk/csslayout/ex/autocentrering_4.html
Gør derefter det, at du gør vinduet mindre end indholdet, så vil du se hvad
jeg mener...
vh..
Paw J
> der er flere måder at gøre det på. Jeg gør som dette eksempel viser.
> Det kan godt virke lidt besværligt, men det fungerer.
> Jeg laver et div #Container, hvori alt indhold befinder sig.
> Nedennævnte et fra en af mine sider.
>
> Du kan se en testside på: http://www.thaimad.frac.dk
>
>
> #container {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-style: normal;
> font-weight: normal;
> width: 800px;
> position: absolute;
>
> background-image:
> background-repeat:
> margin-left: -400px;
> left: 50%;
> font-size: 12px;
> line-height: 14px;
> color:
> overflow: auto;
> }
>
>
> hilsen tage
>
> --
> 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 (16-08-2008)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 16-08-08 23:07 |
|
Martin Sand skrev:
>
> Jeg vil have en fast bredde på min side (content) kald det hvad i
> vil, og fast bredde på mine menuer i siderne, så det er kun hvis
> opløsningen er større end siden, at den skal komme "luft" på hver
> side, så det ser ud som den er i midten.
http://webdesign101.dk/csslayout/autocentrering.php
--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
| |
|
|