|
HTML - Overlap
hi,
i put a drop down menu on the top of my website. After that is a flash banner, but the banner is overlap my drop down menu so it can't be seen by user. how to solve this? Similar TutorialsCode: <html>
<head>
<style type="text/css">
.maintable
{
position:fixed;
top:20px;
}
body { height: 1000px; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<table class="maintable">
<tr>
<td>00001</td>
<td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td><td>00001</td>
</tr>
</table>
<table>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
</table>
</body>
</html>
If I do that this is heading , and maintable overlap in firefox.but in ie they come below each other??? why? I would like it to overlap in ie as well. If I SCROLL in firefox, the maintable overlaps with the other table as well when table 2 becomes at position 20 px on scroll. In ie's case, on scroll the maintable disappears and doesnt stay fixed in position 20 px. help? Hi Buddies, I have created web travel based site, in my site, div border overlap in banner. http://webtravel.freehostia.com/ and also some times the menu mouse over images appears slowly. Please advise me. Cheers, Vijayakumar B Web Developer Hi, I know this is being an extreme perfectionist. But, if you look at http://www.tendervendors.com/dev/hr_systems.html, at the selected link on the navigation bar (HR Systems), you'll see that there are 2 lines either side of the HR Systems (selected) link. This is fine, however because the bottom border is on the other links and not the selected one, and the two side borders are on the selected link, the don't line up. I'm aware that i could specify the right border on the 1st link and the left border on the 3rd link, but i was trying to make it simple, so someone without alot of understanding and program it after i've done. So, i then thought, well i could overlap the links, 2px to the left, so set li { position:relative }, and then li {left:-2px}. but it doesn't overlap the li's, it overlaps the entire ul over the page (content div) border. Any ideas as to why this is? Thanks, Matthew Millar Hi I've been having a lot of problems with images and bullet points overlapping, what I mean by that is I'll align an image to left allignment, it goes to the left of the text but the bullet points are superimposed over the top also the picture is being included in the list instead of to the left of the list as i want. here's a screenshot and the code of the page in question and the stylesheet, Thanks very much, I'm going mad trying to work it out: screenshot: page code: 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"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.:Max Barr Antique Furniture Restoration:.</title>
<style type="text/css" media="all">
<!--
@import url("styles.css");
#header #logo a {
font-family: Times New Roman, Times, serif;
}
#index #outerWrapper #gradient #contentWrapper br {
color: #FFF;
}
#index #outerWrapper #gradient div {
color: #FFF;
}
-->
</style>
<!-- InstanceBeginEditable name="gallery info" -->
<!-- <LINK HREF="styles/default.css" rel=stylesheet> -->
<LINK HREF="../res/styles.css" rel=stylesheet>
<style type="text/css">
<!--
.highslide {
cursor: url(../res/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide img {
border: 2px solid #999999;
}
.highslide:hover img {
border: 2px solid #ffffff;
}
.highslide-overlay {
display: none;
}
.highslide-image {
border: solid #ffffff;
}
.highslide-caption {
display: none;
color: #000000;
border: 0px solid #ffffff;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: #ffffff;
}
.highslide-caption a {color: #2E8B57;}
.highslide-loading, a.highslide-loading:link {
display: block;
color: #ffffff;
background-color: #000000;
font-size: 9pt;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
padding-left: 22px;
background-image: url(../res/graphics/loader.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
}
a.highslide-credits, a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}
.highslide-move {
cursor: move;
}
/* Controlbar */
.controlbar {
background: url(../res/graphics/controlbar4.gif);
width: 167px;
height: 34px;
}
.controlbar a {
display: block;
float: left;
/*margin: 0px 0 0 4px;*/
height: 27px;
}
.controlbar a:hover {
background-image: url(../res/graphics/controlbar4-hover.gif);
}
.controlbar .previous {
width: 50px;
}
.controlbar .next {
width: 40px;
background-position: -50px 0;
}
.controlbar .highslide-move {
width: 40px;
background-position: -90px 0;
}
.controlbar .close {
width: 36px;
background-position: -130px 0;
}
.highslide-dimming {
background: #000000;
position: absolute;
visibility: hidden;
}
a.highslide-full-expand {
background: url(../res/graphics/fullexpand.gif) no-repeat;
display: block;
margin: 10px 10px 10px 10px;
width: 34px;
height: 34px;
}
.highslide-active-anchor img {
visibility: hidden
}
.highslide-html {
background-color: white;
}
.highslide-html-blur {
}
.highslide-html-content {
position: absolute;
display: none;
}
/* Necessary for functionality */
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
-->
</style>
<link rel="alternate" href="album.rss" type="application/rss+xml">
<style type="text/css">
<!--
.highslide { cursor: url(../res/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide-caption { display: none;
color: #000000;
border: 0px solid #ffffff;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: #ffffff;
}
#index #outerWrapper #gradient #contentWrapper #content p {
font-size: 10px;
}
#index #outerWrapper #gradient #contentWrapper #content p {
font-size: 12px;
}
#index #outerWrapper #gradient #contentWrapper #content {
font-size: small;
}
-->
</style>
<!-- InstanceEndEditable -->
<!--[if IE 5]>
<style type="text/css">
#outerWrapper #contentWrapper #leftColumn1 {
width: 200px;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
#outerWrapper #contentWrapper #content {
zoom: 1;
}
</style>
<![endif]-->
</head>
<body id="index">
<div id="header">
<div id="logo">
<a href="index.html" onmouseover=""> Max Barr Antique Restoration</a></div>
</div>
<div id="outerWrapper">
<div id="gradient">
<div id="nav" style="margin-bottom: 10px;">
<div align="center">
<ul>
<li><a href="http://www.maxbarr.com/index.html">Home</a></li>
<li><a href="http://www.maxbarr.com/profile.html">Profile</a></li>
<li><a href="http://www.maxbarr.com/restoration.html">Restoration</a></li>
<li><a href="http://www.maxbarr.com//gallery/index.html">Gallery</a></li>
<li><a href="http://www.maxbarr.com/contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="contentWrapper">
<div align="center"></div>
<div id="content"> <!-- InstanceBeginEditable name="Content" -->
<p align="center"><img src="P6030553.gif" width="75" height="54" /><img src="img064.gif" width="82" height="54" /><img src="P5300085.gif" width="71" height="54" /><img src="PB040728.gif" width="83" height="53" /><img src="images/P9150206.gif" width="65" height="54" /><img src="images/PB110751.gif" width="79" height="55" /><img src="images/img069.gif" width="84" height="56" /><img src="images/P8310186.gif" width="78" height="56" /></p>
<p>Welcome to my website. I have been making furniture and restoring antiques here in Gloucestershire for 18 years. I have a large, well equipped workshop and carry out work for both private clients and the quality antiques trade. Examples of my restoration work have been shown at many national and international antiques fairs including London Olympia, Maastricht Tefaf and Chicago Artropolis. <img src="images/WmIVthreePillar55__x135__4.gif" width="348" height="181" align="middle" /><br />
<br />
High standards of work and customer satisfaction are my top priorities. If you would like to discuss any project, large or small, please give me a call for friendly expert advice.</p>
<p>Services include:</p>
<ul>
<li><img src="images/img071.gif" width="113" height="169" align="left" />High quality restoration and repair to all kinds of furniture.
</li>
Replacement or repair of damaged or missing woodwork from chips of veneer to entire legs or table leaves using appropriate materials and techniques. <img src="images/P9010139.gif" width="157" height="118" align="right" /></li>
<li>Restoration of existing finishes, reviving, colour matching, disguising of repairs</li>
<li>Traditional French polishing, wax polishing and oil finishes</li>
<li>Repairs to locks, castors, handles and other metalwork
</li>
Supply and fitting of leather or baize desk-top liners.</li>
<li>Upholstery, cane and rush-work seating.
</ul>
</p>
</li>
</ul>
<p> </p>
<h1 align="justify"><img src="images/P3080182.gif" width="147" height="110" align="bottom" /></h1>
<p> </p>
<div id="controlbar" class="highslide-overlay controlbar">
<a href="#" class="previous" onClick="return hs.previous(this)" title="Previous (left arrow key)"></a>
<a href="#" class="next" onClick="return hs.next(this)" title="Next (right arrow key)"></a>
<a href="#" class="highslide-move" onClick="return false" title="Click and drag to move"></a>
<a href="#" class="close" onClick="return hs.close(this)" title="Close"></a>
</div>
<!-- Bottom navigation -->
<div id="jalbumwidgetcontainer"></div>
<script type="text/javascript" charset="utf-8"><!--//--><![CDATA[//><!--
_jaSkin = "Boxer";
_jaStyle = "2 Purple Pavement.css";
_jaVersion = "8.1.6";
_jaLanguage = "en";
_jaPageType = "index";
_jaRootPath = "..";
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://jalbum.net/widgetapi/load.js";
document.getElementById("jalbumwidgetcontainer").appendChild(script);
//--><!]]></script>
<!-- InstanceEndEditable --></div>
</div>
<div id="credit" align="center">Copyright © 2009 Max Barr
<br />
</div>
</div>
</div>
</body>
<!-- InstanceEnd --></html>
|
|||||||