css layout probs

ianhaney · 01-14-2013, 06:50 PM

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

linek98 · 01-14-2013, 06:58 PM

You might want to check out CSS media queries.

Excavator · 01-14-2013, 07:04 PM

Hello ianhaney,
It would be easy to float those ul's so they'd re-arrange themselves to fit the width of #counties

ianhaney · 01-14-2013, 07:20 PM

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

Excavator · 01-14-2013, 09:13 PM

Quote:

Originally Posted by ianhaney

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>