|
CSS - Problem With Visibility Of Divs
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 Similar TutorialsHi I have a div setup like this <div id="main"> <div id="item"> <div id="itemchild"> content </div> </div> </div> Now.. when my JS function sets the visibility of the div with id 'item' the div 'itemchild' stays visible... how do I fix that? OK, so its not that festive, but merry christmas anyway! I have a site which I need to touch up for tomorrow but I''m having trouble with div visibilities and hoped someone could see what I'm doing wrong. In the page http://www.thoroughbredmusic.co.uk/bands.php?id=1 The logo in the top right corner of the div is hidden. I changed fixed this by changing the visibility of the container div #outerwrapper which is the main div you can see with the yellow border, but this in turn collapsed the bottom of the black container up to the text 'The Rosetta Life Band Long Description goers here'. The two cells on the right with the Album cover and next gig are still visible, but going outside of the black box and over the background. You can see this at http://www.thoroughbredmusic.co.uk/problem.php?id=1 Its really bugging me! Thanks for your help and merry christmas! 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? 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/ (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>
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; } 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>
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 [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. 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... 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;
}
I have been reading about the problems regarding visibility with IE/FireFox/Safari. I have: Code:
<input type="button" onClick="toggleSurveyView('block')">
<input type="button" onClick="toggleSurveyView('table-row')">
<tr id="surveyDetails">
<td>HI</td>
</tr>
function toggleSurveyView(visible) {
document.getElementById('surveyDetails').style.display = visible;
}
In IE visible: block works great in FireFox/Safari visible: table-row works great. Is there a work around to get this visibility issue resolved for all browsers? Or am I going to have to perfrom some sort of browser type check? I just want to be able to toggle showing this table row on and off Hi, On the page http://simplyfocusing.net/LitSoc/ I have been trying to get CSS rollovers working. I use code similar to this For CSS Code: .nav {
width:172px;
height:32px;
}
td#nhome {
background-image:url(nav-home.gif);
background-repeat:no-repeat;
cursor:pointer;
}
td#nhome img {
visibility:hidden;
}
td#nhome:hover img {
visibility:visible;
}
For HTML Code: <td id="nhome" class="nav"><a href="index.htm"><img src="index_files/nav-home-over.gif" alt="" /></a></td> But the rollovers arent exactly working with IE. Works perfectly in FireFox 1. Also there seems to be some problem with the top right corner in IE. I can correct it by setting height to 0px in .shadowtopcorn but then it screws up FireFox. Any suggestions on what I should do? Thanks a lot Hi all, So i have been trying to get the divs with the content in to sit properly on IE6 they work correctly in firefox and ie 7 and 8. Originally the text div and the news bar div were both moved far down the page. I removed the height setting on the text div and it moved it back into (about) the correct place. But I cant figure out what is causing the news div to move, any advice would be greatly appreciated Code:
<body>
<div id="main" style="position:absolute; width:850px; background-image:url(images/4560-background_midext_02.jpg); left:15%; z-index:1;">
<div id="topborder"><img src="images/4560-bkground_top.jpg" /></div>
<?php include('components/Header.php'); ?>
<div id="body" style="position:relative; left:10px; top:10px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<?php include('components/logodisplay.php'); ?>
******THIS DIV IS THE ONE WHICH IS MOVING******
<div id="newsbanner" style="position:relative; left:10px; top:7px; z-index:1; display:block;">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','560','height','60','title', 'newsbanner','src','flash/news','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/news' ); //end AC code
</script>
<noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="560" height="60" title="newsbanner">
<param name="movie" value="flash/news.swf" />
<param name="quality" value="high" />
<embed src="flash/news.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="560" height="60"></embed>
</object></noscript>
</div>
<div id="sponsorshipenquiries" style="position:relative; left:20px; top:20px; z-index:1; <?php echo $enquiry; ?> " >
<img src="images/header_sponsorship.jpg" />
<div id="text" style="top:10px; width:533px;">
Sponsorship provides a prime opportunity for your company to enhance its visibility and corporate presence during the conference. In addition to the intrinsic benefits of each option, all sponsorships include the opportunity to present a paper, full recognition on all promotional materials as an official sponsor and complimentary delegate places. All sponsorships are sold on a first come first served basis. Options can be reserved for a period of 10 working days.<br /><br />
<img src="images/header_sponsorshipoptions.jpg" />
<br /><br />
<img src="images/gr_platinum.jpg" />
<br /><br />
<img src="images/gr_gold.jpg" />
<br /><br />
<img src="images/gr_silver.jpg" />
<br /><br />
<img src="images/gr_bronze.jpg" />
<span style="left:29px; top:2px;"><p> For more information on becoming a sponsor of the conference please contact</p>
<p>Matthew Moss<br />
Conference director<br />
Tel: +[44] (0)20 7625 0000<br />
E-mail:mm@summittradeevents.com</p></span>
</div>
<div id="movedatfooter" style="position:relative; right:30px; top:170px;"><?php include('components/Footer.php'); ?></div>
<div id="borderbottom" style="position:relative; top:170px; right:30px;"><img src="images/4560-bkground_bottom.jpg" /></div>
</div>
<div id="sponsorshiplistings" style="position:relative; left:20px; top:20px; z-index:1;
<?php echo $listing; ?>" >
<img src="images/header_sponsorship.jpg" />
<div id="text" style="top:10px; width:533px;">
Sponsorship provides a prime opportunity for your company to enhance its visibility and corporate presence during the conference. In addition to the intrinsic benefits of each option, all sponsorships include the opportunity to present a paper, full recognition on all promotional materials as an official sponsor and complimentary delegate places. All sponsorships are sold on a first come first served basis. Options can be reserved for a period of 10 working days.
<p> For more information on becoming a sponsor of the conference please contact</p>
<p>Matthew Moss<br />
Conference director<br />
Tel: +[44] (0)20 7625 0000<br />
E-mail:mm@summittradeevents.com<br />
<br />
We would like to take this opportunity to thank the sponsors of TurkmenTel 2009 for their continued support.
<br />
<br />
<img src="images/gr_platinumsponsor.jpg" />
<br />
<br />
<?php
$type = "platinum";
include('components/logoviewer.php');
?>
<img src="images/gr_goldsponsor.jpg" />
<br />
<br />
<?php
$type = "gold";
include('components/logoviewer.php');
?>
<img src="images/gr_silversponsors.jpg" />
<br />
<br />
<?php
$type = "silver";
include('components/logoviewer.php');
?>
<img src="images/gr-bronzesponsors.jpg" />
<br />
<br />
<?php
$type = "bronze";
include('components/logoviewer.php');
?> </p>
</div>
<div id="movedatfooter" style="position:relative; right:30px; top:15px;"><?php include('components/Footer.php'); ?></div>
<div id="borderbottom" style="position:relative; top:4px; right:30px;"><img src="images/4560-bkground_bottom.jpg" /></div>
</div></div>
</div>
</body>
</html>
I have no idea what the problem is here, ive tried fiddling with some of the positioning properties and nothing seems to have any effect. So any help is greatly appreciated Hi, I've a problem designing with CSS. This is the html code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="structure-yellow.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main"> <div id="headimage">test</div> <div id="greybar">test</div> </div> </center> </body> </html> And the attached css file is: Code:
div#main {
border: solid #000000 1px;
padding: 3px;
width: 780px;
margin: 0 auto 0 auto;
}
#headimage {
vertical-align: middle;
height: 100px;
background: #FFFF00;
}
#greybar {
position: relative;
top: 3px;
background: #CCCCCC;
}
Since the headimage and the greybar are nested within the main div, the 3px padding of the "main" div should be respected, however it's not. What I think is happenning is that the 3px padding of the main div is respected for the expected greybar position, and it is not updated after setting the "#greybar" position property on the CSS file. How can I solve this problem? I know that I could achieve the same effect adding a 3px white bottom border on the "#headimage" class, but I'm looking for more elegant solution based on block positioning. Any ideas? Thanks, Caste Got a problem in ie6 with divs dropping and a slight over lap in ie7. The tables are set width inside a 600px wide div but no matter what i do the columns on the right keep dropping. anyone have any ideas? how can i post screenshots when no urls allowed? Firefox 3.6 is showing a blank screen for everything I have set as 100% width but looks ok in Firefox 5. My main concern at this point is this: I'm trying to figure out how to move the 4 navigation items (the owl, contact, portfolio and home) closer to the tree without going over or under it. Any help or suggestions I can get are much appreciated! ------------------------------------- Here's the HTML: 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>ATHENA STUDIOS - web design & graphic design in Charlottetown, PEI</title>
<link rel="shortcut icon" href="layout/hoot.ico" />
<link rel="stylesheet" type="text/css" href="athena.css" />
</head>
<body>
<div id="page-wrap"> <!-----page wrap div start------>
<div id="top"> <!-----top div start ------>
<img src="layout/header.png" alt="header image ATHENA STUDIOS WEB DESIGN, GRAPHIC DEIGN & FRONT END DEVELOPMENT" />
</div> <!-----top div end ------>
<div id="navbar"> <!-----nav bar BACKGROUND div start------>
</div> <!-----nav bar BACKGROUND div end------>
<div id="navigation"> <!-----navigation div start------>
<ul id="menu">
<li class="owl"><a href="index.html">Owl</a></li>
<li class="contact"><a href="/contact/">Contact</a></li>
<li class="portfolio"><a href="/portfolio/">Portfolio</a></li>
<li class="home"><a href="index.html">Home</a></li>
</ul>
</div> <!-----navigation div start------>
</div> <!-----page wrap end div------>
</body>
</html>
----------------------------------------- And here's the CSS: Code:
@charset "UTF-8";
/* CSS Document */
body {
width:100%;
font-size: 13px;
font-family: Helvetica, Verdana, Arial, sans-serif;
line-height: 1.4;
background: url(../layout/bg.png);
background-attachment:fixed;
margin:0;
padding:0;
text-align: center;
}
a, a:link {
color: #000000;
text-decoration: none;
}
a:hover {
color: #31636c;
text-decoration: none;
}
a.footer:link {
color: #ddcfb2;
}
a.footer:hover {
color: #ddcfb21;
}
a.footer:visited {
color: #ddcfb2;
}
a.footer:active {
color: #ddcfb2;
}
#page-wrap {
width: 100% ;
margin: auto ;
text-align: center;
}
#top {
width:100%;
background:url(layout/skybg.png);
background-repeat:repeat-x;
text-align: center;
position:relative;
z-index: 500;
}
#navbar {
width:100%;
height:102px;
margin-top:-139px;
padding-top:15px;
background:url(layout/navbg.png);
background-repeat:repeat-x;
}
#navigation {
width:100%;
height:155px;
text-align:center;
margin-top:-154px;
}
/* Everything CSS Sprite Menu */
ul#menu {
text-align:center;
position:relative;
z-index: 501;
padding:0;
list-style:none;
clear:both;}
#menu li{overflow:hidden;
text-indent:-9999px;
display:inline;
text-align:center;
float:left;
margin-right:10px;}
#menu li a{background:url('layout/navigation.png') no-repeat; width:100%; height:100%; display:block;}
/* Owl Button */
#menu li.owl{width:158px; height:146px;}
#menu li.owl a{background-position:0px 0px;}
#menu li.owl a:hover{background-position:0px -2px;}
/* Contact Button */
#menu li.contact{width:150px; height:158px;}
#menu li.contact a{background-position:-158px 0px;}
#menu li.contact a:hover{background-position:-158px -2px;}
/* Portfolio Button */
#menu li.portfolio{width:238px; height:146px;}
#menu li.portfolio a{background-position:-308px 0px;}
#menu li.portfolio a:hover{background-position:-308px -2px;}
/* Home Button */
#menu li.home{width:114px; height:146px;}
#menu li.home a{background-position:-546px 0px;}
#menu li.home a:hover{background-position:-546px -2px;}
NEVER MIND. Got it. lol I have two div tags that I want to float next to each other. The page looks like this <table>These Tables stretch 100% of the width</table> <table>''</table> <div class="ParentDiv"> <div class="menuholder"></div> <div class="ChildDiv"></div></div> in FF everything works the way I want to. In IE if I shrink down the browser then the second div tag drops below the first. I want to change this so that it does not drop below but remains in the same place. Is there anything I can set to do that? If I remove the float and change the position on the menuholder the childdiv tag does not drop but the menuHolder content does not stretch the size of the parentDiv and gets chopped off at the height of the childDiv Code:
.ParentDiv {
position: relative;
width: 100%;
width:expression(document.body.clientWidth < 997 ? '997px' : '100%');
min-width:997px;
max-width:100%;
overflow:hidden;
min-height: 400px;
}
.ChildDiv {
position: relative;
width: 100%;
min-height: 400px;
}
.menuholder {
background-color: #EFF3F5;
color: #eef;
position: relative;
float: left;
left: 0px;
top: 0px;
overflow: hidden;
width: 160px;
z-index: 100;
}
|
|||||||