This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Dreamweaver > March 2004 > Can I prevent text zoom from blowing up layout?
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
Can I prevent text zoom from blowing up layout?
|
|
|
|
|
|
| Osgood 2004-03-21, 2:28 pm |
| Blair Rasmussen wrote:
> Any way to prevent text zoom from blowing up the layout - particularly the
> green nav bar? Have I specified font-size in the most effective way?
>
> http://www.erc.edmonton.ab.ca/publish/index.htm
>
Shame, nice page/s.
I dont know a way of stopping <li> tags turning to the next line when
the text is enlarged. I see this very frequently now that using them has
become a popular way to make navigationa bars.
It breaks at 150% on the browsers that I have tried.
The content left enlarges the width of the box simply because of the
email at foot of that column. There isnt much you can do about that.
emails consitute large non-breaking words sometimes.
I guess using the green tab images as backgrounds to top the left and
right columns isnt the best idea.
Bum.
| |
| Blair Rasmussen 2004-03-21, 3:29 pm |
| Left column - I used the green tab as a bg to make it easiest on the
client - they don't need to create a new graphic if they want a different
heading - just change the text. I increased the height of the graphic tab so
when text is zoomed more of the tab displays. Works in Opera - N7 doesn''t
display more of the tab - just the text overflowing.
Looking at the navbar - #divnav is the container. If I give it no height, it
expands with content nicely in IE6, IE5 and Opera - but without a height
there is no visible green background in N7.
How to solve this? Isn't the IE and Opera behaviour what one might expect as
normal?
--
--
Regards,
Blair Rasmussen
Oshima Web Solutions
------------------------------
http://www.oshima.ca
http://www.albertarowing.ca
------------------------------
"Osgood" <notavailable@thisaddress.com> wrote in message
news:c3kkob$595$1@forums.macromedia.com...
> Blair Rasmussen wrote:
>
the[color=darkred]
> Shame, nice page/s.
>
> I dont know a way of stopping <li> tags turning to the next line when
> the text is enlarged. I see this very frequently now that using them has
> become a popular way to make navigationa bars.
>
> It breaks at 150% on the browsers that I have tried.
>
> The content left enlarges the width of the box simply because of the
> email at foot of that column. There isnt much you can do about that.
> emails consitute large non-breaking words sometimes.
>
> I guess using the green tab images as backgrounds to top the left and
> right columns isnt the best idea.
>
> Bum.
>
>
| |
|
| Blair Rasmussen wrote:
> Any way to prevent text zoom from blowing up the layout - particularly the
> green nav bar?
Taking your nav bar as an example, try this: (1) Wrap #divnav in a new
division. (2) Give #divnav a width and height in ems instead of pixels or
percentages. (3) Shift your background-color, border, and margin to the new
division.
With this in place, the diminsions of #divnav will increase proportionately
as the user zooms the text, and even though #divnav now has a specified
width, your background and border will still span 100% because they are set
on the wrapping division. In the CSS example below, I just guesstimated the
dimensions you might need so you may want to refine my numbers. I tested
this at a 500% zoom and the nav bar did not break, though it becomes a
mighty long nav bar. You can expand this method to the entire page, which
will then respond to text zoom much as it does to Opera's page zoom.
#divnav {
height: 2.1em;
background-color: #006600;
color: #ffffff;
margin: 0 !important;
padding: 0 !important;
width: 60em !important;
}
#navwrap {
background-color: #006600;
margin-top: 122px !important;
border-top: 1px solid #666 !important;
border-bottom: 0 !important;
}
--
trx
| |
| Blair Rasmussen 2004-03-22, 1:28 am |
| Thanks trx - am fading tonight and will try in the morning with a re-fueling
of java.
Blair
--
--
Regards,
Blair Rasmussen
Oshima Web Solutions
------------------------------
http://www.oshima.ca
http://www.albertarowing.ca
------------------------------
"trx" <jimpm@rmthscfw.com> wrote in message
news:obtzbnvdx9o1.k1hanq317p3a.dlg@40tude.net...
> Blair Rasmussen wrote:
>
the[color=darkred]
>
> Taking your nav bar as an example, try this: (1) Wrap #divnav in a new
> division. (2) Give #divnav a width and height in ems instead of pixels or
> percentages. (3) Shift your background-color, border, and margin to the
new
> division.
>
> With this in place, the diminsions of #divnav will increase
proportionately
> as the user zooms the text, and even though #divnav now has a specified
> width, your background and border will still span 100% because they are
set
> on the wrapping division. In the CSS example below, I just guesstimated
the
> dimensions you might need so you may want to refine my numbers. I tested
> this at a 500% zoom and the nav bar did not break, though it becomes a
> mighty long nav bar. You can expand this method to the entire page, which
> will then respond to text zoom much as it does to Opera's page zoom.
>
> #divnav {
> height: 2.1em;
> background-color: #006600;
> color: #ffffff;
> margin: 0 !important;
> padding: 0 !important;
> width: 60em !important;
> }
>
> #navwrap {
> background-color: #006600;
> margin-top: 122px !important;
> border-top: 1px solid #666 !important;
> border-bottom: 0 !important;
>
> }
>
>
> --
> trx
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|