HTML - Z-index Help

hey wondered if anyone could explain how on my website I can get the "index of" to show?

eg

http://rofl.wheresthebeef.co.uk/


cheers!

Do possible somehow open folder/archive were is a index.html. I wan't to run auto index.html or any default .html .php... I want open folder and browse from files. ???

Okay so recently I updated my website so the URL for my home page is now: http://www.benellett.com/index.php However I would either like to somehow make that page show up as just the base website: http://www.benellett.com/ or have the benellett.com page forward to the /index.php page. Preferably I want benellett.com/index.php to be the "home" page like it would be if it were index.html (like my old website in the link). Thanks a lot!

I'm having some problems with a drop down menu appearing 'behind' the content below it even though it is absolutely positioned and has a higher z-index. You can see an example here of what I am talking about. If you look at it in Firefox vs IE7 you will see what I am talking about.

Currently the 'body' of my page is broken into 2 columns ('col_left', 'col_right'). Each are floated in their respective direction and each has a relative position. Each also contains a single (for the moment) 'pagelet' div. Eventually this will be a drag & drop app for users to add/edit/remove these various 'pagelets' and position them to their liking on the page. I found that by removing the relative position style from the 'col_left' and 'col_right' elements as well as from the 'pagelet_head' element will make my drop down menu's appear the way they should. Unfortunately all those elements have to have the style of relative position.

If anyone has any suggestions I'd love to hear them as I'm a bit perplexed by all this considering the drop downs have a much higher z-index than anything else. All my code is below. Thanks for any help!

Code:

* { margin: 0; padding: 0; border: none; }
body { padding: 15px 20px 0; color: #777; background: #e3e3e3 url(../images/bg_header.gif) repeat-x 0 0; font: 12px "Tahoma", Verdana, Arial, Helvetica, sans-serif; }
ul { list-style: none; }
input, textarea, select { padding: 5px; background: #fff url(../images/bg_form.gif) repeat-x top left; border: 1px solid #777; font: 12px "Tahoma", Verdana, Arial, Helvetica, sans-serif; }
input.check { padding: 0; background: none; border: none; }
table { border-collapse: collapse; border-spacing: 0; }
a:hover { text-decoration: none; }
:focus { outline: none; }

#head { margin: 0 auto 15px; width: 950px; height: 55px; }
#head img { display: block; float: left; }
#head p { float: right; color: #999; font: 11px Verdana, Arial, Helvetica, sans-serif; }
#head a { color: #666; }
#head span { margin: 0 5px; }

#nav { margin: 0 auto; width: 950px; }
#nav li { margin-right: 5px; height: 30px; display: inline; float: left; position: relative; background: url(../images/nav_bg_left.gif) no-repeat 0 0; }
#nav li span { padding: 5px 13px 0; height: 25px; display: block; background: url(../images/nav_bg_right.gif) no-repeat 100% 0; }
#nav li a { color: #666; font-size: 14px; text-decoration: none; }
#nav li a:hover { text-decoration: underline; }
#nav li a.drop_down { margin-left: 5px; }
#nav li.active, #nav li.temp { background-position: 0 -30px; }
#nav li.active span, #nav li.temp span { background-position: 100% -30px; }
#nav li.active ul, #nav li.temp ul { background: #e3e3e3; }
#nav ul { padding: 12px 12px 2px; width: 150px; position: absolute; top: 30px; left: 0; z-index: 2000; background: #ccc; border: 1px solid #666; border-width: 0 1px 1px; }
#nav ul li { margin: 0 0 10px; padding-left: 14px; height: auto; display: block; float: none; background: url(../images/icon_arrow.gif) no-repeat 0 4px; }
#nav ul li a { font-size: 12px; text-decoration: underline; }
#nav ul li a:hover { text-decoration: none; }

#col_wrap { margin: 0 auto; padding: 20px; width: 950px; }
	#col_left { width: 460px; display: inline; float: left; position: relative; }
	#col_right { width: 460px; display: inline; float: right; position: relative; }
	
	.pagelet { margin-bottom: 10px; width: 460px; display: block; }
		.pagelet_head { padding: 8px 13px 0; width: 434px; height: 22px; position: relative; background: url(../images/bg_pagelet_header.gif) no-repeat 0 0; }
		.pagelet_head h1 { display: inline; float: left; color: #fff; font-size: 12px; }
		.pagelet_head_options { display: inline; float: right; }
		.pagelet_head_options ul { text-align: right; }
		.pagelet_head_options li { margin-left: 10px; display: inline; float: left; }
		.pagelet_head_options li a:hover { background-position: 0 -12px; }
		.pagelet_head_options a.pagelet_drop_down { width: 13px; height: 12px; display: block; background: url(../images/btn_pagelet_drop_down.gif) no-repeat 0 0; }


		.pagelet_head_options a.pagelet_minimize { width: 13px; height: 12px; display: block; background: url(../images/btn_pagelet_minimize.gif) no-repeat 0 0; }
		.pagelet_head_options a.pagelet_close { width: 13px; height: 12px; display: block; background: url(../images/btn_pagelet_close.gif) no-repeat 0 0; }
			.head_red { background-position: 0 0; }
			.head_orange { background-position: 0 -30px; }
			.head_yellow { background-position: 0 -60px; }
			.head_light_green { background-position: 0 -90px; }
			.head_dark_green { background-position: 0 -120px; }
			.head_blue { background-position: 0 -150px; }
			.head_grey { background-position: 0 -180px; }

		.pagelet_content { width: 458px; height: 200px; background: #fff; border: 1px solid #cdcdcd; border-width: 0 1px 1px; }
		.pagelet_shadow { display: block; }

.clear:after { height: 0; display: block; clear: both; visibility: hidden; content: "."; }

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=UTF-8" />
<title>test</title>
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css" />
<script type="text/javascript" language="javascript" src="js/mootools_1.11.js"></script>
<script type="text/javascript" language="javascript" src="js/functions.js"></script>
</head>
<body>
<div id="head" class="clear">
	<img src="images/placeholder_logo.gif" alt="Logo" width="447" height="55" />
	<p><a href="#" title="Administration">Administration</a><span>|</span><a href="#" title="Settings">Settings</a><span>|</span><a href="#" title="Logout">Logout</a></p>
</div>
<ul id="nav" class="clear">
	<li class="active">
		<span><a href="#">Link</a></span>
	</li>
	<li>
		<span><a href="#">Link 2</a><a href="#" class="drop_down"><img src="images/btn_nav_drop_down.gif" alt="More Options" /></a></span>
		<ul>
			<li><a href="#">Sub Link</a></li>
			<li><a href="#">Sub Link</a></li>
			<li><a href="#">Sub Link</a></li>
			<li><a href="#">Sub Link</a></li>
		</ul>
	</li>
	<li>
		<span><a href="#">Link 3</a><a href="#" class="drop_down"><img src="images/btn_nav_drop_down.gif" alt="More Options" /></a></span>
		<ul>
			<li><a href="#">Sub Link</a></li>
			<li><a href="#">Sub Link</a></li>
			<li><a href="#">Sub Link</a></li>
			<li><a href="#">Sub Link</a></li>
		</ul>
	</li>
	<li>
		<span><a href="#">Link 4</a></span>
	</li>
	<li>
		<span><a href="#">Link 5</a></span>
	</li>
</ul>
<div id="col_wrap" class="clear">
	<div id="col_left">
		<div class="pagelet">
			<div class="pagelet_head head_red clear">
				<h1>Pagelet Title</h1>
				<div class="pagelet_head_options">
					<ul class="clear">
						<li><a href="#" title="Display Options" class="pagelet_drop_down"></a></li>
						<li><a href="#" title="Minimize Pagelet" class="pagelet_minimize"></a></li>
						<li><a href="#" title="Close Pagelet" class="pagelet_close"></a></li>
					</ul>
				</div>
			</div>
			<div class="pagelet_content"></div>
			<img src="images/shadow_pagelet_bottom.gif" alt="Shadow" width="460" height="10" class="pagelet_shadow" />
		</div>
	</div>
	<div id="col_right">
		<div class="pagelet">
			<div class="pagelet_head head_red clear">
				<h1>Pagelet Title</h1>
				<div class="pagelet_head_options">
					<ul class="clear">
						<li><a href="#" title="Display Options" class="pagelet_drop_down"></a></li>
						<li><a href="#" title="Minimize Pagelet" class="pagelet_minimize"></a></li>
						<li><a href="#" title="Close Pagelet" class="pagelet_close"></a></li>
					</ul>
				</div>
			</div>
			<div class="pagelet_content"></div>
			<img src="images/shadow_pagelet_bottom.gif" alt="Shadow" width="460" height="10" class="pagelet_shadow" />
		</div>
	</div>
</div>
</body>
</html>

Hey everyone. Wanted your opinions and knowledge on something. I have a friend who is setting up a splash page for her site. However the way her hosting company has things set up she will need to rename her current home page from index.html to something else, and make the splash page the new index.html.

She's under the impression that if her current home page is renamed to something other than index it will lose significant value in her website's ranking. I've never heard of that. Her meta tags will be kept intact, and the splash page will have meta tags, and will link to both the home page and sitemap so I don't think search engines will have any problem spidering her site. And I don't really think it will affect her ranking.

What do you all think? Am I wrong?

Does anyone know how to use z-index?

I would like to know where to use it!
Is it in the css file or in the html page?

If anyone as any examples that would be great.

Thank you

I have my main website called index.html, but since i've added php into the code, i've renamed it to index.php. But I also have a forum, which includes another index.php.

I'm wanting to have my index.php page to be the page that people see when they come to my website.

Is there anyway that it could happen?

I use a program (Guardian) to send me notifications when an error occurs on my site (404, 403 etc.) These notices contain the URL causing the error and the referring URL. Lately I have been getting numerous notifications with URLs to directories without index files (On a side note, these URLs also contain within them, urls to other sites. I assume this is some spammer technique and I am not too concerned about this in this post but if someone can shed some light on how/why they (the spammers) do this I would appreciate it.)

My purpose in posting here is to find out about the use of index files in directories. I have read that this is a good idea, but I have yet to hear why except that in case someone navigates to the URL of the directory rather than the actual page URL, then they will not get a 403 error message, but this seems like a rather weak reason to me. Is there another reason? SEO reason? Technical reason?

If I find good reason to do this, is it enough to just put a blank index file in each directory? If so why? What purpose does it serve (aside from thwarting the spammers doing what I described above.) Thanks in advance for your help.

When I share my index.html via facebook, I have some stuff into boxes like a descriptions of something, where I can change description? If any1 understand me?
I want to edit and add my text by default...
Sorry for maybe bad english ;/

Hello, I am new here.
I am using a blogging system that limited size for index.html, and it does not support php, and my Index size remaining is going to be finished and then, I can not do any changes in my Index.html .
I am using about 110 subjects in my subjects menu, and it engross about 1 of 4 pieces of the index size.
I made a new page and I putted all of subjects codes and it has no problem when I entered them and then, I used iFrame code in my menu bar in index.html and I linked the iframe to the page that contains subs.
now, I when visit my blog, I see all of codes they are under iframe does not work anymore, but iframe works and it has no problem in size and code.
can you please help me? please remember my blogging system doesn't support php.
thanks a lot.

Hello forum,

I have a very simple question which I can't solve:

My html code looks something like this (in index.html with a directory of 'next/' which has the file index.html:

HTML Code:

<html><head /><body>

<a href="next/">Continue</a>

</body></html>

Then when the link is clicked, it gets a permission error (meaning the browser can't find anything in the directory).

Why is this? Shouldn't it automatically get into the index.html?

thanks in advance,
drmota

Hello all. I am currently putting together a flash intro for a friend of mine. He operates a World of Warcraft guild website through DKPSystem.com. While DKPsystem.com does normally use a subdomain for the registered guild, you can implement your own domain through the backend. He has done this.

So, here is my problem. What I want to do is create the flash intro and connect it up with a index.html file. Considering that DKPsystem.com uses a structure in which the user cannot upload files via FTP, I have no idea how to implement this flash intro.

Any ideas how this would be done?

Thanks in advance for all of your help.

I find that the use of z-index depands a lot on other functions you use/or not.

ANyways, it has failed me yet again, cant seem to figure out why..

the thing is ive re-written the page withou using the position: tag.. its awesome, just the z-index crap.

The picture which isnt complying is the wit-vak-pilates png :


HTML Code:

.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #000000;
}
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; }
.style6 {font-size: 14px}
.style8 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; }

a:link {color: #000000;}
a:visited{color:#009;}
a:hover {color: #000000;}

.ROOD {color:#F00} 
.style10 {color: #FFFFFF}

.style14 {font-family:"verdana"; font-size: 13px; color: #000000; text-align:center; }


#BOX{
width: 360px; height:302px;
background-color: #ffffff;
border: 2px double #333; 
padding: 15px;
font-family:'verdana'; 
font-size:14px;
z-index:2;
margin-left: auto;
margin-right: auto;
}

div.row {
  clear: both;
  padding-top: 5px;	
  }

div.row span.label {
  float: left;
  width: 100px;
  text-align: right;
  }

div.row span.formw {
  float: right;
  width: 235px;
  text-align: left;
  } 

div.spacer {
  clear: both;
  }
  
#wit-vak-pilates {
	margin-top:-186px;
    margin-right: auto;
	margin-left:auto;
	z-index:-1;
}
	

#CR {
	text-align:center;
	z-index:3;
	margin-top:149px;
	margin-left:5px;
}


#back{
	width:16px;
    height:16px;
    background-image:url(pics/back.png);
    background-repeat:no-repeat;
	z-index:2;
	margin-top:0px;
	margin-left:-32px;
}

#back:hover {
    background-position:0 -16px;
	z-index:2;
 }

Hi all

I have a download page on my site, but whilst my site is currently undergoing a facelift, I want to place all my downloads onto an index page that will simply show a list of all the downloadable files within a certain folder

I've seen it on a few sites before. It is just a simple list of all the files....click on one and it will download

Does anybody have any ideas on how I do this please?