I recently asked for my website to be reviewed on this site, one of the main problems people seemed to have with it was that I used alot of tables. I have since looked at websites that cover CSS but cant seem to get my head round it. I believe in the saying learn by example so I have put together a simple page with a simple style sheet can somebody make the same page without tables so I can study it.
the page is at:
it has a style sheet attached
If you want to know about the review and what people said its at
<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?t=68176">http://www.webdeveloper.com/forum/showt ... hp?t=68176</a><!-- m -->
Thanks in advance
AmimanHmmmm... I'm not going to convert your page for you, but I hope this might help you... <!-- m --><a class="postlink" href="http://bonrouge.com/2c-hf-fixed.phpI">http://bonrouge.com/2c-hf-fixed.phpI</a><!-- m --> like a challenge.
Cheers NogDog
speedy result
I seem to have a problem
when I view your page in Netscape, Opera, and dreamwever there is a gap between the green coloum and the blue box as there should be but in IE6 the blue box joins the green coloum is this a fault with IE or my system???????
again CheersTake 2:the hardest thing about using CSS for layouts is probably the fact that it shows up differently in browsers. Its hard to get it to look exactly the same, but once you get the hold of it, it's awesome. Don't worry about Dreamweaver. Target IE , Firefox, and Netscape. That's all I really bother with. If you are really stuggling, try getting a book on CSS. It helps.Thanks everybody for your help
THANKS NogDog for taking the time to do the page it has helped alot
AmimanOn the page i made with tables i used a graphic as a header i have tried to put it on th page thats been done without tables but i end up with big gaps underneath it how do you put graphics in
thanksIn your style section, you can set the margin to 0 for all images with:
img { margin: 0; }
Or you can define the margin for a class or ID and assign that class/id to your IMG tag.Here's how to do a graphic header without using the <img> tag.
Use this HTML:
<h1 id="logo"><a href=http://www.webdeveloper.com/forum/archive/index.php/"mylink">main logo</a></h1>
And this CSS:
h1#logo {
width: Your Image's Width;
height: Your Image's Height;
background: url(Your image URL) no-repeat;
display: block;
margin: 0;
padding: 0;
}
h1#logo a {
text-decoration: none;
overflow: hidden;
text-indent: -5000px;
width: Your Image's Width;
height: Your Image's Height;
display: block;
margin: 0;
padding: 0;
}
If you don't want it to be a link, use this HTML:
<h1 id="logo"><span>main logo</span></h1>
And this CSS:
h1#logo {
width: Your Image's Width;
height: Your Image's Height;
background: url(Your image URL) no-repeat;
display: block;
margin: 0;
padding: 0;
}
h1#logo span { display: none; }On the page i made with tables i used a graphic as a header i have tried to put it on th page thats been done without tables but i end up with big gaps underneath it how do you put graphics in
thanks
Often this is due to the fact an img is an inline element and is effected by text styles. When an img needs to be "blockish" then img {display:block} is in order.
the page is at:
it has a style sheet attached
If you want to know about the review and what people said its at
<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?t=68176">http://www.webdeveloper.com/forum/showt ... hp?t=68176</a><!-- m -->
Thanks in advance
AmimanHmmmm... I'm not going to convert your page for you, but I hope this might help you... <!-- m --><a class="postlink" href="http://bonrouge.com/2c-hf-fixed.phpI">http://bonrouge.com/2c-hf-fixed.phpI</a><!-- m --> like a challenge.
Cheers NogDogspeedy result
I seem to have a problem
when I view your page in Netscape, Opera, and dreamwever there is a gap between the green coloum and the blue box as there should be but in IE6 the blue box joins the green coloum is this a fault with IE or my system???????
again CheersTake 2:the hardest thing about using CSS for layouts is probably the fact that it shows up differently in browsers. Its hard to get it to look exactly the same, but once you get the hold of it, it's awesome. Don't worry about Dreamweaver. Target IE , Firefox, and Netscape. That's all I really bother with. If you are really stuggling, try getting a book on CSS. It helps.Thanks everybody for your help
THANKS NogDog for taking the time to do the page it has helped alot
AmimanOn the page i made with tables i used a graphic as a header i have tried to put it on th page thats been done without tables but i end up with big gaps underneath it how do you put graphics in
thanksIn your style section, you can set the margin to 0 for all images with:
img { margin: 0; }
Or you can define the margin for a class or ID and assign that class/id to your IMG tag.Here's how to do a graphic header without using the <img> tag.
Use this HTML:
<h1 id="logo"><a href=http://www.webdeveloper.com/forum/archive/index.php/"mylink">main logo</a></h1>
And this CSS:
h1#logo {
width: Your Image's Width;
height: Your Image's Height;
background: url(Your image URL) no-repeat;
display: block;
margin: 0;
padding: 0;
}
h1#logo a {
text-decoration: none;
overflow: hidden;
text-indent: -5000px;
width: Your Image's Width;
height: Your Image's Height;
display: block;
margin: 0;
padding: 0;
}
If you don't want it to be a link, use this HTML:
<h1 id="logo"><span>main logo</span></h1>
And this CSS:
h1#logo {
width: Your Image's Width;
height: Your Image's Height;
background: url(Your image URL) no-repeat;
display: block;
margin: 0;
padding: 0;
}
h1#logo span { display: none; }On the page i made with tables i used a graphic as a header i have tried to put it on th page thats been done without tables but i end up with big gaps underneath it how do you put graphics in
thanks
Often this is due to the fact an img is an inline element and is effected by text styles. When an img needs to be "blockish" then img {display:block} is in order.