CSS and positions

delanest · 11-01-2007 2:48am #1

I'm learning CSS here ...

In order to rezise my site when the browser is resized I am planning to have at least one position attribute set to a percentage.

I'm using Id div tags and CSS, something like this ....

html ....

<body>
<div id="container">
<div id="Layer1"> </div>
<div id="Layer2"> </div>
</div>
</body>
</html>

css ....

#Layer2 {
position: absolute;
background : #5e5d50;
background-image: url(images/handprint.jpg);

left: 27%;
top: 139px;
height: 159px;
width: 278px;
}

Is this the norm, that in order for your page to resize in your browser that you use % in position? i.e. all sites using css must have some % ??

Goodshape · 11-01-2007 3:06am

It's the norm if that's what you want to do I guess.

Although "left : 27%; width : 25%;" (or whatever percentage works for you) would create a proper fluid-width page. What you have will just move the DIV closer to or further from the side.

Also, 'id' is fine for your container, and it works for the rest, but you should change the Layer1/2 to 'class' instead (and use .layer1 instead of #layer1 in your CSS). A class can be reused in multiple DIVs, an ID cannot.

You could have something like :

#container {
    left : 25%;
}
.inner_layer {
    float : left;
    background : #5e5d50;
    background-image: url(images/handprint.jpg);
    width : 25%;
    height : 200px;
}

<body>
    <div id="container">
        <div class="inner_layer"> </div>
        <div class="inner_layer"> </div>
    </div>
</body>

But maybe that's not what your after. CSS is versatile, that's the beauty of it.

delanest · 11-01-2007 3:37am

na cool, thats good to know, classes are in the next chapter

Using Dream weaver here, using the Design layout it will only let me position things in pixels, have to then change them to % then manually

I presume though, that all (vast majority) web pages should resize when the window does ? - and therefore use the above?

Goodshape · 11-01-2007 3:49am

Some of them do, some of them don't. It probably is the better practice but not all desired styles are compatible with fluid widths.

Something like boards.ie is easy - it's just boxes of text. Doesn't really matter what width the boxes of text are.

The BBC News site, on the other hand, has a fixed width so they know exactly where the content is going to be on any monitor. Allows them to create a serious, clean, professional looking site.

Generally fixed width sites are easier to create as juggling percentages can get a little tricky. If you do go for a fixed width you have to keep in mind that many people still use 800x600 resolution, so you shouldn't have anything wider than 800px (although you might get away with 1024 these days).

seamus · 11-01-2007 10:50am

delanest wrote:

I presume though, that all (vast majority) web pages should resize when the window does ? - and therefore use the above?

As Goodshape points out, a lot of it is to do with style. In general, you'll find sites that contain a lot of information, eg boards.ie and wikipedia.
Other, more commercial sites where image and style are more important, tend to opt for fixed-width as this gives them exact control over how their page appears on the visitor's screen.

But the choice is totally up to you, neither are a better practice, unless one approach makes your site unwieldy or unusable.

delanest · 11-01-2007 2:50pm

thanks for the help lads, the bbc link is a good example cheers.

about the Dreamweaver part, can I create fluid pages using the design view or do I always have to change the css manually ?

Goodshape · 11-01-2007 3:02pm

I'd imagine Dreamweaver would prefer the fixed widths, as it's easier for new comers and for getting the job done quickly. Although honestly, I have no idea.

Prefer the code myself.

delanest · 11-01-2007 3:43pm

Goodshape wrote:

I'd imagine Dreamweaver would prefer the fixed widths, as it's easier for new comers and for getting the job done quickly. Although honestly, I have no idea.

Prefer the code myself.

yea from hanging around the boards, I see most/all serious developers code themselves, makes sence really, any off the few tools I've tried will only bring you so far, anyway I'll use my nefound knowledge to give it another bash tonight

CSS and positions

Comments