Forum Moderators: not2easy
I dont have a problem with the actual css code.. the problem is inserting the right things into the html.
in the past i was using table.header or whatever to achieve an element that i could edit in dreamweaver (adding content) and still be styled by css.. but turns out i used the table atritude on just about every element.
here is my most recent work with css - it works with the w3 validator but i think im doing it wrong?
/* CSS Document */
HTML {
font-family : Georgia, "Times New Roman", Times, serif;
margin-top : 0;
margin-left : 30px;
margin-right : 30px;
}
BODY {
background : #666 url(./images/1.jpg) 30% 0%;
margin : 0 30px 0 0;
height : 100%;
}
img {
border : none;
border : 0;
border-width : 0;
margin : 0;
padding : 0;
}
a:link, a:visited {
color : #000;
text-decoration : none;
font-weight : normal;
}
a:hover {
color : #ff0000;
text-decoration : underline;
font-weight : normal;
}
table.header {
background : #fff;
display : block;
color : #000;
width : 800px;
margin : 0;
font-size : 45px;
}
table.topg {
padding : 5px;
background : #fff url(./images/top.png) 100% no-repeat;
height : 10px;
background-position : bottom;
}
table.sidebar {
position : absolute;
background : url(./images/sidebar.png) 100% 0%;
margin-top : 50px;
margin-left : 20px;
width : 189px;
height : 362px;
border : 0;
}
table.feature {
margin-top : 50px;
margin-left : 220px;
background : url(./images/box.png) 100% 0%;
width : 565px;
height : 431px;
border : 3px #000;
padding : 10px;
table-layout : fixed;
}
table.adbar {
position : absolute;
background : url(./images/adbar.png) 100% 0%;
margin-top : 50px;
margin-left : 20px;
width : 189px;
height : 201px;
}
table.bottomg {
margin-top : -12px;
margin-bottom : -60px;
background : #fff url(./images/bottom.png) no-repeat 100% 0%;
height : 75px;
width : 800px;
}
table.content {
background : #6f4938;
display : block;
vertical-align : middle;
width : 800px;
height : 1110px;
}
[edited by: SuzyUK at 8:44 am (utc) on Dec. 3, 2007]
[edit reason] removed personal details [/edit]
i generally use the following style sheet as a basis to build from:
html, body
{
height:100%;
}html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, a, img, blockquote, label, fieldset
{
margin:0;
padding:0;
border:0;
}
ul li
{
list-style-type:none;
}
body
{
font-family: arial, Helvetica, sans-serif;
font-size: 1.0em;
margin-bottom:10px;
background-color:#fff;
}
a:link, a:visited, a:active, a:hover
{
text-decoration:underline;
outline:none;
}
/* generic styles */
.invisible, hr { display:none;}
.clear { clear:both; line-height:0px; font-size:0px; height:0px; }
.bold { font-weight:bolder;}
.gfxheader { text-indent:-5000px; height:2px; line-height:2px;}
.invisible { display:none; }
.nomargin { margin:0; }
.error
{
color:#E40101;
}
/* GENERIC ELEMENT STYLES*/
h1, h2, h3, h4, h5, h6
{
color:#000;
}
h1
{
font-size:1.3em;
}
h2
{
font-size:1.2em;
}
h3
{
font-size:1.1em;
}
h4
{
}
h5
{
}
h6
{
}
p
{
font-size:0.85em;
}
a
{
}
img
{
}
for your layout, i'd use the following extra css style
#sitewrapper
{
margin:20px auto;
}#header
{
width:800px;
float:left;
background-color:#fff;
height:100px;
}
#topg
{
float:left;
width:800px;
height:10px;
background:#ff0000 url(images/top.png) no-repeat bottom;
}
#sidebar
{
float:left;
background-color:#00ff00;
margin-top:50px;
width:190px;
}
#feature
{
float:left;
width:400px;
margin-top:50px;
padding:0 10px;
background-color:#ccc;
}
#adbar
{
float:left;
width:190px;
background-color:#0000ff;
}
#footer
{
float:left;
width:800px;
height:70px;
margin-top:20px;
background-color:#666;
}
the html (THIS IS ALL QUICKLY OFF THE TOP OF MY HEAD)
<body>
<div id="sitewrapper">
<div id="header"><p>Header</p></div>
<div class="clear"></div>
<div id="topg"><p>gradient?</p></div>
<div class="clear"></div>
<div id="sidebar"><p>LEFT NAV BAR</p></div>
<div id="feature"><p>Main Content</p></div>
<div id="adbar"><p>right adbar</p></div>
<div class="clear"></div>
<div id="footer"><p>footer</p></div>
</div>
</body>
gah i'm cringing just thinking about how wrong all that is! :)
tables, etc
e.g.
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
you can put tables in divs. but only really if you are showing a table of information.
divs = containers of information.
not really explained that very well.
silent1643 the title of the post is a wee bit misleading, CSS does not contain elements, you wouldn't actually insert CSS elements you would use CSS to add style to HTML elements.
A
table, tr & tddivTo add to what kolin has already said, a div is a generic element which is used for a page division. They usually contain the information (other elements) pertaining to that division.
In Table Speak:
----------------------------
page header
----------------------------
.....¦...........¦..........
.....¦...........¦..........
left.¦...........¦ad........
nav..¦..content..¦space.....
.....¦...........¦..........
.....¦...........¦..........
----------------------------
footer
----------------------------
The above can be achieved with one table making the outline with NO further need for any more tables. Going by your CSS this is where you would then insert (Nest) tables into each of the named areas? This is where from a beginning point of view the first steps can be taken lessen the number of tables used :)
Instead of thinking about those 5 named areas as table rows/cells, think of them as divisions. (don't actually need to add them yet.. just think visually about the page areas) - There may not actually be any need to actually insert <div>s into these areas if you choose to use a table for your main container because you can add a classname or an ID directly to a <tr> or <td> element, this way you are using existing elements without the need to insert too many more!
For example let's say for this example that the "pageheader" area contains a logo image surrounded by a link..
that area/division is a table row, <tr> with 3 x <td> that are 'merged' using colspan="3"
You do not then need to insert another table to hold the image, you can add
.pageheaderit might look something like this in the HTML.
<table cellpadding="0" cellspacing="0">
<tr class="pageheader">
<td colspan="3">
<a href="#"><img src="..." etc /></a>
</td>
</tr>...
the <a>, link and the <img>, image - which are again both only HTML elements - can be styled to fit the required size without further enclosing, nesting them in any other elements. They can be specifically targeted by using the .pageheader class that is on a "ancestor" element.
table {width: 800px; border: 0;}
.pageheader a {display: block; width: 800px; height: 60px;}
.pageheader img {display: block; width: 800px;.... etc}
You don't always need to put an element name before
.pageheadertr.pageheaderNow to change that to pure CSS speak:
Forget that the whole page design has to be in a table, or that you have to use only <table> in your HTML! You don't actually need to have that 'pageheader; area inside a table at all. You can lose that first row and substitute it with a more generic <div> element and still have it remain looking exactly the same and part of the design..
<div class="pageheader ">
<a href="#"><img src="..." etc /></a>
</div>
.pageheader {width: 800px;}
.pageheader a {display: block; width: 800px; height: 60px;}
.pageheader img {display: block; width: 800px;.... etc}
You see the CSS is virtually identical, but the HTML is neater and cleaner, with the number of elements used being smaller to achieve the same job yet with more flexibility for change!
If you then repeat the above thinking for the footer area the only bit you have left still as a table is the left, content & right bits.
A lot of people still design pages like this (Hybrid designing) because they like full column stretch or are still learning CSS floating/positioning. The ins and outs of completely changing this is a little more in depth and comes later, though you have no need to nest tables inside the cells you can put <p> <ul> <img> directly into them - anyway suffice to say I think the first steps are a great way to start learning how to lose unnecessary tables and to start visualising design and a first step to using generic HTML elements with CSS, there are loads of them [w3.org] each with a job to do ;)
The pageheader/footer areas in my example are simply clearcut divisions on a page, there is absolutely no need for them to be dependent on the main body, i.e on colspans and their associated table quirks.
If you separate the two areas mentioned, you could for example add a fourth column to, or remove the right column from, the main body of the table part and you would not have to touch the HTML for the header or footer, whereas you might if were all surrounded by one table.
This is just the beginnings, a 'very brief' example, to learning how to structure your HTML so that you have the freedom to change things using the CSS alone. In my very simple case I could, for example, make the 'pageheader' 600px wide and align it to the right, left or center, I can offset it from the content, make it overlap, whatever. You can do some of that but not all when it's locked into a table row.
Summary,
Draw the page layout and choose the main areas.. these areas would become your main <div>'s (divisions) and unlike my example it's likely that your main divs would have ID's rather than a class, ID's can only be used once per page and are used to IDentify a main area - but that doesn't really affect the code examples given.
Decide the best generic HTML element to draw out those page divisions with, then these divisions as kolin said can contain any other combination of information, with the internal information also drawn (marked up) with the appropriate HTML elements.
The main thing to say is, as soon as you realise that a <table>, <tr>, and <td> are just HTML elements with a purpose, and start thinking that another one may suit the job/purpose better and that CSS can be used on them all, lightbulbs might start going off and the rest follows.
hth some it's maybe a bit muddled as I've been on the school run since starting this post and may have lost my train of thought ;)
Suzy
