...

View Full Version : resizing text to suit screen widths, etc?



xelawho
12-19-2010, 12:11 AM
Hi,

I have 11 divs in a horizontal line, floated left. They act as links so they have text in them, but depending on the user's screen size, resolution, etc sometimes they are too big and spill over to two lines. Is there any way to keep them all in one line (the div that they're wrapped in is already set at max-width: 100%) and resize the text if the screen, resolution, etc says that it's too big to fit as is?

Here's the page (http://xelawho.com/map/bus5.htm) I'm working on, if I haven't explained myself well.

thanks in advance.

Excavator
12-19-2010, 01:11 AM
Hello xelawho,
Give the floated menu items containing div a width.
Like this -

#nav2 {
/*max-width: 100%;*/
width: 1235px;
overflow: auto;
}

xelawho
12-19-2010, 01:19 AM
Hi Excavator,

that seems to do the opposite of what I want - it pushes everything that doesn't fit onto a second line.

It's kind of hard for me to test this because on my screen it all lines up, but when I look at it on another computer, the divs are on two lines.

But there are other websites where it doesn't matter if you're on a netbook or desktop, everything fills the space. Can I do that?

Or am I doing something wrong? Thanks for your help.

VIPStephan
12-19-2010, 10:27 AM
Have you tried white-space: nowrap; yet?

Excavator
12-19-2010, 02:33 PM
/* CSS Document */
#wrapper {
margin-right: 20px;
margin-left: 20px;
overflow: auto;

}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
}

a:link {
text-decoration:none;
}

a:visited {
color: #666666;

text-decoration: none;
}

a:hover {
color: #000000;
text-decoration: underline;
}

#logo {
left:0px;
color:#666666;
font-size:large;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}

#nav2 {
width: 1235px;
overflow: auto;

}

#control {
font-family: Arial, Helvetica, sans-serif;
}

xelawho
12-20-2010, 06:57 AM
thank you both for your suggestions, but I think either I didn't explain myself very well or this isn't a thing that can be solved with css.

It seems to me that both the solutions offered keep the line of divs at their original width and just create a scroll bar.

But what I'm looking to do is make sure that line of divs will always be at 100% width of the screen, regardless of screen width. I'm guessing ther would have to be some sort of dynamic text resizing going on to accomplish that - can it be done, and am I in the right forum?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum