Dynamisk header størrelse

[Simon]

Jeg ønsker å splitte headeren på siden min opp i fire deler, der høyre og venstre del er statiske i størrelsen, mens de to i midten automatisk skal fylle ut tomrommet mellom høyre og venstre felt basert på størrelsen på nettleservinduet. Disse skal da ta opp halvparten av den ledige plassen hver.

 

Dette vil vel omtrent se slik ut:

 

----------------------------------------------

| fast | dynamisk | dynamisk | fast |

----------------------------------------------

 

Koden ser foreløpig slik ut:

#header_left {
   height: 89px;
 float: left;
 width: 195px;
 border:1px solid #000;    
}

#header_center_left {
   height: 89px;
 width: 50%;
 border:1px solid #000;
 
}

#header_center_right {
   height: 89px;
 width: 50%;
 border:1px solid #000; 
 
}

#header_right {
   height: 89px;
 float: right;
 width: 195px;
 border:1px solid #000;    
}

#header {

}

}

 

Setter pris på all hjelp!

 

Edit: Har kommet litt videre nå, men fremdeles er den ene av de to i midten plassert rett under hverandre. Høyre og venstre del står nå riktig, samt den vestre midtre delen. Oppdaterte koden over.

Endret 30. juni 2006 av Simon

[Drømmemannen]

Følgende ser ut til å funke i Opera 9.00 ihvertfall:

 

body {
   margin: 0px;
}

#header_left {
   position: absolute;
   top: 0px;
   left: 0px;
   height: 89px;
   width: 195px;
   background-color: red;
}

#header_right {
   position: absolute;
   top: 0px;
   right: 0px;
   height: 89px;
   width: 195px;
   background-color: yellow;
}

#header_center {
   height: 89px;
   width: 100%;
   margin-left: 195px;
   margin-right: 195px;
   background-color: green;
}

#header_center_left {
   float: left;
   height: 89px;
   width: 50%;
   background-color: gray;
}

#header_center_right {
   float: left;
   height: 89px;
   width: 50%;
   background-color: blue;
}

 

da med #header_center_left og #header_center_right inni en #header_center-div. Grunnen til at jeg bruker background-color i steden for border er at border tar plass, det gjør ikke background-color.

Endret 30. juni 2006 av balletryne

[Simon]

Tusen takk for hjelpen!

[Simon]

Har tittet litt mer på dette, og koden ser nå slik ut:

<style type="text/css">
body {
  margin: 0px;
}

#left {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 89px;
  width: 195px;

  background: url(../joomla/templates/esito/images/banner_left.gif) no-repeat top left;
}

#right {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 89px;
  width: 195px;
  background: url(../joomla/templates/esito/images/banner_right.gif) no-repeat top right;
}

#center_right {
  height: 89px;
  width: 100%;
  margin-left: 195px;
  margin-right: 195px;
  background: #000 url(../joomla/templates/esito/images/banner_center_right.gif) no-repeat top right;
}

#center_left {
   float: left;
   height: 89px;
   width: 50%;
border-right: 1px solid #FFF;
   background: url(../joomla/templates/esito/images/banner_center_left.gif) no-repeat top left;
}

</style>


<div id="header">
<div id="right"></div>
<div id="center_right">
 <div id="center_left"></div>
</div>
<div id="left"></div>



</div>

 

Dette fungerer utmerket i Opera og IE, men i Firefox legger bakgrunnsbildet for center_right seg til høyre for right. Forslag?

[Drømmemannen]

Nå har ikke jeg dine bakgrunnsbilder, men det jeg ser er at FireFox tolker #center_left sin width:50% som 50% av #center_right sine 100% som er hele siden. #center_left blir derfor 50% bred i forhold til bredden på hele siden.

[Simon]

Nå har ikke jeg dine bakgrunnsbilder, men det jeg ser er at FireFox tolker #center_left sin width:50% som 50% av #center_right sine 100% som er hele siden. #center_left blir derfor 50% bred i forhold til bredden på hele siden.

6465320[/snapback]

 

Forslag til måte å løse det på?

[Drømmemannen]

Tja. Mulig det er enklere å ta #center_left og #center_right ut av hverandre og sette position:absolute på samtlige. Dvs. #center_left skal ha position:absolute, top:0, left:0, width:50%, ingen margin. #center_right skal ha det samme bortsett fra at left:0 skal erstattes med right:0. Mulig du også må inn med z-index for å få #left og #right oppå de andre.

[Simon]

Kan teste det ut. Har nok ikke sagt det tidligere, men er også viktig at det er fra midten bildene skal utvides eller "kuttes". Det vil si at center_left og center_right på en måte forsvinner i hverandre på midten, kun skilt av en tynn hvit border. Ikke like lett å forklare det, men håper det ble sånn omtrent riktig. Dette fungerer i IE og Opera med nåværende kode.

[Drømmemannen]

Jeg får det jeg sa til å funke hos meg ihvertfall, i siste Opera og siste FireFox. Inkludert den lille hvite borderen. Måtte juster litt med z-index, men det er jo ikke vanskelig.

[Simon]

Gidder du å lime inn koden så jeg evt kan se hvor jeg har gjort feil?

[Drømmemannen]

Slik ser det ut hos meg nå:

 

<html>
<head>
 <style>

   body {
       margin: 0px;
   }

   #left {
       position: absolute;
       top: 0px;
       left: 0px;
       height: 89px;
       width: 195px;
       background: red;
       z-index: 2;
   }

   #right {
       position: absolute;
       top: 0px;
       right: 0px;
       height: 89px;
       width: 195px;
       background: yellow;
       z-index: 2;
   }

   #center_left {
       position: absolute;
       top: 0px;
       left: 0px;
       height: 89px;
       width: 50%;
       background: blue;
       z-index: 1;
   }

   #center_right {
       position: absolute;
       top: 0px;
       right: 0px;
       height: 89px;
       width: 50%;
       background: green;
       border-left: 1px solid white;
       z-index: 1;
   }

 </style>
</head>
<body>

<div id="header">
 <div id="left"></div>
 <div id="center_left"></div>
 <div id="center_right"></div>
 <div id="right"></div>
</div>

</body>
</html>

 

Jeg har forresten ikke IE her i Gentoo Linux, så det får jeg ikke testet.

Endret 10. juli 2006 av balletryne

[Simon]

Problemet kommer når jeg setter på bakgrunnsbildene. Har nok ikke forklart meg godt nok. Bildene skal på en måte forsvinne inn mot midten, altså "spises opp" av den hvite borderen som befinner seg mellom center_left og center_right. Dette må være sånn på grunn av måten headeren er designet på, noe jeg ikke kan forandre. Høre del av left, og venstre del av center_left passer sammen, så denne delen kan ikke forandres. Og vice versa på høyre side.

 

Uansett takk for all hjelp og tålmodighet så langt!

[Drømmemannen]

Er det forankringen av bakgrunnsbildene som ikke funker? top left og top right?

[Simon]

Er det forankringen av bakgrunnsbildene som ikke funker? top left og top right?

6465610[/snapback]

 

Det er nok det, uten at jeg ser hva feilen er..

Endret 10. juli 2006 av Simon

[Drømmemannen]

Du har sikkert sagt det allerede, men hva er det som skjer og hva er det som ikke skjer sammenlignet med hvordan det skal se ut?

 

Såvidt jeg skjønner så funker bakgrunnsbildene på #left og #right. Disse har jo fast størrelse, så det burde ikke være noe problem. Bakgrunnsbildet til #center_left skal forankres i top left slik at når man endrer på bredden på siden så er det i midten bakgrunnsbildet "sklir" i forhold til #center_left-ruten. Tilsvarende på #center_right bare motsatt, at bakgrunnbildet er festet i top right og at mer eller mindre av bakgrunnsbildet blir synlig ved venstre kant av #center_right når bredden på nettleseren endres.

 

Eller?

Endret 10. juli 2006 av balletryne

[Simon]

Du har sikkert sagt det allerede, men hva er det som skjer og hva er det som ikke skjer sammenlignet med hvordan det skal se ut?

 

Såvidt jeg skjønner så funker bakgrunnsbildene på #left og #right. Disse har jo fast størrelse, så det burde ikke være noe problem. Bakgrunnsbildet til #center_left skal forankres i top left slik at når man endrer på bredden på siden så er det i midten bakgrunnsbildet "sklir" i forhold til #center_left-ruten. Tilsvarende på #center_right.

 

Eller?

6465799[/snapback]

 

Da har du forstått det rett:) Koden jeg sist limte inn fungerer som sagt i IE og Opera. Problemet er, som du sa i stad, at width tolkes anderledes i Firefox. Da plasserer center_right seg til høyre for right, og ikke til venstre for right slik den skal.

 

Problmete i koden du foreslo er at center feltene altså "forsvinner" i feil ende, istendenfor i midten som det er meningen at de skal.

[Simon]

Du har sikkert sagt det allerede, men hva er det som skjer og hva er det som ikke skjer sammenlignet med hvordan det skal se ut?

 

Såvidt jeg skjønner så funker bakgrunnsbildene på #left og #right. Disse har jo fast størrelse, så det burde ikke være noe problem. Bakgrunnsbildet til #center_left skal forankres i top left slik at når man endrer på bredden på siden så er det i midten bakgrunnsbildet "sklir" i forhold til #center_left-ruten. Tilsvarende på #center_right.

 

Eller?

6465799[/snapback]

 

Da har du forstått det rett:) Koden jeg sist limte inn fungerer som sagt i IE og Opera. Problemet er, som du sa i stad, at width tolkes anderledes i Firefox. Da plasserer center_right seg til høyre for right, og ikke til venstre for right slik den skal.

 

Problemet i koden du foreslo er at center feltene altså "forsvinner" i feil ende, istendenfor i midten som det er meningen at de skal.

[Drømmemannen]

Du mangler ikke bare 195px med padding til venstre i bakgrunnsbildet i #center_left og 195px med padding til høyre i bakgrunnsbildet i #center_right? Altså 195px med luft i selve bildene.

 

Jeg mener #center_left- og #center_right-divene går jo helt ut til kanten av vinduet og er bare overskygget av #left og #right de første 195 punktene uten at det gjør noe med hvordan innholdet i #center_left og #center_right behandles.

 

Ta en titt på følgende bilde:

Alle bakgrunnbildene er like og inneholder tekst fra 1 til v. Fra venstre er 1 til halve c bakgrunnsbildet til #left/rød, mens fra halve c og til midten er det bakgrunnbildet til #center_left/blå som vises. Bakgrunnsbildet til #center_left/blå starter på samme sted som bakgrunnsbildet til #left/rød, nemlig helt til venstre. Hvis du vil at bakgrunnsbildet i #center_left/blå skal starte der #left/rød stopper må du forlenge bakgrunnsbildet til #center_left/blå med 195px på venstre side slik at, i dette tilfellet, 1 begynner der halve c stopper. Tilsvarende bare motsatt på høyre side.

Endret 10. juli 2006 av balletryne

[Simon]

Edit: Fant en løsning! Hvis noen skulle lure, så ser koden da slik ut:

 

<style type="text/css">
body {
  margin: 0px;
}

#left {
float: left;
  height: 89px;
  width: 195px;
  background: url(../joomla/templates/esito/images/banner_left.gif) no-repeat top left;
  z-index: 4;
}

#right {
float: right;
  height: 89px;
  width: 195px;
  background: url(../joomla/templates/esito/images/banner_right.gif) no-repeat top right;
  z-index: 4;
}

#center_right {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 89px;
  border-left: 1px solid #FFF;

  background: url(../joomla/templates/esito/images/banner_center.gif) no-repeat top right;

}

#center_left {
   position: absolute;
   top: 0;
   left: 0;
   height: 89px;

   width: 50%;
   background: url(../joomla/templates/esito/images/banner_center.gif) no-repeat top left;
 
}

</style>


<div id="header">

<div id="center_left"><div id="left">left</div></div>
<div id="center_right"><div id="right">right</div></div>

</div>

 

Og tusen takk for all hjelpen! Makan til tålmodighet:)

Endret 10. juli 2006 av Simon

[Drømmemannen]

Det har med margin-right i #center_right å gjøre. Det gjelder margin-left i #center_left også, men fordi #center_right kommer etter #center_left i html-en ligger #center_right over #center_left. Margin kommer i tillegg til bredden på div-ene. Som jeg sa i et tidligere innlegg, margin kan ikke være med. Hvis man kunne sagt at bredden på #center_left og #center_right skal være 50%-195px hadde det funka.

 

Jepp, du fjernet margin... Bare hyggelig

Endret 10. juli 2006 av balletryne