Topic: layout and color (Page 1 of 1)

The Site
The CSS

I have the page nested in a DIV called frame with left and right margins = auto, so that the content stays centered.

here's an example of what I'm trying to accomplish -


I'm just having trouble figuring out what attribute I have to set/change...

any help is, as always greatly appreciated.





Some people say I'm a dreamer, but I'm not the only one (John Lennon)

If you ran the CSS through the W3C validator you would see two things:

margin-color - this isn't a CSS property. Margins are outside the box, and thus don't have any background. The background belongs to whatever elements are rendered under the margin.

In #links, you have a width without unit. Give it a unit.



However, those don't explain the black background in the margins. The cause of the black background in the margins is that you have a bgcolor attribute on the body element in your HTML. Remove that one.


Oh, another tips: Use "html, body" instead of "body" for styles that should apply to the entire document. Older browsers use body, but newer browsers use html, as the element that represent the document. (In fact, correct browsers does neither, but that's another story...)

--
var Liorean = {
prototype: JavaScriptGuru.prototype,
abode: "http://liorean.web-graphics.com/",
profile: "http://codingforums.com/member.php?u=5798"};

thanks

the margin-color was there because I was playing around with it. I'm not understanding the "html, body" part, do I put that instead of body in the css or html?





Some people say I'm a dreamer, but I'm not the only one (John Lennon)


[edit]
I get the feeling I'm getting closer, but I'm still not quite there.... any suggestions?
[/edit]

(Edited by I X I on 11-21-2004 01:24)

As for the 'html, body' versus 'body' part, I was referring to this:

body {

	font-family: 'Courier New', Serif;

	font-weight: bold;

	font-size: 80%;

	text-align: left;

	color: #C0C0C0;

	background-color: #C0C0C0;

}

Which would probably be better off written as

html,body{

    margin: 0;

    padding: 0;

    font-family: 'Courier New', Serif;

    font-weight: bold;

    font-size: 80%;

    text-align: left;

    color: #C0C0C0;

    background-color: #C0C0C0;

    }

Well, your problem as it looks right now is that you're not extending the area to give the black background to fill the entire document.

As for fixing it, I've not played around with your structure enough to give you the fix, but it probably relates to clearing those floats and making sure the height is sufficient. (Consider 100% height and width, auto overflow, absolute positioning on html element for instance. I'm not saying it's the fix you need, merely that it is one of the possible solutions that I would experiment with.)

--
var Liorean = {
prototype: CSSGuru.prototype,
abode: "http://codingforums.com/",
profile: "http://codingforums.com/member.php?u=5798"};

quote:

---

liorean said:

clearing those floats

---

what do you mean by this?





...Of all the things I've lost, I miss my mind the most (ozzy osbourne)

Typically, you do it by including a block level element as the last child of the element that is parent to the floats, and define the CSS clear: both; for this element.

If you want to do it a cleaner-but-larger way, read http://www.positioniseverything.net/easyclearing.html.
--
var Liorean = {
prototype: CSSGuru.prototype,
abode: "http://liorean.web-graphics.com/",
profile: "http://codingforums.com/member.php?u=5798"};

(Edited by liorean on 11-21-2004 04:29)

that makes a little bit of sense, going off to read now, will post my results when I get it done.

thanks





...Of all the things I've lost, I miss my mind the most (ozzy osbourne)

well, here goes...

www.IXIfx.net

I plan on making my own background image, but for now this will suffice

thanks again for all the help

[edit]
is there a way to keep the page at least 100% of the page height (for my pages without much content)? I've been playing around but I either manage to get un-needed scroll bars or mess my footer placement up.
[/edit]



Some people say I'm a dreamer, but I'm not the only one (John Lennon)

(Edited by I X I on 11-29-2004 01:48)

been playing around with it A LOT lately, been working on alot of PHP/MySQL as well as the layout.
I've got the page rendering PERFECTLY how I want it in FF1.0 on Win98SE, but IE totally screws up the navigation. I am fishing for feedback from Mac/Linux users, just simply does it render as it does in FF1.0 for windows, and also if anybody can tell me what exactly is breaking it in IE.

The CSS is still right here
A screenshot can be found right here - ~19k
and to get to the site to see it in action, just click on my sig or right here.

any help, as always, is greatly appreciated.



You know I'd like to keep my cheeks dry today, so stay with me and I'll have it made (Shannon Hoon)