|
CSS - Why Isn't This Nested Div The Same Width As Its Parent?
Hey guys,
I am working on www. paulfenton .tk/wordpress: The side margins of this site are filled with background gradients. (they take up the left and right halfs of the site, with the main content drawn over the middle). The problem is, the div "bottomLeftGradient" is the width of the whole screen. I know this might be because I am using position:absolute, but that seems to be the only way I can make bottom:0px; take effect and cause this to sit on the bottom of the div rather than the top. It seems that if I use width:50%; that it works, but I did not have to do that for bottomRightGradient so something must be messed up here. Thanks for the help, -Paul Similar TutorialsI have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>. This <div> is nested within another <div> for which I have specified a width of 200px. So something like: html4strict Code: Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div> <div style="position: relative; width: 200px;"> Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries). Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px. Am I doing something wrong? or is there a workaround for this? I think I'm having a CSS brain fart here. I'm trying to nest some divs, which is working, but the "helper" won't go where I need it to go. The "helper" is inside the "map" and needs to sit at the bottom of the "map" div because the regular content that appears in there (images) may not be the full height. Currently, the "helper" is sitting just below the image. For example, MAP is 400px tall. HELPER is 98px tall. If there is a picture in MAP that is 213px tall, then there should be 89px between the bottom of the image and HELPER. Here is the code: PHP Code: #content { border:1px solid #000000; margin:0px auto; width:900px; height:402px; text-align:left; } #content #map { float:right; width:302px; height:400px; margin:2px 2px 2px 2px; display:inline; text-align:center; } #content #map #helper { top:300px; width:298px; height:98px; } I've tried position and bottom as well. Those items seem to ignore the dimensions of #map and throw the div at the bottom of the page instead of the bottom of #map. If there is a better way, let me know. Thanks for taking the time to read my question. I've been searching the web on how to fix this but haven't got anything yet. In IE, my nested div (class="BioContent") stays within the parent container (id="BioBox"), but does not in FF. Right now I am using width: 100%; I've tried defining the width in pixels, but if I get it to work in FF, then it isn't wide enough in IE. Any ideas? Thanks for your help, Brad HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Created on: 7/21/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>
<link href="Junk.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="WP.js"></script>
</head>
<body>
<div id="FaderBar">
<div id="FaderBarWP">Warren Persowich</div>
<div><img id="FaderBarImg" src="images/audience.jpg" alt=""></div>
<div id="FaderBarHC">Humor Consultant</div>
</div>
<!--<p/>-->
<div id="MainBox">
<div id="LeftBox">
<div id="BioBox">
<div id="Bio0" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[0],0)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[0],0)";>5 Star Rating on bit aired on CBC</div>
<div id="Bio1" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[1],1)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[1],1)";>Licenced Psychologist</div>
<div id="Bio2" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[2],2)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[2],2)";>National Television Debut - Fall of 2006</div>
<div id="Bio3" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[3],3)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[3],3)";>XM Satelite Bit</div>
<div id="Bio4" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[4],4)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[4],4)";>Instructor of Stand-Up Comedy</div>
<div id="Bio5" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[5],5)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[5],5)";>Manitoba Theatre For Young People</div>
<div id="Bio6" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[6],6)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[6],6)";>Cancer Survivor</div>
</div>
<div id="BioFooter">Move cursor over text to read on...</div>
<div id="Broadcast">
<!-- begin embedded WindowsMedia file...-->
<OBJECT id='mediaPlayer' width="320" height="285"
classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95'
codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701'
standby='Loading Microsoft Windows Media Player components...' type='application/x-oleobject'>
<param name='fileName' value="http://servername/path/to/media.file">
<param name='animationatStart' value='true'>
<param name='transparentatStart' value='true'>
<param name='autoStart' value="true">
<param name='showControls' value="true">
<param name='loop' value="true">
<EMBED type='application/x-mplayer2'
pluginspage='http://microsoft.com/windows/mediaplayer/en/download/'
id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1'
bgcolor='darkblue' showcontrols="true" showtracker='-1'
showdisplay='0' showstatusbar='-1' videoborder3d='-1' width="320" height="285"
src="http://servername/path/to/media.file" autostart="true" designtimesp='5311' loop="true">
</EMBED>
</OBJECT>
<!--<a href="http://servername/path/to/media.file" style='font-size: 85%;' target='_blank'>Launch in external player</a>-->
</div>
</div>
<div id="CenterBox"><img class="HeadShot" src="ColourTest1.JPG" width="122" height="212" alt=""/></div>
<div id="RightBox"><ul>
<li class="LB1TOP"><a href="#">Seminars</a></li>
<li class="LB2"><a href="#">Stand-Up</a></li>
<li class="LB3"><a href="#">Intro Psych</a></li>
<li class="LB4"><a href="#">Selected Transcripts</a></li>
<li class="LB3"><a href="#">Broadcast Archives</a></li>
<li class="LB2"><a href="#">Links</a></li>
<li class="LB1"><a href="#">Pricing & Inquiries</a></li>
<!--<li class="LB4"><a href="#">Link #8</a></li>
<li class="LB3"><a href="#">Link #9</a></li>
<li class="LB2"><a href="#">Link #10</a></li>
<li class="LB1"><a href="#">Link #11</a></li>-->
</ul></div>
</div>
<div id="Signature"><a class="Sig" href="#">Manic Web Designs</a></div>
</body>
</html>
CSS: Code: body {
/*background: #E2E2E2;*/
background: #000000;
margin-top: 5px;
}
#MainBox {
/*background-color: #ECF9FF;*/
background-color: #8C8C8C;
margin: 0 auto;
width: 780px;
/*height: 500px;*/
/*border-color: #004A94;
border-width: 2px;
border-style: solid;*/
overflow: hidden;
}
#FaderBar {
/*background-color: #ECF9FF;*/
background-color: #8C8C8C;
margin: 0 auto;
height: 80px;
width: 780px;
border: 5px double #ffffff;
/*background-image:url('HeaderImg.png');*/
}
#FaderBarWP {
float: left;
height: 40px;
width: 300px;
margin-left: 15px;
margin-top: 5px;
font-size: 40px;
/*background-color: red;*/
}
#FaderBarHC {
float: left;
height: 55px;
width: 430px;
font-size: 25px;
margin-left: 45px;
/*background-color: aqua;*/
}
#FaderBarImg {
float:right;
height: 105px;
width: 199px;
}
#LeftBox {
width: 340px;
/*height: 500px;*/
float: left;
/*background-color: aqua;*/
}
#CenterBox {
width: 220px;
/*height: 500px;*/
float: left;
/*background-color: red;*/
}
#RightBox {
width: 220px;
/*height: 500px;*/
float: left;
/*background-color: yellow;*/
}
#BioBox {
width: 295px;
height: 250px;
background-color: #F2F2F2;
padding-top: 5px;
border-color: #dcdcdc;
border-style: solid;
border-width: 2px;
float: right;
margin: 5px 10px 0px 0px;
}
.BioContent {
width: 100%;
float: left;
font-size: 11px;
margin-bottom: 5px;
border-top: 1px dashed #dcdcdc;
border-bottom: 1px dashed #dcdcdc;
padding: 5px;
}
#BioFooter {
float: right;
width: 100%;
text-align: right;
font-size: 12px;
color: gray;
margin-bottom: 15px;
}
#Broadcast {
height: 300px;
width: 330px;
float: right;
padding: 0px 0px 0px 0px;
}
ul li {
float: right;
height: 20px;
margin-bottom: 25px;
border-color: #dcdcdc;
border-width: 2px;
border-style: solid;
text-align: center;
width: 150px;
background-color: #F2F2F2;
list-style-type: none;
}
.LB1TOP {
margin-right: 30px;
margin-top: 35px;
}
.LB1 {
margin-right: 30px;
}
.LB2 {
margin-right: 25px;
}
.LB3 {
margin-right: 20px;
}
.LB4 {
margin-right: 15px;
}
.LB5 {
margin-right: 10px;
}
.LB6 {
margin-right: 5px;
}
ul li a {
display: block;
}
ul li a:link {
text-decoration: none;
color: black;
}
ul li a:visited {
text-decoration: none;
color: black;
}
ul li a:hover {
background-color: #737373;
color: white;
font-weight: bold;
}
ul li a:active {
text-decoration: none;
}
img.HeadShot {
margin: 125px 0px 0px 50px;
}
#Signature {
background-color: #E2E2E2;
margin: 0 auto;
width: 780px;
padding-top: 10px;
/*height: 500px;*/
/*border-color: #004A94;
border-width: 2px;
border-style: solid;*/
overflow: hidden;
text-align: right;
}
a.ReadOn:link {
text-decoration: none;
color: black;
}
a.ReadOn:visited {
text-decoration: none;
color: black;
}
a.ReadOn:hover {
text-decoration: none;
color: black;
}
a.ReadOn:active {
text-decoration: underline;
color: black;
}
.Sig {
color: #808080;
font-size: 10px;
}
a.Sig:link {
text-decoration: none;
}
a.Sig:visited {
text-decoration: none;
}
a.Sig:hover {
text-decoration: overline underline;
}
a.Sig:active {
text-decoration: none;
}
hi, i have the following css Code: #content { width:1000px; text-align:center; height:100%; border:2px #000 solid; }
#mainbody { width:1000px; height:100%; display:run-in; border:#03F 1px solid; }
and my xhtml looks like Code: <div id="content"> <div id="mainbody"> </div> </div> basically what i want to do is to have full available page height covered by content div so that i can stick a footer div at the end of it. so that regardless of the height of the contents covering the mainbody-div my footer always sticks to the bottom of the page. now even before i add footer, the problem is that mainbody is going 50px outside the content div at the bottom making the page to scroll. should it not take the available height within the content-div because it is nested within content div? thanks I had such good help with my last problem, I thought I'd come back for more. I'm trying to set up my pages to allow a nested div to expand the page vertically based on quantity of content. In other words, if a page requires a lot of content, I want it to automatically push the page down. As it is, the nested div is overlapping the parent. I've tried numerous tips from tutorials, but nothing doing. This article is the one that made the most sense to me but I couldn't achieve the desired effect. Here's the necessary info: HTML (Contact Page) : Code: <body class="contact">
<div id="Main_Container">
<div>
<div id="Header-img"></div>
<ul id="nav">
<li class="home-list"><a href="/index.php">Home</a></li>
<li class="classes-list"><a href="../classes/">Pilates</a>
<ul id="classes-sub">
<li><a href="../classes/pilates.php">Sign Up</a></li>
<li><a href="../classes/dance.php">Schedule</a></li>
<li><a href="../classes/gyrokinesis.php">Education</a></li>
</ul>
</li>
<li class="schedule-list"><a href="../schedule/">Dance</a>
<ul id="schedule-sub">
<li><a href="../schedule/class-schedule.php">Opportunities</a></li>
<li><a href="../schedule/enroll-private.php">Contact about </a></li>
<li><a href="../schedule/enroll-group.php">Enroll - Group</a></li>
</ul>
</li>
<li class="education-list"><a href="../education/">Gyrokinesis</a>
<ul id="education-sub">
<li><a href="../education/pilates/php/">What is it?</a></li>
<li><a href="../education/dance.php">Dance</a></li>
<li><a href="../education/gyrokinesis.php">Gyrokinesis</a></li>
</ul>
</li>
<li class="about-list"><a href="../about/">About</a>
<ul id="about-sub">
<li><a href="../about/philosophy.php">Philosophy</a></li>
<li><a href="../about/cheryl-lemmer.php">Cheryl Lemmer</a></li>
<li><a href="../about/in-the-news.php.php">In the News</a></li>
</ul>
</li>
<li class="contact-list"><a href="../contact/">Contact</a></li>
</ul>
</div>
<div id="home-container">
<div class="content-nav">heading
<div class="content-nav-head"></div>
</div>
<div class="content-wrap">
</div>
</div>
</div>
</body>
</html>
Relevant CSS : Code: html, body, form, fieldset {
height:100%;
margin: 0;
padding: 0;}
#Main_Container {
position:relative; margin:auto;
width:751px;
min-height:100%;
height:auto; !important;
height:700px;
background-color:#fff;
border:solid 1px #cccccc;
}
#Header-img {
margin:auto;
width:751px;
height:151px;
background:url(../images/header.gif) no-repeat;
background-color:#fff;
}
.content-wrap {
position:relative;
float:right;
width:520px;
height:600px;
border:solid 1px #000;
}
.content-nav {
float:left;
position:relative;
width:190px;
}
Hey, I have parent table, with several nested tables within. I'm changing the CSS values on-the-fly using Javascript so I'm using id's instead of classes. The CSS of all the tables is generated using this code: Code:
/* mp_tip_CSS_x_TABLE CSS */
<?
for ($i=1; $i<=12; $i++) {
?>
#mp_tip_CSS_<? echo($i); ?>_table {
border-color: <? echo($mp_tip_CSS_table_border_color[$i]); ?>;
border-style: <? echo($mp_tip_CSS_table_border_style[$i]); ?>;
border-width: <? echo($mp_tip_CSS_table_border_width[$i]."px"); ?>;
border-collapse: collapse;
}
#mp_tip_CSS_<? echo($i); ?>_table td {
border-color: <? echo($mp_tip_CSS_table_border_color[$i]); ?>;
border-style: <? echo($mp_tip_CSS_table_border_style[$i]); ?>;
border-width: <? echo($mp_tip_CSS_table_border_width[$i]."px"); ?>;
border-collapse: collapse;
}
<? } ?>
/* mp_tip_CSS_x_TABLE CSS END */
The parent table is mp_tip_CSS_1_table and the nested tables are mp_tip_CSS_2_table to mp_tip_CSS_12_table. The problem I'm getting is the nested tables seem to inherit the td border values of the parent table, so they have two borders instead of just the single one (the parent border and their own border). Is there any way to make the parent border td value only be applied to the immediate td's of the parent table, and not the td's of the nested tables as well? After browsing some web pages I came across using: Code:
#classname >tr >td {}
But that doesn't seem to work... Thanks for any help, -Ross Hi I found it: ********************** Code:
#tableLeftCol ul.menu li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
#tableLeftCol ul.menu li#current ul li a {
background-image: none;
}
*************************** I have a nested list representing a menu. I want the active menuitems (listitem) link to have a background image. When active menuitem is a parent then all the childs also get the background image...... How to I change the CSS so only active menuitems link get the background image set, and not the child links of the parent? If possible, I want to make it work without changing any in the HTML! Here is current CSS and list structu Code:
#tableLeftCol ul.menu li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
#tableLeftCol ul.menu li ul li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
Code: <div id="tableLeftColPadding"> <ul class="menu"> <li id="current" class="parent active item54"> <a href="/index.php?option=com_content&view=article&id=48&Itemid=54"> <span>Parent</span> </a> <ul> <li class="item57"> <a href="/index.php?option=com_content&view=article&id=50&Itemid=57"> <span>Child-A</span> </a> </li> <li class="item81"> <a href="/index.php?option=com_content&view=article&id=71&Itemid=81"> <span>Child-B</span> </a> </li> <li class="item59"> <a href="/index.php?option=com_content&view=article&id=52&Itemid=59"> <span>Child-C</span> </a> </li> </ul> </li> </ul> </div> I have this structure setup in XHTML Code:
<div class="contentShellHeader">
Header
</div>
<div class="contentShellContent">
Content
</div>
I'd like to have contentShellHeader's width to only be as wide as the text within it, but have contentShellContent be the width of the parent shell. Any idea how I can do this across all browsers? hi everyone, My css code: table.test{ font-family: Arial, sans-serif; font-size: 11px; width: 100%; CURSOR: default; border: 1px solid silver; border-collapse: collapse; padding: 3px; } table.aside{ font-family: Arial, sans-serif; font-size: 11px; width: 100%; CURSOR: default; border: none; padding: 3px; } th.aside, tr.aside, td.aside{ font-family: Arial, sans-serif; font-size: 11px; CURSOR: default; border: none; padding: 3px; } my nested tables, which overflows the width of the screen in ie 6 , but works on ie 7 and firefox. echo "<table class='aside' cellpadding='0px' cellspacing='0px' border='0'><tr><td width='80%' >$table1</td><td width='20%'>$table2</td></tr></table>"; Alright guys. I'm working on a horizontally scrolling news ticker type deal. I have two divs on screen, and the rest are off screen using the overflow:hidden on the parent. The divs are set to 466px wide, float:left, and the parent is 932px wide. Since div 3 and up are all 466px, they drop down below the other two. Not a problem, since the overflow is set. However the jquery animation does not reset the reference point when it scrolls, so the divs stay in this arrangement. Is there any way to keep them all lined up next to eachother horizontally? I'm wondering if there is a CSS solution first, before I get creative with the jQuery. I could easily set it for the next two divs to display right, but there is no telling how many divs there will be and it would quickly become a nightmare trying to account for all possibilities. Here is the current CSS I'm using: Code: #test {background-color:#F1F2F2; width:932px; padding:10px; margin-top:20px;overflow:hidden; display:inline-block; height:400px;} #newswrapper {height:100px; position:relative; left:0px;} #newswrapper div {float:left; position:relative; background:#CCC; width:466px; height:400px;}
Hi I have a vertical menu containing main and subcategories. subcats are hidden, when a main cat is clicked then subcats are displayed, all is done with css no javascript. here is the structure, Code:
<ul id="nav">
<li class="level item-1 nav-clothes active parent">
<a href="/clothes.html"><span>Clothes</span></a>
<ol class="level item-1">
<li class="level1 nav-clothes-shirts">
<a href="/clothes/shirts.html"><span>Shirts</span></a>
</li>
<li class="level1 nav-clothes-tanks">
<a href="/clothes/tanks.html"><span>Tanks</span></a>
</li>
<li class="level1 nav-clothes-raincoats">
<a href="/clothes/raincoats.html"><span>Raincoats</span></a>
</li>
<li class="level1 nav-clothes-dresses">
<a href="/clothes/dresses.html"><span>Dresses</span></a>
</li>
<li class="level1 nav-clothes-swimsuits">
<a href="/clothes/swimsuits.html"><span>Swimsuits</span></a>
</li>
<li class="level1 nav-clothes-outerwear last">
<a href="/outerwear.html"><span>Outerwear</span></a>
</li>
</ol></li>
<li class="level item-2 nav-beds parent">
<a href="/beds.html"><span>Beds</span></a>
here is my all related css, external css file, Code:
#nav { font-size:13.5px; color:#000; padding:0 0 0 0; margin:-20px 0 0 0; width:100%;}
/* All Levels */
#nav li { text-align:left; }
#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav li li.parent {}
/* 0 Level */
#nav li { clear:both; position:relative; display:block; }
#nav li.active a { color:#000; text-decoration:underline; }
#nav a { float:left; padding:2px 14px 11px 0px; color:#000; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#000; text-decoration:underline; }
#nav .item-1 ul a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616;}
#nav .item-2 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-3 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-4 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-5 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-6 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-7 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-8 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-9 ul a {padding:0 0 0 0; color:#1A1616;}
#nav ul li a { padding:0 0 0 0;}
#nav ul li a:hover { padding:0 0 0 0; text-decoration:none;}
/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding:6px 0 0 29px; background:#FFFFFF; border-left:1px solid #E8E7E7; border-right:1px solid #E8E7E7; }
#nav ul li.over {}
#nav ul li.last { background:#FFFFFF; padding-bottom:15px; }
#nav ul a,
#nav ul a:hover { float:none; padding:0;}
#nav ul li a { font-weight:normal !important; }
/* 2nd level */
#nav ul { position:absolute; width:199px; top:23px; left:-10000px; background:url(../images/bg_sub_menu.gif) 0 0 no-repeat; padding:23px 0 0 0; border-bottom:1px solid #E8E7E7; margin-left:100px; }
/* 3rd+ Level */
#nav ul ul { top:5px; background:none; padding-top:0; border-top:1px solid #E8E7E7; }
/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }
#nav ul li a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616; }
#nav ul li a:hover { color:#1A1616 !important; }
#nav ul span,
#nav ul li.last li span { padding:3px 15px 4px 15px; }
#nav li ul { display:none; }
#nav li:hover ul{display: block; }
#nav ol { margin-left:5px; margin-bottom:10px; }
#nav ol li { padding-left:15px; background-image:url(../images/ol_bg_lines.gif); font-size:12px; font-weight:normal; }
#nav ol li.last { background-image:url(../images/ol_bg_lines_last.gif); }
inline css code to overwrite the default behavior for target page Code:
ul#nav {margin : 0 10px; margin-bottom:0px;}
ul#nav li {height : 14px; margin-top : 5px;}
ul#nav li a, ul#nav li a:hover {}
ul#nav ul {margin-top : -8px; background : url(/images/drop-ul-bgr.gif) no-repeat; }
ul#nav ul li {height : auto; margin-top : auto;}
ul#nav ol li a { padding:0px; }
ul#nav ol li { margin:0px; padding:5px 0 5px 15px; }
ul#nav ol { border:#ccc 1px solid; padding-bottom:30px; }
I am attaching a screenshot to explain the problem, i have given border to the OL to explain the problem. In the screenshot the pink arrow is pointing the place, BEFORE BEDS, where i want to give more space but the child list keeps overlapping rather than pushing the parent list downwards. any help is much appreciated I am really stuck with this. Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks. See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width? [EDIT] Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum: http://forums.devshed.com/web-desig...e7t-403266.html Ok. Here's the problem: I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div? Css code: Code:
/* left bar: */
#navBar{
width: 185px;
float: left;
}
/* right bar: */
#rightModulesContainer {
width: 130px;
margin: 0;
padding: 0px 0px 0px 10px;
float: right;
}
/* center content: */
#content{
padding: 0px 5px 0px 0px;
margin-top:0;
margin-bottom:0;
margin-left:4px;
margin-right:0px;
float: left;
text-align:left;
/*display: inline;*/
}
/* contained in #container: */
#dataGridContainer{
margin: 0;
padding-bottom: 10px;
min-width:360px;
}
.categoryGridStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #000000;
width:100%;
}
and here is the layout of the divs: Code: <div id="navBar">left navigation bar here (tree view)</div> <div id="rightModulesContainer">right side bar here</div> <div id="content"><div id="dataGridContainer">datagrid here</div></div> Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of... Hello, (please also see attached/uploaded style sheet) I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH. How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)? Code: <link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css"> TEST #1 <table class="menu" border=1 CELLPADDING=2> <tr> <td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td> <td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td> </tr> </table> <P> TEST #2 <table class="menu" border=1 CELLPADDING=2> <tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr> <tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr> </table> I don't think I've quite grasped the idea of CSS yet?!?! Any help/pointers would be appreciated. Thanks, Andy I have a header div with a background image - it's basically a pair of hands holding a banner - the arms extending to the sides of the window. I'm trying to work it so that, no matter how wide or thin the window, the arms will always extend to the sides. So when you make it smaller, the image will disappear beyond the viewing window. This happens automatically on the right-hand side, but the image is stopping it on the left. Is there a way to set a min-width, which is smaller then the image itself, so that when the window is shrunk the image starts to disappear on either side until it reaches the min-width? I'm trying to get it so the arms will disappear and stop at the hands. Or can anyone suggest an alternative solution? I tried to do it with background and header image, with the arms on the background, so when the top image moves it looks like the arms move with it. That worked great until I started using a patterned background. Full width: |---------------------------------------| |AAAAAAAAHHH BBBBBBBBBBBBBB HHHAAAAAAAAA| |---------------------------------------| Shrunk width: ------- |------------------------| -------- AAAAAAA |AHHH BBBBBBBBBBBBBB HHHA| AAAAAAAA ------- |------------------------| -------- Grey bit outside window edge. | Window side A Arms H Hands B Banner I hope that makes sense. I expect there's an easy solution but I've been trying to figure it out for several hours and could do with someone else's perspective. Thanks. I have a page with an ASP.NET Gridview on it...this Gridview is located in a child DIV inside a parent DIV. That Gridview can often go wider than the parent DIV width set. In IE6 the MAINDIV (Parent DIV) would expand to fit the expanded Gridview contained within the child DIV. In IE7 the DIV will not expand so it overlaps the DIV and looks bad. I want that MainDiv to dynamically grow with the child DIV width, like it did in IE6. Please see my code below. I want the MainDiv to remain ~800px unless it is pushed out further. Thanks for any ideas on a fix for this. Whenever I try min-width it just blows the parent DIV out to 100% screen size. Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<body style="width:100%;text-align:center;background-color:#68838B" onload="loadpage();">
<form id="frmMain" runat="server">
<div id="mainDiv" style="position:relative;top:10px;width:800px;height:auto; background-color:white;border:solid 1px #666666">
<div id="contentDiv" style="text-align:left;width:797px; padding:3px 3px 3px 3px;">
<asp:ContentPlaceHolder ID="contentBody" runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>
Code: <tr class='firstrow'> <th width=10%><strong>Rank</strong></th> <th width=40%><strong>Site</strong></th> <th width=25%><strong>In</strong></th> <th width=25%><strong>Out</strong></th> </tr> that makes it exactly the way i want, but when i switch to Code: <tr class='firstrow'> <th style='width=10%'><strong>Rank</strong></th> <th style='width=40%'><strong>Site</strong></th> <th style='width=25%'><strong>In</strong></th> <th style='width=25%'><strong>Out</strong></th> </tr> it is sized naturally. |
|||||||