Forum Moderators: not2easy

Message Too Old, No Replies

How does a website fill an entire Browser flush?

Regardless of the monitor size or viewing area...

         

bossmanty

9:01 pm on Dec 11, 2002 (gmt 0)

10+ Year Member



How does a website fill a entire Browser flush?
Regardless of the monitor size or viewing area...

Where some websites will only fill a portion of the browser...

GuanoLad

4:38 am on Dec 12, 2002 (gmt 0)

10+ Year Member



Width and hheight are set to 100%, and margins are set to zero.

BlobFisk

11:00 am on Dec 12, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Guanolad has it.

Currently there are two different width values that we use, absolute and relative. Absolute values use pixels, so a designer may decide that their website is 750px wide and deisgn as such - but when I come along, with a high browser resolution, I see blank space around the unused portion of my screen.

A better way if doing it is to use percentages. You specify widths that add up to 100%. This means that no matter what the resolution of a users monitor, the web page will stretch to use all available space. This is called a 'Fluid' page design, and a WebmasterWorld site search or Google search for fluid design (the 3 column approach is quite popular) will yield a number of useful results.

Nick_W

11:06 am on Dec 12, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You also need to eliminate margins and/or padding (as GuanoLad said) on the body.

In your CSS

body {
margin: 0;
padding: 0;
}

Nick

andreasfriedrich

2:26 pm on Dec 12, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You also need to eliminate margins and/or padding on the html element.
In your CSS

html {
margin: 0;
padding: 0;
border: none;
}

Andreas

korkus2000

2:34 pm on Dec 12, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You can style the html element? Is that valid? What else can you do to that element?

bossmanty

3:03 pm on Dec 12, 2002 (gmt 0)

10+ Year Member



andreasfriedrich
I'm not fimilar with CSS, where should that code be placed?

korkus2000

3:05 pm on Dec 12, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You can place it in <style></style> tags inside the head element like javascript.

andreasfriedrich

3:10 pm on Dec 12, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You can style the html element? Is that valid? What else can you do to that element?

Yes you can. It works like a charm.

It is valid as well.

You can set a border, padding, background, just about everything you can do on any other element.

Andreas

Nick_W

3:13 pm on Dec 12, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You also need to eliminate margins and/or padding on the html element.

Why andreas? -- Which browsers do not give the correct effect if you style the body element?

Nick

bossmanty

3:34 pm on Dec 12, 2002 (gmt 0)

10+ Year Member



I'm using Dreamweaver and it has the CSS feature,,,, What should I do to complete this command?

Nick_W

3:43 pm on Dec 12, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The DW manuals probably your best bet, though I would always recommend doing some homework at the W3C's CSS Section [w3.org]....

Nick

andreasfriedrich

4:02 pm on Dec 12, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Of course styling the html element is not really neccessary. Everything works fine without it.

IE5+ displays a black 1px border around the webpage. You can remove this border by setting the border attribute of the html element to none. This will give you a more flat look. This is helpful when you use the object element to display an external html document in another one. Even when the object has no border there is still the border of the inline documents´ html element.

I just thought this thread to be a good opportunity to remind you of the fact that the html element is stylable as well. Just play around with it and you´ll discover this to be quite exciting ;)

Andreas

korkus2000

4:26 pm on Dec 12, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Does dreamweaver have a way to type in styles?

Nick_W

4:31 pm on Dec 12, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



AFAIK, you gotta go edit the .css file manually with a text editor...

Nick

bossmanty

4:34 pm on Dec 12, 2002 (gmt 0)

10+ Year Member



Nick, could you go into more detail?

Nick_W

4:37 pm on Dec 12, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Sorry, that's all there is there is to it. THe DW manual is your best bet. If you don't get it, you may wish to see if the guys in the WYSIWYG Editor Forum [webmasterworld.com] have to say...

Sorry, die hard hand coder here.. ;)

Nick

korkus2000

4:39 pm on Dec 12, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



In dreamweaver I know you can view HTML. Then it would look like this:
<head>
<title>this is my title</title>
<style>
body {
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
border: none;
}
//You can put any needed css inside these style tags in the head.
</style>
<script>
Some javascript
</script>
</head>
<body>

theonliest

3:47 pm on Dec 13, 2002 (gmt 0)

10+ Year Member



wow,that html definition really works!
not sure we should be suggesting the use of it though to someone who's starting out with css,
I've been using css for 3 years and I never heard of it before!

BlobFisk

3:57 pm on Dec 13, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



korkus,

Is there some significance in putting the html definition after the body definition?

korkus2000

3:59 pm on Dec 13, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



No, I was just giving bossmanty a template. bossmanty wanted to know where and how to implement the css. This was just a simple way to get it done since bossmanty is new to css.

bossmanty

4:03 pm on Dec 13, 2002 (gmt 0)

10+ Year Member



korkus2000
I tried it and it didn't work..... can i send you the link to the site i'm working on?

Nick_W

4:10 pm on Dec 13, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Let's keep the discussion going here please ;) So all can benefit.

Which browser does it not work in and what do you have in your CSS?

Nick

caine

4:19 pm on Dec 13, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



DW - does have its own CSS environment, that you can play with, reading this post, it sounds like a global site characteristic (Style), so i would recommend that the CSS, certainly the parts regarding the size, padding and space issues are placed externally.

The CSS editor in DW MX ain't bad at all. But as Nick said, reading the W3C CSS document is very much worth a once over, before trying to utilise editors such as DW's verion or TopStyle Pro.

However the code that is above certainly solves the original question, with browsers that support the CSS.

bossmanty

4:25 pm on Dec 13, 2002 (gmt 0)

10+ Year Member



I'm using DW4, how would I use the CSS panel to accomplish this?

Nick_W

4:36 pm on Dec 13, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Have you tried the DW Manual?
If you don't have one, you may like to see this [macromedia.com...]

Nick

turk182

4:59 pm on Dec 13, 2002 (gmt 0)

10+ Year Member



Korkus2000
Does dreamweaver have a way to type in styles?

In Dreamweaver MX you can edit in its own style editor or directly (it opens the CSS as text)

bossmanty

5:41 pm on Dec 13, 2002 (gmt 0)

10+ Year Member



Should it look like this?

<head>
<title>this is my title</title>
<style>
body {
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
border: none;
}
</style>
<script>
Some javascript
</script>
</head>
<body>

Nick_W

5:48 pm on Dec 13, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Looks great to me Bossmanty, you may want to write the style tag like this for compliance though:

<style type="text/css">

What seems to be the trouble?

Nick

bossmanty

6:32 pm on Dec 13, 2002 (gmt 0)

10+ Year Member



Nick, I hate to seem stupid but could you show me in the example I used where to put your changes?
This 33 message thread spans 2 pages: 33