|
|
 | centrer site i CSS
Fra : Kim Emax |
Dato : 16-10-09 02:25 |
|
Hejsa
Hvordan laver I andre en centereret side med CSS? Jeg har denne
løsning:
body {min-width:1000;text-align:center}
#body_wrapper{min-width:1000;margin-left:auto;margin-right:auto;}
..page{ // her er selve sitet
<body id="body_wrapper">
Det fungerer sådan set som det skal... indtil der er så meget content
at en scrollbar dukker op, så skubbes layoutet en smule.
Hvordan løser I det? Jeg tænker lidt i baner ala bruge javascript til
at detecte bredden på skærmen (eks. 1600px) og så korrigere for en
evt. scrollbar (20px) (hvis js ikke detecter den fulde bredde af
browserens skærm), trække bredden af mit site fra og dividere med 2
((1600-20)/2 = 290) og så lave en <div
style="float:left;block:hidden;width:290px;"></div> før <div
class="page"> (som så bliver en float:left også)
Pt. har jeg løst det ved at sætte en min-height:1000px på body, men
det er bare ikke optimalt, da scrollbaren altid vises og folk måske
undrer sig over, hvorfor man kan scrolle og der så ikke er noget at
vise....
--
Mvh
Kim Emax
| |
 Birger Sørensen (16-10-2009)
| Kommentar
Fra : Birger Sørensen |
Dato : 16-10-09 10:12 |
|
Kim Emax:
> Hejsa
>
> Hvordan laver I andre en centereret side med CSS? Jeg har denne
> løsning:
>
> body {min-width:1000;text-align:center}
> #body_wrapper{min-width:1000;margin-left:auto;margin-right:auto;}
> .page{ // her er selve sitet
> <body id="body_wrapper">
>
> Det fungerer sådan set som det skal... indtil der er så meget content
> at en scrollbar dukker op, så skubbes layoutet en smule.
>
> Hvordan løser I det? Jeg tænker lidt i baner ala bruge javascript til
> at detecte bredden på skærmen (eks. 1600px) og så korrigere for en
> evt. scrollbar (20px) (hvis js ikke detecter den fulde bredde af
> browserens skærm), trække bredden af mit site fra og dividere med 2
> ((1600-20)/2 = 290) og så lave en <div
> style="float:left;block:hidden;width:290px;"></div> før <div
> class="page"> (som så bliver en float:left også)
>
> Pt. har jeg løst det ved at sætte en min-height:1000px på body, men
> det er bare ikke optimalt, da scrollbaren altid vises og folk måske
> undrer sig over, hvorfor man kan scrolle og der så ikke er noget at
> vise....
Hvis du vil undgå sideforskydninger, afhængig af indholdet, kan du
bruge CSS scroll indstilling.
Der er vist noget med at det skal gøres forskelligt i forskellige
browsere.
(Og min ISP har lidt bøvl med at finde internettet pt. - vist noget med
en fejl hos TDC eller nogle overgravede kabler - så jeg kan ikke lige
finde link til løsninger, men kommer det her igennem, er der da lidt at
søge på)
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Birger Sørensen (16-10-2009)
| Kommentar
Fra : Birger Sørensen |
Dato : 16-10-09 10:23 |
|
Jeg prøver lige igen
>> ((1600-20)/2 = 290) og så lave en <div
>> style="float:left;block:hidden;width:290px;"></div> før <div
>> class="page"> (som så bliver en float:left også)
der er vist ikke nogen CSS egenskab der hedder block...
> Hvis du vil undgå sideforskydninger, afhængig af indholdet, kan du bruge CSS
> scroll indstilling.
> Der er vist noget med at det skal gøres forskelligt i forskellige browsere.
> (Og min ISP har lidt bøvl med at finde internettet pt. - vist noget med en
> fejl hos TDC eller nogle overgravede kabler - så jeg kan ikke lige finde link
> til løsninger, men kommer det her igennem, er der da lidt at søge på)
Og den jeg tænkte på her er overflow.
Hvis den sættes til scroll, mener jeg at browserne (i hvert fald nogen
af dem) vil vise (sætte plads af til) scrollbar, selv om den ikke skal
bruges.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
 Rune Jensen (16-10-2009)
| Kommentar
Fra : Rune Jensen |
Dato : 16-10-09 16:42 |
|
Birger Sørensen skrev:
> Jeg prøver lige igen
>
>>> ((1600-20)/2 = 290) og så lave en <div
>>> style="float:left;block:hidden;width:290px;"></div> før <div
>>> class="page"> (som så bliver en float:left også)
>
> der er vist ikke nogen CSS egenskab der hedder block...
Både og. Det hedder display:block;
...hvis man altså vil bruge block;)
> Og den jeg tænkte på her er overflow.
> Hvis den sættes til scroll, mener jeg at browserne (i hvert fald nogen
> af dem) vil vise (sætte plads af til) scrollbar, selv om den ikke skal
> bruges.
Jeg kan ikke huske, hvem der kom med løsningen, men det har været
diskuteret før. Humlen er ikke at have den dér ene pixel, som laver en
egentlig scroll-bar, ved f.eks. height:101% på body, men kun en "grayed
out" scrollbar. Jeg mener, det var en CSS3-løsning så det vil
sandsynligvis ikke validere, men i dette tilfælde, synes jeg ikke det
gør noget (bare alt det andet validerer).
MVH
Rune Jensen
| |
Jørgen Farum Jensen (16-10-2009)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 16-10-09 11:34 |
|
Kim Emax skrev:
> Hejsa
>
> Hvordan laver I andre en centereret side med CSS? Jeg har denne
> løsning:
>
> body {min-width:1000;text-align:center}
> #body_wrapper{min-width:1000;margin-left:auto;margin-right:auto;}
> .page{ // her er selve sitet
> <body id="body_wrapper">
>
> Det fungerer sådan set som det skal... indtil der er så meget content
> at en scrollbar dukker op, så skubbes layoutet en smule.
>
> Hvordan løser I det? Jeg tænker lidt i baner ala bruge javascript til
> at detecte bredden på skærmen (eks. 1600px) og så korrigere for en
> evt. scrollbar (20px) (hvis js ikke detecter den fulde bredde af
> browserens skærm), trække bredden af mit site fra og dividere med 2
> ((1600-20)/2 = 290) og så lave en <div
> style="float:left;block:hidden;width:290px;"></div> før <div
> class="page"> (som så bliver en float:left også)
>
> Pt. har jeg løst det ved at sætte en min-height:1000px på body, men
> det er bare ikke optimalt, da scrollbaren altid vises og folk måske
> undrer sig over, hvorfor man kan scrolle og der så ikke er noget at
> vise....
Så meget om så lidt  En JavaScript
løsning på et præsentationmæssigt problem
forekommer mig mindre optimalt.
En side centreres (midtstilles vandret) ved
1.
At omklamre alt indhold med en div,
for eksempel
<div id="side">
[Alt indhold ]
</div>
2. Oprette en formdeklaration, der auto-
centrerer siden, for eksempel:
#side {
width:95%;
min-width: [whatever]
max-width:970px;
margin:0 auto;
}
Sættes højre og venstre margin til
auto, fordeler browseren selv den overskydende
plads. (Bortset fra IE5, og hvem gider tage sig
af det?)
Der er som nævnt et problem med at visse
browsere ikke afsætter en rulleskakt, dersom
sidens indhold ikke betinger det. Og løsningen
på det er at fremtvinge en rulleskakt i alle
tilfælde:
html { /*FF rulleskakt fiks */
overflow-y:scroll; }
Se evt.
http://webdesign101.dk/csslayout/autocentrering.php
og
http://webdesign101.dk/csslayout/varia/eksempel1.html
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..
| |
Kim Emax (16-10-2009)
| Kommentar
Fra : Kim Emax |
Dato : 16-10-09 17:10 |
|
On Oct 16, 12:34 pm, Jørgen Farum Jensen <jfjen...@yahoo.dk> wrote:
> Så meget om så lidt En JavaScript
> løsning på et præsentationmæssigt problem
> forekommer mig mindre optimalt.
tjaee, min tanke var at have en tom left block, der har en vis bredde,
derefter min center page og så pyt med om højre block så får hugget
lidt af sin bredde, da den også er tom. I teorien burde det virke.
> En side centreres (midtstilles vandret) ved
> 1.
> At omklamre alt indhold med en div,
> for eksempel
> <div id="side">
> [Alt indhold ]
> </div>
> 2. Oprette en formdeklaration, der auto-
> centrerer siden, for eksempel:
> #side {
> width:95%;
> min-width: [whatever]
> max-width:970px;
> margin:0 auto;
>
> }
>
> Sættes højre og venstre margin til
> auto, fordeler browseren selv den overskydende
> plads. (Bortset fra IE5, og hvem gider tage sig
> af det?)
>
> Der er som nævnt et problem med at visse
> browsere ikke afsætter en rulleskakt, dersom
> sidens indhold ikke betinger det. Og løsningen
> på det er at fremtvinge en rulleskakt i alle
> tilfælde:
> html { /*FF rulleskakt fiks */
> overflow-y:scroll; }
Rulleskakt er et nyt sjovt navn jeg ikke har hørt før om en
scrollbar
Men ovenstående løsning har jeg og jeg har også løst "hoppe problemet"
i første omgang med en overflow-y:scroll, det er bare ikke specielt
kønt at der _altid_ er en scrollbar uanset, at siden kun fylder
halvdelen af højden, så jeg vil forsøge med en JS løsning på venstre
block og vende tilbage med input om det spiller
> Se evt. http://webdesign101.dk/csslayout/autocentrering.php
> og http://webdesign101.dk/csslayout/varia/eksempel1.html
Dem tjekker jeg lige op på, tak for input.
--
Mvh
Kim Emax
| |
Kim Emax (16-10-2009)
| Kommentar
Fra : Kim Emax |
Dato : 16-10-09 17:12 |
|
Nå, du har fået dit kabel igen?
On Oct 16, 11:22 am, Birger Sørensen <s...@bbsorensen.com> wrote:
> Jeg prøver lige igen
>
> >> ((1600-20)/2 = 290) og så lave en <div
> >> style="float:left;block:hidden;width:290px;"></div> før <div
> >> class="page"> (som så bliver en float:left også)
>
> der er vist ikke nogen CSS egenskab der hedder block...
Display:hidden var det jeg mente. Jeg vil afsætte bredden af blokken,
men ikke vise den.
> > Hvis du vil undgå sideforskydninger, afhængig af indholdet, kan du bruge CSS
> > scroll indstilling.
> > Der er vist noget med at det skal gøres forskelligt i forskellige browsere.
> > (Og min ISP har lidt bøvl med at finde internettet pt. - vist noget med en
> > fejl hos TDC eller nogle overgravede kabler - så jeg kan ikke lige finde link
> > til løsninger, men kommer det her igennem, er der da lidt at søge på)
>
> Og den jeg tænkte på her er overflow.
> Hvis den sættes til scroll, mener jeg at browserne (i hvert fald nogen
> af dem) vil vise (sætte plads af til) scrollbar, selv om den ikke skal
> bruges.
Jeps, jeg har sat overflow-y:scroll, men det giver bare en grim scroll
bar selv på en side, der kun er halvt så høj som skærmen. Jeg mindes
ikke der har været den slags problemer med tables og plain HTML?
--
Mvh
Kim Emax
| |
Birger Sørensen (17-10-2009)
| Kommentar
Fra : Birger Sørensen |
Dato : 17-10-09 08:55 |
|
Kim Emax forklarede den 17-10-2009:
> Nå, du har fået dit kabel igen?
Ind imellem og nu og da..
> On Oct 16, 11:22 am, Birger Sørensen <s...@bbsorensen.com> wrote:
>> Jeg prøver lige igen
>>
>>>> ((1600-20)/2 = 290) og så lave en <div
>>>> style="float:left;block:hidden;width:290px;"></div> før <div
>>>> class="page"> (som så bliver en float:left også)
>>
>> der er vist ikke nogen CSS egenskab der hedder block...
>
> Display:hidden var det jeg mente. Jeg vil afsætte bredden af blokken,
> men ikke vise den.
display har så ikke nogen værdi der hedder hidden.
Du skal bruge visibility : hidden;
For display, hedder det display : none; og det tager elementet (og alle
det indeholder) helt ud af flowet.
8X
> Jeps, jeg har sat overflow-y:scroll, men det giver bare en grim scroll
> bar selv på en side, der kun er halvt så høj som skærmen. Jeg mindes
> ikke der har været den slags problemer med tables og plain HTML?
Det er enten eller. Det er scrollbaren der er årsag til
sideforskydningen.
Man kan forestille sig mange løsninger. Enten js kompensering, eller
detektering af om den er det med js, og hvis, så anbringe en
tilsvarende usynligt element i den modsatte side. Eller hvis den ikke
er, anbringe et element hvor den ville (skulle) have været.
Man kan også gå over åen efter vand...
Eller man kan absoult positionere. Hvilket formentlig bare vil flytte
problemet til et andet element.
Horfor syntes du en scrollbar er grim? Den er et udmærket værktøj, hvis
hele siden ikke kan ses i vinduet - et uundværligt værktøj endda.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Erik Ginnerskov (17-10-2009)
| Kommentar
Fra : Erik Ginnerskov |
Dato : 17-10-09 15:35 |
|
Kim Emax wrote:
> body {min-width:1000;text-align:center}
Ved at sætte en minimumbredde på 1000 px fremtvinger du en vandret scrollbar
i et browservindue, der ikke er så bredt. Det vil irritere brugerne.
Og så er det i øvrigt ikke validt (mange browsere vil end ikke honorere
specifikationen) ikke at sætte benævnelse på en størrelse.
body {min-width:1000px;text-align:center} er den korrekte syntaks.
Endvidere vil text-align:center centrere de enkelte tekstlinjer, så både
højre og venstre margin vil variere fra linje til linje. Det er næppe det,
du vil opnå.
Løsningen på dit problem er at affinde dig med den tomme lodrette scrollbar
på korte sider:
body {
heigth: 101%;
}
wrapper {
width: 95%;
max-width: 1000px;
margin: auto;
}
--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://html-faq.dk
| |
Jahirah (18-10-2009)
| Kommentar
Fra : Jahirah |
Dato : 18-10-09 21:03 |
|
Kim Emax wrote in dk.edb.internet.webdesign.html:
>
> Hvordan laver I andre en centereret side med CSS?
>
-----------8<---------------------------
Jeg plejer at lave en container-div som jeg gir "margin:0 auto;". Det
centrerer selve container div'en uanset opløsning. Men jeg er ikke
sikker på det er det du leder efter?
//Jahirah
--
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 (19-10-2009)
| Kommentar
Fra : Birger Sørensen |
Dato : 19-10-09 14:47 |
|
Jahirah udtrykte præcist:
> Kim Emax wrote in dk.edb.internet.webdesign.html:
>>
>> Hvordan laver I andre en centereret side med CSS?
>>
> -----------8<---------------------------
>
> Jeg plejer at lave en container-div som jeg gir "margin:0 auto;". Det
> centrerer selve container div'en uanset opløsning. Men jeg er ikke
> sikker på det er det du leder efter?
>
> //Jahirah
Problemet er at "auto" ændrer sig hvis scrollbaren i højre side vises
eller skjules.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
|
|