...

View Full Version : 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 (http://css-tricks.com/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
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 -
<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum