|
CSS - Problem With Divs And Layer
Hello, someone call tell me why this code didnt work? i try to put some flash banner in nested divs using z-index and its not working the flash div is above the higher div. i am tryin to href the flash banner:
Code:
<asp:FormView DataSourceID="SqlDataSource20" runat="server">
<ItemTemplate>
<div style="width:728px; height:90px; position:relative; padding:0px; margin:0px; z-index:100; cursor:pointer; display:block; background-color:Lime;" onclick="window.new('<%#Eval("destUrl") %>', '_blank');">
<div style="width:728px; height:90px; position:absolute; left:0px; top:0px; padding:0px; margin:0px; z-index:-1; display:block;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="728" height="90">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="<%#Eval("bannerSrc") %>" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="opaque" />
</object>
</div>
</div>
</ItemTemplate>
</asp:FormView>
Similar TutorialsI've been re-designing my site in valid XHTML 1.1 and CSS, and I've hit a bit of a problem.... Everything works perfectly in Firefox, but IE isn't liking things at all. The navbar at the left should stretch all the way to the bottom image, but it isnt having it. I've tried messing with it for about an hour now, and can't fix it.... The page can be found at URL and the stylesheet at URL Oh, and I know the colours are all messed up, I'll fix that later :P Edit: Fixed bbCode Hi everyone, I am having a very difficult problem using Dreamweaver and I would be very grateful for any advice given. I recently created a simple website using layers and when I previewed it, it looked great and it had no reported browser errors. I had several people view it and only one of my friends had trouble seeing it. He said that the layers were out of position and sometimes overlaped. We both were using Explorer 6.0. The only difference between our computers is that he has a 21" monitor while I have a 17". Would that effect the web page design? Why are the layers not positioning correctly? If anyone needs to view the website it can be seen at http://sky.prohosting.com/lovecare Please help me! Thanks, Steve (never mind, i dont need layers anyways) Sorry, pls delete this! Hi, the foolowing code is highlighting some options that I have in a layer sitting on top of a tablet type object. In IE the options are displayed 'inside' the tablet. In Firefox they are spread out down the page into my footer, any ideas what I can add to contain them within the tablet layer? PHP Code: <div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 1px; top: 188px; visibility:visible" id="layer2"> <div style="position: absolute; width: 100px; height: 24px; z-index: 1; left: 46px; top: 35px; visibility:visible; right:0; bottom:0" id="layer3"> <p align="center"><font color="#4E261B"><b> <span style="font-size: 11pt"> <a href="home" style="text-decoration: none"> <font color="#4E261B">Home</font></a></span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">About US</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">User Register</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">User Log-in</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">Supplier Log-in</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">Join Head2Toe</span></b></font></div> <img border="0" src="images/bridetablet1.bmp" width="190" height="302"></div> <p></div> <!-- to clear footer --> </div><!-- end outer div --> Layer 2 is the tablet, layer 3 is the text on top. if you need anything else, please let me know. Thanks, G I am trying to put left and right shadows on a layer, I am doing this by using two alternatively padded layers on top of each other. This code does that: PHP Code: #maincontent{ background-image: url(images/layout/contentpanel/contentpanel_background.gif); background-repeat: repeat-y; background-position: left; border: 0px !important; padding-left: 30px; } #maincontent_inner{ background-image: url(images/layout/contentpanel/contentpanel_backgroundright.gif); background-repeat: repeat-y; background-position: right; border: 0px !important; padding-right: 30px; } PHP Code: <div id="hold_content"> <div id="maincontent"> <div id="maincontent_inner"><? include("includes/homepageloremipsum.php")?> </div><!-- End maincontent_inner --> </div><!-- End maincontent --> </div> Now, in firefox the shadow images work fine, however, on IE they start about 2 inches down. However, after scrolling up and down the page they start at the top so this is obviously some kind of layering problem. I can't work out what though. Any ideas? Hello, I have a table inside a layer (position: absolute). I want to apply onMouseOut event to my layer, so when I roll my mouse outside of the layer it gives an alert message. Well, it does give an alert when I move my out outside of the layer. But it also alerts when I move my mouse over the table which is inside my layer. I'm sure it's something simple, but I'm struggling with it for hours already and can't find any solution. Code below. What am I doing wrong? <div style="position:relative; z-index:1;"> <div style="position: absolute; z-index:2; background-color:#009900; padding:10px; width: 200px; height:200px;" onMouseOut="alert('hey');"> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td>table</td> </tr> </table> </div> </div> Thanks so much! My website (OPM) uses css for all the layout. Sometimes, when I load a new page within the website, the entire webpage appears nested within one of the layers. When I reload the page, this effect disappears right away or after a few reloads. It appears about 10% of the time and occurs in several different browsers (i.e. Firefox, IE). Nested webpage error URL Normal page URL I don't know why this is happening, especially since it's only part of time. Please help! Thank you, Misha I've seen a fix for this online before, but I can't seem to find it now. Basically I've got the following layer declartion: HTML Code _NOT_ php PHP Code: <div style=" color: black; font-size: 10pt; font-family: arial; text-align: center; visibility: hidden; display: block; position: absolute; z-index: 3; top: 115px" id="default"> When I make this layer visible it shows up in the exact position I want it to in most browsers, but in Mozilla it is 10 pixels to low. How can I get this layer to show up on Mozilla in the same pos as IE? Should I use javascript to adjust that "top" to 125 if its Mozilla? Or is there a CSS way to resolve this. Hello I thought I could make it, but what I got so far is jumping over the screen, so please a need some help. I got a image with two transparant shapes. Behind those shapes I would like to show 2 other images. |-------1-------| | |-----| |----| | | |...2..| |..3..| | | |____| |____| | |_____________| Image 1 should be on top z-Index Image 2 should under image 1, a part of the image should be visible. Image 3 should under image 1, a part of the image should be visible. Now the issue, image 2 and 3 should be dynamically replaceable. Please help Thanks I'm having some difficulty with the divs in my new site and was wondering if you could take a look and point out where I'm going wrong. My site is located at http://www.rockapedia.co.uk and the stylesheet at http://www.rockapedia.co.uk/style.css Much appreciated, Bailz. I used a div for each individual section (id=section) and on the second row, instead of displaying three like the first row it displays one on the far right and then it displayes the other two on the next row in the left and center. It's probably a small problem but i cant figure it out. I know i coudl easily do this using an html table but i'm trying to divert from using tables on anything other than just text. Stylesheet code Code:
Body {
font-family: "Lucida Sans Unicode",sans-serif;
font-size: 8pt;
font-weight: bold;
color:#666666;
text-align: center;
min-width: 911px;
background-image:url('/images/sq.jpg');
}
p.footer {
font-family: "Lucida Sans Unicode",sans-serif;
font-size: 6pt;
color:#666666;
}
p.news {
font-family: "Lucida Sans Unicode",sans-serif;
font-size: 10pt;
font-weight:900;
color:#CCCC99;
}
p.title{
font-family: "Lucida Sans Unicode",sans-serif;
font-size: 14pt;
font-weight:900;
color:#FF9933;
}
form {
font-family: "Lucida Sans Unicode",sans-serif;
font-size:8pt;
color:#666666;
}
#container{
width:911px;
height:100%;
border-style:solid;
border-width:1px;
border-color:#CCCCCC;
margin:0 auto;
text-align: left;
background-color:#FFFFFF;
}
#topbar {
width:911px;
height:299px;
padding-left:4px;
padding-right:4px;
padding-top:9px;
padding-bottom:9px;
background-color:#EEEEEE;
background-image:url("images/topbg.jpg");
}
#menubar {
width:911px;
height:34px;
border-width:0px;
}
#content{ width:911px;
min-height:502px;
border-color:#cccccc;
border-top-width:12px;
border-bottom-width:12px;
border-left-width: 0pt;
border-right-width: 0pt;
border-style:solid;
text-indent: 3px;
}
#section { padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
width: 240px;
float: left;
vertical-align: top;
border-width:0px; }
#rightbar{
width:174px;
height:263px;
}
#right_bot{
width:174px;
height:51px;
}
#footer {
width:780px;
height:50px;
}
#bottom {
width:600px;
height:35px;
}
#logos {
width:600px;
height:50px;
}
a:link {
color: #666666;
}
a:visited {
color: #666666;
}
a:hover {
color: #666666;
text-decoration: none;
}
a:active {
color: #333333;
}
#port div{display:none;}
p.port {
font-size:8pt;
}
html code Code: <?xml version="1.0" encoding="iso-8859-1"?> <!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" xml:lang="EN" lang="EN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="Keywords" content="web development,php,scripts,web solutions,adrian wisernig,statc,cheap web design,mysql" /> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> <title>Statc.net- php.mysql.flash, and other premium web solutions</title> </head> <body> <div id="container"> <div id="topbar"> <center><img src="images/s9.jpg" alt="" height="278" width="873" border="0"/></center></div> <div id="menubar"> <img src="images/layout_08.jpg" alt="" height="32" width="45" border="0"/><img src="images/layout_09.jpg" alt="" height="32" width="84" border="0"/><img src="images/layout_10.jpg" alt="" height="32" width="93" border="0"/><img src="images/layout_11.jpg" alt="" height="32" width="122" border="0"/><img src="images/layout_12.jpg" alt="" height="32" width="126" border="0"/><img src="images/layout_13.jpg" alt="" height="32" width="132" border="0"/><img src="images/layout_14.jpg" alt="" height="32" width="146" border="0"/><img src="images/layout_15.jpg" alt="" height="32" width="129" border="0"/><img src="images/layout_16.jpg" alt="" height="32" width="34" border="0"/></div> <div id="content"><center> <br> <div id="section"> <img src="images/services.jpg" alt="" height="159" width="230" border="0"/><br/>View the large array of services we offer to ensure sucess for your business. </div> <div id="section"> <img src="images/portfolio.jpg" alt="Portfolio"> Assure yourself by viewing our past work and clients. </div> <div id="section"> <img src="images/contact.jpg" alt="Contact"> View contact information for our company. </div> <div nowrap="true"></div> <div id="section"> <img src="images/partners.jpg" alt="Partners"> View our partners. </div> <div id="section"> <img src="images/about.jpg" alt="About Statc"> Find out more information about our company.</div> <div id="section"> <img src="images/resources.jpg" alt="Resources"> View and download free resources to help your conquest for sucess. </div> </center></div> </div> </body> </html> i am currently working on a layout that isnt working out for me... the xhtml for the website so far (very simple form) 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> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Tower C</title> </head> <body> <div id="header"></div> <div id="links"></div> <div id="body"> test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /> </div> <div id="side"></div> </body> </html> and the css code i have is Code: #header {
position: absolute;
background-color: #a7e83f;
height: 124px;
width: 92%;
left: 4%;
right: 4%;
padding: 0px;
top: 20px;
}
#links {
position: absolute;
color: #000000;
background-image:url(images/linkbg.gif);
height: 23px;
width: 92%;
left: 4%;
right: 4%;
padding: 0px;
top: 144px;
}
#body {
position: absolute;
font-family: Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #ede2da;
width: 57%;
left: 4%;
right: 39%;
padding: 0px;
top: 167px;
overflow: visible;
}
#side {
position: absolute;
font-family: Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #dad1c9;
width: 35%;
left: 61%;
right: 4%;
padding: 0px;
top: 167px;
overflow: visible;
}
when the body div has more text than would fit it expands because of the overflow option... my problem is that the side div will not resize with the body div or visa versa any chance anyone knows how i can fix this? here is a link so you can see http://people.brunel.ac.uk/~dt08ajm/towerc/ On the page http://www.thoroughbredmusic.co.uk, I'm trying to get the logo in the top left of the screen to appear above any other div on the page. At the moment, the div containing the logo is within the overall div which houses everything in the center, within the yellow border. index.php: Code: <body> <div id="wrapper"> <div id="logo"></div> style.css: Code:
div#wrapper
{
text-align:left;
margin:0 auto;
width:723px;
margin-top:120px;
background-image:url(mockup.jpg);
border-color:#FFFF33;
border-style:solid;
border-width:thin;
background-color:#000000;
background-repeat:no-repeat;
overflow:visible;
}
div#logo
{
background-image:url(logo.gif);
width:328px;
height:198px;
margin-left:-50px;
margin-top:-100px;
float:left;
}
I created this based upon firefox, and in firefox it appears as intended- just above and to the left, but overlapping, the top left side of the main div (#wrapper) In IE, however, it appears in the same position, but everything outside the main div is invisible. I tried a number of methods, including z indexes and overflow:visible within body{}, but with no luck. Anyone have any ideas? Thanks a lot, Tom OK, I've got this page currently: http://www.brianellisrules.com/stickers/pics/ (click on a state) I'm trying to add a caption to each thumbnail showing the date: http://www.brianellisrules.com/stic...s/testindex.php (click on a state, preferably NY or NJ since they have a lot of pics) In the first version, I have all the pictures centered and they're all vertically aligned to the middle (of the row). In the second version, I switched over to floating div's so I could center each date below each thumbnail. That works great, however, all the thumbnails are left aligned. I tried adding a div around the thumbnails with everything centered, but no dice. How do I center the row of thumbnails? Also, how do I align the thumbnails to the center of the row (or at least the prev/next arrows)? Thanks! oh yeah, here's the CSS: div.thumbrow { clear: both; padding-top: 10px; margin-left: 20%; margin-right: auto;} /*THE MARGIN IS JUST A TEMP FIX, BUT NOT WHAT I WANT. I'D LIKE FOR IT TO BE CENTERED*/ div.float { float: left; text-align: center; } div.float p { text-align: center; margin: 0; font-size: 0.8em; } I have these two blocks that need to be on the same row. As it is now, they are blocked into two seperate rows. What I'm trying to achieve, is to have the logo on the far left, where it is now. But, I'd like to have the Login text to the far right, just before the tiled background (sunflowers). I'm not sure how to fix this problem. Can anyone take a quick look? http://www.marginalspace.com/asif/index.php (vectortorque.com). I am trying to use a container div for all of my content, but for some reason browsers like FF and Opera won't recognize that there is a difference between the main div for the page layout and the div for the content even though they have different ids. So if I set a top margin for the "contentcontainer" div, it is pulling down the "midbox" page layout div with it. I want to be able to move the "contentcontainer" div anywhere within the "midbox" div without moving the "midbox". Can someone tell me how to fix this please. Thanks. This is the main container div for the page: Code: div#midbox {
min-height: 100%;
width: 700px;
background-color: #FFFFFF;
margin-left: 270px;
margin-top: 0px;
border-left: 3px solid #FFF;
border-right: 3px solid #FFF;
}
This div should contain all of the content: Code: div#contentcontainer {
width: 500px;
height: 500px
text-align: left;
margin-top: 80px;
margin-left: 100px;
margin-right: 100px;
border: 1px solid black;
}
This is the actual code for the page: Code: <div id="midbox">
<div id="contentcontainer">
<div class="topdot"><div class="botdot"><div class="leftdot">
<div class="rightdot"><div class="bl"><div class="br"><div class="tl"><div
class="tr">
<table class="content" cellspacing="0" cellpadding="0">
<tr>
<td><img src="./resources/images/welcome.jpg" width="125" height="50" alt=""></td>
</tr>
<tr>
<td><p>(Content Removed)</p></td>
</tr>
</table>
</div></div></div></div></div></div></div></div>
</div>
</div>
Hello. I've got a header div that my banner is in, below that, another div called "welcome". The background-color I set on the welcome div is somehow appearing at the very top of the container, right above my banner... I've tried adding a height to it but that just makes it worse. Not sure what else to do... The site is LeetWebmasters. My css: Code: p {
margin:0px;
padding:0px;
color:#006699;
line-height:20px;
}
h2 {
padding:0px;
margin:0px;
font-size:24px;
color:#006699;
font-weight:100;
border-bottom:1px dotted #ccc;
}
h3 {
padding:0px;
margin:0px;
color:#006699;
color:#006699;
}
html,body {
padding:0px;
margin:0px;
background-image:url(main-bg.gif);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#container {
margin: 0 auto;
width: 922px;
}
#header {
width: 922px;
float: left;
height: 130px;
margin: 10px 0px 5px 0px;
}
#leftcolumn {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-image:url(col_gradient.jpg);
margin: 0px 5px 5px 0px;
padding: 10px;
height: 900px;
width: 195px;
float: left;
}
#welcome {
text-align:center;
padding:5px;
background:#EAEAEA;
color:#006699;
}
#latest_tuts {
color:#006699;
}
#latest_tuts h3 {
border-bottom:1px dotted #ccc;
}
#who_online h3 {
border-bottom:1px dotted #ccc;
}
#search {
position:absolute;
margin-top:0px;
margin-left:0px;
}
#newsletter {
position:absolute;
margin-top:0px;
margin-left:0px;
}
#welcome a:link {
color:#0066CC;
}
#content {
color: #333;
margin: 0px 5px 5px 0px;
padding: 10px;
width: 456px;
display: inline;
float:left;
background-image:url(content_gradient.jpg);
}
#content a:link, a:visited {
color:#0066CC;
}
#rightcolumn {
color: #333;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-image:url(col_gradient.jpg);
margin: 0px 0px 5px 0px;
padding: 10px;
height: 900px;
width: 196px;
float: left;
}
#footer {
text-align:center;
width: 900px;
clear: both;
color: #878787;
border: 1px solid #ccc;
margin: 0px 0px 10px 0px;
padding: 10px;
height:35px;
font-size:12px;
background-image:url(footer_gradient.jpg);
}
#footer a:link {
color:#0066CC;
text-decoration:none;
}
#footer a:visited {
color:#0066CC;
text-decoration:none;
}
#footer a:hover {
color:#006699;
}
#menu3 {
width: 200px;
border:1px solid #BCD2E6;
border-style: solid solid none solid;
}
#menu3 li a {
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #8BADCF;
display: block;
background: url(menu3.gif);
padding: 8px 0 0 10px;
}
#menu3 li a:hover {
color: #627EB7;
background: url(menu3.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#menu3 li {
list-style:none;
}
#menu3 ul {
padding-top:0px;
margin-top:0px;
padding-left:0px;
margin-left:0px;
margin-bottom:0px;
}
#description {
font-size:10px;
color:#006699;
}
hi, i'have only very basic idea of CSS i'm making a site. It has horizontal scrollor using jquery and very large gap between scrollor and content "Welcome to prince electronic". Please someone help me to reduce the space between these two. website is princelondon.com thank you very much... [code] <div id="wrapper" style="background-color:black;padding:2px;overflow:visible;"> <div id="left-floating-box" style="background-color:red;float:left;">asdfsadf</div> <div id="right-floating-box" style="background-color:blue;float:right;">asdfsadf</div> </div> [code] here is a problem, warpper div doesnt strech to the height of the floating divs, ofcourse when you get rid of floating then everything work but i need this to work as it intended and that is two floating boxes with in one div and this div would wrap around two floating boxes and that way background would stretch as well. I rember solving this problem. Long time ago, but for some reason i am stock right now with this problem. Any one can refresh or sugest anything. Thank you. |
|||||||