Jump to content

css problems positioning divs


knoxdesign
 Share

Recommended Posts

After scouring the net i've not yet been able to find a solution to my problem if anyone can help i would be most thankful.I am building my first website to be launched online and i have run into a complete wall.The problem is with my lack of understanding of how to position my images where I want them. I have a floated <div> with 12 images in and a containing <div> to control them since they were moving all over the layout in the browser. I have a 1 <div> for my logo and one for my navigation bar which are side by side, underneath are my images (green stand-ins) that i want central in the browser but they keep moving to the right of the browser and of screen therefore anyone with a smaller screen will have to scroll horizontally to see them all. what i'm trying to achieve is to have my green stand-in images fit on the average size browser window without scrolling ( so they'd be up against the left wall or better still lined up in the middle of the browser window).Here is an image illustrating my dilemma:http://imageshack.us/photo/my-images/846/helpcss.gif/Here is where my html and css code is at:

</head><body><div class="header"><a href="Knoxsource.html"><img src="Images/logo.gif" width="358" height="333" border="0" /></a></div><div class="nav"><ul id="list-nav"><li><a href="about.html">About</a></li><li><a href="contact.html">Contact</a></li><li><a href="blog.html">Blog</a></li></ul><div/><div class="container"><img class="workfloat" src="Images/slice.gif" width="200" height="200" /><img class="workfloat" src="Images/slice.gif" width="200" height="200" /><img class="workfloat" src="Images/slice.gif" width="200" height="200" /><img class="workfloat" src="Images/slice.gif" width="200" height="200" /><img class="workfloat" src="Images/slice.gif" width="200" height="200" /><img class="workfloat" src="Images/slice.gif" width="200" height="200" /><img class="workfloat" src="Images/slice.gif" width="200" height="200" /><img class="workfloat" src="Images/slice.gif" width="200" height="200" /><img class="workfloat" src="Images/slice.gif" width="200" height="200" /><img class="workfloat" src="Images/slice.gif" width="200" height="200" /><img class="workfloat" src="Images/slice.gif" width="200" height="200" /><img class="workfloat" src="Images/slice.gif" width="200" height="200" /></div></body></html>@charset "UTF-8";/* CSS Document */.header{	width:358px;	height:333px;	top:25px;	left:25px;	float:left;}.aboutme {	position:absolute;	top:200px;	text-align:center;	font-family:Arial, Helvetica, sans-serif;	font-size:12px;	color:#000;	}.contactinfo {	position:absolute;	text-align:center;	left:25%;	top:200px;	font-family:Arial, Helvetica, sans-serif;	font-size:12px;	color:#000;}	a {text-decoration:none}//ul#list-nav {margin:20px;padding:0;list-style:none;width:525px;}ul#list-nav li {display:inline}ul#list-nav li a {text-decoration:none;padding:5px 0;width:100px;background:#999;color:#000;float:left;}ul#list-nav li a {text-align:center;border-left:2px solid #fff;}ul#list-nav li a:hover {background:#0F0;color:#000}ul#list-nav #currentpage a {background:#0F0;color:#000;}.nav {font-family:Arial, Helvetica, sans-serif;	font-size:18px;	color:#000;	border:none;	position:absolute;	top:126px;	left:358px;	float:left;	}div.workfloat p {  text-align: center;  }  div.workfloat {	  float:left;	  width:200px;	  height:200px;	  border-left:2px solid #fff;	  margin:5px;	    }.container {	margin-top:335px;	width:850px;	height:100%;	clear:left;  

I may be missing something very obvious but the solution still eludes me if anyone can see any way for me to achieve my goal I would be really greatful.Thanks.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...