/ 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
To halve backgrounds
Fra : Kurt Hansen


Dato : 06-02-11 13:56

Nu er det jo så moderne at have fast centreret bredde på sin
hjemmeside. Om det hensigtsmæssige heri, skal jeg ikke diskutere nu,
men blot spørge om hvad man kan udnytte de tomme sidebræmmer til. Lidt
kedeligt bare at klaske en baggrundsfarve på.

Jeg har en ide om at dele et billede lodret og lade hver halvdel
udfylde tomrummene, men man kender jo ikke brugerens skærmopløsning og
vinduesstørrelse og så var det jeg kom til at tænke på en tråd for
nyligt, hvor emnet var teknikken bat at lade et backgrund-image fylde
browservinduet ud, men jeg kan ikke finde den igen. Har forsøgt med
flere forskellige søgeord, men forgæves.

Kan jeg placere eet billede til venstre og eet til højre - evt.
forankret i de respektive øverste eller nederste hjørner?
--
Venlig hilsen
Kurt Hansen

Medierne giver folk det de vil have, påstår de,
og det er åbenbart laveste fællesnævner.
Kunne de dog ikke bare engang imellem give os det,
vi ikke ved, at vi kan få.
(Asger Manø)

 
 
Karl Erik Christense~ (06-02-2011)
Kommentar
Fra : Karl Erik Christense~


Dato : 06-02-11 14:13

On 06-02-2011 13:55, Kurt Hansen wrote:
> Nu er det jo så moderne at have fast centreret bredde på sin
> hjemmeside. Om det hensigtsmæssige heri, skal jeg ikke diskutere nu,
> men blot spørge om hvad man kan udnytte de tomme sidebræmmer til. Lidt
> kedeligt bare at klaske en baggrundsfarve på.
>
> Jeg har en ide om at dele et billede lodret og lade hver halvdel
> udfylde tomrummene, men man kender jo ikke brugerens skærmopløsning og
> vinduesstørrelse og så var det jeg kom til at tænke på en tråd for
> nyligt, hvor emnet var teknikken bat at lade et backgrund-image fylde
> browservinduet ud, men jeg kan ikke finde den igen. Har forsøgt med
> flere forskellige søgeord, men forgæves.
>
> Kan jeg placere eet billede til venstre og eet til højre - evt.
> forankret i de respektive øverste eller nederste hjørner?
> --
> Venlig hilsen
> Kurt Hansen
>
> Medierne giver folk det de vil have, påstår de,
> og det er åbenbart laveste fællesnævner.
> Kunne de dog ikke bare engang imellem give os det,
> vi ikke ved, at vi kan få.
> (Asger Manø)

100% er jo altid 100% uanset skærmens opløsning.

Prøv at arbejde videre med den teori. Og fortæl så hvad du kommer frem til.

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://webdesign.ranunkelvej.com - Artikler om webdesign


Birger Sørensen (06-02-2011)
Kommentar
Fra : Birger Sørensen


Dato : 06-02-11 14:31

Kurt Hansen har bragt dette til os:
> Nu er det jo så moderne at have fast centreret bredde på sin
> hjemmeside. Om det hensigtsmæssige heri, skal jeg ikke diskutere nu,
> men blot spørge om hvad man kan udnytte de tomme sidebræmmer til. Lidt
> kedeligt bare at klaske en baggrundsfarve på.
>
> Jeg har en ide om at dele et billede lodret og lade hver halvdel
> udfylde tomrummene, men man kender jo ikke brugerens skærmopløsning og
> vinduesstørrelse og så var det jeg kom til at tænke på en tråd for
> nyligt, hvor emnet var teknikken bat at lade et backgrund-image fylde
> browservinduet ud, men jeg kan ikke finde den igen. Har forsøgt med
> flere forskellige søgeord, men forgæves.
>
> Kan jeg placere eet billede til venstre og eet til højre - evt.
> forankret i de respektive øverste eller nederste hjørner?

Du kan ikke have to billeder i samme element - heller ikke som
baggrund.

Du kan lave et billede som er vældig stort, og centrere det.
Du kan sætte to elementer til at floate hhv højre og venstre i body -
altså udenfor og før wrapperen (før, fordi det så vil være wrapperen
der er øverst/forrest), og i de elementer have dine billeder - enten
som <img> eller som baggrunde i noget andet.

Billeder som baggrunde, har den fordel af deres position kan bestemmes
med css, ligesom de kan gentages, som der måtte være brug for det. Til
gengæld er det så elementets indhold, der bestemmer hvor meget af
billedet der kan ses. Og det kan være en ulempe, når elementet som her
ikke har noget egentligt indhold... Position relative, kan vist bruges
til det - ikke sikker på at det kan få højde på elementet.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Kim Ludvigsen (06-02-2011)
Kommentar
Fra : Kim Ludvigsen


Dato : 06-02-11 15:28

Birger Sørensen skrev:

> Du kan ikke have to billeder i samme element - heller ikke
> som baggrund.

Jo, det kan man faktisk godt. Det er en del af CSS3, og det
understøttes af alle nyere browsere og IE fra version 9.

Den bedste løsning i dette tilfælde er dog nok en absolut
placeret div med et indlagt billede eller to, der så
placeres under indholdet med z-index.

Jeg har ikke forstået, hvorfor Kurt Hansen vil have to
billeder i stedet for et enkelt et - med et enkelt et vil
han kunne benytte angivelsen 100% og så få det skaleret, så
det altid tilpasser sig højre og bredde. Men det afhænger
selvfølgelig af billedet og siden, om den løsning er brugbar
her.

--
Mvh. Kim Ludvigsen
Undgå faldgruberne, sådan vælger du det rette webhotel:
http://kimludvigsen.dk/tips-internet-websnedker-webhotel.php

Karl Erik Christense~ (06-02-2011)
Kommentar
Fra : Karl Erik Christense~


Dato : 06-02-11 15:42

On 06-02-2011 15:28, Kim Ludvigsen wrote:
> Birger Sørensen skrev:
>
>> Du kan ikke have to billeder i samme element - heller ikke
>> som baggrund.
>
> Jo, det kan man faktisk godt. Det er en del af CSS3, og det understøttes
> af alle nyere browsere og IE fra version 9.
>
> Den bedste løsning i dette tilfælde er dog nok en absolut placeret div
> med et indlagt billede eller to, der så placeres under indholdet med
> z-index.
>
> Jeg har ikke forstået, hvorfor Kurt Hansen vil have to billeder i stedet
> for et enkelt et - med et enkelt et vil han kunne benytte angivelsen
> 100% og så få det skaleret, så det altid tilpasser sig højre og bredde.
> Men det afhænger selvfølgelig af billedet og siden, om den løsning er
> brugbar her.
>

Et andet problem vil vel være skærmens format ved maksimeret tilstand.
Det bliver vel mere udbredt at folk anvender 16:9 contra 4:3 skærme?

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://webdesign.ranunkelvej.com - Artikler om webdesign


Kurt Hansen (06-02-2011)
Kommentar
Fra : Kurt Hansen


Dato : 06-02-11 19:10

Sun, 06 Feb 2011 15:41:37 +0100 skrev Karl Erik Christensen:

>On 06-02-2011 15:28, Kim Ludvigsen wrote:
>> Birger Sørensen skrev:
>>
>>> Du kan ikke have to billeder i samme element - heller ikke
>>> som baggrund.
>>
>> Jo, det kan man faktisk godt. Det er en del af CSS3, og det understøttes
>> af alle nyere browsere og IE fra version 9.
>>
>> Den bedste løsning i dette tilfælde er dog nok en absolut placeret div
>> med et indlagt billede eller to, der så placeres under indholdet med
>> z-index.
>>
>> Jeg har ikke forstået, hvorfor Kurt Hansen vil have to billeder i stedet
>> for et enkelt et - med et enkelt et vil han kunne benytte angivelsen
>> 100% og så få det skaleret, så det altid tilpasser sig højre og bredde.
>> Men det afhænger selvfølgelig af billedet og siden, om den løsning er
>> brugbar her.
>>
>
>Et andet problem vil vel være skærmens format ved maksimeret tilstand.
>Det bliver vel mere udbredt at folk anvender 16:9 contra 4:3 skærme?

Netop, det er derfor jeg vil dele billedet op i to lodrette strimler.
De forvrænges ikke så meget som hvis de var en del at eet stort
billede.
--
Venlig hilsen
Kurt Hansen

Medierne giver folk det de vil have, påstår de,
og det er åbenbart laveste fællesnævner.
Kunne de dog ikke bare engang imellem give os det,
vi ikke ved, at vi kan få.
(Asger Manø)

Kim Ludvigsen (06-02-2011)
Kommentar
Fra : Kim Ludvigsen


Dato : 06-02-11 19:40

Kurt Hansen skrev:
> Sun, 06 Feb 2011 15:41:37 +0100 skrev Karl Erik Christensen:
>
>> On 06-02-2011 15:28, Kim Ludvigsen wrote:

>>> Jeg har ikke forstået, hvorfor Kurt Hansen vil have to billeder i stedet
>>> for et enkelt et - med et enkelt et vil han kunne benytte angivelsen
>>> 100% og så få det skaleret, så det altid tilpasser sig højre og bredde.
>>> Men det afhænger selvfølgelig af billedet og siden, om den løsning er
>>> brugbar her.

> Netop, det er derfor jeg vil dele billedet op i to lodrette strimler.
> De forvrænges ikke så meget som hvis de var en del at eet stort
> billede.

Hvis de skal fylde det hele, bliver det vel det samme? Hvis
billedet ikke egner sig til at blive strukket i forskellige
formater, så er løsningen med midterstillet billede med fade
out måske bedst? Hvis du ikke vil fade out til en farve, kan
du måske fade out til et mønster af en art.

> --
> Venlig hilsen
> Kurt Hansen

Din signatur og signaturadskiller er ikke helt korrekte.
Signaturadskilleren skal være to streger + et mellemrum og
et linjeskift, altså "-- " [linjeskift]. Hertil kommer, at
signaturen ikke må fylde mere end fire linjer med maksimalt
72 tegn på hver linje.

--
Mvh. Kim Ludvigsen
Undgå faldgruberne, sådan vælger du det rette webhotel:
http://kimludvigsen.dk/tips-internet-websnedker-webhotel.php

Kurt Hansen (07-02-2011)
Kommentar
Fra : Kurt Hansen


Dato : 07-02-11 05:56

Mon, 07 Feb 2011 01:39:57 +0700 skrev Kim Ludvigsen:

>Kurt Hansen skrev:
>> Sun, 06 Feb 2011 15:41:37 +0100 skrev Karl Erik Christensen:
>>
>>> On 06-02-2011 15:28, Kim Ludvigsen wrote:
>
>>>> Jeg har ikke forstået, hvorfor Kurt Hansen vil have to billeder i stedet
>>>> for et enkelt et - med et enkelt et vil han kunne benytte angivelsen
>>>> 100% og så få det skaleret, så det altid tilpasser sig højre og bredde.
>>>> Men det afhænger selvfølgelig af billedet og siden, om den løsning er
>>>> brugbar her.
>
>> Netop, det er derfor jeg vil dele billedet op i to lodrette strimler.
>> De forvrænges ikke så meget som hvis de var en del at eet stort
>> billede.
>
>Hvis de skal fylde det hele, bliver det vel det samme? Hvis
>billedet ikke egner sig til at blive strukket i forskellige
>formater, så er løsningen med midterstillet billede med fade
>out måske bedst? Hvis du ikke vil fade out til en farve, kan
>du måske fade out til et mønster af en art.

De skal netop ikke fylde det hele, men blot udfylde tomrummene til
venstre og højre for en side med fast bredde på f.eks. 900 px.

>> --
>> Venlig hilsen
>> Kurt Hansen
>
>Din signatur og signaturadskiller er ikke helt korrekte.
>Signaturadskilleren skal være to streger + et mellemrum og
>et linjeskift, altså "-- " [linjeskift]. Hertil kommer, at
>signaturen ikke må fylde mere end fire linjer med maksimalt
>72 tegn på hver linje.

Tak for den. Jeg havde nok på fornemmelsen, at den var lige lang nok,
men kendte ikke den præcise regel. Bedre nu?
--

Venlig hilsen Kurt Hansen

Ægte mod er at kalde en spade for en spade,
også når man taler med spaden selv ...

Kim Ludvigsen (07-02-2011)
Kommentar
Fra : Kim Ludvigsen


Dato : 07-02-11 08:07

Kurt Hansen skrev:
> Mon, 07 Feb 2011 01:39:57 +0700 skrev Kim Ludvigsen:
>
> De skal netop ikke fylde det hele, men blot udfylde tomrummene til
> venstre og højre for en side med fast bredde på f.eks. 900 px.

Ah, så er jeg med. Så bliver det ikke helt nemt at lave
noget, der ser pænt ud, medmindre du bruger et mønster eller
en farve. Problemet er større end, hvis det var hele sidens
baggrund, fordi du nemt risikerer bredder fra 10px til 400
px på hvert af de to billeder. Det er meget få billeder, der
kan tåle at blive strukket så meget. Var det en billede, der
dækkede hele siden, ville det blive strukket mindre procentvis.

>> Din signatur og signaturadskiller er ikke helt korrekte.

> Tak for den. Jeg havde nok på fornemmelsen, at den var lige lang nok,
> men kendte ikke den præcise regel. Bedre nu?

Næsten. Adskilleren er nu korrekt, men du har for mange
linjer, fordi tomme linjer også tæller med.

--
Mvh. Kim Ludvigsen
Tips til hjemmesidesnedkeren:
http://kimludvigsen.dk/tips-internet-websnedker-multimedia.php

Birger Sørensen (06-02-2011)
Kommentar
Fra : Birger Sørensen


Dato : 06-02-11 15:51

Kim Ludvigsen forklarede den 06-02-2011:
> Birger Sørensen skrev:
>
>> Du kan ikke have to billeder i samme element - heller ikke
>> som baggrund.
>
> Jo, det kan man faktisk godt. Det er en del af CSS3, og det understøttes af
> alle nyere browsere og IE fra version 9.
>
> Den bedste løsning i dette tilfælde er dog nok en absolut placeret div med et
> indlagt billede eller to, der så placeres under indholdet med z-index.
>
> Jeg har ikke forstået, hvorfor Kurt Hansen vil have to billeder i stedet for
> et enkelt et - med et enkelt et vil han kunne benytte angivelsen 100% og så
> få det skaleret, så det altid tilpasser sig højre og bredde. Men det afhænger
> selvfølgelig af billedet og siden, om den løsning er brugbar her.

Det er for at have noget "et eller andet" på siderne af container
wrapper - så indholdet altid er midt på siden, uden der blot er
ensfarvet ved siden af.
Et stort billede, der er tomet på midten, svarende til wrapperens
størrelse (evt min-width) må kunne gøre det - centreret vandret i body
med css.
Problemet vil jo nok være, at det bliver et meget stort billede, med
indre man blot laver en lodret gentegelse af et mindre - en border
eller what have you...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Anonymous (06-02-2011)
Kommentar
Fra : Anonymous


Dato : 06-02-11 16:34

Den 06-02-2011 14:30, Birger Sørensen skrev:
> Kurt Hansen har bragt dette til os:

>> Kan jeg placere eet billede til venstre og eet til højre - evt.
>> forankret i de respektive øverste eller nederste hjørner?
>
> Du kan ikke have to billeder i samme element - heller ikke som baggrund.

Jo, med CSS3 kan man lave multiple backgrounds. Det virker bare som
sædvanligt ikke i IE.

http://www.w3.org/TR/css3-background/#layering


MVH
Rune Jensen

Jens Peter Karlsen (07-02-2011)
Kommentar
Fra : Jens Peter Karlsen


Dato : 07-02-11 12:00

Med undtagelse af IE9 som jo ikke er ude i færdig version endnu.

Regards Jens Peter Karlsen.

On Sun, 06 Feb 2011 16:33:36 +0100, Anonymous
<invalid@invalid.invalid> wrote:

>Jo, med CSS3 kan man lave multiple backgrounds. Det virker bare som
>sædvanligt ikke i IE.

Anonymous (07-02-2011)
Kommentar
Fra : Anonymous


Dato : 07-02-11 18:44

Den 07-02-2011 11:59, Jens Peter Karlsen skrev:
> Med undtagelse af IE9 som jo ikke er ude i færdig version endnu.
>
> Regards Jens Peter Karlsen.
>
> On Sun, 06 Feb 2011 16:33:36 +0100, Anonymous
> <invalid@invalid.invalid> wrote:
>
>> Jo, med CSS3 kan man lave multiple backgrounds. Det virker bare som
>> sædvanligt ikke i IE.

Problemet er ikke kun at IE<9 ike forstår multiple backgrounds, men at
den heller ikke supporterer en fallback.

Derfor vil f.eks.

background: url(pic1.jpg), url(pic2.jpg)

....her ville man formode, i hvert fald det første billede blev taget med
af IE<9. Det gør det ikke. Hele deklarationen bliver skrottet, fordi IE
opfatter kommaet som en fejl.

Hvad mere er, så vidt jeg husker sletter den foregående definitioner af
baggrunde, hvis der opstår en fejl. Så f.eks.:

background: url(pic.jpg);
background: url(pic1.jpg), url(pic2.jpg)

....der vil den tage efter 2. deklaration, finde det er en fejl, og
baggrunden får ikke tildelt egenskaber overhovedet heller.


MVH
Rune Jensen

Kim Ludvigsen (07-02-2011)
Kommentar
Fra : Kim Ludvigsen


Dato : 07-02-11 19:22

Anonymous skrev:

> Problemet er ikke kun at IE<9 ike forstår multiple
> backgrounds, men at den heller ikke supporterer en fallback.

Det kan nemt klares med en conditional comment (CC), der
serverer en anden baggrunds-definition for lt IE9. Og så en
ekstra div i en anden CC, der indeholder baggrund nummer to.

Altså:

<link rel="stylesheet" href="style.css" type="text/css">

<!--[if lt IE 9]>
<style type='text/css'>
#body {background: url('background.jpg');}
</style>
<![endif]-->

</head>
<body>

<!--[if lt IE 9]>
<div id="iefixmultibackground">
<![endif]-->
....
<!--[if lt IE 9]>
</div>
<![endif]-->

CSS:
#iefixmultibackground {background: url('background2.jpg');}

--
Mvh. Kim Ludvigsen
Undgå faldgruberne, sådan vælger du det rette webhotel:
http://kimludvigsen.dk/tips-internet-websnedker-webhotel.php

Søg
Reklame
Statistik
Spørgsmål : 177428
Tips : 31962
Nyheder : 719565
Indlæg : 6407943
Brugere : 218877

Månedens bedste
Årets bedste
Sidste års bedste