Divarna kollapsar när man förminskar webbläsarfönstret!

7 svar · 580 visningar · startad av medialabs 7 dec. 2008

medialabsMedlem sedan mars 20023 686 inlägg

Frågan7 dec. 2008 11:49#1

Hej,

Har ett irriterande problem som jag inte lyckas ta mig förbi. Har en webbsida uppbyggd av divar och allt är fred och fröjd när man har webbläsarfönstret maximerat, men direkt när man börjar ändra storleken på fönstret så försvinner menyn och webbsidan ser ut som en stor skål med ärtsoppa.

Jag vill att sidan behåller sin ursprungliga "form" och förminskar man fönstret så ska man få rulllistor, men att den fortfarande ska behålla formen..

Jag har laddat upp sidan här:

Har jag missat något vitalt :q

jarvkloMedlem sedan juli 20013 378 inlägg

7 dec. 2008 16:27#2

Hmm...

För mig bryter ihop även i maximerat läge (1280x1024) men olika i MSIE och i FireFox...

Hur har du tänkt dig att den egentligen skall se ut?

medialabsMedlem sedan mars 20023 686 inlägg

7 dec. 2008 16:38#3

jarvklo skrev:

Hmm...

För mig bryter ihop även i maximerat läge (1280x1024) men olika i MSIE och i FireFox...

Hur har du tänkt dig att den egentligen skall se ut?

Ajdå,

Har tänkt att det ska se ut som på bilden jag bifogar

pulseMedlem sedan nov. 200373 inlägg

7 dec. 2008 18:13#4

Prova det här:

#right{
margin-left:740px;
margin-top:10px;
width:430px;
}

#right .box{
/* ta bort float: right */
}

pulseMedlem sedan nov. 200373 inlägg

7 dec. 2008 18:16#5

Här är en bra sida med massor av färdiga css-mallar:

http://blog.html.it/layoutgala/

jarvkloMedlem sedan juli 20013 378 inlägg

7 dec. 2008 23:29#6

Hmm...

räkna lite på dina marginaler och bredder...
Exempel:
Jag får inte ihop följande siffror:

        margin-left: 15px;
        margin-right: 50%; 
	width: 75%;

med hur din skiss ser ut...

Likaså verkar en orsak vara att du har såpass stor vänstermarginal på #right.

Räkna om "procentsummorna" på bredderna , och komplettera eventuelt med en min-width på body så kommer du att hitta en väg bort från fenomenet.

Kan rekommendera dig att ge dig på sidan med t.ex. "edit CSS" i Developers toolbar för FireFox och experimentera.

medialabsMedlem sedan mars 20023 686 inlägg

8 dec. 2008 06:16#7

Det mesta började fungera som tänkt när jag ändrade följande till:

#wrap {
[B]        margin-left: 15px;
        margin-right: 0px;
	width: 75%;[/B]

}

#menu {
	display: block;
	float:right;
	[B]position: absolute;[/B]
}

#right {
	[B]width: 65%;[/B]
	float: right;
	display:block;
	margin-top: 10px;
}

Men right är som sagt inte "fast", utan anpassar sin position i relation till hur stort webbläsarfönstret är. Och det är väl för att jag har anget 65% och inte ett fast "värde" som på :

#left {
width: 600px;
float:left;
display: block;
margin-left: 20px;
display: inline;
}
Men borde inte Right width och Left width tillsammans utgöra Wrapens totala width som är på 75%.

Nu har jag blandat ihop det för mycket. Ska sätta mig vid ritbordet igen och titta igenom lite exempel-sidor där man har använt divar.

medialabsMedlem sedan mars 20023 686 inlägg

8 dec. 2008 11:04#8

Hmm, allt ser ut att fungera nu när jag satte Width på både höger och vänster-rutan. Skall icke klaga. Verkar fungera. Ska testa med lite olika webbläsare och se hur resultatet ter sig.. :e

#left {
	[B]width: 60%;[/B]
	float:left;
	display: block;
        margin-left: 20px;
	display: inline;

}

#right {
	float: right;
	display:block;
	margin-top: 0px;
	[B]width: 30%;[/B]
}