473,735 Members | 2,072 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

CSS Positioning and Browser Resizing

Hello Everyone,

The problem of browser resizing has become an issue for me. While
redesigning my webpage, I set the left and right margins to be auto so
that my content would be centered. However, there are images that I
used absolute positioning in order to place them in the appropriate
location on my page. When I do a browser resize, these images do not
move (obviously). However, the rest of my content is auto centered as
appropriate.

What is the best solution for this problem? Could I use percentages
to position the images rather than by using pixel position?

My test page is at: http://www.bryanrmeyer.net/newpage. Notice how
the navigation buttons (Archives, Projects, etc) stay fixed while the
rest of the content is resized.

Any input is appreciated as always.

A CSS Novice,
Bryan
Jul 20 '05 #1
9 32063
On Sun, 18 Apr 2004 15:05:10 -0700, Bryan R. Meyer wrote:
What is the best solution for this problem?


You could put the image divs or spans inside a containing relative div. If
you use position:absolu te for the image divs, they will then be positioned
absolutely, relative to the containing div, not the page body.

--

..

Jul 20 '05 #2
Bryan R. Meyer wrote:
Hello Everyone,

The problem of browser resizing has become an issue for me. While
redesigning my webpage, I set the left and right margins to be auto so
that my content would be centered. However, there are images that I
used absolute positioning in order to place them in the appropriate
location on my page. When I do a browser resize, these images do not
move (obviously). However, the rest of my content is auto centered as
appropriate.

What is the best solution for this problem? Could I use percentages
to position the images rather than by using pixel position?

[snip]

Just a few thoughts, not a final solution!

I notice that you have a number of problems here. One is that in IE 5 the
content ("web page text", etc) is narrower than the header & footer images.
Another is that when the user views with a larger text size, the display
breaks apart vertically. (Your problem is not just the left to right
alignment). I suggest you try various browsers & some more extreme conditions
such as large text to check.

Also, you have a fixed-width layout that is probably a little too wide for
people using 800 x 600 screens, and even worse for people using non-maximised
viewports.

I wonder whether you could reduce all of these problems together? I haven't
explored them in detail. Note Vigil's response. Perhaps you should wrap
*everything* in a single centred <div>? This will mean that you then only have
to think about vertical positioning. Then have a set of containers below
one-another within that. Consider floats as an alternative to absolute
positioning for the individual buttons, but that is just another option.

Also, you are perhaps using absolute positioning to make the buttons appear on
top of the image? If so, another way of doing that is to make the image a
background (put there by the CSS) instead. You may be able to make a more
flexible-width layout without horizontal scrollbars. (Sometimes absolute
positioning and other forms of positioning are tricky to mix).

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
Jul 20 '05 #3
Barry,

Thank you for your thorough response. Indeed, there are many things I
haven't tested for including text size. I was mainly looking at the
page appearance in Netscape 7 and IE 6. I have not even begun to
think about other browsers. It is clear that IE 5 would also be a
good one to test. However, I am completely disregarding the dreaded
Netscape 4.

You mention that the fixed-width layout is a bad idea. Indeed, my
header graphic is way too big for those using the 800x600 resolution.
I suppose then that the solution would be to shrink the image using a
graphics program. But then the layout is still fixed-width since the
other content to be placed should fit within the width of the header
graphic. So why then is the fixed-width layout a bad idea? How else
could the layout be flexible-width if the width of the header graphic
is indeed fixed? Are you suggesting that all of the content should be
left-centered?

I realize there are a lot of possibilities on where to go with this.
I was just trying to get more details as to your thinking.

Thanks,
Bryan
Jul 20 '05 #4
Bryan R. Meyer wrote:
Barry, [snip] You mention that the fixed-width layout is a bad idea. Indeed, my
header graphic is way too big for those using the 800x600 resolution.
I suppose then that the solution would be to shrink the image using a
graphics program. But then the layout is still fixed-width since the
other content to be placed should fit within the width of the header
graphic. So why then is the fixed-width layout a bad idea? How else
could the layout be flexible-width if the width of the header graphic
is indeed fixed? Are you suggesting that all of the content should be
left-centered?
What I said was "... you have a fixed-width layout that is probably a little
too wide for people using 800 x 600 screens, and even worse for people using
non-maximised viewports".

I believe there is a place for fixed-width layouts. (Although many don't
agree). The vast majority of the on-line news services in the world have a
fixed-width layout, and lots of people read them. My photograph pages
(including the galleries) are fixed-width layouts, and my next version of them
will be too. But when I designed them, I made the substantive content 700
pixels wide, because that appeared to be OK for people using an 800 x 600
screen.

I don't think this is a big issue. Your main image is 782 pixels wide, and I
feel that a safer limit is around 760 or so.
I realize there are a lot of possibilities on where to go with this.
I was just trying to get more details as to your thinking.


Chuckle! Don't read too much into my thinking. I am doing the easy bit -
throwing out problems & ideas. You have the hard task.

I've been putting a lot of thought lately into how to wrap elements so that
they hold together under difficult conditions. Images, where possible, should
be in the backgrounds identified by CSS, not in the HTML. But I still have
layouts that blow apart too easily under extreme conditions. It tends to come
down to the fact that browsers don't understand what I am trying to do,
because CSS isn't a layout language, so if there is a problem, they go in all
directions. Whereas, if I used a table, they would have no doubt whatsoever
what I was trying to do, and would almost certainly succeed or come close.

Good luck.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
Jul 20 '05 #5
I feel like I'm beating the same drum over and over, but if I don't
ask questions, I'll never learn. It seems as though I can make a
fixed-width layout quite easily if I move all of my content to the
very left of the browser window without centering it and having auto
margins. But if I don't center it, it looks stupid on resolutions
higher than 800x600 because then there is empty space on the right.
(See the following website -
http://start.verizon.net/vzn.isp/welcome.htm?ver=13567& - for an
example of this.) I think the fixed-width layout is fine but having
it auto-centered would be best. On the higher resolutions, the white
space would be evenly divided on each side of the content rather than
on one side of it. On the 800x600 resolution the page would fit into
the entire window. What is best for the website viewer?

What I'm questioning most is this concept of absolute positioning.
Why have it? It seems useless if you're trying to design your page
for all these resolutions. For example, if you go to my main web
page, http://www.bryanrmeyer.net, and change the text size, you'll see
that in the middle column, the text and picture overlaps the "Modified
Date" text. I understand what is happening, but how then does
absolute positioning help me? For my new webpage,
http://www.bryanrmeyer.net/newpage, I attempted to use the absolute
divs to place the image buttons in a container and then place that
container in a relative div so that the buttons could be placed over
the header graphic. However, I can't get the "Archives" button over
the header graphic. The snippet of code is below.

body {
background-color: #c9c9c9;
scrollbar-base-color:#718292;
background-image: url(http://www.bryanrmeyer.net/newpage/Images/header.jpg);
background-position: 50% 0%;
background-repeat: no-repeat;
}

div.archives {
position: absolute;
top: 140px;
left: 130px;
}

div.content2 {
position: relative;
top: 5%;
left: 10%;
}

<div class="content2 ">
<div class="archives ">
<a href="Archives" onMouseOver=onI mage("archives" );
onMouseOut=offI mage("archives" )>
<img src="Images/archives_off.jp g" alt="Archives" name="archives"
border=0>
</div>
</div>

This is really frustrating, but I really want to understand how this
works. I just am getting confused with the positioning.

Thanks for any suggestions you could provide.

Bryan
Jul 20 '05 #6
In article <7a************ *************@p osting.google.c om>,
br***********@v erizon.net (Bryan R. Meyer) wrote:

(See the following website -
http://start.verizon.net/vzn.isp/welcome.htm?ver=13567& - for an
example of this.)
I must have got the wrong page.

I think the fixed-width layout is fine but having it auto-centered would be best.
You ought to see this thing in my browser. I'm running MacMozilla1.2.1 at
640x480 and much of the text is flysh*t small. It looks like a clueless
corporate site from 1996. Are you supplying stock quotes? Do you have a
link to "Sports"?
What is best for the website viewer?
Any-size-design which this is far from.

What I'm questioning most is this concept of absolute positioning.
Why have it?
Because it might be better supported by browsers in the future? If it is,
you might be able to make better one-size-design. Honestly, I haven't
worked with positioning much and scrapped it when I tried. If I do, I will
probably confine it to the left side of the document.
I understand what is happening, but how then does
absolute positioning help me?
You can make fine websites without it. Learn and use the CSS property "float".
This is really frustrating, but I really want to understand how this
works. I just am getting confused with the positioning.


I suggest that you think of the user's browser window as a thing you can't
control and make fluid sites where the content drops down when the window
isn't wide enough. Nobody likes to sidescroll.

leo

--
<http://web0.greatbasin .net/~leo/>
Jul 20 '05 #7
On Tue, 20 Apr 2004 20:07:33 -0700, Leonard Blaisdell <le*@greatbasin .com>
wrote:
You ought to see this thing in my browser. I'm running MacMozilla1.2.1 at
640x480 and much of the text is flysh*t small. It looks like a clueless
corporate site from 1996. Are you supplying stock quotes? Do you have a
link to "Sports"?


Are you referring to the Verizon site he posted as an example of CENTERING?

I don't think he's claiming this is an exampe of great web design. He
simply wants to know how to do something and he posted an example.

Are you always this ornery, or just with people new to progressive web
design??
Jul 20 '05 #8
In article <op************ **@news.rcn.com >, Neal <ne*****@spamrc n.com> wrote:
Are you referring to the Verizon site he posted as an example of CENTERING? I don't think he's claiming this is an exampe of great web design. He
simply wants to know how to do something and he posted an example.
I was sure I was wrong. I just didn't see the correlation between what he
cited as an example and what he gave as his site. I still use 640x480
resolution. Even though I can change it, I don't. The community needs to
know my comfortability along with those of special needs.
Are you always this ornery, or just with people new to progressive web
design??


Good '&deity', no! I try to pass softballs. My apologies to the OP if you
are offended. I guess smileys are in order :) :) :) :) :) I don't
withdraw my advice, however.

leo

--
<http://web0.greatbasin .net/~leo/>
Jul 20 '05 #9
Bryan R. Meyer wrote:
I feel like I'm beating the same drum over and over, but if I don't
ask questions, I'll never learn. It seems as though I can make a
fixed-width layout quite easily if I move all of my content to the
very left of the browser window without centering it and having auto
margins. But if I don't center it, it looks stupid on resolutions
higher than 800x600 because then there is empty space on the right.
(See the following website -
http://start.verizon.net/vzn.isp/welcome.htm?ver=13567& - for an
example of this.) I think the fixed-width layout is fine but having
it auto-centered would be best. On the higher resolutions, the white
space would be evenly divided on each side of the content rather than
on one side of it. On the 800x600 resolution the page would fit into
the entire window. What is best for the website viewer?
I think fixed-width layouts look better when centred. But unless I have
specific need for a fixed-width layout, such as photographs, I prefer flexible
width.

However, I do have one case where most of the pages are flexible width and
take up the full width, but on one page I use a "maximum width" effect
(centred). I "felt" it was better. Here is the "maximum width" page, where the
central part of the page won't expand above 700px, but will contract very
small.
http://www.barry.pearson.name/papers/value_chain/
What I'm questioning most is this concept of absolute positioning.
Why have it? It seems useless if you're trying to design your page
for all these resolutions. For example, if you go to my main web
page, http://www.bryanrmeyer.net, and change the text size, you'll see
that in the middle column, the text and picture overlaps the "Modified
Date" text. I understand what is happening, but how then does
absolute positioning help me? For my new webpage,
http://www.bryanrmeyer.net/newpage, I attempted to use the absolute
divs to place the image buttons in a container and then place that
container in a relative div so that the buttons could be placed over
the header graphic. However, I can't get the "Archives" button over
the header graphic. The snippet of code is below.
If you want an example of flexible layouts using absolute positioning, have a
look at this (crude) example:
http://www.barry.pearson.name/articl...lexible_00.htm
from:
http://www.barry.pearson.name/articles/layout_5_3/

Parts of the layout are fixed width and absolutely positioned, while the
central part isn't positioned at all and takes up the available space. It has
wide margins to miss the positioned parts. This is quite a common technique.
Remember that you are not necessarily positioning relative to the page as a
whole, but possibly relative to a positioned container, which may be variable.
Indeed, the positioned bits may be variable width! There are many options.

But ... I prefer floats! It is easier to put footers into place if you use
floats as your positioning technique. And while you are safe using floats
within a simple layout table, it can be tricky using absolute positioning with
a table. You can build complicated pages using floats. A downside is that they
tend to "linearise" poorly. The order of the material in the document may not
be ideal for a blind person listening to it via a speaking browser, and a
search engine may see a less-effective sequence.

[snip] div.archives {
position: absolute;
top: 140px;
left: 130px;
}

div.content2 {
position: relative;
top: 5%;
left: 10%;
}
Try:
div.archives {
position: absolute;
top: 120px;
left: 130px;
}
div.content2 {
position: relative;
width: 782px;
margin: 0 auto;
}

(That won't centre in IE 5, but there is a "text-align" trick to solve that).

[snip] Thanks for any suggestions you could provide.


It is a bit like a game, trying to work out what boxes need to be wrapped in
other boxes. That applies whether you use floats or absolute positioning. I
often sketch out boxes within boxes on a piece of paper.

(Tables are just boxes, <td>, wrapped in boxes, <tr>, wrapped in a box,
<table>. They happen to be boxes wrapped in a formalised way, and browsers
know how to position them relative to one-another. You are replacing that
formal wrapping with one of your own. Your structure may be simpler, because
you perhaps don't need 3 levels of box, but you need to work the wrapping out
yourself. And the browser doesn't know how to position the result as you want,
so you have to tell it, using CSS. That is the upside & the downside).

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
2327
by: riki | last post by:
Hi, i have a big problem...i'm using one jscript for resizing of all of my pics in popUp...in main html i'm having many little pics and clicking on them they open in popUp and resize to larger version of the same pic. now, it works fine and sometimes when i click on little one it doesn't resize well... this is the code: main.html
1
4740
by: trialanderror | last post by:
I've been happily chugging along thinking I understood floating divs and now find that I know a lot less than I thought I did. And the more I try "fixing" things, the worse it gets. A lot of what I'd been doing looked okay in IE 6.0, but in Gecko browsers like my Netscape 7.1 (I've been told they conform better to the standards than does IE), they look terrible. http://trialanderror.100freemb.com/20040115FloatDiv.html is a page I put...
8
5401
by: Bryan R. Meyer | last post by:
Hello Everyone, I am in the process of redesigning my web page and I ran into a problem while using CSS. I have laid out my web page with auto margins so that the content is centered. I assume that this will enable the content to be centered in any resolution which the viewer may be using. I then tried to position some navigation images on my web page (using absolute positioning). When the browser is resized, the images stay in the...
3
4672
by: Oddball | last post by:
I have a problem with the positioning of two divisions. They are containined within a content division in which all the page content happens (ie not the menus, etc.). The behavior I would like (and the behavior that happens in IE) is for the content division (from now on 'ConDiv') to resize with the content of either of the sub divisions (MainDiv and NewsDiv). I am trying to get the divisions to position directly next to each other. ...
17
3046
by: George Hester | last post by:
http://tinyurl.com/5uj6w The lower middle icon the "block" should not drop down when the mouse is over it. How can I stop that? Also the navigation divs both top and bottom should follow the scroll right. Both of these issues occur in IE 6 but not in IE 5.5. You can get the horizontal scroll bar for the window by increasing the size of the image wider than the display area of the window. Assumes 600x800 default display size. Thanks...
12
3986
by: WJ | last post by:
What controls needed to cause the entire page moves along with the "resizing" of the web browser (left/right)? Example: Click here http://www.google.com, when Google main page is displayed in your browser, then try to resize it horizontally, notice that all the objects inside the page also move along while you are resizing your browser. I would like apply ther same effect in Asp.Net form. Thanks for your help,
3
2231
by: Jukka K. Korpela | last post by:
Some time ago in this group, someone suggested that we should develop a "different" user style sheet to demonstrate what a user style sheet or a browser style sheet _could_ do. I guess the idea was that the style would be rather different from common browser defaults, yet sensible and potentially useful. Partly for that reason, partly to demonstrate the idea that web page rendering _could_ be different from what people are used to, I...
1
2538
by: alice | last post by:
Can someone point me to a page that has good info on how the different browsers handle positioning? I'm finding that position:absolute works differently between Safari and IE7. Sort of ironic if you ask me. I can't seem to easily find anything on the web about how to handle this. Is there some sort of hack for IE?
18
2608
by: LayneMitch | last post by:
Hello. After getting great advice on positioning, I've edited my code and it's looking more stable. Now I need a little assistance with background image placement. Please click on this link: www.ibtestsite.info I've colored the background black and added a background image which is the
0
8964
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8786
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9463
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
9251
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9200
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8202
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
4562
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
2
2740
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2190
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.