|
CSS - Img Overlap Flash
Hello! I have a flash header and I'm wondering how to make an img (jpg/png) overlap a flash header? It seems that the flash keeps covering my img when i use positionsomething)
Thanks! Similar TutorialsPlease look at this page http://www.tmhdesign3.com and this one http://www.tmhdesign3.com/real-estate-broker.asp The first one used a flash file, the second does not. On the first page I want the dropdown navigation to overlay on the flash but it does not. I played with z-index to no success... I need this menu to be halfway on the content section, however it keeps getting pushed around. I can't figure out what to change for positioning to move it over! Help HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <link rel="stylesheet" type="text/css" href="layout.css"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <div id="wrapper"> <div id="main"> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <!--Close #nav--> </div> <!--Close #main--> <!--Close #wrapper--> </body> </html> CSS: Code:
@charset "utf-8";
/* CSS Document */
body {
background-color:#000;
font-family: arial, helvetica, sans-serif;
margin: 1em;
}
#wrapper {
}
#main {
background-color:#FFF;
width:80%;
}
<!--margin: 0em auto;-->
#nav {
float:left;
margin-left:-7em;
margin-top:0;
}
#nav ul {
list-style-type:none;
}
#nav a {
display: block;
color: green;
background-color: navy;
width: 5em;
padding: .2em .5em;
text-decoration: none;
font-size: 1.25em;
}
#nav a:hover {
background-color: blue;
color: dark green;
}
How do I get it to overlap and to get the text/images to wrap around the nav menu? Hi I have this page http://www.networkhealthgroup.co.uk/new/jobs.htm I have put borders around the columns, when viewed in IE you will see that the main content div overlaps the right column. You will also see that the right border is looks alot more than 140px wide in IE than it does in Firefox!!! Does anyone know what I am doing wrong here? Hello, I have 3 Divs as follow: <div id="Container"> <div id="Header">header</div> <div id="Text">text</div> </div> I need the following: 1. Both "Header" and "Text" div's top left corner to be align at top left of "Container" div 2. "Text" div should be over "Header" div hiding it. How can I do this? Thanks, Miguel Greets, I'm having trouble with the menu not being properly shown in IE. The list is supposed to pass over the central DIV, and... the bugger seems to want to stay in the background for some reason. I set that div's z-index well above the others, set the visibility to visible... I'm stumped. teh linkification Hello all - I will be so grateful if someone can help me. I'm not sure why, but my right column is overlapping my footer. I have been working too long and my brain is dead! I cannot figure it out for the life of me. Can someone please tell me what I did wrong? I am trying to have the header, 3 columns, left-fixed, right-fixed, center fluid. I want the footer to span all 3 along the bottom, which it is doing. But the right column is overlapping. Code:
#header {background: #ffffff; height: 120px; margin: 0; padding: 0}
#content {margin: 0}
#wrap {min-width:770px;margin: auto;position:relative}
#main #content-wrap {position:relative;width:100%}
#main #content {margin: 0 235px auto 175px}
#content-wrap {position:relative;width:100%}
#leftnav {position:absolute;top:0;left:0px;width:150px}
#sidebar {position:absolute;top:0;right:5px;width:200px;}
#footer {positon:relative; background-image: url(../imag
/bottom.jpg); background-repeat: repeat-x;}
With the structure as such: Code: <body id="main"> <div id="wrap"> <div id="header"> </div> <div id="content-wrap"> <div id="leftnav"> </div> <div id="content"> </div> <div id="sidebar"> </div> <div id="footer"> </div> </div> </div> </body> Hi, I would like to superimpose (overlap) one small image over the second larger one, to a left bottom corner of that larger. The thing is I do not know the width & height of larger image as it is loaded dinamicly with php. I tryied puting large image to table than position small image to div with style="position:relative; left:0px; bottom:0px; z-index:33;" not working, can you help? Thanks for taking the time to read my question. I have a horizontal UL for a nav bar. It works great, and positions well in IE, but in FF the ContentBox moves too far up, and overlaps with my nav bar. I can't figure out why. I added an extra div and placed the nav bar in that, but that didn't help either. What am I doing wrong. Also, I have my widths set to 100% IE has no horizontal scroll bar at the bottom, but FF does. Not sure what is going on here either. thanks again for your help. Brad HTML: Code: body {
background-color: #48494D;
padding: 0px;
margin: 0px;
}
#Head1 {
background-color: #000000;
width: 100%;
height: 100px;
padding-left: 20px;
}
#Head2 {
background-color: #ffffff;
width: 100%;
height: 45px;
border-bottom: solid #CCCC99 2px;
padding-left: 130px;
}
#MainNav {
width: 100%;
height: 20px;
background-color: transparent;
}
#navcontainer ul
{
padding-left: 25px;
margin-left: 0;
background-color: transparent;
color: #CCCC99;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
/*padding: 0.2em 1em 0em 0em;*/
background-color: transparent;
color: #CCCC99;
text-decoration: none;
text-align: center;
float: left;
border-right: 1px solid #CCCC99;
width: 134px;
font-size:12px;
border-bottom: 4px solid #48494D;
}
#navcontainer ul li a:hover
{
border-bottom: 4px solid #CCCC99;
text-align: center;
}
#navcontainer ul li.LastOne a {
border: 0 none;
}
#navcontainer ul li.LastOne a:hover{
border-bottom: 4px solid #CCCC99;
}
#ContentBox {
width: 800px;
height: 400px;
margin: 0px auto;
background-color: aqua;
display: block:
}
#CBHeader1 {
background-image:url(SecondHeaderImg.jpg);
height: 50px;
width: 800px;
}
CSS: Code: body {
background-color: #48494D;
padding: 0px;
margin: 0px;
}
#Head1 {
background-color: #000000;
width: 100%;
height: 100px;
padding-left: 20px;
}
#Head2 {
background-color: #ffffff;
width: 100%;
height: 45px;
border-bottom: solid #CCCC99 2px;
padding-left: 130px;
}
#MainNav {
width: 100%;
height: 20px;
background-color: transparent;
}
#navcontainer ul
{
padding-left: 25px;
margin-left: 0;
background-color: transparent;
color: #CCCC99;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
/*padding: 0.2em 1em 0em 0em;*/
background-color: transparent;
color: #CCCC99;
text-decoration: none;
text-align: center;
float: left;
border-right: 1px solid #CCCC99;
width: 134px;
font-size:12px;
border-bottom: 4px solid #48494D;
}
#navcontainer ul li a:hover
{
border-bottom: 4px solid #CCCC99;
text-align: center;
}
#navcontainer ul li.LastOne a {
border: 0 none;
}
#navcontainer ul li.LastOne a:hover{
border-bottom: 4px solid #CCCC99;
}
#ContentBox {
width: 800px;
height: 400px;
margin: 0px auto;
background-color: aqua;
display: block:
}
#CBHeader1 {
background-image:url(SecondHeaderImg.jpg);
height: 50px;
width: 800px;
}
I have decided that it would be easier to make 2 seperate div tags so I wouldn't have to deal with the issues on margin and padding that IE barf all over at. So, what I'm going to do is to make the 2nd <div> to overlap the 1st <div>. So, what the property or attribute that I can use to make it the overlapping work that work for most web browsers?? Thanks, FletchSOD I have a project that someone else coded in the first place and I am trying to make some fixes on it. I have tried a ton of things but do not know exactly what is wrong with the layout. If you visit musaferthefilm.com/test/index2.html you can see the layout and how the navigation spans past the rest of the container. I am not sure if this is very complex to fix but I have tried everything. I appreciate your help! Thank you. Hey guys, It might be easiest if you see the example first: http://www.venusadvertising.com.au/ourwork.php See how the red tab overlaps the Flash element in Webkit browsers and under it in IE? I need the page to scroll rather than for the elements to overlap. CSS doc is he http://www.venusadvertising.com.au/_assets/css_venus.css Thanks for your help! Ham Right now, I'm using CSS to have text overlap an image. I did this simply by having the placement code for the text appear after the placement code for the image in my .shtml file. Is this the correct way of doing this? Alright, I am developing a new website. I am using a watermark that begins in header and goes over the css menu in box. The positioning of all containers is correct and it views perfectly. I have a wrapper around those 2. *The issue is when the zindex is high it shows water mark beginning in header and stretches over the menu, when that happens the menu will not work properly. If I lower the zindex then the css menu covers bottom of my watermark it works, but then you cant see bottom half of my water mark. The water mark is in .png format. I'm working on this page: http://development.maklafpress.com/index.asp. I'm experimenting w/ sandbagging to get the text to wrap around that logo. The page looks perfect in IE, but in Opera, Firefox and Netscape the logo creeps up above the nav bar and screws everything up. Could some one help me out? I've attached the CSS below: Code:
#content {
background: url(maklaf.jpg) no-repeat top left;
}
#wrap1 {
width: 180px;
height: 110px;
float: left;
clear: left;
padding: 0;
}
#wrap2 {
width: 209px;
height: 90px;
float: left;
clear: left;
padding: 0;
}
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: #036;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
#navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}
I am using IDs to contain hidden text. I am using mouse over behaviors to change the text's visibility so that it is shown. Now here is the thing; I want to display two IDs of text. Since I have to set the position to absolute, otherwise they scroll down the page, the texts overlap. Things I have tried. - Using a span class of: top 100px; at the end of every ID to lower it from the second. This doesn't work because it is CSS and it reads every span class not like javascript. - Putting them in another ID and limiting the size of Box, scroll down the page. The position has to absolute so this is out. Here is what I am working on: www silverrose.net/zodiac2.htm I know I can change the page so it would work for now; but it won't work for what I am planning down the road. Maybe I should give up my efforts and try using javascript; but there HAS to be a way to do this with CSS. Any suggestions from you brilliant peeps? I am sitting here with a css challenge and I cannot even start to imagine how to do it. In fact, I think it is impossible to do, but just thought I'd ask you guys in case I am wrong: I want to create a dropdown menu (something like coolmenus) that can be created dynamically out of a database. The first thing I want to happen is that all primary navigation items are lined up horizontally next to eachother. That one was easy: I put each item into a DIV and float them left. Now the problem: whenever a user moves the mouse over a primary navigation item, a dropdown menu will appear underneath it. However (!), this dropdown menu may be wider than the DIV above it! Here an example: ------------- ------------- | Item 1 | | Item 2 | ------------- ------------- ----------------------- | Dropdown 1 | ----------------------- ----------------------- | Dropdown 2 | ----------------------- The problem I see is that I want the dropdown menu to always be left aligned with the primary navigation item. As I don't know the absolute position of either of them (being created dynamically out of a database), the only way to get the left alignment is to write the DIVs (primary item and its dropdown) directly after each other in the code. However, if I do that I cannot get the primary navigation items to appear one next to each other. Well, I could, but they wouldn't overlap with the dropdowns as I want them to. To give you an idea of what I am trying to achieve, have a look at the dropdown he http://www.rmitenglishworldwide.com...ts/products.asp Hello, I am working with something like this: Code: <div>content one here</div> <table><tr><td>content two here</td></tr></table> How can I get the div to overlap the table and appear on top of it? Thanks! Hey Guys, I'm switching over from a completely javascripted and clunky menu system to htmldog/alistapart's Son of Suckerfish CSS pulldown menu. (ref: http://www.htmldog.com/articles/suckerfish/dropdowns/ ) Now, I'm having trouble with the new menu sitting behind other properties on my pages; namely other form-pulldowns. Can you suggest anything that might correct this - I've tried z-indexing the pulldowns but that doesn't seem to do the trick!? Check this out at : http://www.pps.org/gps/ - pass your cursor over Placemaking Tools. Note - this seems to be a problem I'm noticing with IE6; in Mozilla/Firefox everything works alright. Cheers, Qasim Virjee pps.org qasim.ca (personal) I have a large footer that does not clear all the content in Safari. It is fixed to the bottom of the browser window, and when resized slightly, the footer then breaks free and shows all content. Please see page below for example. Footer covers some of the last row of items... when you resize the window, items become visible: www[dot]asadvertising[dot]com/portfolio[dot]html Hi all, My CSS problem: The text links in my right colum ("#iiicolright" - in a 3 col layout) is overlapping the content that appears below in on page.... Here is my CSS for the 3 col layout: Code:
#iiicolleft {
position: absolute;
left: 0;
width: 120px;
margin: 0;
padding: 0 0px 0 10px;
text-align: right;
}
#iiicolcontent {
margin: 0 200px 0 120px;
padding: 0;
}
#iiicolright {
position: absolute;
right: 0;
width: 200px;
margin: 0;
padding: 0 10px 0 0;
}
Here is the HTML: Code: <body> <div id="top_container"> <ul id="top_menu"> ... ... <!-- MAIN NAV MENU GOES HERE --> ... ... </ul> </div> <h1> </h1> <div id="iiicolleft"> <h5>[home]</h5> </div> <div id="iiicolright"> <h6>Current Projects:</h6> <p><img src="img/link.gif"><a href="#" title="test" target="_blank" class="mbiguism" alt="test">Link One</a></p> <p><img src="img/link.gif"><a href="#" title="test" target="_blank" class="mbiguism" alt="test">Link Two</a></p> <p><img src="img/link.gif"><a href="#" title="test" target="_blank" class="mbiguism" alt="test">Link Three</a></p> </div> <div id="iiicolcontent"> <p>Default home contents go he Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna <a class="mbiguism" href="foo.html">aliquam</a> erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <h2> </h2> <h3> </h3> <div id="bot_container"> <ul id="bot_menu"> ... ... <!-- SECONDARY NAV MENU GOES HERE --> ... ... </ul> </div> </body> I use H1 H2 and H3 as horizontal-rule seperators... here is the CSS: Code:
h1 {
font-size: 15px;
padding: 0;
margin: 0;
line-height: 15px;
background: url(../img/bg_3x7.gif) repeat-x left center;
height: 15px;
}
h2 {
font-size: 5px;
padding: 0;
margin: 10px 0 2px;
line-height: 5px;
background: url(../img/bg_3x7.gif) repeat-x left center;
height: 5px;
}
h3 {
font-size: 5px;
padding: 0;
margin: 0 0 5px;
line-height: 5px;
background: url(../img/bg_3x7.gif) repeat-x left center;
height: 5px;
}
Does the overlap have to do with the absolute postioning of #iiicolright? I would greatly appreciate any suggestions anyone may have! Thanks in advance! Cheers Micky |
|||||||