z-index problem

[Grains]

Hej. Jag har gjort en ram på min sida(som en tavla). Denna ramen ligger på z-index: 100 och täcker hela sidan:

.border{
   height: 100%;
   width: 100%;
   z-index: 100;
   position: fixed;
}

#left{
   background:transparent url('left.png.jsf?ln=img') left top repeat-y;   
}
....

Jag vill ju att ramen skall ligga överst på sidan men alla länkar på sidan måste ligga på en högre nivå än ramen för att man skall kunna klicka på dom. Men eftersom att alla child-element verkar hamna på samma nivå som en parent kan jag inte hitta någon annan lösning än att lägga alla länkar på yttersta nivån och placera dom manuellt på rätt plats. Detta känns dock väldigt fult så efterlyser någon finare lösning.

Kanske kan jag göra så att inte ramarna täcker hela sidan? Eller placera på något sätt(HTML5?) en child div på högre z-index än en separat div.

 

Förtydligar med kod:

 

<!-- Ramar -->
<div class="border" id="left"/>
<div class="border" id="right"/>
<div class="border" id="top"/>
<div class="border" id="bottom"/>

<div id="main"> <!-- skall ligga under ramarna -->
  <div id="menu"> <!-- måste ligga över ramarna för att bli klickbara -->
     Länk
  </div>
</div>

[Jonas__B]

Jag hade kanske (om jag över huvudtaget viljat göra som du vill göra), fyra divvar som representerar de olika kanterna på ramen vilket gör att mitten-ytan är fri för innehållslagret att leva och frodas. (dvs inte 100% bredd och höjd)

 

Alternativet är att ramen är en stor bakgrundsbild och så centrerar du innehållet, med fast brödd och höjd.

 

Förresten, flera element får inte ha samma id. Använd class i de fallen att de skall dela class, som du gjort på border.

[Grains]

Vad jag har gjort är ju fyra divar som representerar de olika kanterna på ramen. Sedan har jag satt de till 100% för att fylla skärmen oavsett skärm-upplösning.

Så om ditt första förslag skall funka måste jag kunna positionera en div i valfri kant utan att behöva använda %. Tex.

höger kant: 100% height; align:right;

bottom kant: 100% width; align:bottom;

Vet dock ej om och hur man gör "align:xx"?

 

Om man försöker med bakgrundsbild så är inte ramen längre dynamiskt anpassad efter upplösning.

 

tips?

[Jonas__B]

Tips: Ha ingen ram

[Grains]

Hehe. Är lite knepigt ja. Kan förklara varför man inte sätt det tidigare. Men tycker det ser bra ut....

Får väl försöka vända mig till html5/css3. Där måste man ju kunna lägga en inre komponent på en högre nivå i z-led. Måste ju gå att lösa på något sätt....

[Jonas__B]

Imo skall man inte behöva använda z-index utan får bygga en struktur runt om.

 

-header-

-left | main | right -

-footer-

 

 

Skall den svarta ytan (main) vara i flexibel storlek eller fast?

 

I vilket fall ser jag inget problem.

[happyfejs]

Kan du inte bara göra en div med en bakgrund i? :S Eller två, en för det turkosa och en för "content" delen? :S

Och sen bara ha svart bakgrund på bodyn?

[Grains]

Lyckades lösa det nu

Att bygga en struktur runtom så har man fortfarande problem med att hitta höger sida och bottom.

 

Gjorde en master-div på with&height 100%. La allt i denna och körde "float:right" för right och "position: absolute;bottom: 0;" för bottom.

[happyfejs]

gott att du löste det

Tillägg bara, om du vill hitta bottom och right så tar du bara position:absolute; bottom:0; resp position:absolute; right:0; då ska de lägga sig längst ner och längst till höger.

[Grains]

. Aha, tack! Kände inte till "right" och "bottom" atributen tidigare. Försökt med massa "margin-right:0;" och liknande men gick inte så bra :-)