I'm fairly new to web design. I have dabbled in HTML and a good friend got me into it. He used tables for all his layouts and they looked very nice. I copied his code and put it on my domain for reference. The code I need to convert to CSS is at <!-- w --><a class="postlink" href="http://www.evogamers.net">www.evogamers.net</a><!-- w --> I realize that tables for layout is very bad. Basically I just need a little jump start as to how I could recreate that pretty much exactly using CSS.
I've looked at some tutorials but I'm having some trouble duplicating it.
P.S. When I insert the color code for the background (#202020) into Photoshop to create my header .jpg it comes out a different shade. Any ideas?the following should get you started - its a complete page so copy all of it and then paste it into your editor as a whole and by the way tables are not 'BAD' when used properly. My example uses a single table which could be argued against but it works nice in this application.
good luck.
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background: #000000;
color: white;
}
div#header {
width: 100%;
padding: 0;
margin: 0;
}
table#tbl-main {
width: 100%;
margin: 0;
padding: 0;
}
td#td-left {
width: 20%;
padding: 1em 0;
vertical-align: top;
}
div.all-blurbs {
border: 1px solid #999;
margin: 0 0 1em 0;
}
div.blurb-left {
}
td#td-center {
width: 60%;
padding: 1em;
vertical-align: top;
}
div.blurb-center {
}
span.blurb-titles {
display: block;
width: 100%;
background: #666;
}
td#td-right {
width: 80%;
padding: 1em 0;
vertical-align: top;
}
div.blurb-right {
}
div#footer {
clear: both;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div id="header">
DVDtovideoCO image goes here
</div>
<table id="tbl-main" cellspacing="0">
<tr>
<td id="td-left">
<div class="blurb-left all-blurbs"><!-- create one of these divs per left blurb -->
<span class="blurb-titles">Tavern</span>
left blurb 1
</div>
<div class="blurb-left all-blurbs"><!-- create one of these divs per left blurb -->
<span class="blurb-titles">Magestorm</span>
left blurb 2
</div>
</td>
<td id="td-center">
<div class="blurb-center all-blurbs"><!-- create one of these divs per center blurb -->
<span class="blurb-titles">Next Matches</span>
center blurb 1
</div>
<div class="blurb-center all-blurbs"><!-- create one of these divs per center blurb -->
<span class="blurb-titles">Active Members</span>
center blurb 2
</div>
</td>
<td id="td-right">
<div class="blurb-right all-blurbs"><!-- create one of these divs per right blurb -->
<span class="blurb-titles">the apocalypse</span>
right blurb 1
</div>
<div class="blurb-right all-blurbs"><!-- create one of these divs per right blurb -->
<span class="blurb-titles">the second comming</span>
right blurb 2
</div>
</td>
</tr>
</table>
<div id="footer">
credits go here
</div>
</body>
</html>It's basically just a three-column layout with some extras thrown in. It can be done without tables.
Blue Robot (<!-- m --><a class="postlink" href="http://bluerobot.com/web/layouts/layout3.html">http://bluerobot.com/web/layouts/layout3.html</a><!-- m -->)
Layout-O-Matic (<!-- m --><a class="postlink" href="http://www.inknoise.com/experimental/layoutomatic.php">http://www.inknoise.com/experimental/layoutomatic.php</a><!-- m -->)Originally posted by Paul Jr
It's basically just a three-column layout with some extras thrown in. It can be done without tables.
duely noted....
I wish I was dead
interesting, most people wish for things just out of reach. Shoot, you got it easy - no pun intended.Thanks alot. One thing I noticed though is on the page with tables, the borders around the tables have a embossed type look. Is it possible to recreate that, instead of just solid lines?
EDIT: I have two other questions, which have been nagging at me for a while. 1.) How do I use an image as a table header. Let me give an example. The site <!-- w --><a class="postlink" href="http://www.evolutionm.net">www.evolutionm.net</a><!-- w --> uses alot of images for their topic headers. And even their main nav bar is all images, such as "Latest discussions" and "Latest Features"(possible done w/ photoshop?). How do I implement something like that on a CSS page?Originally posted by infinity
Thanks alot. One thing I noticed though is on the page with tables, the borders around the tables have a embossed type look. Is it possible to recreate that, instead of just solid lines?
Yes, it is quite possible. There are a number of ways to do this; it all comes down to trial and error, really.
Border-Style-Properties (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/box.html#border-style-properties">http://www.w3.org/TR/REC-CSS2/box.html# ... properties</a><!-- m -->)
W3 Schools (<!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_border.asp">http://www.w3schools.com/css/css_border.asp</a><!-- m -->)
CSS Background (<!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_background.asp">http://www.w3schools.com/css/css_background.asp</a><!-- m -->)
W3C: CSS Backgrounds (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/colors.html#q2">http://www.w3.org/TR/REC-CSS2/colors.html#q2</a><!-- m -->)Excellent posts guys. Yet more questions! If you go to <!-- w --><a class="postlink" href="http://www.evogamers.net">www.evogamers.net</a><!-- w -->, you'll see I got my top header working. Is there a way to make it span the entire horizontal width of the page at the top and make it so there is no blue background showing through around the corners. I want the image header to be in the top left hand corner with the wording home, services and demos all spaced just like they are, only with the header spanning the entire top portion of the page. Possible?Sure. Just extend the header graphic a couple hundred more pixels out the right side.Is there a command to do that or do I have to edit the graphic itself?
EDIT: I went into Photoshop and redid my header so it's longer, and it does span the page. However now the problem is you get a horizontal scroll bar because it thinks it's a huge image. How do I make it so it just spans the page but doesn't go so far that it adds the scroll bar? I also can't get it all the way into the top left corner.Shameless bump
You could probably place it as a background for a <div>, and set the height of the <div> to 144px (height of the image), and it will span the whole width of the page without you having to set a width since it's a block level element and does so anyway. And in doing so, you could hide an <h1> in the <div>, so search engines and things that don't use CSS will still get a page heading.
It would look something like this:
<style type="text/css">
div#header {
background: url(images/banner.jpg) #FFF no-repeat top left;
height: 144px;
}
div#header h1 {
display: none;
}
</style>
...
<div id="header">
<h1>Welcome to my page</h1>
</div>
The image will be a background, and the <h1> will be hidden with CSS via display: none;.Originally posted by infinity
Is there a command to do that or do I have to edit the graphic itself?
EDIT: I went into Photoshop and redid my header so it's longer, and it does span the page. However now the problem is you get a horizontal scroll bar because it thinks it's a huge image. How do I make it so it just spans the page but doesn't go so far that it adds the scroll bar? I also can't get it all the way into the top left corner.
What Paul said. 8) Make it the background image of the header div and the div will chop it off automagically.For some reason I can't get that to work. It just shows no header at all.Try putting something inbetween the <div id="header"> </div>". You could implement the <h1> thing, but you may not want to. So you could just put &_nbsp; (without the underscore) inbetween the <div id="header"> </div" tags.
It looks kosher to me.
***EDIT***
Since you are using tables, you could just do this with a table cell.
And it seems you have two opening <table> tags, but only one closing... I'm not quite sure, but I glanced through the code and I only saw one closing <table> tag.Okay, I'll fiddle with that. Basically I'm just reverse engineering everything I see. I haven't looked too deep into tutorials etc. I take someone elses code, pick it apart, see what does what and try to put it back together. I'm slowly getting the hang of it.I tried that, no go. I'm getting confused.AHA! I found it! You were missing a hash (#) infront of background-color in your body styles! I added the hash and baddabing!
***EDIT***
Actually, that wasn't it, but you should fix that. It seems the problem is you have a space between "url", and the beginning bracket of the image url. Remove the space and you should be set.
background: url (<!-- m --><a class="postlink" href="http://www.evogamers.net/videograyweb.jpg">http://www.evogamers.net/videograyweb.jpg</a><!-- m -->) #FFF no-repeat top left;Keen eye Paul, nice detective work. Got the header. Now for phase two. Getting it to fit snugly in the upper left corner and still getting it to run the entire distance of the top. Putting into the div#header didn't do that, unless I have it set up wrong.body {
margin: 0;
padding: 0;
}
should get you 'snug into the corner'.Also where you've used a span for blurb titles just use a header element.
<h1>Main Heading</h1>
<h2>Secondary heading</h2>
<h3>other headings</h3>
<h4>and</h4>
<h5>so</h5>
<h6>on</h6>
You can then style all the h3 (or whatever) tags in the document using css.
This will also be good for your search engine rankings.
I've looked at some tutorials but I'm having some trouble duplicating it.
P.S. When I insert the color code for the background (#202020) into Photoshop to create my header .jpg it comes out a different shade. Any ideas?the following should get you started - its a complete page so copy all of it and then paste it into your editor as a whole and by the way tables are not 'BAD' when used properly. My example uses a single table which could be argued against but it works nice in this application.
good luck.
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background: #000000;
color: white;
}
div#header {
width: 100%;
padding: 0;
margin: 0;
}
table#tbl-main {
width: 100%;
margin: 0;
padding: 0;
}
td#td-left {
width: 20%;
padding: 1em 0;
vertical-align: top;
}
div.all-blurbs {
border: 1px solid #999;
margin: 0 0 1em 0;
}
div.blurb-left {
}
td#td-center {
width: 60%;
padding: 1em;
vertical-align: top;
}
div.blurb-center {
}
span.blurb-titles {
display: block;
width: 100%;
background: #666;
}
td#td-right {
width: 80%;
padding: 1em 0;
vertical-align: top;
}
div.blurb-right {
}
div#footer {
clear: both;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div id="header">
DVDtovideoCO image goes here
</div>
<table id="tbl-main" cellspacing="0">
<tr>
<td id="td-left">
<div class="blurb-left all-blurbs"><!-- create one of these divs per left blurb -->
<span class="blurb-titles">Tavern</span>
left blurb 1
</div>
<div class="blurb-left all-blurbs"><!-- create one of these divs per left blurb -->
<span class="blurb-titles">Magestorm</span>
left blurb 2
</div>
</td>
<td id="td-center">
<div class="blurb-center all-blurbs"><!-- create one of these divs per center blurb -->
<span class="blurb-titles">Next Matches</span>
center blurb 1
</div>
<div class="blurb-center all-blurbs"><!-- create one of these divs per center blurb -->
<span class="blurb-titles">Active Members</span>
center blurb 2
</div>
</td>
<td id="td-right">
<div class="blurb-right all-blurbs"><!-- create one of these divs per right blurb -->
<span class="blurb-titles">the apocalypse</span>
right blurb 1
</div>
<div class="blurb-right all-blurbs"><!-- create one of these divs per right blurb -->
<span class="blurb-titles">the second comming</span>
right blurb 2
</div>
</td>
</tr>
</table>
<div id="footer">
credits go here
</div>
</body>
</html>It's basically just a three-column layout with some extras thrown in. It can be done without tables.
Blue Robot (<!-- m --><a class="postlink" href="http://bluerobot.com/web/layouts/layout3.html">http://bluerobot.com/web/layouts/layout3.html</a><!-- m -->)
Layout-O-Matic (<!-- m --><a class="postlink" href="http://www.inknoise.com/experimental/layoutomatic.php">http://www.inknoise.com/experimental/layoutomatic.php</a><!-- m -->)Originally posted by Paul Jr
It's basically just a three-column layout with some extras thrown in. It can be done without tables.
duely noted....
I wish I was dead
interesting, most people wish for things just out of reach. Shoot, you got it easy - no pun intended.Thanks alot. One thing I noticed though is on the page with tables, the borders around the tables have a embossed type look. Is it possible to recreate that, instead of just solid lines?
EDIT: I have two other questions, which have been nagging at me for a while. 1.) How do I use an image as a table header. Let me give an example. The site <!-- w --><a class="postlink" href="http://www.evolutionm.net">www.evolutionm.net</a><!-- w --> uses alot of images for their topic headers. And even their main nav bar is all images, such as "Latest discussions" and "Latest Features"(possible done w/ photoshop?). How do I implement something like that on a CSS page?Originally posted by infinity
Thanks alot. One thing I noticed though is on the page with tables, the borders around the tables have a embossed type look. Is it possible to recreate that, instead of just solid lines?
Yes, it is quite possible. There are a number of ways to do this; it all comes down to trial and error, really.
Border-Style-Properties (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/box.html#border-style-properties">http://www.w3.org/TR/REC-CSS2/box.html# ... properties</a><!-- m -->)
W3 Schools (<!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_border.asp">http://www.w3schools.com/css/css_border.asp</a><!-- m -->)
CSS Background (<!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_background.asp">http://www.w3schools.com/css/css_background.asp</a><!-- m -->)
W3C: CSS Backgrounds (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/colors.html#q2">http://www.w3.org/TR/REC-CSS2/colors.html#q2</a><!-- m -->)Excellent posts guys. Yet more questions! If you go to <!-- w --><a class="postlink" href="http://www.evogamers.net">www.evogamers.net</a><!-- w -->, you'll see I got my top header working. Is there a way to make it span the entire horizontal width of the page at the top and make it so there is no blue background showing through around the corners. I want the image header to be in the top left hand corner with the wording home, services and demos all spaced just like they are, only with the header spanning the entire top portion of the page. Possible?Sure. Just extend the header graphic a couple hundred more pixels out the right side.Is there a command to do that or do I have to edit the graphic itself?
EDIT: I went into Photoshop and redid my header so it's longer, and it does span the page. However now the problem is you get a horizontal scroll bar because it thinks it's a huge image. How do I make it so it just spans the page but doesn't go so far that it adds the scroll bar? I also can't get it all the way into the top left corner.Shameless bump
You could probably place it as a background for a <div>, and set the height of the <div> to 144px (height of the image), and it will span the whole width of the page without you having to set a width since it's a block level element and does so anyway. And in doing so, you could hide an <h1> in the <div>, so search engines and things that don't use CSS will still get a page heading. It would look something like this:
<style type="text/css">
div#header {
background: url(images/banner.jpg) #FFF no-repeat top left;
height: 144px;
}
div#header h1 {
display: none;
}
</style>
...
<div id="header">
<h1>Welcome to my page</h1>
</div>
The image will be a background, and the <h1> will be hidden with CSS via display: none;.Originally posted by infinity
Is there a command to do that or do I have to edit the graphic itself?
EDIT: I went into Photoshop and redid my header so it's longer, and it does span the page. However now the problem is you get a horizontal scroll bar because it thinks it's a huge image. How do I make it so it just spans the page but doesn't go so far that it adds the scroll bar? I also can't get it all the way into the top left corner.
What Paul said. 8) Make it the background image of the header div and the div will chop it off automagically.For some reason I can't get that to work. It just shows no header at all.Try putting something inbetween the <div id="header"> </div>". You could implement the <h1> thing, but you may not want to. So you could just put &_nbsp; (without the underscore) inbetween the <div id="header"> </div" tags.
It looks kosher to me.
***EDIT***
Since you are using tables, you could just do this with a table cell.
And it seems you have two opening <table> tags, but only one closing... I'm not quite sure, but I glanced through the code and I only saw one closing <table> tag.Okay, I'll fiddle with that. Basically I'm just reverse engineering everything I see. I haven't looked too deep into tutorials etc. I take someone elses code, pick it apart, see what does what and try to put it back together. I'm slowly getting the hang of it.I tried that, no go. I'm getting confused.AHA! I found it! You were missing a hash (#) infront of background-color in your body styles! I added the hash and baddabing!
***EDIT***
Actually, that wasn't it, but you should fix that. It seems the problem is you have a space between "url", and the beginning bracket of the image url. Remove the space and you should be set.
background: url (<!-- m --><a class="postlink" href="http://www.evogamers.net/videograyweb.jpg">http://www.evogamers.net/videograyweb.jpg</a><!-- m -->) #FFF no-repeat top left;Keen eye Paul, nice detective work. Got the header. Now for phase two. Getting it to fit snugly in the upper left corner and still getting it to run the entire distance of the top. Putting into the div#header didn't do that, unless I have it set up wrong.body {
margin: 0;
padding: 0;
}
should get you 'snug into the corner'.Also where you've used a span for blurb titles just use a header element.
<h1>Main Heading</h1>
<h2>Secondary heading</h2>
<h3>other headings</h3>
<h4>and</h4>
<h5>so</h5>
<h6>on</h6>
You can then style all the h3 (or whatever) tags in the document using css.
This will also be good for your search engine rankings.