17 replies [Last post]
Icoo
Offline
newbie
Last seen: 16 years 37 weeks ago
Joined: 2006-05-22
Posts: 6
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 50 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

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?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 40 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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 Tongue

Verschwindende wrote:
  • CSS doesn't make pies

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 50 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

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 Tongue

But I must confess that it's not original, alas. I got it from a CSS book.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 40 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Layout

Woulnd't it therefore just be easier, and use less divs, to give the HTML element a 10px black border?

Verschwindende wrote:
  • CSS doesn't make pies

Icoo
Offline
newbie
Last seen: 16 years 37 weeks ago
Joined: 2006-05-22
Posts: 6
Points: 0

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?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 40 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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 Tongue

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 Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Icoo
Offline
newbie
Last seen: 16 years 37 weeks ago
Joined: 2006-05-22
Posts: 6
Points: 0

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

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 40 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Layout

Are you after a black site with white borders?

Verschwindende wrote:
  • CSS doesn't make pies

Icoo
Offline
newbie
Last seen: 16 years 37 weeks ago
Joined: 2006-05-22
Posts: 6
Points: 0

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

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 40 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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}

Verschwindende wrote:
  • CSS doesn't make pies

Icoo
Offline
newbie
Last seen: 16 years 37 weeks ago
Joined: 2006-05-22
Posts: 6
Points: 0

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 Laughing out loud

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 40 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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.

Verschwindende wrote:
  • CSS doesn't make pies

Icoo
Offline
newbie
Last seen: 16 years 37 weeks ago
Joined: 2006-05-22
Posts: 6
Points: 0

Layout

Here is the screenshout how it should look (in IE):

CLICK! IE

Now open the same code in FIREFOX and you will get this:

CLICK! FIREFOX

I hope this has brought some light into this...I want it to look like in IE, and yes I have to use DIV...

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 19 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Layout

I am not sure why the others didn't mention this Wink, 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. Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me