I have a question to ask. I'm not familiar with CSS at all and would like to layout my site using CSS instead of a bunch of tables. I've gone to <!-- w --><a class="postlink" href="http://www.w3schools.com">www.w3schools.com</a><!-- w --> and read the CSS tutorial, but it doesn't explain the way a page is finally layed out. I know they gave a bunch of examples, but I'm still lost. It's all very new to me. There's another recent thread about metronaps that asked about layout as well. I dl'ed the zip to see how someone used zero tables to create the entire page. I'd like to do the same thing if possible. <br />
<br />
I've attached a file with all the graphics separated by red lines to give you an idea of how it's layed out now. Click HERE (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/testpage.jpg">http://members.cox.net/williamsray/testpage.jpg</a><!-- m -->) for a copy of the image without all the red lines. Oh, the big box in the center will have text, and so will the smaller boxes on the right.<br />
<br />
If someone decides to help me with this, will you also explain why you use certain code, etc. I know it's a lot to ask, but I'm trying to learn. I'm not here because I want someone to just do it for me, but I would like some help laying out my personal site.<br />
<br />
Thanks.<!--content-->Primal,<br />
<br />
Here's a link to a good CSS Tutorial (<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/index.htm">http://css.maxdesign.com.au/index.htm</a><!-- m -->). Only practice will make you a master in CSS.
<!--content-->Well, the attachment was too big so here's a LINK (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/testpage2.jpg">http://members.cox.net/williamsray/testpage2.jpg</a><!-- m -->) to the image with the red lines.<!--content-->Looks like a half dozen divs; heading, nav and 3 or 4 in the content. The nav div should contain a <ul> for the tabs or buttons or whatever they are. You might want to check out ALA's Sliding Doors articles re your nav section.<!--content-->Primal,<br />
Hang in there & don't get discouraged. CSS isn't as easy to learn for some of us as others suggest. Just keep trying & keep asking questions here. Things will get clearer as time goes on.<!--content-->Okay, I've worked on it and I'm making progress. I know it's only the top part of the page, but here is a LINK (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/testpage.html">http://members.cox.net/williamsray/testpage.html</a><!-- m -->) to what I've gotten so far.<br />
<br />
Now, using the links I've put up before, will someone please help me with the bottom half? At least point me in the right direction?<br />
<br />
And thank you for the help so far.<!--content-->There is something that you really need to consider; that header image is much tooo large. 150k for one image is too much. I'm on DSL and it still took some time for the image to load. Run it through some type of optimization to cut down on it.<br />
<br />
Also; it is a good thing that you have decided to learn and use CSS. For one, you don't have to use JS for image rollovers, CSS does it. That will make your site much more "Cross Browser".<!--content-->PhilMc, thanks for checking it out. As for the buttons, I was attempting to use the sliding doors method ray326 mentioned. I could not get them to all line up in a row, though. The way I saw to do it only used one image that moved up and down when you rolled over it. I created several div's to handle each separate button and they ended up stacking on top of one another.<br />
<br />
And the top banner, I can cut it up into smaller pieces. I wanted it to be one piece for now, though, just to keep ME straight! Once I think I've got a grasp on this, I'll go back and fix it.
<br />
<br />
I've updated the LINK (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/testpage.html">http://members.cox.net/williamsray/testpage.html</a><!-- m -->) too. I think I'm on the right track for the bottom half. Now, how do I add the boxes in there?<br />
<br />
More questions...<br />
How do I center the entire page?<br />
How do I get the page aligned to the top?<br />
How do I make the background black?<br />
How do I get rid of the white space between the buttons and the bottom part of the page?<!--content-->Try this version.<!--content-->Great job Aronya on cutting that image down.
<br />
<br />
Primal, so far so good, just 3 more suggestions.<br />
<br />
1. Use an external style sheet. Right now you are using an Internal Style Block. Granted, they both do the same thing, but external gives you an advantage. If you use an external sheet, you wont have to code the styles for every page; just link it!! Here's how:<br />
<br />
<link href=http://www.webdeveloper.com/forum/archive/index.php/"styles.css" type"text/css" rel="stylesheet"><br />
<br />
place that inside your head tags. You will save yourself MAJOR time using this.<br />
<br />
2. Ditch the JavaScript. CSS will do rollovers for you. Like this:<br />
<br />
a {<br />
background: url(images/footer.jpg);<br />
}<br />
<br />
a:hover {<br />
background: url(images/footerhover.jpg);<br />
}<br />
<br />
Place that inside either your style block or external sheet. This is much more "cross browser" than JavaScript and less work for you.<br />
<br />
3. This isn't critical yet, as you are still learning. The use of tables for layout is taboo because it is not symantecally (sp?) correct. Tables are meant for data (such as a calendar or spreadsheet). Soon you will learn how to achieve the same look and layout using all DIV's and CSS. When you get tha basics down, and learn the CSS attribute FLOAT and how to use it, this one will come to you, if not, we're here to help.<!--content-->Thanks, PhilMc. A question about the CSS rollover, though. It still seems like that handles just one image rollover. How do I get it to handle more than one? I have several buttons to work with.<br />
<br />
I'll move the styles to a separate page once I've got this worked out. I think leaving it there for now helps for those of you who are kind enough to help a newbie like me.<br />
<br />
I'm going to experiment with the FLOAT tag since you mentioned it.<br />
<br />
I've updated the PAGE (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/testpage.html">http://members.cox.net/williamsray/testpage.html</a><!-- m -->) with the boxes included. I stole a bit of code from the thread about tables within tables. Someone had a nice example all-CSS page made. I've got the three boxes positioned where I want them in reference to each other. Now, how do I get those three boxes on top of the gray fade area in the middle?<!--content-->Good question, very easy answer.<br />
<br />
When you use this method, you don't have to create different images for all of your links, you only have to create 2 images. What this does is set the image to the BACKGROUND of the anchor, and the text of the anchor is in the FOREGROUND, giving it the appearance of a button or title bar!!!<br />
<br />
Here, check out a site that I am currently working on for a client. The bar underneath the header image uses this method, and all the Title Bars use this method. Lang's Tropical Fish (<!-- m --><a class="postlink" href="http://www.langstropicalfish.com">http://www.langstropicalfish.com</a><!-- m -->)<!--content-->I've got the three boxes positioned where I want them in reference to each other. Now, how do I get those three boxes on top of the gray fade area in the middle? <br />
Hey, you're doing a great job so far, Primal.<br />
<br />
In your HTML, move the boxes div between the left and right scanline divs. Actually I think you'd be better off figuring out how to make your lower background out of a single repeat-x image.<!--content-->Ok, I've been really trying to learn how to do all these different things with CSS instead of using tables. I have to say that I feel like I've made progress.<br />
<br />
Here's a LINK (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/testpage.html">http://members.cox.net/williamsray/testpage.html</a><!-- m -->) to the site as it stands now. If you look at the bottom, you'll see that I've validated the CSS and the HTML. (I know, I know... I need to move to XHTML now.)<br />
<br />
I didn't really post to brag, especially since my site is nothing to brag about, but instead to say thanks to those who took some time to help me out here and there. And thanks to <!-- m --><a class="postlink" href="http://www.alistapart.com">http://www.alistapart.com</a><!-- m --> too. (Can you be in love with a website? I think I might be since it has such great tutorials.)<br />
<br />
Edit: I've updated the code to XHTML 1.1 now. Feels good in a nerdy kinda way!<!--content-->Good job Primal...Is it just me or is there only a single page (other links not working for me).<!--content-->Yeah, there's only one page right now. I know... Not really a website. It's more like a webpage. But the other pages are coming. I just gave the buttons dummy links using #. Thanks for checking it out, though.<!--content-->
<br />
I've attached a file with all the graphics separated by red lines to give you an idea of how it's layed out now. Click HERE (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/testpage.jpg">http://members.cox.net/williamsray/testpage.jpg</a><!-- m -->) for a copy of the image without all the red lines. Oh, the big box in the center will have text, and so will the smaller boxes on the right.<br />
<br />
If someone decides to help me with this, will you also explain why you use certain code, etc. I know it's a lot to ask, but I'm trying to learn. I'm not here because I want someone to just do it for me, but I would like some help laying out my personal site.<br />
<br />
Thanks.<!--content-->Primal,<br />
<br />
Here's a link to a good CSS Tutorial (<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/index.htm">http://css.maxdesign.com.au/index.htm</a><!-- m -->). Only practice will make you a master in CSS.
<!--content-->Well, the attachment was too big so here's a LINK (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/testpage2.jpg">http://members.cox.net/williamsray/testpage2.jpg</a><!-- m -->) to the image with the red lines.<!--content-->Looks like a half dozen divs; heading, nav and 3 or 4 in the content. The nav div should contain a <ul> for the tabs or buttons or whatever they are. You might want to check out ALA's Sliding Doors articles re your nav section.<!--content-->Primal,<br />Hang in there & don't get discouraged. CSS isn't as easy to learn for some of us as others suggest. Just keep trying & keep asking questions here. Things will get clearer as time goes on.<!--content-->Okay, I've worked on it and I'm making progress. I know it's only the top part of the page, but here is a LINK (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/testpage.html">http://members.cox.net/williamsray/testpage.html</a><!-- m -->) to what I've gotten so far.<br />
<br />
Now, using the links I've put up before, will someone please help me with the bottom half? At least point me in the right direction?<br />
<br />
And thank you for the help so far.<!--content-->There is something that you really need to consider; that header image is much tooo large. 150k for one image is too much. I'm on DSL and it still took some time for the image to load. Run it through some type of optimization to cut down on it.<br />
<br />
Also; it is a good thing that you have decided to learn and use CSS. For one, you don't have to use JS for image rollovers, CSS does it. That will make your site much more "Cross Browser".<!--content-->PhilMc, thanks for checking it out. As for the buttons, I was attempting to use the sliding doors method ray326 mentioned. I could not get them to all line up in a row, though. The way I saw to do it only used one image that moved up and down when you rolled over it. I created several div's to handle each separate button and they ended up stacking on top of one another.<br />
<br />
And the top banner, I can cut it up into smaller pieces. I wanted it to be one piece for now, though, just to keep ME straight! Once I think I've got a grasp on this, I'll go back and fix it.
<br /><br />
I've updated the LINK (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/testpage.html">http://members.cox.net/williamsray/testpage.html</a><!-- m -->) too. I think I'm on the right track for the bottom half. Now, how do I add the boxes in there?<br />
<br />
More questions...<br />
How do I center the entire page?<br />
How do I get the page aligned to the top?<br />
How do I make the background black?<br />
How do I get rid of the white space between the buttons and the bottom part of the page?<!--content-->Try this version.<!--content-->Great job Aronya on cutting that image down.
<br /><br />
Primal, so far so good, just 3 more suggestions.<br />
<br />
1. Use an external style sheet. Right now you are using an Internal Style Block. Granted, they both do the same thing, but external gives you an advantage. If you use an external sheet, you wont have to code the styles for every page; just link it!!
Here's how:<br /><br />
<link href=http://www.webdeveloper.com/forum/archive/index.php/"styles.css" type"text/css" rel="stylesheet"><br />
<br />
place that inside your head tags. You will save yourself MAJOR time using this.<br />
<br />
2. Ditch the JavaScript. CSS will do rollovers for you. Like this:<br />
<br />
a {<br />
background: url(images/footer.jpg);<br />
}<br />
<br />
a:hover {<br />
background: url(images/footerhover.jpg);<br />
}<br />
<br />
Place that inside either your style block or external sheet. This is much more "cross browser" than JavaScript and less work for you.<br />
<br />
3. This isn't critical yet, as you are still learning. The use of tables for layout is taboo because it is not symantecally (sp?) correct. Tables are meant for data (such as a calendar or spreadsheet). Soon you will learn how to achieve the same look and layout using all DIV's and CSS. When you get tha basics down, and learn the CSS attribute FLOAT and how to use it, this one will come to you, if not, we're here to help.
<!--content-->Thanks, PhilMc. A question about the CSS rollover, though. It still seems like that handles just one image rollover. How do I get it to handle more than one? I have several buttons to work with.<br /><br />
I'll move the styles to a separate page once I've got this worked out. I think leaving it there for now helps for those of you who are kind enough to help a newbie like me.<br />
<br />
I'm going to experiment with the FLOAT tag since you mentioned it.<br />
<br />
I've updated the PAGE (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/testpage.html">http://members.cox.net/williamsray/testpage.html</a><!-- m -->) with the boxes included. I stole a bit of code from the thread about tables within tables. Someone had a nice example all-CSS page made. I've got the three boxes positioned where I want them in reference to each other. Now, how do I get those three boxes on top of the gray fade area in the middle?<!--content-->Good question, very easy answer.<br />
<br />
When you use this method, you don't have to create different images for all of your links, you only have to create 2 images. What this does is set the image to the BACKGROUND of the anchor, and the text of the anchor is in the FOREGROUND, giving it the appearance of a button or title bar!!!
<br /><br />
Here, check out a site that I am currently working on for a client. The bar underneath the header image uses this method, and all the Title Bars use this method. Lang's Tropical Fish (<!-- m --><a class="postlink" href="http://www.langstropicalfish.com">http://www.langstropicalfish.com</a><!-- m -->)<!--content-->I've got the three boxes positioned where I want them in reference to each other. Now, how do I get those three boxes on top of the gray fade area in the middle? <br />
Hey, you're doing a great job so far, Primal.<br />
<br />
In your HTML, move the boxes div between the left and right scanline divs. Actually I think you'd be better off figuring out how to make your lower background out of a single repeat-x image.<!--content-->Ok, I've been really trying to learn how to do all these different things with CSS instead of using tables. I have to say that I feel like I've made progress.<br />
<br />
Here's a LINK (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/testpage.html">http://members.cox.net/williamsray/testpage.html</a><!-- m -->) to the site as it stands now. If you look at the bottom, you'll see that I've validated the CSS and the HTML. (I know, I know... I need to move to XHTML now.)<br />
<br />
I didn't really post to brag, especially since my site is nothing to brag about, but instead to say thanks to those who took some time to help me out here and there. And thanks to <!-- m --><a class="postlink" href="http://www.alistapart.com">http://www.alistapart.com</a><!-- m --> too. (Can you be in love with a website? I think I might be since it has such great tutorials.)<br />
<br />
Edit: I've updated the code to XHTML 1.1 now. Feels good in a nerdy kinda way!<!--content-->Good job Primal...Is it just me or is there only a single page (other links not working for me).<!--content-->Yeah, there's only one page right now. I know... Not really a website. It's more like a webpage. But the other pages are coming. I just gave the buttons dummy links using #. Thanks for checking it out, though.<!--content-->