Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 01-14-2013, 06:50 PM   PM User | #1
ianhaney
New Coder

 
Join Date: Apr 2012
Posts: 51
Thanks: 0
Thanked 0 Times in 0 Posts
ianhaney is an unknown quantity at this point
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
ianhaney is offline   Reply With Quote
Old 01-14-2013, 06:58 PM   PM User | #2
linek98
New Coder

 
Join Date: Dec 2012
Location: England
Posts: 18
Thanks: 0
Thanked 4 Times in 4 Posts
linek98 is an unknown quantity at this point
You might want to check out CSS media queries.
linek98 is offline   Reply With Quote
Old 01-14-2013, 07:04 PM   PM User | #3
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
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
Excavator is offline   Reply With Quote
Old 01-14-2013, 07:20 PM   PM User | #4
ianhaney
New Coder

 
Join Date: Apr 2012
Posts: 51
Thanks: 0
Thanked 0 Times in 0 Posts
ianhaney is an unknown quantity at this point
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
ianhaney is offline   Reply With Quote
Old 01-14-2013, 09:13 PM   PM User | #5
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
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
Excavator is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 04:57 PM.


Advertisement
Log in to turn off these ads.