Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts

    resizing text to suit screen widths, etc?

    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 I'm working on, if I haven't explained myself well.

    thanks in advance.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello xelawho,
    Give the floated menu items containing div a width.
    Like this -
    Code:
    #nav2 {
    /*max-width: 100%;*/
    width: 1235px;
    overflow: auto;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    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.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Have you tried white-space: nowrap; yet?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Code:
    /* 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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •