Just nu i M3-nätverket
Gå till innehåll
Grains

z-index problem

Rekommendera Poster

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>

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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?

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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....

post-29844-1289308941,47_thumb.jpg

Redigerad av Grains

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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?

Redigerad av happyfejs

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Lyckades lösa det nu :D

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.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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.

Redigerad av happyfejs

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
:o. 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 :-)

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...