|
| Problemer med layout via css. Fra : Peter Anskjær |
Dato : 08-05-04 17:33 |
|
Hej NG
Jeg har kastet mig ud i noget meget besværligt layout synes jeg. Jeg vil jo
gerne lave det med css, men sådan som jeg gerne vil have det har jeg
problemer med at få til at virke.
http://testing.nskjaer.dk/
Meningen er at der skal være en midte på siden (wrapper) med en menu i den
ene side og indhold i midten, jeg kunne så godt tænke mig at lave en border
på menuen som gik hele vejen ned til footer, ikke bare en baggrundsfarve.
Problemet er nu at min-height ikke virker i IE6.0, så det duer jo ikke
rigtigt. Tanken var at jeg ville lave en ramme i venstre side af wrapperen
(rød ramme nu) og det samme i venstre side af content (prikkede blå ramme
nu). Men det vil ikke helt som jeg gerne vil.
Er der nogle der kan komme med nogle hints til hvordan jeg kan få en ramme
omkring hele menu-div'en fra header til footer?
Jeg havde håbet at jeg ved at definere height på menuen kunne tvinge wrapper
til at være minimum den højde og højere hvis content var det. Men wrapper er
uafhængig af menuhøjden fordi det er en float. Ligeledes kan jeg heller ikke
få content til at være hele højden af wrapper hvis den næsten intet indhold
har.
Mvh
Peter
| |
Kasper Christensen (08-05-2004)
| Kommentar Fra : Kasper Christensen |
Dato : 08-05-04 17:38 |
|
> Meningen er at der skal være en midte på siden (wrapper) med en menu i den
> ene side og indhold i midten, jeg kunne så godt tænke mig at lave en
border
> på menuen som gik hele vejen ned til footer, ikke bare en baggrundsfarve.
> Problemet er nu at min-height ikke virker i IE6.0, så det duer jo ikke
> rigtigt.
Hej Peter
Jeg kunne ikke lige finde dit stylesheet under style.css, så der er ikke så
meget hjælp herfra, men du kan bruge nedenståede linier og de udgør
min-height i IE.
#main {
height: expression(document.getElementById("main").style.pixelHeight <= 200
? "200px" : "auto");
}
--
Med venlig hilsen
Kasper Christensen
Multimediedesigner
http://www.kasperc.dk
| |
Peter Anskjær (08-05-2004)
| Kommentar Fra : Peter Anskjær |
Dato : 08-05-04 17:43 |
|
"Kasper Christensen" <no@email123321.com> skrev i en meddelelse
news:409d0ccd$0$3053$14726298@news.sunsite.dk...
>
> > Meningen er at der skal være en midte på siden (wrapper) med en menu i
den
> > ene side og indhold i midten, jeg kunne så godt tænke mig at lave en
> border
> > på menuen som gik hele vejen ned til footer, ikke bare en
baggrundsfarve.
> > Problemet er nu at min-height ikke virker i IE6.0, så det duer jo ikke
> > rigtigt.
>
> Hej Peter
>
> Jeg kunne ikke lige finde dit stylesheet under style.css, så der er ikke
så
> meget hjælp herfra, men du kan bruge nedenståede linier og de udgør
> min-height i IE.
Tænkte ikke lige på at det ikke er et rigtigt subdomæne, så linket er:
http://www.nskjaer.dk/testing/style.css
og http://www.nskjaer.dk/testing/
til siden.
> #main {
>
> height: expression(document.getElementById("main").style.pixelHeight <=
200
> ? "200px" : "auto");
>
> }
>
Tak skal du have.
Mvh
Peter
| |
Peter Anskjær (08-05-2004)
| Kommentar Fra : Peter Anskjær |
Dato : 08-05-04 17:59 |
|
"Kasper Christensen" <no@email123321.com> skrev i en meddelelse
news:409d0ccd$0$3053$14726298@news.sunsite.dk...
>
> > Meningen er at der skal være en midte på siden (wrapper) med en menu i
den
> > ene side og indhold i midten, jeg kunne så godt tænke mig at lave en
> border
> > på menuen som gik hele vejen ned til footer, ikke bare en
baggrundsfarve.
> > Problemet er nu at min-height ikke virker i IE6.0, så det duer jo ikke
> > rigtigt.
>
> Hej Peter
>
> Jeg kunne ikke lige finde dit stylesheet under style.css, så der er ikke
så
> meget hjælp herfra, men du kan bruge nedenståede linier og de udgør
> min-height i IE.
> #main {
>
> height: expression(document.getElementById("main").style.pixelHeight <=
200
> ? "200px" : "auto");
>
> }
>
Så er det testet, det virker sådan set ok, bortset fra at koden så laver
height højere end 200 hvis der er et element i kassen der er højere end 200.
Det er imidlertidigt ikke noget problem i mit tilfælde, så det er fint. Ved
du om denne løsning med både at bruge min-height og height som ovenfor er
robust, eller er der nogle browsere af nyere dato hvor den gør dumme ting?
Mvh
Peter
| |
Anders Thorsen Holm (08-05-2004)
| Kommentar Fra : Anders Thorsen Holm |
Dato : 08-05-04 18:04 |
|
"Peter Anskjær" <m@ybe.not> wrote:
> Ved du om denne løsning med både at bruge min-height og height som
> ovenfor er robust, eller er der nogle browsere af nyere dato hvor den
> gør dumme ting?
Den nævnte metode virker kun i IE, da den gør brug af IE-specifik kode
- det vil altså ikke virke i andre browsere. I værste fald kan det
måske få andre browsere til at kløjes i den øvrige kode, så man bør
inkludere det i et separat style sheet, der kun indlæses af IE. F.eks.
med conditional comments:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" media="screen" />
<![endif]-->
--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/
Overvejer du at købe en DVD-afspiller? Så hold dig fra Fona!
Læs hvorfor: http://www.daimi.au.dk/~zoolook/fona/
| |
Peter Loumann (08-05-2004)
| Kommentar Fra : Peter Loumann |
Dato : 08-05-04 18:22 |
|
"Kasper Christensen" <no@email123321.com> skrev:
>Jeg kunne ikke lige finde dit stylesheet under style.css
Det kommer fint frem her, så stien er rigtig nok.
--
hilsen pl (peloda hos tiscali her i landet)
http://pedalo.dk/thailand/
| |
Kasper Christensen (08-05-2004)
| Kommentar Fra : Kasper Christensen |
Dato : 08-05-04 18:54 |
|
"Peter Loumann" <me@privacy.net> wrote in message
news:io5q90dimffn2k0bpr5lk24vng8svr5pv6@4ax.com...
> "Kasper Christensen" <no@email123321.com> skrev:
>
> >Jeg kunne ikke lige finde dit stylesheet under style.css
>
> Det kommer fint frem her, så stien er rigtig nok.
http://testing.nskjaer.dk/
Ikke hvis du skriver det førstnævnte
--
Med venlig hilsen
Kasper Christensen
Multimediedesigner
http://www.kasperc.dk
| |
Peter Anskjær (08-05-2004)
| Kommentar Fra : Peter Anskjær |
Dato : 08-05-04 18:02 |
|
"Peter Anskjær" <m@ybe.not> skrev i en meddelelse
news:409d0b9a$0$255$edfadb0f@dread12.news.tele.dk...
> Hej NG
> Jeg har kastet mig ud i noget meget besværligt layout synes jeg. Jeg vil
jo
> gerne lave det med css, men sådan som jeg gerne vil have det har jeg
> problemer med at få til at virke.
> http://testing.nskjaer.dk/
> Meningen er at der skal være en midte på siden (wrapper) med en menu i den
> ene side og indhold i midten, jeg kunne så godt tænke mig at lave en
border
> på menuen som gik hele vejen ned til footer, ikke bare en baggrundsfarve.
> Problemet er nu at min-height ikke virker i IE6.0, så det duer jo ikke
> rigtigt. Tanken var at jeg ville lave en ramme i venstre side af wrapperen
> (rød ramme nu) og det samme i venstre side af content (prikkede blå ramme
> nu). Men det vil ikke helt som jeg gerne vil.
> Er der nogle der kan komme med nogle hints til hvordan jeg kan få en ramme
> omkring hele menu-div'en fra header til footer?
> Jeg havde håbet at jeg ved at definere height på menuen kunne tvinge
wrapper
> til at være minimum den højde og højere hvis content var det. Men wrapper
er
> uafhængig af menuhøjden fordi det er en float. Ligeledes kan jeg heller
ikke
> få content til at være hele højden af wrapper hvis den næsten intet
indhold
> har.
>
Jeg har jo fået en mulig løsning til problemet, men den er ikke valid css,
så hvis der er nogle der kender til en valid løsning, så vil jeg meget gerne
høre nærmere.
Mvh
Peter
| |
Anders Thorsen Holm (08-05-2004)
| Kommentar Fra : Anders Thorsen Holm |
Dato : 08-05-04 18:20 |
|
"Peter Anskjær" <m@ybe.not> wrote:
> http://testing.nskjaer.dk/
> Meningen er at der skal være en midte på siden (wrapper) med en
> menu i den ene side og indhold i midten, jeg kunne så godt tænke
> mig at lave en border på menuen som gik hele vejen ned til footer,
> ikke bare en baggrundsfarve.
Hvis #menu har en *fast* bredde, og der kun skal være en højre og
venstre border, kan du med fordel lave et baggrundsbillede, du
placerer på #wrapper og gentager vertikalt.
#wrapper {
background: #fff url(bg.gif) repeat-y top left;
}
Da #menu er float'et, skal virkningen heraf ophæves, såldes at
#wrapper kan "pakke sig rundt omkring" #menu og #content.
Du kunne måske gøre brug af teknikken i følgende eksempel:
[1] < http://www.daimi.au.dk/~zoolook/webdesign/floating2.html>
Godt nok er ovenstående med en fast bredde på hele indholdet, men det
er blot at fjerne 'width: 600px' fra #bodywrapper, samt 'float:
left' og 'width: 400px' fra #indhold.
Vær dog opmærksom på, at IE har en irriternde bug, hvis man floater
et elemente ved siden af et ikke-floatet element. Det er illustreret
her:
[2] < http://www.daimi.au.dk/~zoolook/webdesign/floatbug.html>
Hvis du kan overleve dette, kan du udvide [1] med følgende til at få
en baggrund til at imitere kanten på højre og venstre side af #menu:
background: #fff url(bg.gif) repeat-y top left;
Og så et lille råd: I det hele taget bør du undgå at definere faste
højder på elementerne, da indholdet, såfremt det fylder mere, vil
flyde ud over.
--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/
Overvejer du at købe en DVD-afspiller? Så hold dig fra Fona!
Læs hvorfor: http://www.daimi.au.dk/~zoolook/fona/
| |
Peter Anskjær (09-05-2004)
| Kommentar Fra : Peter Anskjær |
Dato : 09-05-04 13:29 |
|
"Anders Thorsen Holm" <zoolook@daimi.au.invalid> skrev i en meddelelse
news:Xns94E3C4C498FF2zoolook@130.225.247.90...
> "Peter Anskjær" <m@ybe.not> wrote:
>
>
> #wrapper {
> background: #fff url(bg.gif) repeat-y top left;
> }
>
Det ser ud til at virke så længe wrapper indeholder hele menuboxen.
> Da #menu er float'et, skal virkningen heraf ophæves, såldes at
> #wrapper kan "pakke sig rundt omkring" #menu og #content.
>
Men hvis menu ikke er floatet left vil content jo hoppe ned under menu,
eller er der noget jeg har misforstået?
>
> Du kunne måske gøre brug af teknikken i følgende eksempel:
>
> [1] < http://www.daimi.au.dk/~zoolook/webdesign/floating2.html>
>
> Godt nok er ovenstående med en fast bredde på hele indholdet, men det
> er blot at fjerne 'width: 600px' fra #bodywrapper, samt 'float:
> left' og 'width: 400px' fra #indhold.
>
Jeg kan ikke få wrapperen til at indeholde hele menuen hvis content er
lavere end menu.
>
> Og så et lille råd: I det hele taget bør du undgå at definere faste
> højder på elementerne, da indholdet, såfremt det fylder mere, vil
> flyde ud over.
>
Jeg har kun højde på her til at begynde med, beholder muligtvis højden på
menu da den jo er af fast højde, men alle de andre bliver helt sikkert
fjernet. Ved at have højde på menu-boxen kan jeg jo sikre mig at siden har
en hvis minimumshøjde og footeren derved ikke sider halvvejs oppe på siden
ved 1024*768 på undersider med lidt indhold.
Hvis du kan forklare mig lidt nærmere hvordan jeg sikrer mig at content og
menu kommer til at være ved siden af hinanden og content får variabel bredde
og de samtidigt begge er helt indeholdt i wrapper vil jeg blive meget glad.
Mvh
Peter
| |
Anders Thorsen Holm (09-05-2004)
| Kommentar Fra : Anders Thorsen Holm |
Dato : 09-05-04 14:05 |
|
"Peter Anskjær" <m@ybe.not> wrote:
> Men hvis menu ikke er floatet left vil content jo hoppe ned under
> menu, eller er der noget jeg har misforstået?
Du skal stadig bruge float og clear til at ophæve effekten det rette
sted, således at f.eks. #footer kommer korrekt ind under #menu
#contents.
> Jeg kan ikke få wrapperen til at indeholde hele menuen hvis
> content er lavere end menu.
Jeg har lavet et lille tilrettet eksempel - bemærk, at jeg her bruger
en div uden indhold (jo, en kommentar så den ikke ignoreres) til at
cleare:
< http://www.daimi.au.dk/~zoolook/webdesign/nskjaer.html>
Ikke kønt, men det virker vist.
> Jeg har kun højde på her til at begynde med, beholder muligtvis
> højden på menu da den jo er af fast højde, men alle de andre
> bliver helt sikkert fjernet.
Hvis menuen vil bestå af ren tekst, kan du netop ikke være sikker på
at den overholder en given højde, hvis brugeren ændrer på
tekststørrelsen.
--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/
Overvejer du at købe en DVD-afspiller? Så hold dig fra Fona!
Læs hvorfor: http://www.daimi.au.dk/~zoolook/fona/
| |
Peter Anskjær (10-05-2004)
| Kommentar Fra : Peter Anskjær |
Dato : 10-05-04 15:33 |
|
"Anders Thorsen Holm" <zoolook@daimi.au.invalid> skrev i en meddelelse
news:Xns94E499A794F1Czoolook@130.225.247.90...
>
> Du skal stadig bruge float og clear til at ophæve effekten det rette
> sted, således at f.eks. #footer kommer korrekt ind under #menu
> #contents.
>
Havde ikke lige tænkt på at lave en clear indeni wrapperen, det er
selvfølgeligt løsningen.
>
> Jeg har lavet et lille tilrettet eksempel - bemærk, at jeg her bruger
> en div uden indhold (jo, en kommentar så den ikke ignoreres) til at
> cleare:
>
> < http://www.daimi.au.dk/~zoolook/webdesign/nskjaer.html>
>
> Ikke kønt, men det virker vist.
>
Det ser rigtigt nok ud til at virke, jeg synes da ikke er det er lige så
slemt som alle mulige andre hacks. Som sagt, så er det vel kun den ekstra
div der gør udslaget?
> > Jeg har kun højde på her til at begynde med, beholder muligtvis
> > højden på menu da den jo er af fast højde, men alle de andre
> > bliver helt sikkert fjernet.
>
> Hvis menuen vil bestå af ren tekst, kan du netop ikke være sikker på
> at den overholder en given højde, hvis brugeren ændrer på
> tekststørrelsen.
>
Menuen kommer til at bestå af tekst og lidt grafik, havde ikke tænkt på at
den også skulle skalere, men kan sagtens se det smarte i det.
Jeg siger mange tak for hjælpen, du kan se et foreløbigt udkast her:
www.nskjaer.dk/k, der er stadigvæk småfejl i form af lidt farvefejl i
menukassen og der mangler også lidt omkring adressen.
Mvh
Peter
| |
|
|