I have no idea what I’m doing…

[drumrigj]

…but I was able to get this far: http://igotsauced.com/newsite

I need some expert eyes to go over this site and (laugh) then help. Should I do ‘div’s differently? I don’t know when to use margin vs. padding or when to use classes…I just keep messing with it until it looks right. And the page does look right in FF3, Safari and Chrome. But dies in IE 7.

I’m about ready to use a service like psd2html but it doesn’t seem like I’m that far off.

Thanks for the help AND as an added incentive…possible contest for free Heffys bbq sauce ( http://heffys.com ) for those that help!!

Jason D

[TheDoc]

If you’re truly unsure of what you’re doing, I’d wander over to http://themeforest.net/ and purchase a template for $12. It will save you lots of headaches in the long run.

You’ll get clean/validated HTML/CSS, some PSD’s for customizing, a help file (normally), etc etc. It’s a great starting point for people to look at what nice clean code really is. You can make modifications to it, etc etc.

If you don’t want to go that route, it’s best to specifically talk about what problem you’re seeing. When at home I run on a Mac and don’t have access to IE7, so I wouldn’t be able to compare things. But if I knew what the problem was, I might be able to simply look at the code and find the problem.

You might have too many divs, hard to tell without having too much of a closer look at it.

Here’s some pointers on topics you brought up:

Class v ID
An element with a .class is something that is going to be used more than once. You’ll commonly see this on images (<img class="classname" alt="" src="image.jpg" />), paragraph tags (<p class="leftmain">), etc etc. This can also apply to divs though, say if want to float a picture and a caption (text) simoultaneously, you would use a class on a div like:

Code:

This is a caption

An element with an #id is something that is only used once on a page. So, your header div, main content, etc etc. These things should only be appearing once. <div id="header">

Margin v Padding
[img]http://2.bp.blogspot.com/_vgTLQ5mShiI/RYpoweMMXvI/AAAAAAAAACk/nmzK6_AGOoc/s400/margin_padding.bmp[/img]
Image from here
What I always think of it as, margin will move your element away from other elements; padding will expand your element outwards. For example, if a div has a width:100px; and padding:20px;, it will actually be 140px wide, though the content inside will only be 100px wide. I can see now how this could be confusing! It just takes practice and tinkering to figure it all out.

Let me know if that at least helped!

[Rob MacKay]

Dont be too hard on yourself, thats a good start!

TheDoc has some good advice there!

One thing I would say is instead of using margin and padding to position your divs, use "position" – you will have better cross browser compatability that way.

for example…

Code:

#welcome {
width: 41%;
border: 5px solid #e2e2e2;
background: #f5f5f5;
-moz-border-radius: 10px;
padding: 20px;
[b]margin: 130px 0 0 30px;[/b]}

I would do…

Code:

#welcome {
width: 41%;
border: 5px solid #e2e2e2;
background: #f5f5f5;
-moz-border-radius: 10px;
padding: 20px;
[b] position:absolute;
top:130px;
left:30px; [/b]}

Now when using the positioning like that, its just better, as margin and padding are really only for minor adjustments, and should be thought of that way, as separating elements from one another or helping with typography within elements.

With positioning comes a whole army of little things though, if you were to use the above code you would have to position every element within the wrap like that, and give the warp atleast a relative position.

If that makes any sense… lol

[drumrigj]

Thanks guys for the input, I’ll try it out this evening and let you know how it goes.

[Author]

Posts