• Registered: 2009-03-12
  • Posts: 6

Topic: CSS Question

I use Fireworks to design my webpages and then export to Dreamweaver for content. I'm still learning CSS and have a question/issue on a page.

On my homepage, www.bgoodin.com, the bottom div doesn't seem to want to extend to the bottom of the page. On my other pages, I have no problems; the bottom div extends to cover my footer. It just doesn't seem to want to cooperate on my index page.

If someone could let me know what is causing this, I would greatly appreciate it!

Thanks,
Brandon

2 Reply by lm

  • lm
  • Advanced Member
  • Offline
  • Gender: Female
  • From: The Netherlands
  • Registered: 2008-12-20
  • Posts: 2,770

Re: CSS Question

it is quite wicked thing to see: your code have no semantic sense but yet validates.

Anyway, to get you  coding:

Here is a tutorial which could help you to create good  CSS layout base on any graphic template.

And more CSS templates examples

  • Registered: 2009-05-28
  • Posts: 5

Re: CSS Question

I had a quick look but couldn't make much sense of it... it's just very messy, sorry... probably from the program you did the coding from with all those default div names.

If you have Firefox (if not, install it), install the 'firebug' extension and learn how to use it a little. It is great for seeing what's going on with your site. I had a quick look with firebug on the footer (index page), and could see the code you used to get the image for that div. But when I pasted the link to the image ("test/images/something.jpg") the browser wouldn't load up the image for me... just a stripped out version of your index page (just text), so I guess you have some funky javascript going on there.... which makes it hard to check if the image actually exists for me.

The html/css could be done alot better btw (great effort for your first time though), to make it easier to understand and also quicker to load and less error-prone and better looking. You have images going 1000 pixels wide, which could easily be just 20px wide and repeating horizontally (and vertically for that grey background image). Once you understand the css box model you'll get it and be able to plan things out better.
For the footer you should create a div just for that eg 

<div id="footer">copyright blah blah</div>

in the html, and in the css have it auto-centred and with it's own background image or colour. That way it is much easier to put it in any page you want.

Best way to learn is read the tutorials/books and also look at the code of other websites (where firebug is excellent).

  • Gender: Female
  • From: San Antonio, TX
  • Registered: 2008-12-19
  • Posts: 3,640

Re: CSS Question

The code definitely is interesting-looking.  Is there any reason for this: 

line-height: 119.99999682108562%;

?

It's always better to use class and ID names that have meaning - Div1 through 6 just isn't very descriptive.  There is also no reason to wrap the entire page into form tags.

  • Registered: 2009-03-12
  • Posts: 6

Re: CSS Question

I had used Fireworks for the design, exported to Dreamweaver. Both CS4. And that's what the result was.

I spent considerable time earlier in the week going back through the coding and making sense of it and arranging appropriately.

http://bgoodin.com/index-new.htm

I noticed today that the logo div is not lined up correctly - I'll fix that tonight and put the rest of the pages into this format.

But the time spent was beneficial, as it helped me learn how divs work in CSS.

Thanks for the feedback and any additional feedback is appreciated!

Brandon