CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

jowii Nybegynder

12. september 2009 - 15:12 Der er 6 kommentarer og
1 løsning

100% width i minimeret vindue giver problemer

Hej,

Jeg ønsker et billede indsat nederst på min hjemmeside - under hovedindholdet på siden / under content og container.

Det har jeg gjort ved at lave en div med et baggrundsbillede der gentages langs x-aksen. Det hele virker næsten optimalt.
Div'en som baggrundsbilledet ligger i er angivet med en bredde på 100%.

Problemet opstår hvis jeg minimerer browservinduet. De fleste minimeringer af vinduet giver en vandret scroll. Så vidt jeg kan se opfatter alle browsere bredden som 100% som det område man kan se, når man har minimeret vinduet. Dvs. så snart man bruger scrollen og vil se indholdet længere til højre, så bevæger man sig ud på procentværdier der er over 100%.

Det betyder at mit baggrundsbillede stopper når man vil bruge scrollen og se indholdet der er længere til højre på skærmen.
Baggrundsbilledet vises altså kun på det område man kan se uden at bruge scrollen.

Hvad skal jeg gøre for at ordne bredden i minimerede vinduer?
Jeg ønsker at baggrundsbilledet også skal vises ude på fx 110% bredde. Ja faktisk skal baggrundsbilledet jo vises langs hele x-asken uanset størrelsen på vinduet.

Hvis jeg angiver div'en som billedet ligger i til fx at være 110% så virker det. Problemet er bare at jeg så får en vandret scroll når vinduet er maksimeret. Og det ønsker jeg ikke.

Svært at forklare, men håber enkelte af jer har forstået mit problem.

CSS-koden til den div bg-billedet ligger i:
width:100%; height: 100px; background-repeat:repeat-x; background-image: url(images/billede.gif); position:relative;bottom:0;left:0;}

Mvh. Jowii

Synes godt om

olebole Juniormester

12. september 2009 - 15:57 #1

<ole>

Prøv at lægge et link til siden

/mvh
</bole>

Synes godt om

jowii Nybegynder

12. september 2009 - 17:35 #2

infoscape(punktum)dk(skråstreg)eksperten.html

Synes godt om

olebole Juniormester

13. september 2009 - 17:56 #3

Når jeg ser siden i Explorer og andre browsere, kommer jeg i tvivl om, hvordan siden skal se ud. Det må du lige forklare - og så skal du nok lige åbne dit head element med et <head> ;o)

Synes godt om

jowii Nybegynder

18. september 2009 - 14:26 #4

Hej olebole,

Forstår godt du ikke er helt med på udseendet af hjemmesiden.
Det var nok en lidt for hurtig illustration af mit problem jeg fik lavet der :o)

Øverst er der en hvid boks med teksten "test".
Under denne er billedet med 100% bredde. (Det blå billede med hvidt mønster.)

Hvis du minimerer siden vil du kunne se billedet fylder hele det minimerede vindue i bredden. Dvs. de 100%. Hvis du så scroller, så du ser indholdet længere til højre, vil du kunne se at billedet ikke længere bliver vist.

Jeg ønsker at billedet skal vises i hele bredden, også selvom det er i minimeret vindue og meget lave skærmopløsninger med horisontal scroll.

Billedet bliver således kun vist med den bredde som det minimerede vindue har. Browseren "tæller ikke" området til højre (når man scroller) med i de 100% bredde.

Synes godt om

olebole Juniormester

18. september 2009 - 23:01 #5

Du kunne i teorien bruge min-width: 900px på footer, men den er ikke understøttet af IE6 - som stadig bruges af flere end Firefox :o|

Du kan dog:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Test</title>

<style type="text/css">
body {
margin:0;
padding:0;
background-color: #000;
}
#container {
width:900px;
height:500px;
margin-left:auto;
margin-right:auto;
}
#content {
width:500px;
height:500px;
margin: 0 auto;
background-color:#fff;
}
#footer {
background-repeat:repeat-x;
background-image: url(http://infoscape.dk/blomst.gif);
position:relative;
}
.force900 {
height: 144px;
background-repeat:repeat-x;
background-image: url(http://infoscape.dk/blomst.gif);
width: 900px;
}
</style>

</head>
<body>

<div id="container">
<div id="content">
Test
</div>
</div>

<div id="footer"><div class="force900"></div></div>
</body>
</html>

- og læg mærke til, jeg har centreret den hvide box med margin: 0 auto, hvilket betyder 0 i top og bund - auto i siderne.

text-align:center bruges kun til tekst og inline elementer som span, b, i, a, m.fl. IE bryder dog som den eneste standarden på dette punkt og centrerer block elementer med text-align. Det er en fejl =)

Synes godt om

jowii Nybegynder

21. september 2009 - 21:20 #6

Tak det virker :o)
Smid et svar.

Synes godt om

olebole Juniormester

22. september 2009 - 22:31 #7

Selvtak =)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS