|
CSS - Nested Div Question
Hi All,
I'm fairly new to CSS and have what is probably a basic question. I'm trying to format a class and having issue. Please look at my html and the css code below: Code: div class="node"> <div class="taxonomy"></div> <div class="content"> <p>Photo Gallery Body Here</p> <div class="field field-type-filefield field-field-image"> <div class="field-items"> <div class="field-item odd"> <a href="/sites/default/files/imagecache/Full/IMG_0275_0.JPG" rel="lightbox[field_image][Pic 1<br /><br /><a href="/node/48" id="node_link_text" class="active">View Image Details</a> - <a href="/sites/default/files/IMG_0275_0.JPG" target="_blank" id="download_link_text">Download Original</a>]"><img src="/sites/default/files/imagecache/Thumbnail/IMG_0275_0.JPG" alt="Pic 1" title="Pic 1" width="125" height="125" /></a> </div> </div> </div> </div> </div> </div> </div> Code: .node .field .field-type-filefield .field-field-image .field-items .field-item .odd
{
border: 1px solid #fff;
width: 125px;
height: 125px;
margin-top: 35px;
margin-right: 28px;
float: left;
}
The only way I can format the "field-item odd" class but naming the css class .odd. However, this effects other parts of the site. How do I target this specific class properly? Thanks! Similar TutorialsI am building a page that uses PHP and does a MySQL select to display content on the page. The page uses nested divs. I had not realised this at my design phase, but items that it displays below the side-menu do not display properly. I have tried using float:left but it doesn't seem to do the trick. Here is the page and code in question (view in internet explorer only): http://tweedledee.dyc.edu/~tpx/test/tpx7c/index.php PHP Code: <div id="NewsOuter"> <div id="NewsTitle"><a href="viewArticle.php?id=4">News Test</a></div> <div id="NewsInner"><img src="http://tweedledee.dyc.edu/~tpx/test/tpx7c/images/site/notavail100.jpg" align="left">this is the news and stuff</div> The above is the generated code for each item it pulls from the database. This should be a sufficient model to base it on. Here is the CSS code. Content is the name of the Div that the News sections and the menu sit inside. I left out the menu CSS, please inform me if it is also needed. PHP Code: #content { background:#eee; width:750px; border:1px solid #000; text-align:left; } #Content #NewsOuter { display: block; float: left; height: 162px; width: 602px; } #NewsTitle { font-family: Arial, Helvetica, sans-serif; text-decoration: none; float:left; } #NewsTitle a { display: block; border:1px solid; background: #FFFFFF; color: #000000; height:20px; font-weight: bold; text-align:left; text-decoration: none; padding: 1px 10px; } #NewsTitle a:hover { color: #999999; text-decoration: none; } #NewsInner { display: block; float: left; width: 600px; height: 102px; font-family: Arial; font-size: 10px; font-style: normal; margin-top: 0px; vertical-align: top; } #NewsBottom { display: block; float: left; width: 600px; height: 20px; padding: 1px 10px; Font-Family: Arial; Font-Size: 9px; } Any idea what I can do to #NewsTitle to make it always align to the left? It SHOULD appear as it does next to the menu. Unfortunately the menu is also in a div so there is no hard edge along its left border for the div to stop. And yes, I am attempting to build a CMS from the ground up. No pre-built CMS that I have tried meet my requirements. Boy is it hard/fun! I'm having a problem with my links becoming deactive within some nested elements. I followed some instruction on creating rounded corner boxes via a tutorial by Andy Budd. Anyway, it all works great except when I wrap link tags around a few pieces of copy. I'm a bit of a beginner still so maybe this is a simple fix but I've spent over a days worth of time now trying to figure it out on my own and can't seem to get it. Just to clear this up, the links work everywhere on the page outside of the "box" element I'll list below and I've double and triple checked that the link within the "box" element is written correctly and it is. The CSS even finds the link and styles it correctly, however, the mouse function seems to be disabled. Does this all make sense? Below is the CSS, any help would be greatly appreciated... This is the code that creates the box and it works correctly... Code: .box {
width:831px;
background:url(../imgs/box-spacer.gif) repeat-y;
}
.box h1 {
background:url(../imgs/box-top.gif) no-repeat left top;
padding-top:40px;
font-weight: normal;
}
.box .last {
background:url(../imgs/box-bottom.gif) no-repeat left bottom;
padding-bottom:60px;
}
.box h1, .box p {
padding-left:60px;
padding-right:60px;
}
And this is the code I used to test that the page is seeing it as a link... Code: .box h1 a:link {
color:#00CCFF;
}
.box h1 a:hover {
color: #FF0066;
}
It changes the color correctly but the hover doesn't work and if you click, it doesn't link you anywhere. Again, the link is written correctly on the page. Can anyone help please? I appreciate it. well if i dont put any css firefox does this with nested link: Code:
link1
link2
sublink1
IE doesnt indent the sublink. so is there any hack available? PS>i tried using margin-left but by doing that firefox indents it even further so it looks bad? cheers Hi everyone. I've come pretty close to solving this problem but certain problems keep showing themselves. Here's the mockup menu I'm trying to recreate. Current CSS: Code:
.interior #sidebar ul{
padding:20px 0 5px 0px;
list-style:none;
}
.interior #sidebar ul.outerUL {border-bottom:1px solid white;}
.interior #sidebar ul.middleUL{border-top:1px solid white; margin:0; padding:5px 0 0 0;}
.interior #sidebar ul.innerUL{padding:5px 0;}
.interior #sidebar ul li a {padding:5px 0 5px 0; margin:0;}
.interior #sidebar ul li.outerLI a{
border-top:1px solid white;
padding:0 0 0 20px;
color:#003371;
width:100%;
}
.interior #sidebar ul li.middleLI a{
padding-left:25px;
color:#3f699d;
}
.interior #sidebar ul li.innerLI a{
padding:2px 0 2px 30px;
color:#0f8b53;
}
.interior #sidebar a {text-decoration:none;}
Current HTML: Code:
<div id="sidebar">
<ul class="outerUL">
<li class="outerLI"><a href="#">Our Misssion</a></li>
<ul class="middleUL">
<li class="middleLI"><a href="#">Quality</a></li>
<ul class="innerUL">
<li class="innerLI"><a href="#">Dedication</a></li>
<li class="innerLI"><a href="#">Perseverance</a></li>
</ul>
<li class="middleLI"><a href="#">Choice</a></li>
<li class="middleLI"><a href="#">Value</a></li>
</ul>
<li class="outerLI"><a href="#">Parkland Timeline</a></li>
<li class="outerLI"><a href="#">Management Bios</a></li>
</ul>
</div>
I've tried multiple different ways of acheiving the desired look, but each one has a certain problem with it. This is the best I can get while still keeping each link the correct color and font size. I'd be all set (I can deal with the padding later) if I could get the white bar above each of the top-level links to extend across the whole sidebar div. Thanks for taking the time to read my question If I have <div class="main"> something here <div class="sub1"> something here that has more height than the above div</div> </div> Shouldn't the height of main be stretched to fit the height of sub1 where sub1 has a greater height than main. Does it have to be display: block; or float: left; ? Brad I am trying to create a layout that uses Nested DIVs, and I may be trying to force it to do something it does not like. I will post the code below, but here is an image that displays the layout. Note that Div3 and Div1 are fine, and Div 2 is fine, and the top DIV that is inside of that, #4, is where it needs to be, but the rest of the items just fall in below it. I would really not wish to use tables, but I am trying to do something that can only be done with tables? Page Code: Code: <div id="content">
<div id="usercp">
<?php include("scripts/yourmother.php"); ?>
</div>
<br />
<div id="NewsOuter"><div id="NewsTitle"><a href="viewArticle.php?id=1">ArticleTitle</a></div>
<div id="NewsInner"><div id="NewsImage"><img src="http://tweedledee.dyc.edu/~tpx/test/tpx7c/images/site/notavail100.jpg"></div>
<div id="NewsShortDesc">ArticleShort</div></div>
<div id="NewsBottom"><div id="NewsIndexDate">ArticleDate</div>
<div id="NewsIndexUser">ArticleUser</div></div>
<div style="clear:both;"></div>
</div>
</div>
And here is the relevant CSS (not counting the Content (div 1) or UserCP (div 3) Code: #Content #NewsOuter {
display: block;
float: left;
height: 162px;
width: 602px;
}
#NewsTitle {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
#NewsTitle a {
display: block;
border:1px solid;
background: #FFFFFF;
color: #000000;
height:20px;
font-weight: bold;
text-align:left;
text-decoration: none;
padding: 1px 10px;
}
#NewsTitle a:hover {
color: #999999;
text-decoration: none;
}
#Content #NewsOuter #NewsInner {
width: 602px;
height: 100px;
}
#Content #NewsOuter #NewsInner #NewsImageIndex {
display: block;
float: left;
width: 100px;
height: 100px;
border: 1px solid black;
}
#Content #NewsOuter #NewsInner #NewsShortDesc {
width: 500px;
height: 100px;
font-family: Arial;
font-size: 10px;
font-style: none;
}
#Content #NewsOuter #NewsBottom {
width: 602px;
height: 20px;
}
#Content #NewsOuter #NewsBottom #NewsIndexDate {
display: block;
float: left;
width: 100px;
border: 1px solid;
border-color: #666666;
font-weight: bold;
font-family: Arial;
}
#Content #NewsOuter #NewsBottom #NewsIndexUser {
display: block;
float: right;
width: 500px;
border: 1px solid;
border-color: #000000;
Font-Family: Arial;
Font-Style: Italic;
Font-Size: 9px;
}
Also to note, the 3 items that appear below the image are not getting their formatting. Should I just use tables instead? So... I have two versions of this page, one that validates, and another that doesn't. Problem is that the invalid one looks correct! This is because I got the css working before i discovered the invalid code... The offending code involves a nested ul in my nav. The invalid, looking good version looks like this: Code: <ul> li / li / <ul> li / li / </ul> li / </ul> To make it valid, I have to wrap li tags around the nested ul. I've spent gobs of time trying to figure out how to get my styles to work with this new code, but I must be missing something very simple. Here are the urls: invalid & valid Here's the css: Code:
#nav {
width:180px;
background-image:url(/images/moraga_logo.png);
background-repeat:no-repeat;
float:left
}
#nav ul.l1 {
width:179px;
position:relative;
top:100px;
margin:0;
padding:0;
}
#nav ul.l2 {
width:179px;
margin:0;
padding:0;
}
#nav ul.l1 li {
list-style:none;
border-top:1px solid #FFFFFF;
height:21px;
font-family:geometric, lucida, verdana, sans-serif;
font-size:.8125em;
font-weight:normal;
text-transform:uppercase;
letter-spacing:.125em;
text-align:right
}
#nav ul.l2 li {
text-transform:lowercase;
border:none;
font-size:.6875em;
}
#nav li.active a {
color:#A22B38;
text-decoration:none
}
#nav li.active a:hover {
color:#FFFFFF;
text-decoration:none
}
#nav a:link {
color:#000000;
text-decoration:none
}
#nav a:visited {
color:#000000;
text-decoration:none
}
#nav a:hover {
color:#FFFFFF
}
#nav a:active {
color:#000000;
text-decoration:none
}
Thank, in advance, for your generous help! -BBD I am Having a problem with IE6 and DIV's which use blocks to highlight links. The problem is I want to have different colour links. It seems to work OK in FF but not IE 6. Code:
.mainmenu a:link { color: #fff; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #a62a2a; background-position: 180px 0; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; border-bottom: 1px solid #e8aaaa; display: block; }
.mainmenu a:visited { color: #fff; font-size: 11px; font-weight: 600; background-color: #a62a2a; background-position: 180px 0; text-decoration: none; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; border-bottom: 1px solid #e8aaaa; display: block; }
.mainmenu a:active { color: #fff; font-size: 11px; font-weight: 600; background-color: #a62a2a; background-position: 180px 0; text-decoration: none; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; border-bottom: 1px solid #e8aaaa; display: block; }
.mainmenu a:hover { color: #ac4545; font-size: 11px; font-weight: 600; background-color: #f7d4d4; text-decoration: none; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; display: block; }
.submenu a:link { color: #a62a2a; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #ebebeb; background-position: 180px 0; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; border-bottom-color: #a62a2a; border-bottom-width: 1px;x; }
.submenu a:visted { color: #a62a2a; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #ebebeb; background-position: 180px 0; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; border-bottom: 1px solid #e8aaaa; }
.submenu a:active { color: #a62a2a; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #ebebeb; background-position: 180px 0; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; border-bottom-width: 1px; border-bottom-color: #a62a2a; }
.submenu a:hover { color: #ac4545; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #f7d4d4; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; }
.menutop { color: white; font-size: 12px; font-weight: 600; text-decoration: none; background-color: #cc5252; text-align: left; text-indent: 3px; display: block; width: 180px; height: 24px; vertical-align: middle; }
Code:
<table width="180" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" bgcolor="#f7d4d4">
<div id="mainmenu" class="mainmenu">
<div id="menutop" class="menutop">Menu</div> <a href="#">Products</a>
<a href="support.html">Support</a>
<div id="submenu" class="submenu"><a href="#">Customer Login</a></div>
<div id="submenu" class="submenu"><a href="#">Phi Login</a></div>
<a href="#">Services</a>
<a href="#">Shop</a>
<a href="#">Contact Us</a>
<a href="#">Call Comparison</a>
</div>
</td>
</tr>
</table>
I am trying to figure out how to use the clear functionality nested within divs. I am already using floats to position 3 columns for the layout, but would like to use the clear functionality to help with form placement in the second column. The problem is, even though it is nested with a div dedicated to the center column, it still uses the right and left column to judge clears...thus its all pushed below the right and left column. Any ideas? I am at my wits end! Some of my nested divs cause FF throw up scroll bars...and not all the time. If I hit refresh, they disappear. Everything validates: Both my css and xhtml. I have tried every allowed value for overflow to no avail. There are no floated images either to vlear; just text. Give it a look in FF and see: My Site My css I've found that nesting tables works very well for getting data aligned properly. I'm having serious trouble doing the same thing with css. For example, I can easily create a table with 2 col, 2 rows, then put another table in each box and do get things just the way I want. I can't figure out a way to do that with css. Is it possible? Should I even try? Thanks! First off - I'm not even sure if its technically allowed or correct but I am nesting 3 <div>'s in one container <div> (I assume this is ok - quite positive) So when positioning nested <div>'s I am running into problems. Here is the link http://www.nextwavehosting.net/new (looking at the bottom bar with the website thumbnail, info, and the word test) Here is a snippet of code... The container... Code:
div.bottomInfo {
position: absolute; top: 510px; left: 15px;
width: 723px;
height: 190px;
z-index: 6;
background-color: #EDEBE6;
}
The nested <div>'s Code:
div.featured {
position: relative; top: 15; left: 252;
width: 150px;
height: 114px;
z-index: auto;
}
div.featInfo1 {
position: relative; top: 20; left: 252;
width: 150px;
height: 35px;
z-index: auto;
}
div.featInfo2 {
position: relative; top: -32; Left: 670;
z-index: auto;
}
the first nested <div> is positioned exactly how it should... the 2nd <div> is correct horizontally but vertically i would assume that it is still being positioned relative to the container... meaning that the second <div>'s top: 20; should be more like top: 140; to position it just below the first <div> yet the top: 20; works... the 3rd one is way off and is nearly impossible to position correctly... Any helpful tips or advice on this one? hmmmm i want a nested list for a navigation menu, vertical on the left side all buttons aligned with 1px margin in between ok it almost works but i cant get rid of the extra list item that contains the nested list how does it not show itself I'm having some cross browser CSS issues (what a surprise.. ). Things render fine in IE7, but in FF (2.0.x) it seems that the style for <div id="shell"> just seems to stop. It looks <div class="content_shell"> is overflowing outside of its parent, but after using the 'Outline current element' tool in the web developer tool bar (very cool feature!) it looks like the parent div is being expanded but it's style is not. Basicly the white background and borders of "shell" don't continue and the content from "content_shell" just looks overflowed onto the page background. Very strange and again it's FF only. Here is the basic setup... html4strict Code: Original - html4strict Code <div id="shell"> <!-- a bunch of other content --> <div id="page_contents"> <div class="content_shell"> <div id="main_content" class="content_box"> Sample main content. </div> <div id="secondary_content" class="content_box"> Sample secondary content. </div> </div> </div> </div>
and here's the related css css Code: Original - css Code #shell { background-position: right top; background-color: #FFFFFF; border-right-style: solid; border-left-style: solid; border-right-width: 2px; border-left-width: 2px; border-right-color: #000000; border-left-color: #000000; width: 700px; height: auto; text-align: left; background-image: none; background-repeat: no-repeat; } #page_contents { width: 100%; height: auto; } .content_shell { width: 680px; height: auto; padding: 10px; font-size: 14px; } #main_content { width: 400px; height: auto; clear: right; float: left; } #secondary_content { width: 250px; height: auto; clear: right; float: left; margin-left: 10px; }
I'm sorry I can't post a link to the page, but it is still only on our intranet and deployed through SharePoint so it cannot be easily replicated on my own server. I would be very grateful for any help offered. The following html and css are displaying very differently between IE7 and Firefox 2. The HTML is Strict verified and the CSS has also been verified. Please help me! I don't mind you telling me an idiot. Just please constructively explain how I'm an idiot and how I can stop being an idiot. Thanks. HTML Document Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head><title>
Kaua'i Historical Society Membership Maintenance
</title><link type="text/css" rel="stylesheet" href="Kauai.css" /></head>
<body>
<form method="post" action="default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEzMjAyNDM1NzdkGAEFEGN0bDAwJExvZ2luVmlldzEPD2QCAmT6FXaep7s2kkgUAi6bmGTUd7hIOw==" />
</div>
<div id="Header">
<a href="(URL address blocked: See forum rules)" title="Kaua'i Historical Society">
<img src="images/mastheadBar.gif" style=" border-style:none;" alt="Kaua'i Historical Society" /></a></div>
<div id="Content">
<div class="containerparent">
Manage members
<div id="membercontainer">
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlCreateMember" title="Create Member Record" href="CreateMember.aspx"><img title="Create Member Record" src="images/businessman_add.png" alt="Create Member Record" style="border-width:0px;" /></a><br />
Create member</div>
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlFindMember" title="Find Member Record" href="FindMember.aspx"><img title="Find Member Record" src="images/businessman_find.png" alt="Find Member Record" style="border-width:0px;" /></a><br />
Find member</div>
</div>
</div>
<p>
</p>
<div class="containerparent">
Manage pledge drives
<div id="pledgedrivecontainer">
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlCreateDrive" title="Create Pledge Drive" href="CreateDrive.aspx"><img title="Create Pledge Drive" src="images/businessman_add.png" alt="Create Pledge Drive" style="border-width:0px;" /></a><br />
Create pledge drive</div>
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlFindDrive" title="Find Pledge Record" href="FindDrive.aspx"><img title="Find Pledge Record" src="images/businessman_find.png" alt="Find Pledge Record" style="border-width:0px;" /></a><br />
Find pledge record</div>
</div>
</div>
<p>
</p>
<div class="containerparent">
Manage pledge levels
<div id="pledgelevelcontainer">
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlCreateLevel" title="Create Pledge Level" href="CreateLevel.aspx"><img title="Create Pledge Level" src="images/businessman_add.png" alt="Create Pledge Level" style="border-width:0px;" /></a><br />
Create pledge level</div>
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlFindLevel" title="Find Pledge Level" href="FindLevel.aspx"><img title="Find Pledge Level" src="images/businessman_find.png" alt="Find Pledge Level" style="border-width:0px;" /></a><br />
Find pledge level</div>
</div>
</div>
<p>
</p>
<div class="containerparent">
Manage letters
<div id="lettercontainer">
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlGenerateThankYou" title="Generate Thank You Letters" href="GenerateThankYou.aspx"><img title="Generate Thank You Letters" src="images/businessman_add.png" alt="Generate Thank You Letters" style="border-width:0px;" /></a><br />
Generate thank you letters</div>
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlGenerateReminder" title="Generate Reminder Letters" href="GenerateReminder.aspx"><img title="Generate Reminder Letters" src="images/businessman_find.png" alt="Generate Reminder Letters" style="border-width:0px;" /></a><br />
Generate reminder letters</div>
</div>
</div>
</div>
<div id="Menu">
Welcome
<span id="ctl00_LoginView1_lnUser">fred</span>.<br /><br /><span style="font-size:xx-small;">Admin enabled</span>
</div>
<div id="Search">
Search here</div>
</form>
</body>
</html>
CSS File Code: body
{
margin: 0px;
padding: 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #333333;
background-color: white;
}
h1
{
margin: 0px 0px 15px 0px;
padding: 0px;
font-size: 28px;
line-height: 28px;
font-weight: 900;
color: #cccccc;
}
p
{
font: 11px/20px verdana, arial, helvetica, sans-serif;
margin: 0px 0px 16px 0px;
padding: 0px;
}
#Content > p
{
margin: 0px;
}
#Content > p + p
{
text-indent: 30px;
}
a
{
color: #09c;
font-size: 11px;
text-decoration: none;
font-weight: 600;
font-family: verdana, arial, helvetica, sans-serif;
}
a:link
{
color: #09c;
}
a:visited
{
color: #07a;
}
a:hover
{
background-color: #eeeeee;
}
#Header
{
margin: 50px 0px 10px 0px;
padding: 17px 0px 0px 20px; /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height: 73px; /* 14px + 17px + 2px = 33px */
border-style: solid;
border-color: black;
border-width: 1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height: 11px;
background-color: #eeeeee; /* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style declaration. The incorrect IE5/Win value is above, while the correct value is below. See (URL address blocked: See forum rules)/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family: inherit;
height: 14px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body > #Header
{
height: 14px;
}
#Content
{
position: absolute;
top: 100px;
left: 150px;
padding: 0px;
}
#Menu
{
position: absolute;
top: 100px;
left: 20px;
width: 100px;
padding: 10px;
background-color: #eeeeee;
border: 1px solid #000000;
line-height: 17px; /* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family: inherit;
font-size: medium;
}
#Search
{
position: absolute;
margin-left:8px;
top: 100px;
left: 500px;
width: 225px;
padding: 10px;
background-color: #eeeeee;
border: 1px solid #000000;
line-height: 17px; /* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family: inherit;
font-size: medium;
}
/* Again, "be nice to Opera 5". */
body > #Menu
{
width: 100px;
}
/* Again, "be nice to Opera 5". */
body > #Search
{
width: 100px;
}
#membercontainer
{
margin-left: 15px;
margin-right: auto;
width: 18.75em;
}
#pledgedrivecontainer
{
margin-left: 15px;
margin-right: auto;
width: 18.75em;
}
#pledgelevelcontainer
{
margin-left: 15px;
margin-right: auto;
width: 18.75em;
}
#lettercontainer
{
margin-left: 15px;
margin-right: auto;
width: 18.75em;
text-align:center
}
#membercontainer .box
{
/*border: 1px solid black;*/
background-color: #ffffff;
color: navy;
float: left;
line-height: 1.5;
margin: 0.5em;
text-align: center;
font-size: xx-small; /*height: 1.5em; width: 1.5em;*/
}
#pledgedrivecontainer .box
{
/*border: 1px solid black;*/
background-color: #ffffff;
color: navy;
float: left;
line-height: 1.5;
margin: 0.5em;
text-align: center;
font-size: xx-small; /*height: 1.5em; width: 1.5em;*/
}
#pledgelevelcontainer .box
{
/*border: 1px solid black;*/
background-color: #ffffff;
color: navy;
float: left;
line-height: 1.5;
margin: 0.5em;
text-align: center;
font-size: xx-small; /*height: 1.5em; width: 1.5em;*/
}
#lettercontainer .box
{
/*border: 1px solid black;*/
background-color: #ffffff;
color: navy;
float: left;
line-height: 1.5;
margin: 0.5em;
text-align: center;
font-size: xx-small; /*height: 1.5em; width: 1.5em;*/
}
/*#membercontainer, #pledgedrivecontainer, #pledgelevelcontainer .box.selected {
background-color: orange;
}*/
.containerparent
{
font-size: medium;
font-weight: bold;
color: navy;
padding: 5px;
border-style: solid;
border-color: navy;
border-width: 1px;
width: 18.75em;
}
Is it psosible to have IF statements with CSS? Example: IF table.length = 500px then bg.image = xx else if table.length < 500px bg.image = xx Thanks I have a div: .gallery{width:95%;margin:0 auto;padding:5px;border:solid 1px black;} and inside I have: .galleryItem{float:left;width:150px;padding:5px;height:150px;border:solid 1px black;} .spacer{clear:both;} Used to give height to the container div. The idea is to create and even sized box for varying jpgs. How do I get the inside divs to space themselves out evenly across the space? AND the get the jpg to align itself in the middle of its containing div? Thanks. I have been using absolute positioning to place divs within a specific container div. I noticed that when the children divs expand with content, the parent div doesn't stretch to contain them. Am I missing something? I'm not looking for overflow:auto as my title may suggest... thanks for the help! EDIT: I have come to realize that using positioning breaks the natural "flow" of elements, which could be why the parent div wont stretch. So maybe I should ask- how do I regain the flow for the rest of the site, after the positioned divs are closed? Hi All, I have the following html: Code: <div class="businessItem">
<div class="bizIcon">
<img src="GetImage.axd?type=1&business=3" alt="My Biz" />
</div>
<div class="bizInfo">
<a href="business.aspx?business=3">
My Biz
</a>
<p>
my biz
</p>
</div>
<div class="bizContact">
<a href="www.myweb.com">www.myweb.com</a><br />
<a href="mailto:roman.rodov@gmail.com">roman.rodov@gmail.com</a><br />
90294767
</div>
</div>
<div class="businessItem">
<div class="bizIcon">
<img src="GetImage.axd?type=1&business=4" alt="My Second Business" />
</div>
<div class="bizInfo">
<a href="business.aspx?business=4">
My Second Business
</a>
<p>
My second business
</p>
</div>
<div class="bizContact">
<a href="www.myweb.com">www.myweb.com</a><br />
<a href="mailto:roman.rodov@gmail.com">roman.rodov@gmail.com</a><br />
90294767
</div>
</div>
And the following CSS that applies: Code: div.businessItem
{
background-color: #66cc66;
margin-bottom: 10px;
width: 100%;
padding: 10px 10px 10px 10px;
}
div.bizIcon
{
float: left;
width: 64px;
margin: 0px 10px 0px 0px;
}
div.bizInfo
{
float: left;
width: 256px;
}
div.bizContact
{
float: left;
width: 256px;
}
now the problem is that it looks like crap in FF2 and looks ok in IE7 (haven't tested IE6 yet). The idea is to have a full width div with 3 divs inside side by side. It looks *completely* different in FF2. Does anyone have any ideas? (I'm pretty new to CSS, just learning). |
|||||||