|
CSS - Looking To Migrate From Nested Tables To Css
I have a website full, and I mean FULL of nested tables. It was designed by my webguy before he had an understanding of CSS and div tags. I've decided to take on the seemingly monumental task of converting my site to CSS (mainly because I'm implementing Wordpress and I figure now is a good time to get current, clean, and tidy).
I haven't found any good tutorials or sites that explain how to make the transition, or for that part, offer a good explanation of how to use CSS for positioning and site layout. I was hoping some of you guys might have some recommendations. Right now I have tables within tables within tables within tables next to tables within tables next to tables within more tables and more tables..... et cetera. And I'm of course trying to do this right away and in as little time as possible Thanks for any suggestions guys Similar TutorialsI'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! i have nested tables but table inside is inheriting properties from table outside. i have written classes for both tables in css and i dnt want inside table to inherit. what can i do? Hi, I have used bottom-border: 1 on my links and the problem I am having is making sure that these borders are not displayed on images which have <a "somelink"> </a> wrapped around them. I have used #content a > img { border: 0; } and this seems to have solved the problem however when I have an image link nested into a table the border reappears and I have tried everything to get it to remove it. If anyone else knows why it reappears when nested in tables please let me know how I can fix it. Regards, Graham Hi, I'm working on this webpage http://www.dkwebconsultants.com/jaclo/subnav.php?SubGroupID=24 and it works fine in Mozilla. However, in IE there is a thin white space between the td that says "handshowers" in it and the blue above as well as the the left side of the page. The same thing for the slightly lighter td below it and the left side of the page. I've been reading and error checking all day, but i can't figure this one out. the php/html code is as follows: Code:
<table class="nicetable">
<?php include "header.html" ?> <!-- This is one table row, the table has two td's-->
<tr>
<td height="410">
<table class="nicesubnavtable">
<tr>
<td id="subnavtop">
<script language="JavaScript1.2" type="text/javascript">
<!--
myTest.writeMenuBar();
//-->
</script>
</td>
</tr>
<tr>
<td id="subnavbottom">
<?php
$sql = "SELECT * FROM SubGroup WHERE GroupID = '$GroupID'";
$result = mysql_query($sql) or die (mysql_error()."<br />Couldn't execute query: $sql");
$num_results = mysql_num_rows($result);
echo "<br>";
for($i=0; $i < $num_results; $i++){
$row = mysql_fetch_array($result);
$tempSubGroupID = $row['SubGroupID'];
$tempName = stripslashes($row['Name']);
if($SubGroupID == $tempSubGroupID){
echo "<a id='snsgnamesblue' href='subnav.php?SubGroupID=$tempSubGroupID'>$tempName</a>";
}
else{
echo "<a id='snsgnames' href='subnav.php?SubGroupID=$tempSubGroupID'>$tempName</a>";
}
}
?>
</td>
</tr>
</table>
</td>
<td id="mainareanav">
<?php
$sql1 = "SELECT * FROM IndividualItem WHERE SubGroupID = '$SubGroupID'";
$result1 = mysql_query($sql1) or die (mysql_error()."<br />Couldn't execute query: $sql");
$num_results1 = mysql_num_rows($result1);
for($i=0; $i < $num_results1; $i++){
$row = mysql_fetch_array($result1);
$tempItemID = $row['ItemID'];
$tempNickName = stripslashes($row['NickName']);
$filename = stripslashes($row['ThumbImageName']);
$filenamearray = explode('.', $filename);
$fnameNoExt = $filenamearray[0];
//print the nickname, if no nickname print the itemID
if($tempNickName == "") echo "<a id=\"itemnames\" href=\"product.php?itemID=$tempSubGroupID\" onMouseover=\"changeit('pic1','$fnameNoExt');\" onMouseout=\"changeit('pic1','image_off');\">$tempItemID</a> \n";
else echo "<a id=\"itemnames\" href=\"product.php?itemID=$tempSubGroupID\" onMouseover=\"changeit('pic1','$fnameNoExt');\" onMouseout=\"changeit('pic1','image_off');\">$tempNickName</a> \n";
}
//<td id="subnavright">
//<img src="images/thumb/blankthumb.jpg" id="thumb" name="pic1">
//</td>
?>
</td>
</tr>
<?php include "footer.html" ?> <!-- This is three table rows, public links, user links, search and contact-->
</table>
The relevant CSS code is: Code:
body {
font-family : Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0
}
.nicetable {
border-collapse:collapse;
}
.nicesubnavtable {
border-collapse:collapse;
width: 200px;
margin: 0px;
padding: 0px;
border-bottom: 2px solid #BAB6B7;
}
#subnavbar {
vertical-align: top;
}
#subnavmiddle {
background-color: white;
width: 220px;
height: 410px;
vertical-align: top;
padding-left: 15px;
}
#subnavright{
width: 240px;
vertical-align: top;
border-right: 1px solid #797D7E
}
#subnavtop{
background-color: #F3D891;
height: 60px;
width: 185px;
border-top: 2px solid #F3D891;
border-left: 2px solid #F3D891;
}
#subnavbottom{
background-color: #FAE1A8;
height: 350px;
width: 185px;
padding-right: 15px;
border-left: 2px solid #FAE1A8;
vertical-align: top;
}
I'm using tables for the layout and css for the style. I've tried many variations on table layout and haven't come up with anything. If anyone has any ideas, please let me know. Thanks, dk 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 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>"; Should I or should I not learn more about coding when I build my page using Dreamweaver anyways and it looks and functions fine. I am stuck wit the issue of doc types in my pages which has prevented me to make a center middle design page and had to remove the doc type code on all my websites so that the page content will end up at centre middle. The only solution I have been offered was to use CSS but I have so many old sites that converting the sites I have built to CSS would be too time consuming and not worth it. Anyone have any other better ideas? I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. 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></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
document.getElementById("nav" + num).style.paddingTop = '0px'
document.getElementById("nav" + num).style.paddingBottom = '0px';
document.getElementById("nav" + num).style.borderTopWidth = '10px';
document.getElementById("nav" + num).style.borderBottomWidth = '10px';
}
function navoff(num) {
document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
document.getElementById("nav" + num).style.paddingTop = '8px'
document.getElementById("nav" + num).style.paddingBottom = '8px';
document.getElementById("nav" + num).style.borderTopWidth = '2px';
document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>
</head>
<body>
<div class="main">
<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>
<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
padding-right: 4%;
padding-left: 4%;
padding-top: 30px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #000000;
background-color: #EEEEEE;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
.main {
background:#FFFFFF;
border: 10px solid #36393D;
width: 89%;
padding: 5%;
}
.nav {
padding: 8px;
background-color: #C3D9FF;
vertical-align: middle;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #36393D;
cursor:pointer;
border: 2px solid #36393D;
}
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 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 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. 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 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? 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 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 html: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(...)"> <html xmlns="(...)">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="stylesheet,css" />
<title>Test page.</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div id="main">
<!--- <object type="application/x-shockwave-flash" data="../Graphics/Site/site-banner-top,swf" width="800" height="300"> </object> !-->
<div id="maintop" ></div>
<div id="mainbody">
<div id="testleft">
<div id="leftpaneltop"></div>
<div id="leftpanelbody"><p> test</p> </div>
<div id="leftpanelbottom"></div>
</div>
<div id="test_right">
<div id="rightpaneltop"> </div>
<div id="rightpanelbody"> test</div>
<div id="rightpanelbottom"></div>
</div>
</div>
<div id="mainbottom"></div>
</div>
<script type="text/javascript"> <!-- swfobject.registerObject("FlashID"); //--> </script>
</body>
</html>
css: Code:
@charset "utf-8"; /* CSS Document */
body{
background-color:#569753;
padding:0px;
width:800px;
margin-top:0px;
margin-left:10%;
}
#main{
background-image:url(../Graphics/Site/body-bg,png);
background-repeat:repeat-y;
width:800px;
position: relative;
padding:0px;
}
#maintop{
background-image:url(../Graphics/Site/body-top,png);
width:800px;
height:50px;
position:relative;
margin-top:0px;
}
#mainbody{
background-image:url(../Graphics/Site/body-bg,png);
background-repeat:repeat-y;
position:relative;
width:800px;
margin-top:50px;
}
#mainbottom{
background-image:url(../Graphics/Site/body-bottom,png);
position:relative;
width:800px;
height:50px;
padding:0px;
}
#leftpaneltop{
background-image:url(../Graphics/Site/panel_left_top,png);
background-repeat:repeat-x;
background-color:#99cc99;
position:relative;
width:200px;
height:25px;
}
#leftpanelbottom{
text-align:left;
background-image:url(../Graphics/Site/panel_left_bottom,png);
width:200px;
height:21px;
padding:0;
position:relative;
}
leftpanelbody{
font:Verdana, Geneva, sans-serif;
width:200px;
text-align:left;
text-shadow:#000;
color:#FFF;
margin-top:auto;
position:relative;
}
#testleft{
background-color:#569753;
position:relative;
padding:0;
margin-left:10px;
width:200px;
height:inherit;
}
#test_right{
position:relative;
padding:0px;
margin-left:30%;
margin-top:-200px;
background:#000;
width:508px;
}
#rightpaneltop{
background-image:url(../Graphics/Site/right_panel_top,png);
background-color:#000;
width:508px;
height:37px;
margin-top:0px;
position:relative;
}
#rightpanelbody{
background-image:url(../Graphics/Site/right_panel_middle.png);
width:508px;
position:relative;
}
#rightpanelbottom{
background-image:url(../Graphics/Site/right_panel_bottom,png);
position:relative;
width:508px;
height:25px;
}
p{
font:Verdana, Geneva, sans-serif;
font-size:12px;
font-style:normal;
color:#FFF;
}
Hope the above scripts can be viewed easily. I just started using css, and for some reason I can't get this simple template to function in Mozilla Firefox. I don't know how nested divs behave, but it's really frustrating. The problem is that i have two main divs within one encompassing div. The encompassing div is supposed to expand in height based upon the height and/or position of the nested two divs, but it only expands based one of these nested divs. These nested divs have divs inside them too. This only happened in mozilla firefox. In IE it works. I'm not using floats or anything. I don't have it up on a site, but if necessary I'll post a pic of the rendering. Thanks in advance. 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 am not getting the right behaviour from my css in a nested list i made for a menu. here is the css for the menu Code:
#main_menu{
position: absolute; top: 252px; left:30px;
margin:0;
padding:0;
}
#menu_item_1{
list-style-type: none;
}
#menu_item_1 a{
color:#11352B;
text-decoration:none;
font-weight:300;
vertical-align:text-top;
}
#menu_item_1 a:hover{
color:#007888;
text-decoration:underline;
font-weight:300;
vertical-align:text-top;
}
#menu_item_2{
list-style-type: none;
}
#menu_item_2 a{
color:#007888;
text-decoration:none;
font-weight:300;
vertical-align:text-top;
}
and here is the xhtml section showing the menu Code: <ul id='main_menu'> <li id='menu_item_1'><a href='index.php'>Home</a></li> <li id='menu_item_1'><a href='about_us.php'>About Us</a></li> <li id='menu_item_1'><a href='customers.php'>Customers</a></li> <li id='menu_item_2'><a href='products.php'>Products</a></li> <ul> <li id='menu_item_1'><a href='atlas2000.php'>Atlas 2000</a></li> <li id='menu_item_1'><a href='atlas2000.php'>Web Request</a></li> <li id='menu_item_1'><a href='atlas2000.php'>Atlas Mailer</a></li> </ul> <li id='menu_item_1'><a href='service.php'>Service</a></li> <li id='menu_item_1'><a href='download.php'>Download</a></li> <li id='menu_item_1'><a href='support.php'>Support</a></li> <li id='menu_item_1'><a href='contact_us.php'>Contact Us</a></li> </ul> the main list works great but the sublist the color is wrong, it should behave like the main one does....I think I have not structured my css correctly, but can not figure it out. 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! 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? |
|||||||