|
CSS - Is It Ok To Nest A Div Tag Inside A Table? (was Easy Question About Css)
Is it ok to nest a div tag inside a table? It appears to work correctly.
Thanks! Similar TutorialsThis may be a dumb questions as I think I already know the answer to it. Is there any way to protect your css page from others. I would like to protect my websites against those who want to just copy them. Ofcourse these are live websites and do not need to be penalized by Google in any way if it is possible. I haven't heard or seen anything on this but I knew you guys would know for sure. Thank You! Ok, this is a problem I've never bothered fixing but I'm sure it's something simple. On virtually every horizontal CSS rollover menu I've ever built, IE7 always leaves a tiny artifact of the rollover background color on click. Here's my latest example(I'm using IE8's compat mode, but I've checked this in IE7 itself before): http://tinyurl.com/y6uf4zd CSS and XHTML are both valid. Here's the code I always use (but customize for the project): Code:
#navbar{
position:absolute;
top:162px;
left:47px;
width:448px;
height:26px;
color:white;
font-size:.75em;
}
#navbar ul{
margin:0;
padding:0;
color:#FFFFFF;
white-space:nowrap;
}
#navbar li{
list-style-type:none;
display:inline;
}
#navbar li a{
display:block;
float:left;
margin-left:8px;
text-decoration:none;
padding:.4em .75em;
color:#FFFFFF;
}
#navbar li a:hover{
background-color:#CCCCCC;
}
#navbar a:link, #navbar a:visited{
color: #FFFFFF;
text-decoration: none;
}
Go ahead and click a menu item in FF, and then click one in IE7. It never fails. IE7 always leaves a piece of the hover background-color to the right of the LI element. If you highlight the navbar, they go away... but it's very annoying. Lemme know where I n00bed. Thanks all. I have the hardest time w/ selectors and inheritance (esp nested div's and selectors). Can someone tell me if I have the following code, how do I select it in the css? ---html--- Code:
<body>
<div id="wrapper">
<div id="container">
<div id="banner">
</div><!-- END BANNER -->
<div id="navbar">
<ul>
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="index.html"><span>Boats</span></a></li>
<li><a href="index.html"><span>Cars</span></a></li>
<li><a href="index.html"><span>RV's</span></a></li>
<li><a href="index.html"><span>Aircraft</span></a></li>
<li><a href="index.html"><span>Contact</span></a></li>
</ul>
</div><!--END NAVBAR -->
</div><!-- END CONTAINER -->
</div><!-- END WRAPPER -->
</body>
---css--- THIS DOESN'T WORK Code:
navbar span
{
display: none;
}
navbar ul
{
list-style: none;
display: block;
position: relative;
}
I guess when do I use # and when do I use . and when do I use them together? A good link that uses NESTED selectors would help because most examples don't include that. After much, much reading, I am still having this problem: I have a background image that i want centered horizontally on the page. You can see what i'm trying to accomplish at stipepainting.com From there i understand how to nest menus and content at the right position on the background. I just can't start by centering the image. this is what i have: Code: <body>
<div id="A">
<center>
<img src="background.gif">
</center>
<div id="A1">
Content text.
</div>
</div>
</body>
and here is the css: Code: #A {
position: absolute;
width: 300px;
height: 200px;
}
#A1 {
position: absolute;
left: 150px;
top: 150px;
width: 200px;
height: 100px;
}
I have read a bunch of links suggested by posters, and can't quite find out the answer. I think it would be about 3 lines of code, and if someone could just give me that, i won't need to take another asprin. thanks For my paragraph elements I want the text-indent: property to apply to every new line..... Instead of just the first line... How is this done? thank ye. I am trying to get my container to be 100% the height of the browser window but have so far been unsuccessful, and I am not sure what I am doing wrong. Thanks for any help. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>TEST</title>
<style type="text/css" media="all">
body {
margin: 0;
padding: 0;
color: #333;
font: 13px Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
background: #EEEEEE;
text-align: center;
}
a {
color: #434C3E;
}
a:hover {
color: #F15925;
}
#container {
margin: 0 auto;
width: 724px;
height:100%;
position: relative;
background: #fff;
padding: 0 10px 0 10px;
text-align: left;
}
* html #container {
width: 744px;
w\idth: 724px;
}
#logo {
position: absolute;
top: 20px;
left: 70px;
width:94px;
height:147px;
background-image:url(../images/logo.gif);
}
h3 {
color:#555555;
}
#top {
height: 145px;
margin-left:240px;
}
#container #intro #quickSummary .p1 {
font-size: 11px;
height: 171px;
margin: 0;
width: 724px;
color: #fff;
font: 12px/150% Trebuchet MS;
}
#container #intro #quickSummary .p1 span {
padding: 30px 530px 0 30px;
display: block;
margin: 0;
font: 12px/150% Trebuchet MS;
}
#text {
margin: 20px 20px 0 243px;
}
#text p {
line-height: 150%;
margin: 10px 0 10px 0;
}
#footer {
color: #fff;
height: 48px;
text-align: right;
padding: 0 10px 0 0;
line-height: 26px;
font-size: 11px;
}
#footer a {
color: #fff;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="container">
<div id="intro">
<div id="logo"></div>
<div id="top"></div>
<div id="text">
<h3>Heading number one</h3>
<p class="p1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam arcu purus, sodales volutpat, eleifend ac, semper ut, dolor. Curabitur porttitor suscipit ligula. Sed vehicula mauris non sapien suscipit luctus. Fusce luctus pulvinar lectus. Aenean mi. Pellentesque rutrum nibh ut diam. Mauris porta, lectus sit amet ultricies lobortis, metus mauris semper orci, porta tincidunt neque dui ac magna.</p>
<p class="p2">Curabitur nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eu purus ac nisl vestibulum ultrices. Pellentesque lacus. Suspendisse quam risus, hendrerit sit amet, gravida non, dapibus quis, ante.</p>
</div>
</div>
<div id="text">
<h3>Heading Number Two</h3>
<p class="p1">Etiam nec metus vestibulum lacus facilisis consectetuer. Cras sed odio. Sed et purus a pede condimentum fermentum. In hac habitasse platea dictumst. Integer ornare nisl eu sem.</p>
<p class="p2">Nam laoreet, eros non cursus varius, nisi enim pharetra nisi, ut fringilla nisl turpis a diam. Proin ac elit ut nibh nonummy ultrices. Phasellus felis quam, consectetuer in, bibendum et, dictum id, mi. Nunc quis eros id metus auctor volutpat. Nunc diam odio, vehicula a, accumsan a, semper quis, mauris. Ut mauris enim, ultricies sed, viverra non, porta vitae, dui.</p>
<div>
<h3>Heading Number Three</h3>
<p class="p1">Curabitur nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eu purus ac nisl vestibulum ultrices. Pellentesque lacus. Suspendisse quam risus, hendrerit sit amet, gravida non, dapibus quis, ante.</p>
</div>
</div>
<div id="footer">Foo</div>
</div><!--end container-->
</body>
</html>
I am completely new to CSS. I usually use A LOT OF tables in my designs, and want to switch to CSS now. Anyways, I am trying to put 2 divs next to each other. here is what I have http://www.findagoodhost.com/2/ I'd like to make them as if I put a table with 1 row, 2 columns, but with CSS positioning. Any help would be apreciated. Thanks I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically. Thanks for reading. I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<body>
<table>
<tbody>
<tr>
<td>
1<br>2<br>3<br>4<br>5<br>
</td>
<td style="background: blue;">
<table style="height: 100%; background: red;">
<tbody>
<tr>
<td style="vertical-align: bottom">
Test
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
This should be easy for you guys. I got a bordered flash object inside of another bordered text area div. Markup as follows: Code:
#flashpictures{
width:auto;
margin:0 5px 0px 15px;
border: 1px solid black;
float: right;
}
.textborder{
clear:none;
position:relative;
border: 1px dotted #244109;
margin:0px 0px 15px 0px; padding:5px;
width:750px;
background-color: #b4b4b3
}
<div class="textborder">
<div id="flashpictures">
*flash object code*
</div>
*text*
</div>
What's happening, strangely enough, is that it's not rendering properly in FF or Chrome (but is in IE). The bottom margin of the text area is collapsing, but in IE it displays correctly (the flash object is completely inside). Can anyone help? Thanks. I have a long list of paragraphs (no more than 10 lines each), dynamically placed on a page. I am trying to avoid breaking paragraphs when the user prints the page. <p style="page-break-inside: avoid;"> <?php do { Paragraphs from Mysql } while ($row_data=mysql_fetch_assoc($data); </p> This is not working. Paragraphs are splited in two pages. Thanks in advance for any help Hi, This is clearly a noob question but i'm just starting to figure out CSS as a better way to navigate & layout my page. I have nested a table inside a div to get a two column effect within the main content area. In Opera, Firefox, IE 5x for mac it works fine and the table stays within the middle section. On IE for PC it runs over the right hand side of the middle section and lays under the right hand menu. I imagine there is a way to get two column layout ysing just DIVS. . . I use my site for school, I'm a high school teacher & I teach some university coursework. My site is set up with three main divs: (heavily borrowed from Eric Meyer's CSS book.) sitenav : left hand nav_bar (for site-wide) entry : min content sidebar: Right hand sub_nav_bar (within this area) ----------------- div#sitenav {position: absolute; top: 2.33em; left: 0; width: 12.5%; font-size: 11px; background-color: white; border: 1px solid red; z-index: 10;} div#entry { color: #660; margin: 0 20% 1em; padding: 0 } div#sidebar {position: absolute; top: 4em; right: 0; width: 20%; font-size: 11px; z-index: 11;} ---------------------- http://www.mrplatts.com/pitt_tech/schedule.html any help? Thanks, Rich I need two scrollable div inside a table. Please help. Details: The div contains a table that should force it to show the scrollbars. This table inside the div has specific width(1180px). The div on the other hand should have its width set to 100%. As to why i'm using a table for the layout, i'm using a masterpage that uses table. Attempt #1 i set the div width to 1180px. This showed the scrollbar. But i don't want the users to be stuck to this if they have bigger resolution. Attempt #2 i added position: absolute; --> there are scrollbars but the 2 divs are overlapping HTML: Code:
<html>
<head>
<style>
.container
{
border: 2px solid red;
overflow: scroll;
width: 100%;
position: absolute;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<td>
<div class=container>
<table border style="width: 1800px;">
<tr>
<tr>
<td width=200> January </td>
<td width=200> February </td>
<td width=200> March </td>
<td width=200> Apr </td>
<td width=200> May </td>
<td width=200> January </td>
<td width=200> February </td>
<td width=200> March </td>
<td width=200> Apr </td>
<td width=200> May </td>
<td width=200> January </td>
<td width=200> February </td>
<td width=200> March </td>
<td width=200> Apr </td>
<td width=200> May </td>
</tr>
</table>
</div>
<div class=container>
<table border style="width: 1800px;">
<tr>
<tr>
<td width=200> aaaa</td>
<td width=200> bbbb </td>
<td width=200> cccc</td>
<td width=200> ddd</td>
<td width=200> eee</td>
<td width=200> fff</td>
<td width=200> ggg</td>
<td width=200> hhh</td>
<td width=200> iii</td>
<td width=200> jjj</td>
<td width=200> kkk</td>
<td width=200> lll</td>
<td width=200> mmm</td>
<td width=200> nn</td>
<td width=200> ppp</td>
</tr>
</table>
</div>
</td>
</tr></table>
</body>
</html>
I am using a Body{...} style on my page (background set to black #000000) and DIV's inside Tables inside DIV's and when I set up and use a .14 (14px size and white color font syle class) my text stays black! The only thing that works is "inline styles". Not good for site wide-control. There is obviously a conflict here or something is superceding my classes. I prefer to use CSS for font control. I am using div's because of a "jquery slider" and tables because I usually design the look in photoshop and then use slices... not doing that on this site, but it's just what I'm used to. Thanks for any help. single page site is here "petermarsphotography dot com" I want to know how I could possible control all the elements inside a table that is inside a div with an id. This is possible correct? So if I have: Code:
#header { width: 900px; }
And then something like this: Code: <div id="header"> <table> <tr> <td> </td> </tr> </table> </div> I'd like to then have something like: Code:
#header.table,td {padding-left: 10px;}
Which I am hoping would put a 10px padding on all the td's in the table and nothing else. Is my syntax right? is there a problem with placing div tags inside table cells. I have a need to do this and it works fine on my FF3 and IE7 but i am told this is bad practice. is there a problem and/or workaround to using div tags inside a table cell Hello, I'm brand new to this CSS business, so please be gentle! I'm trying to place my AP Div objects inside a table so that their positions are relative to the edges of the table, rather than relative to the edges of the browser window. I'm guessing I need to somehow put the code for the table around the code for the AP Div objects, but I can't work out how it's supposed to look. Any guidance would be much appreciated. Thanks! Code:
-- HTML
<div id="Dashboard">
<table id="Overview">
<tr>
<td>Cost <span>$10,710</span></td>
<td>Visits <span>51,907</span></td>
<td>Cost / Visit <span>$0.21</span></td>
<td>Conv. Rate <span>1.3%</span></td>
<td>Cost / Conv. <span>16.11</span></td>
<td>Conversions <span>655</span></td>
<td class="Detail">>></td>
</tr>
</table>
</div>
-- CSS
/* Dashboard */
#Dashboard {
border: 1px solid #b5bfbf;
padding: 2px;
}
/* Overview Table */
#Overview {
width: 100%;
border-collapse: collapse;
height: 50px;
background-image: url(../images/dashboard/overviewtable_bg.png);
background-repeat: repeat-x;
}
#Overview td {
padding-top: 8px;
padding-left: 5px;
border: 1px solid #b5bfbf;
margin: 0;
}
#Overview td.Detail {
width: 45px;
}
#Overview span {
font-size: 20px;
font-weight: bold;
display: block;
margin-top: 2px;
}
so there is a DIV with a 2px padding on the inside. But when I check it in firefox, it isn't a 2px space between the outside DIV border and the border of the table. it is more like 1px space on top and left, 2px on bottom and right. I could put another div inside with a border to achieve that 2px spacing, but that just seems extraneous. I am not sure what the issue is? edit: screenshot: http://ricebox.whiteazn.com/tabpadding.png |
|||||||