Div och scroll

8 svar · 544 visningar · startad av Web-Tor 27 juni 2007

Web-TorMedlem sedan nov. 200013 890 inlägg

Frågan27 juni 2007 12:22#1

Här är ett enkelt exempel på en kodsnutt som fungerar utmärkt för att låsa en meny och sedan enbart ha scroll på själv innehållet.
Men jag skulle gärna vilja komma bort från tabeller och använda lager istället. Någon som kan få fram samma funktionalitet med div-taggar?

http://member.webforum.nu/1123/100_test.html

KoplikMedlem sedan juli 20011 129 inlägg

27 juni 2007 12:30#2

I IE7+ och FF så fungerar det om du kör

position: fixed;
top: x px;
left: x px;

http://www.w3schools.com/css/pr_class_position.asp

Såg att det inte riktigt var vad du var ute efter. Men kanske kan vara skåpnyttigt ändå

Web-TorMedlem sedan nov. 200013 890 inlägg

27 juni 2007 12:45#3

Just det, lösningen måste funka i IE5+.
Funkar det i övriga webbläsare är det naturligtvis trevligt men det spelar inte någon roll för min del.

tantenMedlem sedan nov. 20051 596 inlägg

28 juni 2007 06:58#4

Kanske missuppfattar jag dig, för jag tycker det borde fungera med att bara ta bort tabellen och scrollen fungerar i IE6. Något sånt här kanske?

<html>
<head>
<style>
#logga{border-top:3px solid #369;
border-left:3px solid #369;
border-right:3px solid #369;}
#meny
{border-top:3px solid #369;
border-left:3px solid #369;
border-right:3px solid #369;}
.scroll	{overflow:auto;border:3px solid #369;}
.high	{height:100%;}
.wide	{width:100%;}
</style>
</head>
<body>
<div id="logga">Logga</div>
<div id="meny">Meny</div>
<div class="scroll high wide">
Innehåll<br /><br />
som<br />
<br />
scrollar<br />
<br />
när<br />
<br />
fönstret<br />
<br />förminskas<br />
</div>			
</body>
</html>

Loggan och menyn kommer inte flytta på sig...

Web-TorMedlem sedan nov. 200013 890 inlägg

28 juni 2007 08:22#5

Jag har lagt upp din kod här:
http://member.webforum.nu/1123/scroll_tanten.html

För mig så visas scrollen hela tiden (även när den inte behövs) och loggan och menyn scrollar. Blir det inte så för dig?

/r Nu ser jag att det blir en extra scroll på bara innehållet när man förminskar fönstret och det är ju bra. Problemet är att sidan blir för lång vilket gör att hela sidan scrollat dessutom. Några förslag på hur man löser det?

tantenMedlem sedan nov. 20051 596 inlägg

28 juni 2007 08:53#6

Lite missförstånd blev det... tänkte bara på scroll på innehållet, men alla borderpixlarna gör att sidan blir för lång + webläsarnas egna tillägg av pixlar. Så om du inte har framtida planer på att ha både doctype och nollställa bodyn så kan du nog göra så att du testar med att t.ex sänka höjden till 90% eller något sådant tills scrollen försvinner.
.wide kandu ta bort helt.
<div class="scroll high">
och
.high {height:90%;}

/red allt kommer att ändras när du får in höjd på loggan och menyn också....

Web-TorMedlem sedan nov. 200013 890 inlägg

28 juni 2007 10:01#7

Jag kan inte ändra till 90% eftersom det blir olika beroende på hur stort fönster användaren använder. Det som ser bra ut i 800x600 blir helt fel i 1024x768.

Däremot testade jag att lägga till padding-bottom:40px på body-taggen och det blev bättre. Scrollen syns fortfarande men den blåa ramen ligger rätt.

http://member.webforum.nu/1123/scroll_tanten.html (kör F5 för att vara säker på att du ser den senaste versionen)

Jag kan naturligtvis dölja sidans scroll helt men det känns inte helt rätt. Jag tror säkert att man kan använda padding eller margin på något smart sätt för att komma runt det här. Förslag?

tantenMedlem sedan nov. 20051 596 inlägg

28 juni 2007 10:31#8

Nu måste jag scrolla både på höjden och sidledes och ramen ligger inte rätt... så vi ser tydligen helt olika saker.
Vad är det du vill att det ska se ut som, i slutänden. Är det som om det skulle ha varit en frame-sida under menyn, som ska täcka hela fönstret ner?
Vet du hur höga loggan och menyn kommer att bli?
Lite underligt är det också för den blå ramen ligge helt rätt om jag testar min kod här på min dator, men såg att det blev fel på den du lade upp???

Web-TorMedlem sedan nov. 200013 890 inlägg

28 juni 2007 15:46#9

Vilken webbläsare använder du?
Jag skall använda den här koden på en intern webbapplikation där jag vet att alla besökare har IE5+ så det är bara IE som jag testar i.