Toon posts:

[css] layers en z-index

Pagina: 1
Acties:

dinsdag 4 mei 2004 22:15

Acties:

Verwijderd

Topicstarter
Ik heb een layer die in het midden van het scherm gecentreerd is.
Op elke hoek van deze layer wil ik een menu zetten. (zie uitvoering van onderstaande code). Eigenlijk wil ik die menu's ACHTER de centrale layer plaatsen.
Zodat ik ze na aan te klikken naar voren kan halen (moet ik dan nog maken natuurlijk).

Maar wat ik ook probeer met die z-index van #menu1, #menu2 en #contentContainer ik krijg het niet voor elkaar. Heeft iemand enig idee hoe ik dat toch voor elkaar kan krijgen? Of ligt het wellicht aan het gebruik van de hoofdtabel?
Die heb ik echter nodig om de contentlayer te kunnen centreren (zowel verticaal als horizontaal) in de browserwindow.

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
<!--
html, body{
   width: 100%;
   height: 100%;
}

body{
   background-color: #F4F4F4;
   margin: 0px;
   padding: 0px;   
}

body,p,div,span,input,select,textarea{
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #006699;
}   

#mainContainer{
   width: 100%;
   height: 100%;
}
#mainContainer td{
   vertical-align: middle;
   z-index: 10;
}

#contentContainer{
   position: relative;
   z-index: 15;
   width: 640px; 
   height: 480px;
   margin-left: auto;
   margin-right: auto;
   border: 1px solid #000000; 
   background-color:#FFFFFF;
   padding: 5px;
}

.menu{
    position: relative; 
    width: 200px;
    border: 1px solid #000000;
    background-color:#FFFFFF;
    padding: 0px;
    overflow: auto;
}

.menu ul{
   list-style: none;
   margin: 0px;
   padding: 0px;
}

.menu li{
    display: inline;
    margin: 0px;
    padding: 0px;
}

.menu li a {
    display: block; 
    padding: 5px;
    margin: 0px;
    color: #006699;
    text-decoration: none;
}

.menu li a:hover{
    background-color: #E4E4E4;
}

.menuCaption{
   padding: 5px;
   background-color:#006699;
   color: #FFFFFF;
   font-weight: bolder;
}

#menu1{
   float: left;
   left: -23px;
   top: -23px; 
   z-index: 1;
}

#menu2{
   float: right;
   right: -23px;
   top: -23px;
   z-index: 2;
}
-->
</style>
</head>

<body>
<!-- content //-->
<table id="mainContainer">
 <tr>
  <td>
   <div id="contentContainer">
    <!-- start: menu layers //-->
    <div id="menu1" class="menu">
     <div id="header1" class="menuCaption">hoofdmenu 1</div>
      <ul>
       <li><a href="javascript:void(0);">onderwerp 1</a></li>
       <li><a href="javascript:void(0);">onderwerp 2</a></li>
       <li><a href="javascript:void(0);">onderwerp 3</a></li>
       <li><a href="javascript:void(0);">onderwerp 4</a></li>
      </ul> 
    </div>

    <div id="menu2" class="menu">
     <div id="header2" class="menuCaption">hoofdmenu 2</div>
      <ul>
       <li><a href="javascript:void(0);">onderwerp 1</a></li>
       <li><a href="javascript:void(0);">onderwerp 2</a></li>
       <li><a href="javascript:void(0);">onderwerp 3</a></li>
       <li><a href="javascript:void(0);">onderwerp 4</a></li>
      </ul> 
    </div>  
    <!-- end: menu layers //-->
   </div>
  </td>
 </tr>
</table>
</body>
</html>

woensdag 5 mei 2004 00:00

Acties:
  • faabman
  • Registratie: Januari 2001
  • Laatst online: 08-08-2024

faabman

kun je dit probleem niet veel eenvoudiger oplossen met
display of visibilty
:?

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

woensdag 5 mei 2004 09:03

Acties:

Verwijderd

Topicstarter
Nee want ik wil het menublock dat niet actief heb gedeeltelijk zichtbaar hebben. Dus zodat je alleen de titel ziet.

woensdag 5 mei 2004 09:29

Acties:
  • beetle71
  • Registratie: Februari 2003
  • Laatst online: 14-05 15:52

beetle71

Volgens mij gaat dat niet lukken zolang je de menu divjes binnen de contentContainer nest.
Je kunt overwegen om een 'contentContainerContainer' .... :7 ... te maken, waarbinnen je de contentContainer en de menudivjes positioneerd, waarbij deze dan niet meer genest zijn.

woensdag 5 mei 2004 09:53

Acties:

Verwijderd

Waarom werk je niet met een clipping? Je clipt een inactief menu totdat alleen het titel gedeelte zichtbaar blijft. Bij een click event op de titel pas je vervolgens de clipping aan en is je hele menu zichtbaar :)

woensdag 5 mei 2004 10:17

Acties:

Verwijderd

Topicstarter
Clipping, ha nog nooit toegepast en ik wist eerlijk niet van het bestaan af! Eens info zoeken ... tips?
Pagina: 1
Reageer