Mon, 2006-05-22 08:25
OK here is my layout idea, and i don't really know if I can turn it into CSS. Well the layout should look like this:
the background would be black and then there would be a content "placeholder" which distance from the border of the browser would be exact 10 px, and this place holder would be white. I hope you get the picture...can someone help me
Mon, 2006-05-22 08:56
#1
Layout
Not really , well not from that sketchy idea, we could tell you a basic layout format , but better would be if you made a start and then showed us your basic layout, and we could advise on that. If you literally don't know where to start then best advice would be to begin with some beginners HTML/CSS tutorials.
Have a go, it will be possible to work up with CSS when you have a basic layout or run into problems then post back and we will take a look for you and help you along with pleasure.
Hugo.
Mon, 2006-05-22 16:00
#2
Re: Layout
Icoo wrote:
the background would be black
Right there you drove me away from your site. Consider this: why is it harder to drive at night than during the day?
Mon, 2006-05-22 16:42
#3
Re: Layout
Ed Seedhouse wrote:
why is it harder to drive at night than during the day?
Because you can't s . . . oh wait, I get it. Hahahaha, very good Mr Ed 
Mon, 2006-05-22 18:36
#4
Re: Layout
thepineapplehead wrote:
Ed Seedhouse wrote:why is it harder to drive at night than during the day?
Because you can't s . . . oh wait, I get it. Hahahaha, very good Mr Ed
But I must confess that it's not original, alas. I got it from a CSS book.
Mon, 2006-05-22 18:50
#5
Layout
Er , I'm not overly keen on dark backgrounds either chaps, but have seen some that are effective, it depends on how it's implemented. The poster does mention a 'placeholder' that is white and that in effect the black will be a border around this, 10px wide, which is fairly subtle!
Hugo.
Mon, 2006-05-22 19:46
#6
Layout
Woulnd't it therefore just be easier, and use less divs, to give the HTML element a 10px black border?
Sun, 2006-05-28 17:25
#7
Layout
OK i somehow managed to slowly learn CSS! This is the code
<head>
<style type="text/css">
DIV.body1 {
HEIGHT: 100%;
BACKGROUND-COLOR: #FFFFFF;
}
DIV.body2 {
HEIGHT: 100%;
MARGIN: 7px;
BACKGROUND-COLOR: #000000;
}
body {
margin: 10px 5px 10px 4px;
background-color: #333333
}
</style>
</head>
<body>
<div class="body1"><div class="body2"></div></div>
</body>
But you see the problem, the black box has 7 px on the left and right side but not on the top and bottom...how can i fix this?
Sun, 2006-05-28 18:07
#8
Layout
<div class="body1"><div class="body2"></div></div>
I'm . . confused? Why two divs with body classes? That's what the body tag is for
Can you post a quick mockup image of what you're trying to achieve, I feel you may be going about it slightly wrong way.
But kudos for getting this far, CSS can be a daunting thing to learn 
Sun, 2006-05-28 18:40
#9
Layout
well one is body1 and the other one body2. I called them body just for fun (had no other good idea). Here is the screen:
You see...the black box has no 7 px top and bottom...like the left and right side
Sun, 2006-05-28 18:48
#10
Layout
Are you after a black site with white borders?
Sun, 2006-05-28 21:08
#11
Layout
No no... first it should be gray, then white and then black...I explained it in the first post...now the only thing i have to take care of is the top and the bottom of the black part...
I tried this code in IE:
<head>
<style type="text/css">
DIV.body1 {
HEIGHT: 100%;
BACKGROUND-COLOR: #FFFFFF;
}
DIV.body2 {
HEIGHT: 100%;
MARGIN: 7px;
BACKGROUND-COLOR: #000000;
}
body {
margin: 10px 5px 10px 4px;
background-color: #333333
}
</style>
</head>
<body>
<div class="body1"><div class="body2"></div></div>
</body>
and it works like I want to, but Firefox ignores the 7px at body2. Check it out on your own in IE, how can i fix this in Firefox
Mon, 2006-05-29 08:13
#12
Layout
Your first post says you want a black site with a 10px border, am I right?
If you want two borders, consider styling the HTML element as well:
html {border: 10px solid grey]
body {border: 10px solid #fff; background: #000}
Mon, 2006-05-29 08:57
#13
Layout
no no...thats not the way I want it to look like, and I have to take care of the different resolutions my users will have, so I have to go with the DIV one... Look ... I see you know quite a lot about CSS, and I'm sure you have somekind of testing server like I have on my PC (localhost)...why don't you just save the code and run it on your own, then you would see what it should look like (it works perfectly in IE)...then maybe you will be able to help...the thing we are doing now is guessing
Mon, 2006-05-29 09:04
#14
Layout
I did try the code you posted, all I see is a div with a thick white border?
What exactly is it you want?
Is it:
a) grey page background
b) white border on a black background div?
If so, then give the HTML element the grey background, and the BODY the white border and black background.
Resolution doesn't come into it.
Mon, 2006-05-29 09:47
#15
Layout
Here is the screenshout how it should look (in IE):
Now open the same code in FIREFOX and you will get this:
I hope this has brought some light into this...I want it to look like in IE, and yes I have to use DIV...
Mon, 2006-05-29 10:29
#16
Layout
I am not sure why the others didn't mention this 
, but first you should mark up a page in HTML then you should add styles to the page. Work in FF and then correct for IE. IE has a very strange way of working, its very difficult to fix something for other browsers based on IE, its easy to fix things for IE based on other browsers.
You could try:
* { margin: 0; padding: 0; }
html, body { background: #333; height: 100%; }
#page { margin: 10px; border: 10px solid white; background: black; min-height: 100%;}
* html #page {height: 100%;} /* IE only */
<body>
<div id="page">
</div>
</body>
Ed, et. al,
For some reason the young (I am assuming the OP is young) think black backgrounds are good. I wonder if they have their gamma turned up so high that white is painful to look at. 
Mon, 2006-05-29 11:06
#17
Layout
Don't quite know why no one thought to mention that results will vary without a DocType, margins collapse, and that height cant be used in that way , however TPH did suggest that the html and body can be used for backgrounds, but you have Chris's example to use now which is a sensible and minimal approach, however you will probably not be happy with the bottom!