Topic: yet another ridiculous CSS question.... Pages that link to <a href="https://ozoneasylum.com/backlink?for=29003" title="Pages that link to Topic: yet another ridiculous CSS question...." rel="nofollow" >Topic: yet another ridiculous CSS question....\

 
Author Thread
Radical Rob
Bipolar (III) Inmate

From: Lost Angeles Kalifornia, via Hawaii....
Insane since: Jun 2001

IP logged posted posted 02-28-2007 08:09 Edit Quote

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?

jstuartj
Bipolar (III) Inmate

From: Mpls, MN
Insane since: Dec 2000

IP logged posted posted 02-28-2007 08:37 Edit Quote

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)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 02-28-2007 09:29 Edit Quote

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)

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 02-28-2007 10:45 Edit Quote

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

code:
* {
  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,

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 02-28-2007 11:40 Edit Quote

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



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

Radical Rob
Bipolar (III) Inmate

From: Lost Angeles Kalifornia, via Hawaii....
Insane since: Jun 2001

IP logged posted posted 02-28-2007 14:15 Edit Quote

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)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 02-28-2007 14:49 Edit Quote
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



poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 02-28-2007 14:50 Edit Quote

<!-- no comment -->

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

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 02-28-2007 14:58 Edit Quote
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).

Radical Rob
Bipolar (III) Inmate

From: Lost Angeles Kalifornia, via Hawaii....
Insane since: Jun 2001

IP logged posted posted 02-28-2007 18:26 Edit Quote

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?

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 02-28-2007 18:50 Edit Quote

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.

Radical Rob
Bipolar (III) Inmate

From: Lost Angeles Kalifornia, via Hawaii....
Insane since: Jun 2001

IP logged posted posted 02-28-2007 18:55 Edit Quote

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.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu