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 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    78
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css layout probs

    Hi

    I am trying to get a website looking good on the following screen browsers as these are most used I believe, sorry if I am wrong

    1024 x 768
    1280 x 1024

    It looks ok on the 1280 size but on the 1024 size the end ul list does not fit, can anyone help please, been trying for ages, the website address is www.networkyourbusiness.co.uk

    Thanks in advance

    Ian

  • #2
    New Coder
    Join Date
    Dec 2012
    Location
    England
    Posts
    20
    Thanks
    0
    Thanked 4 Times in 4 Posts
    You might want to check out CSS media queries.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello ianhaney,
    It would be easy to float those ul's so they'd re-arrange themselves to fit the width of #counties
    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

  • #4
    New Coder
    Join Date
    Apr 2012
    Posts
    78
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Excavator

    so you think I should use float left, right for the ul lists

    Also linek98, I looked at media queries but did not undertand it that well, do you know any other links

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by ianhaney View Post
    Hi Excavator

    so you think I should use float left, right for the ul lists

    Also linek98, I looked at media queries but did not undertand it that well, do you know any other links
    Try it and see if it acts like you want -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #counties {
    	/*height: 600px;*/
    	width: 80%;
    	margin: 30px auto;
    	border-radius: 15px 15px 15px 15px;
    	overflow: auto;
    	background: #b7dff2;
    }
    ul {
    	width: 200px;
    	margin: 10px;
    	float: left;
    	background: #f00;
    }
    </style>
    </head>
    <body>
        <div id="counties">
        	<ul>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            </ul>
        	<ul>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            </ul>
        	<ul>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            </ul>
        	<ul>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            </ul>
        	<ul>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            </ul>
        	<ul>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            </ul>
        	<ul>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            	<li>stuff</li>
            </ul>
        <!--end counties--></div>
    </body>
    </html>
    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


  •  

    Posting Permissions

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