/ 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
Besværlig css mht 2 baggrundsbilleder.
Fra : Peter Anskjaer


Dato : 11-05-04 19:07

Hej NG
Jeg har et problem som jeg muligtvis godt kan løse, men jeg bryder mig
ikke om løsningen da den ikke ligefrem er elegant.
Jeg har denne her side:
<www.nskjaer.dk/k>
Bagrundsbilledet (www.nskjaer.dk/k/background.jpg) til højre var først
vedhæftet body, men det gav et ikke særligt pænt resultat i opløsninger
over 1024*768 eftersom det sluttede meget brat.
Derfor lavede jeg et nyt billede ved at klippe det nederste af
baggrunden ud. Dette har jeg sat ind som baggrund i body og ladet det
repeate vertikalt. Det rigtige baggrundsbillede har jeg sat ind i en
containerdiv som indeholder hele siden. Resultatet er fint med normal
skriftstørrelse, billedet vises og fortsætter i det uendelige med høje
opløsninger, men med mindre skriftstørrelse bliver menuen lavere og
derved bliver containerklassen ikke høj nok (når der ikke er så meget
indhold i content) til at vise hele baggrundsbilledet hvorved der bunden
af isbjerget ikke kommer med.
Dette kan muligtvis løses ved at lave en div i bredden 0px og højden
lige billedets højde og indsætte denne i container div'en. Men det er
ikke en køn løsning.
Jeg vil gerne have at siden vises uden scroll i IE6.0 med normal
skriftstørrelse og at hele isbjerget samtidigt vises når menuen er lidt
lavere pga mindre skriftstørrelse.
Er der ikke en lidt lettere og lidt smartere løsning i stedet for at
skulle indsætte en tom div og vil en tom div overhovedet kunne løse
problemet? Og i det hele taget, er der så en smartere måde at løse
problemet med at baggrundsbilledet skal fortsætte i stedet for at lave
en containerdiv?
Jeg opdagede problemet i Opera da den version jeg sidder på her åbenbart
kører med mindre skrifttype end IE standard.

Mvh
Peter Anskjær


 
 
Anders Thorsen Holm (11-05-2004)
Kommentar
Fra : Anders Thorsen Holm


Dato : 11-05-04 19:18

Peter Anskjaer <di030867@diku.dk> wrote:

Hej Peter

> <www.nskjaer.dk/k>
> Resultatet er fint med normal skriftstørrelse, billedet vises og
> fortsætter i det uendelige med høje opløsninger, men med mindre
> skriftstørrelse bliver menuen lavere og derved bliver
> containerklassen ikke høj nok (når der ikke er så meget indhold i
> content) til at vise hele baggrundsbilledet hvorved der bunden af
> isbjerget ikke kommer med.

Hvis #content som minumum skal have en given højde, kan du bruge CSS-
attributten min-height:

#content {
   min-height: 400px;
   /* samt øvrige attributter */
}

Desværre forstår IE ikke min-height, så her er man nødt til at bruge
lidt IE-specifik kode, som man dog heldigvis kan skjule fra andre
browsere.

Inkluder et specielt style sheet, ie.css, således:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css"
media="screen" />
<![endif]-->

og i ie.css har du så følgende:

#content {
   height: expression(document.getElementById            
       ("content").style.pixelHeight <= 400 ? "400px" : "auto");
}

Udover IE/Win er der også et par andre browsere, der ikke
understøtter min-height-attributten - svjh IE5.2/MacOS, Safari og
Konqueror. Men jeg er ikke helt sikker, så nu ikke noget med at
lynche mig, hvis det er noget vås

--
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 Anskjaer (11-05-2004)
Kommentar
Fra : Peter Anskjaer


Dato : 11-05-04 20:13



Anders Thorsen Holm (11-05-2004)
Kommentar
Fra : Anders Thorsen Holm


Dato : 11-05-04 21:00

Peter Anskjaer <di030867@diku.dk> wrote:

> Det er ikke content der skal have en minimumhøjde, det vil dog
> også løse problemet.

Så længe det bare løser problemet

>> Desværre forstår IE ikke min-height, så her er man nødt til at
>> bruge lidt IE-specifik kode, som man dog heldigvis kan skjule fra
>> andre browsere.
>>
> Derfor vil jeg helst undgå dette hack da det efter min mening er
> meget lidt kønt.

Somme tider er man nødt til at servere (pseudo)CSS udelukkende til IE
for at tilgodese denne browsers små spidsfindigheder. Metoden med
conditional comments til at inkludere sådanne style sheets er efter
min mening den mindst "skadelige".

> Er måden jeg har gjort det på for at lave to baggrundsbilleder en
> ok måde?

Der er sådan set ikke andre måder at få to baggrunde oveni hinanden
på. I hvert fald ikke nogen, der er nær så elegante.

> Og vil det kunne fungere med en tom div i venstre side af
> siden på billedets højde?

Tjo, det ville det måske, men så skal du nok tage højde for dens
placering i dokumentets flow og til at rode med relativ positionering
m.v.

Under alle omstændigheder ville jeg foretrække løsningen med et
særskilt style sheet til IE.

--
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 (12-05-2004)
Kommentar
Fra : Peter Anskjær


Dato : 12-05-04 14:35

"Anders Thorsen Holm" <zoolook@daimi.au.invalid> skrev i en meddelelse
news:Xns94E6E00AC855Azoolook@130.225.247.90...
> Peter Anskjaer <di030867@diku.dk> wrote:
>
> > Det er ikke content der skal have en minimumhøjde, det vil dog
> > også løse problemet.
>
> Så længe det bare løser problemet
>
Det er vel det vigtigste.
> >>
> > Derfor vil jeg helst undgå dette hack da det efter min mening er
> > meget lidt kønt.
>
> Somme tider er man nødt til at servere (pseudo)CSS udelukkende til IE
> for at tilgodese denne browsers små spidsfindigheder. Metoden med
> conditional comments til at inkludere sådanne style sheets er efter
> min mening den mindst "skadelige".
>
Det vil jo fungere, men jeg bryder mig ikke om det.

> > Er måden jeg har gjort det på for at lave to baggrundsbilleder en
> > ok måde?
>
> Der er sådan set ikke andre måder at få to baggrunde oveni hinanden
> på. I hvert fald ikke nogen, der er nær så elegante.
>
Okay, jeg fandt sådan set selv frem til metoden og syntes det var meget
besværligt, efter lidt forgæves søgen efter en bedre metode gav jeg op. Når
du nu siger det er den bedste måde, så er det jo fint.

> > Og vil det kunne fungere med en tom div i venstre side af
> > siden på billedets højde?
>
> Tjo, det ville det måske, men så skal du nok tage højde for dens
> placering i dokumentets flow og til at rode med relativ positionering
> m.v.

Jeg har nu løst problemet på en måde jeg synes er god, jeg har indsat en tom
div i højre side af en wrapper med float: right. Denne generer intet der og
jeg har jo en clearer nedenunder i forvejen som så bare clearer both nu.
Men jeg har rent faktisk ikke lige så meget brug for det længere da jeg har
droppet at lade baggrundsbilledet fortsætte ned, problemet blev løst som det
skulle, men jeg opdagede at IE ikke understøtter fixed baggrundsbilleder i
andet end body, jeg synes det var vigtigere at baggrundsbilledet var fixed
fremfor at det fortsatte ned. Så nu har jeg i stedet klippet lidt ekstra på
billedet så det fortsætter lidt og så fader ud, det er et ok kompromis synes
jeg. Jeg har dog beholdt den tomme div, så menuen beholder den samme
minimumshøjde ved forskellige skrifttypestørrelser.

>
> Under alle omstændigheder ville jeg foretrække løsningen med et
> særskilt style sheet til IE.
>
Jeg synes det bliver bedre og bedre med browsernes tolkning af html og css,
men jeg glæder mig godt nok til at langt de fleste standarder bliver
overholdt af alle browsere. Glæder mig til at se siden i IE5.5 og 5.x, aner
endnu ikke hvordan den ser ud der, men frygter det værste.

Mvh
Peter som snart må se at installere IE 5.5 og 5.x



Erik Ginnerskov (11-05-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 11-05-04 21:58

Peter Anskjaer wrote:

> Men ved
> mindre skrifttype bliver højden af menuen lavere hvilket betyder at
> wrapperen
> bliver lavere, under 625px som er isbjergets højde, det andet
> baggrundsbillede (www.nskjaer.dk/k/backgroundbottom.gif) kommer
> derfor til
> syne for tidligt (det løber fra top til bund i højre side).

Du kunne lave en usynlig gif i størrelsen 1x1 px og indsætte den helt til
venstre i din wraper i størrelsen 1x625 px og floated left.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://hjem.get2net.dk/egin



Peter Anskjær (12-05-2004)
Kommentar
Fra : Peter Anskjær


Dato : 12-05-04 14:36

"Erik Ginnerskov" <egin@mail.dk> skrev i en meddelelse
news:40a13e7c$0$3045$14726298@news.sunsite.dk...
> Peter Anskjaer wrote:
>
> > Men ved
> > mindre skrifttype bliver højden af menuen lavere hvilket betyder at
> > wrapperen
> > bliver lavere, under 625px som er isbjergets højde, det andet
> > baggrundsbillede (www.nskjaer.dk/k/backgroundbottom.gif) kommer
> > derfor til
> > syne for tidligt (det løber fra top til bund i højre side).
>
> Du kunne lave en usynlig gif i størrelsen 1x1 px og indsætte den helt til
> venstre i din wraper i størrelsen 1x625 px og floated left.
>
Jeg valgte i stedet en tom div, af en eller anden grund tilpassede
størrelsen på wrapperen sig ikke efter gif'en, jeg ville ikke rode så meget
med det eftersom den usynlige div på samme størrelse virkede.

Mvh
Peter



Tine Müller (16-05-2004)
Kommentar
Fra : Tine Müller


Dato : 16-05-04 11:54

"Erik Ginnerskov" <egin@mail.dk> skrev i en meddelelse
news:40a13e7c$0$3045$14726298@news.sunsite.dk...
> Peter Anskjaer wrote:
>
> > Men ved
> > mindre skrifttype bliver højden af menuen lavere hvilket betyder at
> > wrapperen
> > bliver lavere, under 625px som er isbjergets højde, det andet
> > baggrundsbillede (www.nskjaer.dk/k/backgroundbottom.gif) kommer
> > derfor til
> > syne for tidligt (det løber fra top til bund i højre side).
>

> Du kunne lave en usynlig gif i størrelsen 1x1 px og indsætte den helt til
> venstre i din wraper i størrelsen 1x625 px og floated left.


Jeg fandt med glæde ovenstånde indlæg og tror at det måske er løsningen på
mit problem, som jeg ellers ikke har kunnet løse. Jeg har lavet et forsøg
med noget tabel og en usynlig pixel
http://www.tinemuller.dk/test_jytte_med_tabel/krop_og_gestaltterapi.html,
men dit nye forslag er nok bedre, da det sikkert kan laves i css-filen og
ikke som jeg har gjort i hver eneste fil.

Som siden http://www.j-lundsgaard.dk/ og
http://www.j-lundsgaard.dk/jytte.css ses nu er den ok i explorer, men f.eks.
i netscape er der problemer når teksten bliver længere, f.eks. på
Krop/gestalt-terapi.

Så nu mangler jeg bare lidt hjælp med nogle koder som får min side til også
at virke her i Netscape 6? Så hvis nogen har tid/lyst, håber jeg at høre fra
jer om hvilke koder jeg skal tilføje min css.



KH
Tine Müller

homepage: http://tine_muller.homepage.dk/





Tine Müller (17-05-2004)
Kommentar
Fra : Tine Müller


Dato : 17-05-04 07:26


Dette skulle have været et nyt indlæg, så jeg lukker her og opretter det
påny. Undskyld.


"Tine Müller" <tinem@email.dk> skrev i en meddelelse
news:9LHpc.70$bB7.40@news.get2net.dk...
> "Erik Ginnerskov" <egin@mail.dk> skrev i en meddelelse
> news:40a13e7c$0$3045$14726298@news.sunsite.dk...
> > Peter Anskjaer wrote:
> >
> > > Men ved
> > > mindre skrifttype bliver højden af menuen lavere hvilket betyder at
> > > wrapperen
> > > bliver lavere, under 625px som er isbjergets højde, det andet
> > > baggrundsbillede (www.nskjaer.dk/k/backgroundbottom.gif) kommer
> > > derfor til
> > > syne for tidligt (det løber fra top til bund i højre side).
> >
>
> > Du kunne lave en usynlig gif i størrelsen 1x1 px og indsætte den helt
til
> > venstre i din wraper i størrelsen 1x625 px og floated left.
>
>
> Jeg fandt med glæde ovenstånde indlæg og tror at det måske er løsningen på
> mit problem, som jeg ellers ikke har kunnet løse. Jeg har lavet et forsøg
> med noget tabel og en usynlig pixel
> http://www.tinemuller.dk/test_jytte_med_tabel/krop_og_gestaltterapi.html,
> men dit nye forslag er nok bedre, da det sikkert kan laves i css-filen og
> ikke som jeg har gjort i hver eneste fil.
>
> Som siden http://www.j-lundsgaard.dk/ og
> http://www.j-lundsgaard.dk/jytte.css ses nu er den ok i explorer, men
f.eks.
> i netscape er der problemer når teksten bliver længere, f.eks. på
> Krop/gestalt-terapi.
>
> Så nu mangler jeg bare lidt hjælp med nogle koder som får min side til
også
> at virke her i Netscape 6? Så hvis nogen har tid/lyst, håber jeg at høre
fra
> jer om hvilke koder jeg skal tilføje min css.
>
>
>
> KH
> Tine Müller
>
> homepage: http://tine_muller.homepage.dk/
>
>
>
>



Peter Anskjaer (11-05-2004)
Kommentar
Fra : Peter Anskjaer


Dato : 11-05-04 22:37



Søg
Reklame
Statistik
Spørgsmål : 177560
Tips : 31968
Nyheder : 719565
Indlæg : 6408946
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste