PDA

View Full Version : Resolved z-index problem.



effpeetee
Aug 18th, 2009, 11:00 PM
This is the code of an experimental page to learn how to do faux columns. I have made the faux1.gif slice and, if there is nothing printed from the html, the columns show up. But as it is here,complete, they do not. I have spent two days trying to get this right. I kow that some of the body code is in nedd of attention, but that is another matter.

I just want to know what I am doing/not doing and how to put the matter right.

I really would like any help. I really cannot afford all the Codis tablets.:D

It is also here. (http://exitfegs.co.uk/afaux.html)


<!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=UTF-8" />
<base href="http://devious-design.co.uk/main_test.html" />
<title>Devious Design</title>
<style type="text/css">

*{
margin:0;
padding:0;
}

body {position:relative;
z-index:12;
width:780px;
font: 100% Verdana, Arial, Helvetica, sans-serif;
background-image: url(faux1.gif);
background-repeat: repeat 59% 0;
height:100%;
background-position: center;


}

#wrapper {
width: 780px;
height: 100%;
margin:0 auto;

border:2px solid red;

}

#sidebar {
width: 30%;
float: right;
color: white;
padding: 5px;

}

.sidebar_text {
font-size: 12px;
color:#000;
}

.footer_text {
font-size: 10px;
color: #FFF;
}
#footer {
margin-left: auto;
margin-right: auto;
width: 780px;
margin-bottom: 0px;
}

.text_spacing {
margin-left: 35px;
margin-right: 269px;
}

.central {margin:0 auto;
text-align: center;
}

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

ul li {
position: relative;
float: left;
width: 130px;
}

li ul {
position: absolute;
top: 30px;
display: none;
}

ul li a {
display: block;
text-decoration: none;
text-align: center;
line-height: 20px;
color: #fff;
padding: 5px;
background: #000;
margin: 0px;
}


ul li a:hover { background: #363636; }
li:hover ul, li.over ul { display: block; }

</style>
</head>

<body>
<div id="wrapper" class="central"> <img src="images/banner.png" alt="devious design banner" width="780" height="160" />
<ul>
<li><a href="index.html">Home</a></li>

<li><a href="blog.html">Blog</a></li>
<li><a href="entertainment.html">Entertainment</a>
<ul>
<li><a href="forum.html">Forum</a></li>
<li><a href="games.html">Games</a></li>
<li><a href="music.html">Music</a></li>

</ul>
</li>
<li><a href="graphics.html">Graphics</a>
<ul>
<li><a href="banners.html">Banners</a></li>
<li><a href="logos.html">Logos</a></li>
<li><a href="displays.html">Displays</a></li>

<li><a href="airbrushing.html">Airbrushing</a></li>
</ul>
</li>
<li><a href="photography.html">Photography</a>
<ul>
<li><a href="friends.html">Friends</a></li>
<li><a href="funpics.html">Fun Pictures</a></li>

<li><a href="scenery.html">Scenery</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a> </li>
</ul>
<div id="sidebar">
<div class="sidebar_text">

<h2> Updates </h2>
<hr />
<h3> Css 2.1 </h3>
<i></p>

<hr />
<h3> Xhtml 1.0 </h3>
<i> Wednesday 10th June 2009</i>
<p> The index page is now compliant with W3c xhtml transitional 1.0 standards and this will be carried on throughout the site when the template has been finalized.</p>
<hr />
<h3> Site Construction 2 </h3>

<i> Tuesday 9th June 2009 </i>
<p> Pages for all sections have been added with some content so it doesn't look so bare. Aswell as this a music player has been created however no music has yet been added due to the fact that i have no direct access to music currently....</p>
<hr />
<h3> Site Construction </h3>
<i> Monday 8th June 2009 </i>

<p> Template is currently being coded in css and html. Template will be finished in the following days/weeks after all coding has been completed and the full site will be up and running shortly after. </p>
</div>
</div>
<div class="text_spacing">
<div class="central"> <br />
<br />
<h2>Welcome to Devious Design </h2>

</div>
<p> Devious Design is a website dedicated to promoting the creative graphical designs and illustrations of Alex Rogers to the public.
Showing complex designs via a range of applications and coding languages which include the following: Photoshop, Illustrator, Xhtml, Css. </p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p> one </p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p> two </p>
<br />
<br />
<br />
<br />
<br />
<br />

</div>
</div>

<div id="footer">
<div class="footer_text">
<table width="780" border="0" cellspacing="0" cellpadding="0">

<tr>
<th width="35" scope="row"><img src="images/bl.png" alt="bottom left corner" width="35" height="40" /></th>
<th width="249" bgcolor="#000000" scope="row">Devious Design&copy; 2009. All rights reserved.</th>

<td width="277" bgcolor="#000000">&nbsp;</td>

<td width="93" bgcolor="#000000"><a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" /></a>
</td>

<td width="93" bgcolor="#000000"><a href="http://validator.w3.org/check?uri=referer">
<img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></td>
<td width="33"><img src="images/br.png" alt="bottom right corner" width="33" height="40" /></td>
</tr>
</table>
</div></div>

</body>
</html>

effpeetee
Aug 19th, 2009, 08:57 AM
Gentle bounce. I am slowly going bonkers.

Frank

_Aerospace_Eng_
Aug 19th, 2009, 09:23 AM
Well your faux1.gif is way too large for your #wrapper div. Its 1016px wide but your wrapper div is only 780px wide. You have a base href in there that isn't even your site so that was causing the image to not even show up. You can't have 100% height of nothing so you need to set 100% height on the html element as well. I suggest moving the background image to wrapper and make the width wider. Here is your revised code with the suggestions I just made.

<!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=UTF-8" />
<title>Devious Design</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background:#FFF;
height:100%;
background-position: center;
}
#wrapper {
width: 1016px;
min-height: 100%;
margin:0 auto;
border:2px solid red;
background-image: url(faux1.gif);
background-repeat: repeat-y;
}
* html #wrapper {
height:100%;
}
#sidebar {
width: 30%;
float: right;
color: white;
padding: 5px;
}
.sidebar_text {
font-size: 12px;
color:#000;
}
.footer_text {
font-size: 10px;
color: #FFF;
}
#footer {
margin-left: auto;
margin-right: auto;
width: 780px;
margin-bottom: 0px;
}
.text_spacing {
margin-left: 35px;
margin-right: 269px;
}
.central {
margin:0 auto;
text-align: center;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
position: relative;
float: left;
width: 130px;
}
li ul {
position: absolute;
top: 30px;
display: none;
}
ul li a {
display: block;
text-decoration: none;
text-align: center;
line-height: 20px;
color: #fff;
padding: 5px;
background: #000;
margin: 0px;
}
ul li a:hover {
background: #363636;
}
li:hover ul, li.over ul {
display: block;
}
</style>
</head>
<body>
<div id="wrapper" class="central"> <img src="images/banner.png" alt="devious design banner" width="780" height="160" />
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="entertainment.html">Entertainment</a>
<ul>
<li><a href="forum.html">Forum</a></li>
<li><a href="games.html">Games</a></li>
<li><a href="music.html">Music</a></li>
</ul>
</li>
<li><a href="graphics.html">Graphics</a>
<ul>
<li><a href="banners.html">Banners</a></li>
<li><a href="logos.html">Logos</a></li>
<li><a href="displays.html">Displays</a></li>
<li><a href="airbrushing.html">Airbrushing</a></li>
</ul>
</li>
<li><a href="photography.html">Photography</a>
<ul>
<li><a href="friends.html">Friends</a></li>
<li><a href="funpics.html">Fun Pictures</a></li>
<li><a href="scenery.html">Scenery</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a> </li>
</ul>
<div id="sidebar">
<div class="sidebar_text">
<h2> Updates </h2>
<hr />
<h3> Css 2.1 </h3>
<i> Thursday 11th June 2009 </i>
<p>The index page is now compliant with W3c css level 2.1 standards. The Css3 code for rounded edges had to be removed and re added via another method due to W3c being slow on making standards for Css3. </p>
<hr />
<h3> Xhtml 1.0 </h3>
<i> Wednesday 10th June 2009</i>
<p> The index page is now compliant with W3c xhtml transitional 1.0 standards and this will be carried on throughout the site when the template has been finalized.</p>
<hr />
<h3> Site Construction 2 </h3>
<i> Tuesday 9th June 2009 </i>
<p> Pages for all sections have been added with some content so it doesn't look so bare. Aswell as this a music player has been created however no music has yet been added due to the fact that i have no direct access to music currently....</p>
<hr />
<h3> Site Construction </h3>
<i> Monday 8th June 2009 </i>
<p> Template is currently being coded in css and html. Template will be finished in the following days/weeks after all coding has been completed and the full site will be up and running shortly after. </p>
</div>
</div>
<div class="text_spacing">
<div class="central"> <br />
<br />
<h2>Welcome to Devious Design </h2>
</div>
<p> Devious Design is a website dedicated to promoting the creative graphical designs and illustrations of Alex Rogers to the public.
Showing complex designs via a range of applications and coding languages which include the following: Photoshop, Illustrator, Xhtml, Css. </p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p> one </p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p> two </p>
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
<div id="footer">
<div class="footer_text">
<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="35" scope="row"><img src="images/bl.png" alt="bottom left corner" width="35" height="40" /></th>
<th width="249" bgcolor="#000000" scope="row">Devious Design&copy; 2009. All rights reserved.</th>
<td width="277" bgcolor="#000000">&nbsp;</td>
<td width="93" bgcolor="#000000"><a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" /></a></td>
<td width="93" bgcolor="#000000"><a href="http://validator.w3.org/check?uri=referer"> <img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></td>
<td width="33"><img src="images/br.png" alt="bottom right corner" width="33" height="40" /></td>
</tr>
</table>
</div>
</div>
</body>
</html>

As you can see its not perfect but it will get you going in the right track. FYI this has NOTHING to do with z-indexing.

effpeetee
Aug 19th, 2009, 09:30 AM
Thanks Aero.

The base address has had me in trouble before. I really must get used to removing it.
I just used this page to experiment with. Thanks for your detailed explanation. This is my first attempt with faux columns. I have always used javascript.


Frank