divlayout og IE viser ikke 100% div

ThorB · 4. juni 2008

ok, jeg har laget et rammedesign. men sliter litt med IE6...

da den høyreside-div ikke blir strekt ut 100%, noe som gjøre at rammen mangler en bakgrunns-linje på høyre side

http://home.no.net/thor918/layout/v1.zip

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.storramme {
position:relative;
width: 966px;
margin:0 auto;
}

.storramme .rammetopp-venstre {
background: url(top.gif) no-repeat;
height: 25px;
width: 941px;
float:left;
}

.storramme .rammetopp-hoyre {
background: url(top_hoyre.gif) no-repeat;
height: 25px;
width: 25px;
float:right;
}

.storramme .innhold-venstre {
background: url(middle.gif) repeat-y;
min-height:542px;
width: 926px;
float:left;
position:relative;
padding-left:15px;
}

.storramme .innhold-venstre .innhold-text {
width: 520px;
}

.storramme .innhold-venstre .innhold-hoyre {
 background: url(middle_hoyre.gif) repeat-y;
 height: 100%;
 width: 25px;
 top:0px;
 left:941px;
 position:absolute;
}

.storramme .rammebunn-venstre {
background: url(bottom.gif) no-repeat;
height: 25px;
width: 941px;
float:left;
}

.storramme .rammebunn-hoyre {
background: url(bottom_hoyre.gif) no-repeat;
height: 25px;
width: 25px;
float:right;
}
-->
</style>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div class="storramme">
		<div class="rammetopp-venstre"></div><div class="rammetopp-hoyre"></div>
		<div id="innhold" class="innhold-venstre">
			<div class="innhold-text">ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi uh iu hui hiuh iu hui hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi uh iu hui hiuh iu hui hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi uh iu hui hiuh iu hui hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi uh iu hui hiuh iu hui hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi uh iu hui hiuh iu hui hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi uh iu hui hiuh iu hui hui hui hiu hui hui hui hui hiuhui huihuihi uhuihuihuih uihiuhiuh
hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi
			  hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi uh iu hui hiuh iu hui hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi uh iu hui hiuh iu hui hui hui hiu hui hui hui hui hiuhui huihuihi uhuihuihuih uihiuhiuh
hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi uh iu hui hiuh iu hui hui hui hiu hui hui hui hui hiuhui huihuihi uhuihuihuih uihiuhiuh
hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi uh iu hui hiuh iu hui hui hui hiu hui hui hui hui hiuhui huihuihi uhuihuihuih uihiuhiuh
hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi uh iu hui hiuh iu hui hui hui hiu hui hui hui hui hiuhui huihuihi uhuihuihuih uihiuhiuh
hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi uh iu hui hiuh iu hui hui hui hiu hui hui hui hui hiuhui huihuihi uhuihuihuih uihiuhiuh
hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi uh iu hui hiuh iu hui hui hui hiu hui hui hui hui hiuhui huihuihi uhuihuihuih uihiuhiuhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi uh iu hui hiuh iu hui hui hui hiu hui hui hui hui hiuhui huihuihi uhuihuihuih uihiuhiuh
hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi uh iu hui hiuh iu hui hui hui hiu hui hui hui hui hiuhui huihuihi uhuihuihuih uihiuhiuh
hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhikjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi uh iu hui hiuh iu hui hui hui hiu hui hui hui hui hiuhui huihuihi uhuihuihuih uihiuhiuh
hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi uh iu hui hiuh iu hui hui hui hiu hui hui hui hui hiuhui huihuihi uhuihuihuih uihiuhiuh
hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhikjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi uh iu hui hiuh iu hui hui hui hiu hui hui hui hui hiuhui huihuihi uhuihuihuih uihiuhiuh
hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh iuh iuhi uh iu hui hiuh iu hui hui hui hiu hui hui hui hui hiuhui huihuihi uhuihuihuih uihiuhiuh
hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhi
hui hui hiu hui hui hui hui hiuhuihuihuihi uhuihuihuihuihiuhiuh ljhkjhiuohuihuhb iyuhb yhg h uihiuhiuhiuh iuh iuh iuh iuh ih iuhi				
			</div>	
			<div class="innhold-hoyre"></div>
		</div>
		 <div class="rammebunn-venstre"></div><div class="rammebunn-hoyre"></div>
</div>
</body>
</html>

har satt stor pris på om noen vet hva som kan gjøres for å få fikset dette

Haraldson · 4. juni 2008

Neimen seriøst, istedenfor å laste opp en zip så laster du opp HTML-fila di så vi kan debugge live. Tviler på at noen gidder å laste ned siden din for å hjelpe til!

ThorB · 4. juni 2008

Neimen seriøst, istedenfor å laste opp en zip så laster du opp HTML-fila di så vi kan debugge live. Tviler på at noen gidder å laste ned siden din for å hjelpe til!

seriøst skarp tone.

men grunnen til at jeg ikke gjorde det er fordi start.no legger inn masse rart sammen med htmlen.

her er nå layouten på webområde:

http://home.no.net/thor918/layout/ok/test2.html

men vær obs på crapet start.no legger inn...

Haraldson · 4. juni 2008

1. Du har statisk bredde på siden – du trenger ikke egne bilder med tilhørende elementer for hvert hjørne

2. Du introduserer masse tomme elementer i koden din for å få til en visuell effekt. I dette tilfellet meget unødvendig.

<div id="content">
<div class="top">
<div class="bottom">
Lorem ipsum dolor sit amet
</div>
</div>
<div style="clear: both;"></div>
</div>


#content {
width: 966px;
margin: 0 auto;
background: url(/gfx/borders-y.png) 0 0 repeat-y;
}

#content .top {
width: 966px;
float: left;
clear: both;
background: url(/gfx/borders-top.png) 0 0 no-repeat;
}

#content .top {
width: 936px;
padding: 15px;
float: left;
clear: both;
background: url(/gfx/borders-bottom.png) 0 100% no-repeat;
}

Bildene ser ut som følger;

• borders-y.png: 966x3px, grønn ramme på hver side, denne repeteres nedover i hele boksens høyde

• borders-top.png: 966x20px (circaish), altså topphjørnene + den vannrette grønne ramma imellom

• borders-bottom.png: Motsatt av borders-top.png

ThorB · 4. juni 2008

har ikke statisk bredde på rammen. har egentlig flere rammer i designet som bruker samme bilder..

men tok bare med den delen som jeg har problemer med

skal ta og føle litt på det du kom med forslag her. kanskje jeg kan klare meg med litt anderledes kode.

men som jeg sa har jeg flere rammer, som betyr at jeg må ha bilder for hver ramme, med ditt forslag.

Endret 4. juni 2008 av ThorB

ThorB · 7. juni 2008

skal teste litt nå.

hva er poenget med:

?

ThorB · 7. juni 2008

skal teste litt nå.
hva er poenget med:

<div style="clear: both;"></div>

?

tydligvis noe fyll som trenger å vær med, siden uten den, blir midten bort.

http://home.no.net/thor918/layout/nytest/test.html

eneste problemet jeg ser her og nå, er at jeg skal bruke tranparent bilder på hjørnene så dette ble litt dumt (forslag for å fikse dette?)

Endret 7. juni 2008 av ThorB

ThorB · 7. juni 2008

her er det jeg kom fram til... mulig jeg kompliserer, men det fungerer.

http://home.no.net/thor918/layout/nytest2/test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#frame {
width: 966px;
margin: 0 auto;
}

#frame .top {
width: 966px;
float: left;
clear: both;
padding-top:15px;
background: url(top.gif) 0 0 no-repeat;
}

#frame .content {
width: 966px;
float: left;
clear: both;
padding-left:15px;
padding-right:15px;
background: url(innhold.gif) 0 0 repeat-y;
min-height:542px;
}

#frame .bottom {
width:  966px;
height:19px;
float: left;
clear: both;
background: url(bottom.gif) 0 100% no-repeat;
}
-->
</style>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>

<div id="frame">
<div class="top">
	<div class="content">
		Lorem ipsum dolor sit amet
	</div>
	<div class="bottom"></div>
</div>
<div style="clear: both;"></div>
</div>

</body>
</html>

et annet poeng som du brakte opp. statisk bredde på siden.. problemet har hele tiden vært at jeg vet ikke hvordan jeg skal få dette til med enkle div. i utgangspunktet kunne jeg godt ha tenkt meg dynamisk bredde på rammen.

ThorB · 10. juni 2008

Haraldson, takker for tipsene du kom med!

Jeg har testet ferdig her, og det ser ut som at det fungerer perfekt.

Ser ut som å gjøre det enklest mulig hjalp.

Har du noen oppdateringer i tilfelle jeg vil lage en ramme med dynamisk bredde som justerer seg etter f.eks nettleseren? Hvordan skal div'ene plasseres på smartest mulig måte?

Haraldson · 10. juni 2008

Med en gang ting skal være dynamiske må du dessverre introdusere flere elementer. Det du kan gjøre, er jo å lage et 2x2 px stort bilde som er grønt som rammefargen, som du kan bruke for å lage rammene til høyre og venstre (repetere nedover i hver sin nøsta div.

Da har du de to rammene til høyre og venstre. Dessverre trenger du nå egne elementer til hvert hjørne, samt to elementer til topp- og bunnramme. Det beste her er å posisjonere relativt og absolutt, og benytte padding på den innerste tekstwrapperen for å få avstand ut til rammene.

Kan sikkert lage en mock-up i morgen kveld, om du ikke får det til.

ThorB · 11. juni 2008

Med en gang ting skal være dynamiske må du dessverre introdusere flere elementer. Det du kan gjøre, er jo å lage et 2x2 px stort bilde som er grønt som rammefargen, som du kan bruke for å lage rammene til høyre og venstre (repetere nedover i hver sin nøsta div.

Da har du de to rammene til høyre og venstre. Dessverre trenger du nå egne elementer til hvert hjørne, samt to elementer til topp- og bunnramme. Det beste her er å posisjonere relativt og absolutt, og benytte padding på den innerste tekstwrapperen for å få avstand ut til rammene.

Kan sikkert lage en mock-up i morgen kveld, om du ikke får det til.

hmm

men havner man ikke på noe ganske likt det jeg startet med?

er det mulig å få dette til crossbrower? Få IE til å samarbeide

blir vel å se på det litt helga..

Haraldson · 11. juni 2008

Det du hadde i utgangspunktet fungerte jo ikke akkurat optimalt. At høyre og venstre ramme utvider seg i hele høyden, får du ikke oppnådd skikkelig uten å nøste diver. Det er jo én forskjell.

I tillegg virker det som at du bør lese litt om position i CSS. Det er ganske lett hvis du først forstår konseptet med et foreldreelement (relative) og absolutt posisjonerte elementer innafor dette.

Problemet oppstår selvfølgelig når du skal bruke gjennomsiktige hjørnebilder. Dette krever at du har egne elementer med bakgrunnsbilder i IE6, da filter-hacken ikke bare fikser gjennomsiktighet for IE6, men også strekker bakgrunnsbildene ut til hele elementets størrelse. Altså må bakgrunnsbildene ha egne dedikerte elementer som er like store som bildene som settes som bakgrunn.

Tilsynelatende virker det jo mye som det du hadde i utgangspunktet, men det går an å beherske boksene og posisjoneringen bedre

Et annet tema som kommer på banen pga. gjennomsiktige hjørnebilder, er jo at de rette rammene vil synes bak og utenfor den avrundede boksen, fordi det ikke finnes en solid bakgrunnsfarge som skjuler disse. Derfor må du også ha flere elementer inni hverandre, altså nøsting, for å klare å få de rette rammene til å stoppe der hvor hjørnegrafikkene begynner.

Endret 11. juni 2008 av Haraldson

ThorB · 11. juni 2008

Det du hadde i utgangspunktet fungerte jo ikke akkurat optimalt. At høyre og venstre ramme utvider seg i hele høyden, får du ikke oppnådd skikkelig uten å nøste diver. Det er jo én forskjell.

I tillegg virker det som at du bør lese litt om position i CSS. Det er ganske lett hvis du først forstår konseptet med et foreldreelement (relative) og absolutt posisjonerte elementer innafor dette.

Problemet oppstår selvfølgelig når du skal bruke gjennomsiktige hjørnebilder. Dette krever at du har egne elementer med bakgrunnsbilder i IE6, da filter-hacken ikke bare fikser gjennomsiktighet for IE6, men også strekker bakgrunnsbildene ut til hele elementets størrelse. Altså må bakgrunnsbildene ha egne dedikerte elementer som er like store som bildene som settes som bakgrunn.

Tilsynelatende virker det jo mye som det du hadde i utgangspunktet, men det går an å beherske boksene og posisjoneringen bedre

Et annet tema som kommer på banen pga. gjennomsiktige hjørnebilder, er jo at de rette rammene vil synes bak og utenfor den avrundede boksen, fordi det ikke finnes en solid bakgrunnsfarge som skjuler disse. Derfor må du også ha flere elementer inni hverandre, altså nøsting, for å klare å få de rette rammene til å stoppe der hvor hjørnegrafikkene begynner.

ja har skjønt det konseptet med relative og absolutte. mitt førsteutkast baserte seg på stort sett det(ikke det jeg posta her). men som alltid var det noe som ikke fungerte i IE og man måtte ty til med masse rot.

føler denne siden forklarer mye:

http://www.barelyfitz.com/screencast/html-...ss/positioning/

kan nå alltids poste noe tester i helga. blir for slitsomt å teste etter jobb

skal se litt på nøsting av divs. akkurat nå behersker jeg ikke helt den teknikken.

ThorB · 14. juni 2008

det beste jeg får til er ved å bruke tables.

skjønner meg ikke godt nok på divs for å lage en layout som tilpasser seg.

det blir rett og slett bare hack etter hack hver gang jeg prøver.

får ikke til å lage toppen av rammen engang (satt på spissen)

Tablelayout:

http://home.no.net/thor918/layout/tablelayout/test2.html

så hvis det er noen som greier å få til noe enkelt i div som gjør det samme, hadde det vært interessant.

for meg tar det alt for lang tid å forske seg frem til noe som fungerer ok. eventuelt tips til linker er også velkomne.

Endret 15. juni 2008 av ThorB

ThorB · 15. juni 2008

http://www.phpmyborder.com/demo.php?width=...display=Display

her har du en som har laget runde hjørner uten bilder. koden ser litt herjet ut..

å så var det ikke så fort gjort å tilpasse rundhetsgraden

Endret 15. juni 2008 av ThorB

Logg inn

divlayout og IE viser ikke 100% div

Anbefalte innlegg

ThorB

Lenke til kommentar

Videoannonse

Haraldson

Lenke til kommentar

ThorB

Lenke til kommentar

Haraldson

Lenke til kommentar

ThorB

Lenke til kommentar

ThorB

Lenke til kommentar

ThorB

Lenke til kommentar

ThorB

Lenke til kommentar

ThorB

Lenke til kommentar

Haraldson

Lenke til kommentar

ThorB

Lenke til kommentar

Haraldson

Lenke til kommentar

ThorB

Lenke til kommentar

ThorB

Lenke til kommentar

ThorB

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer