CSS position - z-index conflict ?

Status
Niet open voor verdere reacties.
Johantrax

Johantrax

Terugkerende gebruiker
Lid geworden
18 okt 2006
Berichten
1.268
Wie o wie kan vinden waarom deze code niet doet wat ze zou moeten doen?

Ik heb de achtergrondafbeeldingen vervangen door kleuren, zodat alles wat duidelijker zichtbaar is. Je hoeft dus niet voor te stellen om naar een linker/midden/rechter-div op te splitsen, dan kloppen de achtergrondafbeeldingen niet meer.

Ik vermoed dat z-index niet van toepassing is op een element dat position:fixed; heeft.. Hoewel ik hierover niets heb kunnen vinden. :confused:

Het doel is iets bereiken als op deze site, maar dan zodat de zijbalken niet meescrollen (enkel de topafbeelding dient niet mee te scrollen).

De code is getest in FF2.0
PHP: 
<!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>Paginatitel</title>
	<style type="text/css">	
		body {
			font-family: Tahoma;
			font-size: 12px;
			color: #555555;
			
			margin: 0px;
			padding: 0px;
		
			/*background: url(../images/design/background-overal.jpg) repeat-y center;*/
			background-color:#00FF00;
		}
		
		#bg_top {
			/*background: url(../images/design/top-background.jpg) no-repeat top;*/
			background-color:#FF0000;
			min-height: 300px;
			width: 100%;
			position:fixed;
			top: 0em;
			z-index: 1;
		}
		
		#container {
			width: 610px;
			background-color:#FFFF00;
			z-index: 2;
			/* centreren */
			margin-left: auto;
			margin-right: auto;
		}
		
		#footer {
			background-color:#CCCCCC;
			position: fixed;
			bottom: 0em;
			/* centreren */
			text-align: center;
			width: 100%;
			/* small-fonts */
			font-size: 80%;
		}
	</style>
</head>

<body>
	<div id="bg_top"><!-- achtergrond - layer 2 via CSS toegekend//--></div>
	<div id="container">
		<?php for($i=0;$i<101;$i++){echo "\t\tregel ".$i."<br />\n";} ?>
	</div> <!-- container //-->
	<div id="footer">
		een copyright en link naar login
	</div>
</body>
</html>

Met hoop op een zichtbare container...

--Johan
 
Johantrax,
Probeer eens deze code in uw pagina. Het is de uwe dat ik een beetje verbouwd heb in de hoop dat het dat is wat U bedoeld? Hopelijk geraak je hier mee wat verder
in de body style heb ik text-align:center; gebruikt werkt in IE7 en dan in body van je pagina heb ik de tag <center></center> gebruikt juist voor en na de div container dan staat hij ook in het midden van firefox.
Code: 
<!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>Paginatitel</title> 
<style type="text/css">     
 body { 
            font-family: Tahoma; 
            font-size: 12px; 
            color: #555555; 
           /*background: url(../images/design/background-overal.jpg) repeat-y ;*/ 
            background-color:#00FF00;
text-align:center;
	margin:0px; 
			
        } 
         
        #bg_top { 
            /*background: url(../images/design/top-background.jpg) no-repeat ;*/ 
            background-color:#FF0000; 
            width:610px; 
            top: 0em; 
           
        } 
         
        #container {		
            width: 610px;
            background-attachment:scroll; 
            background-color:#FFFF00;
            border:#0000FF solid thick; 
            
        } 
         
        #footer { 
            background-color:#CCCCCC; 
            width:610px; 
        } 
    </style> 
</head> 

<body> 
    <center>
    <div id="container"> 
		<div id="bg_top"><!-- achtergrond - layer 2 via CSS toegekend//-->
			<br />
			<p>Hier komt dan uw logo veronderstel ik</p>
			<p> Om uw container te tonen heb ik er een blauw kader rond gezet</p>
			<br />
		</div> 
        <?php for($i=0;$i<101;$i++){echo "\t\tregel ".$i."<br />\n";} ?> 
    
    <div id="footer"> 
        een copyright en link naar login 
    </div> 
	</div> <!-- container //--> 
	</center>
</body> 
</html> 
Met hoop op een zichtbare container...
groetjes
defietser
 
Laatst bewerkt:
Beste fietser,

Spijtig genoeg was dit niet wat ik bedoelde. Ik heb met paint eveen een snelle screen gemaakt van hoe het er wel zou moeten gaan uitzien.

voorlopig heb ik de andere fixed-div's nog niet geïmplementeerd, maar aangezien zij boven de body gaan liggen zal dit geen probleem vormen (want dat is wat nu gebeurt met het rode deel)

--Johan
 

Bijlagen

  • einddoel.GIF
    einddoel.GIF
    18,5 KB · Weergaven: 50
Johantrax,
Veranderde versie heb wel enkel divs moeten bijmaken hoop dat het nu okee is
Code: 
<!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>Paginatitel</title> 
    <style type="text/css">     
        body { 
            font-family: Tahoma; 
            font-size: 12px; 
            color:#FFFFFF; 
            margin: 0px; 
            padding: 0px; 
          /*background: url(../images/design/background-overal.jpg) repeat-y center;*/ 
            background-color:#00FF00; 
        } 
            #bg_top { 
            /*background: url(../images/design/top-background.jpg) no-repeat top;*/ 
            background-color:#FF0000; 
            height: 300px; 
            width: 100%; 
        } 
        #container { 
			width: 610px;
			background-attachment:scroll;			
            background-color:#FFFF00;
			margin:0px;
			border:#000000 medium solid;
		} 
		#inhoudphp{
		background-color:#FFFF00;
		background-attachment:scroll;
		width:610px;
		margin-top:150px;
		
		}
        #logo{
		background-color:#0000FF;
		width:410px;
		height:150px;
		float:left;
		
		} 
		#nav{
		
		background-color:#330000;
		width:200px;
		height:550px;
		float:right;
		background-position:top;
		
		}
        #footer { 
            background-color:#CCCCCC; 
            position: fixed; 
            bottom: 0em; 
            /* centreren */ 
            text-align: center; 
            width: 100%; 
            /* small-fonts */ 
            font-size: 80%; 
        } 
    </style> 
</head> 

<body> 
    <div id="bg_top"><!-- achtergrond - layer 2 via CSS toegekend//-->
	<center>
    <div id="container"> 
		<div id= "logo">
			<br /><br />
			<p>Hier komt Uw logo in te staan</p>
			<br /><br />
		</div>
		<div id="nav"></div>
		<div id="inhoudphp">
			<br /><br />
		    <?php for($i=0;$i<101;$i++){echo "\t\tregel ".$i."<br />\n";} ?> 
		 	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /								><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		 
		 </div>
		</div>
       
    </div> <!-- container //--> 
    <div id="footer"> 
        een copyright en link naar login 
    </div>
	 </center>
	</div> 
	
</body> 
</html>
groetjes
defietser
 
in FF2.0 scrollen de linkse en rechtse balk (rood+groen) nog steeds mee, het is de bedoeling dat deze aten allen tijde zichtbaar blijven net zoals het logo en het menu.

Enkel het gele gedeelte mag dus scrollen. Toch al reeds bedankt voor de geleverde moeite :)

--Johan
 
Ik ben er bijna, de achtergronden blijven nu mooi statisch terwijl het middendeel kan scrollen. Ook de footer is statisch (met een doorschijnend effect)

PHP: 
<!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>Paginatitel</title>
	<style type="text/css">	
		body {
			font-family: Tahoma;
			font-size: 12px;
			color: #555555;
			
			margin: 0px;
			padding: 0px;
		
			background-image: url(images/layout/bg-overal.jpg);
			background-repeat: repeat-y;
			background-position: center;
		}
		
		#body { /*  fake-body wegens dubbele backgroundimg */
			background-image: url(images/layout/bg-top.jpg);
			background-repeat: no-repeat;
			background-position: top;
			/* zichtbaarheid garanderen */
			min-height: 300px;
			/* anti-scroll */
			background-attachment: fixed;
		}
		
		#container {
			width: 610px;
			background-color:#FFFF00;
			/* centreren */
			margin-left: auto;
			margin-right: auto;
		}
		
		#spacefooter {
			visibility: hidden;
		}
		#footer {
			width: 610px;
			position: fixed;
			bottom: 0em;
			/* centreren */
			margin-left: auto;
			margin-right: auto;
			background-color: #FFFFFF;
			/* small-fonts */
			font-size: 80%;
			/* uitlijning */
			text-align: center;
			color: #000000;
			/* doorzichtigheid */
			opacity: 0.5;
			filter: alpha(opacity=50);
		}
	</style>
</head>

<body>
	<div id="body"><!-- achtergrond - layer 2 via CSS toegekend//-->
		<div id="container">
			<?php for($i=0;$i<101;$i++){echo "\t\tregel ".$i."<br />\n";} ?>
			<span id="spacefooter">Drie regels om ervoor te zorgen dat<br />de onderste paginaregels voorbij de footer<br />scrollen</span>
			<div id="footer">
				<!-- zachte overgang naar footertext //-->
				<br />een copyright en link naar login
			</div>
		</div> <!-- container //-->
	</div>
</body>
</html>

Ik denk dat ik de andere div's er nu wel moet opkrijgen, ander zal ik deze vraag heropenen ;)

--Johan
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan