Topic: yet another ridiculous CSS question....

Upon posting this I haven't quite figured out why this is happening.
I am still battling with this whole CSS thing, in alot smaller ways now thanks to many of you.
But, nonetheless, still battling.

I've gotten my css and html drawn up pretty simple and I'm just trying to do some basic stuff here with no success.

http://wayoutwestenterprises.com/ro/

Once I start to place content into my maincontent area, I get these margins above and belove the maincontent area.
I'm trying to follow DL's suggestion of using existing html markup to keep things clean. For gods sake this is probably
the most basic step and I'm still struggling.

what am i doing wrong?

I don't know the specific to why, but I ran into this same problem today playing with the sliding door technique for round corned boxes. You may have to set the top and bottom margin of the first and last object inside the "mainarea" block element. But I'm sure there's a better solution, but I'm not much past the intermediate stage myself.

J. Stuart J.

(Edited by jstuartj on 02-28-2007 08:38)

Using the mterics indicator in Opera's developer Console I spotted a 13px margin top and bottom on the H1 and 11px margin top and bottom on the P tag. These margins aren't set explicitly or inherited from other CSS rules. They are part of the default style. You can either set a padding top and bottom on the #maincontent to compensate these margins, or fidlle with the margin of the tags you may have in #maincontent.

You should grow the reflex to use some developer tools. Be it FireBug, the Opera's Developer Console or Internet Explorer Developer Toolbar

Oh, and my semantic self would rather use ULs for the navigations instead of DIVs

HTH



(Edited by poi on 02-28-2007 09:36)

I think poi has hit the nail on the head, I would just like to add that many developers now find it best practive to have the following rule first in their CSS

* {
  padding: 0;
  margin: 0;
}

This will set all elements to have a padding and margin of 0, which means that browser defaults aren't used, which means that there should be less inconsistencies between browsers, it does however mean that you'll need to specify the padding and margin for each element you require to have it, this isn't so bad though.

Hope this helps.

Cheers,

Blaise: My * rule includes border:0; because I rarely want a border on images.



(Edited by poi on 02-28-2007 14:48)

Sometimes my thinking with CSS still messes me up. I still find myself coming back here to look over previous tips from others to make sure my code is correct, or I'm piecing together the divs accurately. Again, I'm just always gratefull that I can come here for advice.

Ok, I set the margins and padding of maincontent to 0 but I still had the gaps. I created a #maincontent p {} and set the h1 tag with margin/padding: 0 and that seemed to fix it.

It's odd that I need to set that everytime, but who am I to go against the code rules?

Thanks again guys. BTW, does it look like I've pieced it together clean enough? I'm sure there are a few things I can do but just not sure where. :-)



(Edited by Radical Rob on 02-28-2007 14:24)

quote:

---

Radical Rob said:

Thanks again guys. BTW, does it look like I've pieced it together clean enough? I'm sure there are a few things I can do but just not sure where. :-)

---

quote:

---

poi said:

Oh, and my semantic self would rather use ULs for the navigations instead of DIVs

---

<!-- no comment -->

(Edited by poi on 02-28-2007 14:54)

quote:

---

Radical Rob said:

BTW, does it look like I've pieced it together clean enough? I'm sure there are a few things I can do but just not sure where. :-)

---

Good to see you're diving in

The two things I would do differently:

1) the navigation links are in reality a list of links, and should be coded as such. In your css, you can set '#nav ul li' in one of two ways: display:inline; or float:left; to keep them horizontally aligned.

2) the "top" div has no purpose structurally, and should not be there. An empty div is just as pointless as an empty anything else.
Also, ID names that indicate style (position) rather than purpose are a bad habit. "top" is not an indicator of what the element is, only *where* the element is (which with altered CSS, may not be accurate in the future).

ya know I tried to play with using lists for navigation, and even tried several examples but I'm still not there. I'm sure it's relatively simple I just (again, used to hacking html) to get things to work properly, not necessarily the right way.

Any suggestions for the nav?

Oh and for the top div, what would you suggest? The header section will probably have an image that will display at random... or maybe a simple flash element... not sure yet, this is going to be more of a personal resume site for me. I figured that this way, if the image had a height bigger then what I declare in the div, then it will just resize accordingly. Or is that still table theory thinking?

For the IMG/Flash at the top you can easily scrap the DIV#top and replace it with say:

HTML:
<h1><a href='/'><img src='img/header/random.jpg' alt='me, myself and I' /></a></h1>

CSS:
h1
{
background-image: url("http://wayoutwestenterprises.com/ro/img/1.jpg");
width: 650px;
padding:0 65px;
margin:0 auto;
}


The height of the H1 will depend on the height of the IMG.

So would it be better to eliminate un-needed divs at all possible? And in your example, if I'm using h1 as a general "header", should I rename it to h2 and utilize h1 as you state? Just not sure the "proper" method.