HTML - Z-index Giving Me A Headache
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; } Similar TutorialsI have a problem with the space between the navigation bar's buttons and the image above them. More exactly, I didn't write my buttons like that: HTML Code: <img src="..." /><img src="..." /><img src="..." /> But like that: HTML Code: <img src="..." /> <img src="..." /> <img src="..." /> So the images got spaces between them. To get rid of the spaces, I used a CSS like this: Code: img { margin: -2px; } It looks perfect in both Chrome and Safari, but in Firefox and Opera, there is the small gap that I talked about (a 1px distance between the navigation bar and the image above it). Click here to go to the HTML page. Click here to go to the CSS stylesheet. (I also use this one for CSS reset and this one for styling the embedded Tumblr blog.) And if you want to see the exact problem... This is how it looks in Chrome: And this is how it looks in Firefox (1px space just above buttons, and also 1px between the buttons "Mediere" and "Activitate"): Thank you very much, and have a great day! Hello All! I don't have access to any kind of server side scripting. The file I am making has to be able to run on a desktop other than the scripting for the search functions. I have a few sites that I am incorporating their search function into the HTML doc. It's a time saver but I am only having 1 hiccup. The design. I was not aware on how to incorporate into a radio button and/or drop down to search each site separately. Some of them require hidden fields that make this a challenge anyhow. I'm not sure how to design the page in order to make this work fluently. I currently have a top frame with the navigation bar and the bottom frame as the main window. When a user clicks the link, it will load another top frame doc with the nav bar and a search window for that site clicked on. So when the user types in the information, it submits it to the site and shows the results on the main frame. If they click another link, it displays a search box for that site, and same thing. However, I was wondering if there was a cleaner way of doing this? I am really interested in keeping a navigation bar but it looks cluttered with a search bar. I'm having to create a separate page for each search bar and add the navigation bar to each one. Then if something changes with the nav bar, I have to go back and fix each page. I'd really be happy to only need one nav bar. My goal would be to figure a way to keep a navigation bar, clean up the page, and keep each search function handy. I could create a 3rd frame but I think it would feel more cluttered. Here is the menu bar. Of course, this is just an example. "Form" is name of top frame. Code: <ul class="menu"> <li><a href="choose.htm" class="active"><Span>Home</span></a></li> <li><a href="Tool.htm" target="form" onClick="top.body.location='www.example.com/sitewheresearchislocated';"><Span> etc.... </ul> And here is the frame page. Code: <frameset rows="80, 1*"> <frame frameborder=0 scrolling="no" noresize="noresize" src="choose.htm" name="form" framespacing="0" border="0"> <frame frameborder=0 noresize="noresize" src="main.htm" name="body" framespacing="0" border="0"> </frameset> I finally figured out how to add text to my index and now I have another question. In my website template There is Heading 1 and a Heading 2 so my question is how do I delete any sections or headings that I don't need to make it go away on my home page. There is so much and I don't think I need all of it..... Thanks in advance Hi all, I am creating a web site which sell damaged cars. And I am trying to implement the feature of making small pictures large. Well, the way i wamt it to work is that 6 small pictures of the car at different angles will be displayed in a pop-up window. I have achieved this part of the project but i am havin issues with allowing the user to place the mouse over the small picutue and in a different area in the text box a bigger picture of the small picture appears. Here is the code i have for the pop-up see www.hitcars.com and click on the INVENTORY LINk found on the right hand top corner and then click on one of the cars to view a larger picture I would like to know how i can accomplsh this effect Hi, I'm designing a web page that contains two frames. One of these frames contains some text and when I click this text, I want it to open a new web page in each frame. As far as I can tell, this means giving two links with two different targets to the same text and I've tried wrapping the text with two <a> tags, but to no avail. My current pages look something like this: Quote: This is the HTML code for my frames page: <html> <frameset cols="42%,*"> <frame name="table" src="table.html"> <frame name="image" src="image.html"> </frameset> </html> Quote: This is the relevant code in table.html, the page that contains the text which has to open a link in each frame: <a target="table" href="1.html"><a target="image" href="Images/project_Page_01.jpg">This is supposed to open both links</a></a> I've tried with having only one or both closing </a> tags and neither of them work. What happens is only the first link, 1.html, opens in the "table" frame. The second link is completely ignored. I might be doing this completely wrong but I'd appreciate any help or pointers as to what I should do to fix this. Thanks! Suppose a user types the url of a website in their browser, so that the script http://url/index.htm is displayed in the browser. In other words, the user is not opening the page via a link or whatever, they are just typing in your url. In that situation, what (if anything) can you put in that script itself that gives the user's browser window a name that can be referred to later. The reasons why I want to do this are complicated, but in a nutshell this first window will become the parent window of other windows that open up later via links within the page, and script within those windows will have to refer to it by a name. Alternatively, is there some standard name that your browser window automatically recieves when you open up a website, like "parent" or something, that allows you to refer to it? Here is link, Need help in form submit, need script in sever for submit, when i press submit, it gives me Error messege. After doing this: Paste this at the beginning of your form and change the info to match your website <form method=POST action="http://www.yourwebsite.com/cgi-bin/formmail.pl" target="_top"> <INPUT TYPE="HIDDEN" NAME="recipient" VALUE="contactatyourwebsite.com"> <INPUT TYPE="HIDDEN" NAME="subject" VALUE="WebSite Contact"> <INPUT TYPE="HIDDEN" NAME="redirect" VALUE="http://www.yourwebsite.com/thanks.htm"> <INPUT TYPE="HIDDEN" NAME="required" VALUE="email,your_name"> <input type=hidden name="sort" value="through,your_name,phone,company_name,email,comments"> You will have to create a folder called "cgi-bin" on your server on the main level. Then start a new file, call it formmail.pl and paste in the code found he http://www.scriptarchive.com/downloa...=FormMail%2Epl You'll see this about 30 lines down: @referers = ('scriptarchive.com','209.196.21.3'); Change it to say @referers = ('yourwebsite.com','www.yourwebsite.com'); Then upload that file into the cgi bin and change the permissions to 755. You'll have to create an email with your host that matches this line: VALUE="contactatyourwebsite.com". Most good hosts will let you set up an email redirect, meaning you can have all emails that are sent to that address automatically resent to your regular email. http://www.supremelegal.com/Assessment.html giving me error messege. 1- First i made folder " cgi-bin " on main level like other folders...www./ public.html..etc ..etc It was giving me error messege. http://www.supremelegal.com/cgi-bin/formmail.pl Not Found The requested URL /cgi-bin/formmail.pl was not found on this server. Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request. Apache/1.3.37 Server at www.supremelegal.com Port 80 ------------------------------------------------- 2- Now i put folder" cgi-bin" in the www folder, now again giving me error messege. look at he http://www.supremelegal.com/cgi-bin/formmail.pl Internal Server Error The server encountered an internal error or misconfiguration and was unable to complete your request. Please contact the server administrator, webmasteratsupremelegal.com and inform them of the time the error occurred, and anything you might have done that may have caused the error. More information about this error may be available in the server error log. Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request. Apache/1.3.37 Server at www.supremelegal.com Port 80 Please le me know, How to fix this .... I will appreciate your cooperation. Thank you in advance....I am newbee..!!!!lol Hi All, I am new to the board and new to HTML. I was hoping someone could help me out with this problem I am having. If you click the link below and click "like" (you can unlike right after, I just would like to show you something on the page) and scroll down to What's on the menu. Could you please help me with how to create something like this. What I mean by this is notice how when you click on one of the red dots it brings you to a different recipe on the page. Any help would be amazing and greatly appreciated. Please let me know if i need to specify more. Thanks so much! http://www.facebook.com/saraleedeli?...81140685241673 For complicated reasons having to do with getting some Javascript to submit a form properly, which I won't get into here, I need to create a "do nothing" input button, whose mere presence lets the Javascript function work. Since this button does not do anything when you press it, I want it to be invisible. In IE I can get it to be invisible just by setting its width to zero using the line below. However, Firefox insists on giving it some finite width, even if there is no label on it (see below). How do I create a zero width button in Firefox - and is there any other way to hide input buttons? <input type="submit" name="control" value=" " style="width: 0px" title="No function" /> Hi all, Could someone please take a look at this website: http://www.jameslusbymusic.com/ and tell me how to sort out the main content of the home page? The problem is that the <div id="right"> "News" content is before the <div id="left"> in the html file so it is pushing the left bit down lower than the news bit if that makes sense. This only seems to happen on some browsers and doesn't affect my Firefox. The problem is, no matter what I do to it I can't get it all to line up properly if I move it! Before I can tidy up the rest of the page I really need to get this sorted. So any help greatly appreciated. Many thanks. Hi, I have got an input form to upload files; the form also accepts some other user input. The upload works fine, but I need to display some filenames by default, but this does not work. I tried using: <input type="file" name="images[]" value="<?php echo $default_filename; ?>"... This did not work, so I tried: <input type="file" name="images[]" value="Testfile.jpg"..., but this does not work too. All this is in a <form action="<?php echo $_PHP_SELF; ?>" method="post" enctype="multipart/form-data">. It seems to me that in an input field of type "file", default values are not accepted, though they should be according to the documentation. Any help will be greatly appreciated as I need this feature. Thanks I've got a drop down menu (#howto) that works fine in every browser but IE7. The issue: when activated, the menu options appear behind the divs below (#wrapper and #branding). I've tried several z-index combinations, but haven't hit upon one that works. With 13% of my user base still on IE7, I'm stressing out! URL: http://wdm.ca/index_new_dwt.htm HTML Code: <!--Start How To Menu--> <div id="howto" style="top: 3em; right: 0em;"> <img alt="" src="imagesindex/down-triangle.gif" style="float:right; margin-top:0.3em; margin-left: 0px; margin-right: 1em;" height="10"/> How to...<br /> <hr width="80%" style="text-align: left;" /> <!-- Start How To drop-down menu --> <a href="membership/index_new.htm">become a member</a> ... <a href="contact_new.htm">contact a <abbr title="Western Development Museum">WDM</abbr></a> <!-- End About drop-down menu --> </div> <!--End How To Menu--> CSS Code: body{ background-image:url('imagesindex/background_attempt_fade.jpg');background-position:left;background-repeat:repeat; font-family: Arial, Helvetica, sans-serif; } /* START topper */ #topper{ height:4.5em; width:50em; margin: 20px auto 0 auto; position:relative; z-index:100; } #topper a.contact{ position:absolute; ... display:block; z-index:100; } /* START howto Menu */ #howto{ width:15em; background-color:#FFF; padding-left:2%; float:right; border:thin gray groove; position:absolute; line-height:1.4em; height:1.4em; overflow:hidden; z-index:100; } #howto:hover { height:auto; cursor:pointer; } #howto a { display:block; width:100%; line-height:1.4em; color:#000; text-decoration:none; } #howto a:visited { display:block; width:100%; line-height:1.4em; color:#000; text-decoration:none; } #howto a:hover { color:#000; background:#ddd; } /* END howto Menu */ /* END topper */ #wrapper{ width: 50em; background-color:white; margin: 5px auto 0 auto; border-color:#98B539; border-style:ridge; border-width:thin; z-index:0; } /* Make branding a positioned element, but don't move it */ #branding{ position:relative; border-bottom:thin #98B539 solid; z-index:0; } Here's my problem: I'm a subsciber with GeoCities/Yahoo, and had my html files stored. When I try upload my stuff to a certain forum I get a "File Not Found" msg. By looking around I learned that the problem might be the "index.htm" file, which needs to for each subdirectory separately. An example of such a file: http://www.geocities.com/d48uga/dice_tutorial09.html Could u help? Tnx so i want to have my navigation hover over my content, so when i scroll through my content it flows underneath the navigation.. i am putting the navigation div at z-index:3 and the content at z-index:1 but it wont slide beneath.. help pls here's my site: all css is done on the page so u can see it. http://levisternberg.com/joomla16/ 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! Hi there, I was reviewing the web site of the organization I work for and I noticed that some of the html code is included in the following tags: <!--BeginNoIndex--> and <!--EndNoIndex--> Between these tags there's the page title and the site's navigation included. I have been searching on this subject but I can't seem to find the right answers. I would say you would want your page title and navigation to be indexed by search engines. Or in what cases you wouldn't want it to be indexed? The web site is public and serves mainly an informative purpose. I would be happy with anything that could help me, also resources where I can read about it for example. Kind regards! 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! 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 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? |