[Løst] Sidelengs "scrollable" nettside

[Alekplay]

Heisann!

 

Som dere sikkert (ikke) vet så holder jeg på med et lite prosjekt, og her har jeg støtt på et problem som jeg aldri trodde jeg kom til å få (og som ihvertfall ikke skulle være så uløselig )

 

På min nettside har jeg en header med en logo i, noe ala den på www.facebook.com. Denne headeren har en bakgrunnsfarge, og jeg vil at denne skal strekke seg slik at den er like lang som nettleservinduet. Derfor har jeg laget en div, med bakgrunnsfarge, og absolutt plassering og lengde=100%. Inni denne diven, har jeg en logo og ennda en div med diverse innlogingsbokser. Logoen har en plassering oppe i venstre hjørne, og innloggingsdiven har en plassering i øvre høyre hjørne. (begge med en 0px 0px plassering). Problemet kommer derimot når jeg skal teste dette i en nettleser (bruker firefox, men vil gjerne at det skal funke i alle).

Når jeg ser siden "fullsize" er den feilfri, men når jeg skal gjøre vinduet mindre, så prøver innloggingsboksen å "følge etter" kanten på nettleservinduet. Altså blir diven smalere og smalere, og til slutt blir logoen overlappet av innloggingsdiven. Istedenfor at dette skjer, vil jeg at når nettleservinduet blir "resiza" så skal det dukke opp en "scrollbar" som fungerer sidelengs, slik som på f.eks. facebook og alle andre nettsider

 

Jeg innser at jeg ikke har noen fast plassering på noenting, og f.eks. om jeg gir innloggingsdiven en plassering gitt i piksler fra venstre hjørne, så får jeg den scrollbaren. Problemet slik jeg ser det er da at den vil plassere seg annerledes basert på skjermstørrelse og pikseltetthet. Dessuten, når jeg scroller sidelengs, og jeg kommer utenfor det "orginale" nettleservinduet (den bredden jeg hadde før jeg scrollet til siden) forsvinner blåfargen min, og det blir bare hvitt. Altså virker det som om diven forsvinner...

 

Jeg har også en tilsvarende footer i samme farge, som jeg ønsker skal ha de samme egenskapene, bare uten logoen og innloggingsfunksjonene.

 

Jeg skjønner at jeg må gi noe en fast plassering, men hva skal jeg i så fall gi en fast plassering? Er det mulig å si en minimumslengde for den diven? Slik at den er 100% av sidelengden vanligvis, men den ikke kan bli kortere enn slik og slik, sånn at vi får en scrollbar om nettleservinduet blir smalere? Og, vil jeg ikke få problemer når det kommer til forskjellige skjermstørrelser og pikseltetthet om jeg gir noe en plassering gitt i piksler? Hvordan løser f.eks. sider som facebook, google, 9gag osv (andre sider med "fullengde headere") dette?

 

Tusen takk for all hjelp! Jeg stiller gjerne med html kode om det er nødvendig, men jeg vil helst ikke da jeg ønsker å holde så mye om siden så hemmelig som mulig...

 

Takker på forhånd.

 

- Aleksander

[Alekplay]

Altså, om dere forstår, jeg ønsker at headeren (eller ihvertfall fargen) skal være like lang som nettleservinduet er, uansett hvor bred skjerm en har. Og jeg vil at logoen og innloggingsgreien skal være i hvert sitt hjørne, samt at jeg ønsker at når skjermen blir for liten, så skal ikke headeren "resize" seg selv. Den skal ha sin faste minimumslengde, noe ala innloggingsiden til facebokk ()

 

Om dere skjønner og dere har en løsning, håper jeg dere kommer med den. Om det er noe dere ikke skjønner, så er jeg mer enn villig til å gi all den informasjonen dere trenger for å hjelpe meg

 

Ha en fin kveld

[agm]

Du kan sette en minimumsbredde med min-width:100px;

 

Støttes ikke av eldre versjoner av IE mm, men alle moderne nettlesere støtter både min-width og max-width i tillegg til width. (Samme for height).

 

Du kan også vurdere media queries om du har store forandringer ved større/mindre bredde:

header { background: blue }
/* Ved 800px bredde og bredere */
@media all and (min-width: 800px) {
   header { background: green }
}
/* Ved 1000px bredde og bredere */
@media all and (min-width: 1000px) {
   header { background: lime }
}

 

Ha en fin kveld!

[Alekplay]

Tusen takk for svar! Jeg prøvde dette med minimumslengde, og det funket til formålet. Håper dette løser problemet mitt på en "riktig" måte, og at jeg ikke får noen problemer med det videre.

 

Men, det dukket opp et nytt problem angående footer'en min nå... Den vil ikke strekke seg til riktig lengde -.-

Her har jeg et bilde som forklarer:

(link: http://bildr.no/view/1216466 )

 

Ser du at den blå footeren bare slutter? Her har jeg scrollet til siden, og den slutter der hvor nettleservinduet mitt var før jeg scrollet.

 

Her er css koden:

 

#header {
background-color: #00A2E8;
position: absolute;
height: 64px;
width: 100%;
min-width:1000px;
top: 0px;
left: 0px;
right: 0px;
}
#login {
background-color: #00A2E8;
position: absolute;
top: 0px;
right: 1%;
}
#logo {
left: 0px;
top: 0px;
}
#footer {
background-color:#00A2E8;
left:0;
width:100%;
height:54px;
margin-top:54px;
position:absolute;
bottom:0;

 

Hvis du gidder, ta gjerne en kikk på den å se om jeg har gjort alt greit... Om det er noe du ser en bedre løsning på, gjerne gjør endringer. Jeg vil ha det slik at footeren er konstant på bunnen av siden, selv om du må scrolle ned for å se den. Både footeren og headeren skal ha en bakgrunnsfarge som også er like lang som nettleservinduet. Blir den mindre enn slik og slik så skal jeg måtte scrolle (ikke noe overlapping), og jeg vil ha logoen i øvre venstre hjørne (i headeren) og innloggingsgreiene i øvre venstre hjørne (i headeren). De kan enten stå helt i hjørnet, eller ha en fiks plassering slik som på facebook.com.

 

Håper du kan hjelpe meg med dette!

 

Ha en flott kveld du også!

Hilsen Aleksander.

Endret 28. juni 2012 av Alekplay

[agm]

Det er fordi vinduet her er mindre enn 1000px.

 

La oss si vinduet er 600px bredt. Da vil width: 100% gi en bredde på 100% av 600px = 600px. Når header har en minimumsbredde på 1000px, blir det 400px forskjell.

 

Det er flere måter å løse det på, men uavhengig av metode bør du gjøre stort sett det samme for header og footer. Da vil de vises likest mulig.

[Alekplay]

Ok, it all makes sense now

 

Men da har jeg satt en minimumslengde på footer også. Er dette en god løsning?