/ 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
[CSS] bredt billede som baggrund
Fra : Leonard


Dato : 11-09-07 15:51

Her: http://162.dk/test/bredtop.html ses mit problem.

Den røde firkant øverst skal være baggrund og fylde ud til den højre
kant i browseren.
Hvis browservinduet er smallere end billedet kommer der en scrollbar i
bunden og det skal der ikke, da der ikke er mere ude til højre.

Er browseren bredere end det røde billede, skal den blå baggrund bare
fylde ud til højre, hvilket det også gør nu.

--
Leonard
Mine biler: http://vw.leonard.dk/

 
 
Jørgen Farum Jensen (11-09-2007)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 11-09-07 16:37

Leonard skrev:
> Her: http://162.dk/test/bredtop.html ses mit problem.
>
> Den røde firkant øverst skal være baggrund og fylde ud til den højre
> kant i browseren.
> Hvis browservinduet er smallere end billedet kommer der en scrollbar i
> bunden og det skal der ikke, da der ikke er mere ude til højre.
>
> Er browseren bredere end det røde billede, skal den blå baggrund bare
> fylde ud til højre, hvilket det også gør nu.
>
#top {
   position: absolute;
   top: 0;
   left: 0;
   margin-left: 198px;
   background: url('bg-top-mid.jpg') no-repeat;
   height: 150px;
   /*width: 100%;*/
}

Her har du en bredde på 100 procent
plus 198 pixel (margin). Det er muligt
at reklameverdenen opererer med både 110
procent i orden og 120 procent tilfredse
kunder, men os i det virkelige liv er
godt klar over at noget ikke kan være
over 100 procent af noget andet.


--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Birger (11-09-2007)
Kommentar
Fra : Birger


Dato : 11-09-07 17:36


"Jørgen Farum Jensen" <jfjenzen@yahoo.dk> skrev i en meddelelse
news:46e6b5fa$0$67216$edfadb0f@dread11.news.tele.dk...

8X

> Her har du en bredde på 100 procent
> plus 198 pixel (margin). Det er muligt
> at reklameverdenen opererer med både 110
> procent i orden og 120 procent tilfredse
> kunder, men os i det virkelige liv er
> godt klar over at noget ikke kan være
> over 100 procent af noget andet.
>
>


Hvad med MOMSen?
Jeg kan da godt forestille mig, at når skatterne ikke bliver hævet, sættes
den op til 125%... Det kan den da sagtens... ;>)
Man undtager bare politikere og deres familier og arbejdspladser. NP.

Ligesom "licens" - hvis man har en mobiltelefon eller PC, skal man betale
for at DR's journalister finder mennesker der helst vil være forsvundne,
eller gætter på huspriser i stedet for at google dem, eller hvad de nu
ellers kan finde på at bruge pengene til - ikke er en skat på teknologi, kan
man da sagtens finde eksempler på at 50% bliver til meget mere end det
hele..

Men kun i politik selvfølgelig. Men det skal vi måske holde udenfor?

Birger




Leonard (11-09-2007)
Kommentar
Fra : Leonard


Dato : 11-09-07 19:23

On Tue, 11 Sep 2007 17:36:41 +0200, Jørgen Farum Jensen wrote:

> Her har du en bredde på 100 procent
> plus 198 pixel (margin). Det er muligt

Ja, men uden width: 100% vises billedet slet ikke.
Og jeg kan jo ikke skrive 100%-198px, det kan browseren ikke forstå.

Hvordan løser jeg mit problem?

--
Leonard
Mine biler: http://vw.leonard.dk/

Philip Nunnegaard (11-09-2007)
Kommentar
Fra : Philip Nunnegaard


Dato : 11-09-07 19:59

> Ja, men uden width: 100% vises billedet slet ikke.
> Og jeg kan jo ikke skrive 100%-198px, det kan browseren ikke forstå.

Hvad med i stedet for 198px at vælge 20% og så samtidig ændre width til 80%?


Leonard (11-09-2007)
Kommentar
Fra : Leonard


Dato : 11-09-07 21:04

On Tue, 11 Sep 2007 20:59:29 +0200, Philip Nunnegaard wrote:

> Hvad med i stedet for 198px at vælge 20% og så samtidig ændre width til 80%?

Duer ikke, der skal være et logo, som fylder 198px i hjørnet, så det vil
ikke virke med et vindue smallere end 1000px og se fjollet ud med et,
der er større.
Billedet, der i eksemplet er rødt, er et banner med skiftende figurer,
der begynder i logoet, som ikke er vist, endnu.

--
Leonard
Mine biler: http://vw.leonard.dk/

Birger (11-09-2007)
Kommentar
Fra : Birger


Dato : 11-09-07 21:44

"Leonard" <piper28a@gmail.invalid> skrev i en meddelelse
news:exrds5ujb3g9$.bpeva6orxvg.dlg@40tude.net...
> On Tue, 11 Sep 2007 20:59:29 +0200, Philip Nunnegaard wrote:
>
>> Hvad med i stedet for 198px at vælge 20% og så samtidig ændre width til
>> 80%?
>
> Duer ikke, der skal være et logo, som fylder 198px i hjørnet, så det vil
> ikke virke med et vindue smallere end 1000px og se fjollet ud med et,
> der er større.
> Billedet, der i eksemplet er rødt, er et banner med skiftende figurer,
> der begynder i logoet, som ikke er vist, endnu.
>
> --
> Leonard
> Mine biler: http://vw.leonard.dk/

Hvad med
#top {
position: absolute;
top: 0;
left: 199px;
right: 0px;
background: url('bg-top-mid.jpg') no-repeat;
height: 150px;
}

Birger



Leonard (12-09-2007)
Kommentar
Fra : Leonard


Dato : 12-09-07 07:53

On Tue, 11 Sep 2007 22:44:15 +0200, Birger wrote:

> Hvad med
> #top {
> position: absolute;
> top: 0;
> left: 199px;
> right: 0px;
> background: url('bg-top-mid.jpg') no-repeat;
> height: 150px;
> }

Uden width: 100% bliver der ikke vist noget og problemet er vel egentlig
at 100% er hele vinduets bredde, men jeg skal have trukket 198px fra,
som ikke skal vises.

Må nok lave det om, så baggrunden må fylde hele vinduets bredde.

--
Leonard
Mine biler: http://vw.leonard.dk/

Allan Vebel (12-09-2007)
Kommentar
Fra : Allan Vebel


Dato : 12-09-07 15:36

Leonard skrev:

> Uden width: 100% bliver der ikke vist noget

Jo, det går da fint på http://vebel.dk/test/leonard/

> Må nok lave det om, så baggrunden må fylde
> hele vinduets bredde.

Din <div> er jo i forvejen 100%, så jeg kan ikke
lige se problemet.

Jeg har også fjernet margin-left: 198px; - den har
ingen indflydelse på et posioneret element.

Hvorfor er logoet (den røde boks) 1231 px i
bredden, når du kun skal bruge 198?

--
Allan Vebel
http://html-faq.dk



Leonard (12-09-2007)
Kommentar
Fra : Leonard


Dato : 12-09-07 18:05

On Wed, 12 Sep 2007 16:36:13 +0200, Allan Vebel wrote:

> Leonard skrev:
>
>> Uden width: 100% bliver der ikke vist noget
>
> Jo, det går da fint på http://vebel.dk/test/leonard/

Nej, der har du sat en width: 198px og det er ikke det den skal, den
skal fylde ud fra 18px inde fra venstre og helt til den højre kant.

>> Må nok lave det om, så baggrunden må fylde
>> hele vinduets bredde.
>
> Din <div> er jo i forvejen 100%, så jeg kan ikke
> lige se problemet.

Problemet er netop, at den er 100% af vinduets bredde.

> Jeg har også fjernet margin-left: 198px; - den har
> ingen indflydelse på et posioneret element.

Jo, det har samme virkning, som at skrive left: 198px; og var et forsøg
på at få det til at virke, ved at positionere til 0,0

> Hvorfor er logoet (den røde boks) 1231 px i
> bredden, når du kun skal bruge 198?

Den røde boks illustrerer et banner, som er nogle forskellige figurer,
hvor dem der er palds til skal vises og hvis vinduet er bredere end
1231+198 px så er det fint, så vises hele banneret og der fyldes ud med
den blå farve.

Dit eksempel viser at du har misforstået, det jeg vil.

--
Leonard
Mine biler: http://vw.leonard.dk/

Leonard (12-09-2007)
Kommentar
Fra : Leonard


Dato : 12-09-07 17:59

On Tue, 11 Sep 2007 22:44:15 +0200, Birger wrote:

> Hvad med
> #top {
> position: absolute;
> top: 0;
> left: 199px;
> right: 0px;
> background: url('bg-top-mid.jpg') no-repeat;
> height: 150px;
> }

Jo, det virker, jeg læste det ikke grundigt nok første gang.

--
Leonard
Mine biler: http://vw.leonard.dk/

Leonard (12-09-2007)
Kommentar
Fra : Leonard


Dato : 12-09-07 18:06

On Wed, 12 Sep 2007 18:59:23 +0200, Leonard wrote:

> Jo, det virker, jeg læste det ikke grundigt nok første gang.

Men det virker ikke i IE6, selvom det virker fint i FF.
Øv.

--
Leonard
Mine biler: http://vw.leonard.dk/

Birger (12-09-2007)
Kommentar
Fra : Birger


Dato : 12-09-07 19:35

"Leonard" <piper28a@gmail.invalid> skrev i en meddelelse
news:1gei08r4g7c76.vay5oohch3oi$.dlg@40tude.net...
> On Wed, 12 Sep 2007 18:59:23 +0200, Leonard wrote:
>
>> Jo, det virker, jeg læste det ikke grundigt nok første gang.
>
> Men det virker ikke i IE6, selvom det virker fint i FF.
> Øv.
>
> --
> Leonard
> Mine biler: http://vw.leonard.dk/

IE6 har problemer med right og bottom, som ikke fortolkes rigtigt. (Ser mere
ud somom de ignoreres).
Har eksperimenteret en del med det, men kan ikke finde en fornuftig løsning.
Der findes:
Dean Edwards IE7 JavaScript patch:
http://webdesign101.dk/ie7/eksempler/bottom.php
som jeg i øvrigt ikke kan få til at fungere tilfredsstillende - det virker
når siden hentes, men hvis der derefter ændres størrelse på browseren,
tilpasses siden ikke.

Har javascriptet mig ud af det med en funktion der kun kaldes i IE6 (mindre
end IE7 faktisk..), som beregner den til rådighed værende plads, og sætter
width/height tilsvarende.
Og det kan jo så kun lade sig gøre, fordi jeg i forvejen bruger scripting,
og på forhånd ved hvornår det er nødvendigt.
(I tilfælde som dit, ville du være nødt til at tildele en funktion til
onload og onresize på body, så vidt jeg lige kan se..)

Birger



Allan Vebel (12-09-2007)
Kommentar
Fra : Allan Vebel


Dato : 12-09-07 23:07

Leonard skrev:

> Men det virker ikke i IE6, selvom det virker fint i
> FF.
> Øv.

Det fik jeg også konstateret, du er altså nødt til at
lade den starte i 0/0 for at kunne sætte width:100%;
på, ellers giver det vandret scroll i IE6.

Kan du ikke lave et tomt område i starten (øverste
venstre hjørne), som du så kan dække af anden
grafik?

Der skal vel alligevel være en overgang mellem
lodret og vandret bar, og den kan du sagtens
positionere absolute.

--
Allan Vebel
http://html-faq.dk



Søg
Reklame
Statistik
Spørgsmål : 177501
Tips : 31968
Nyheder : 719565
Indlæg : 6408522
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste