knoxdesign Posted June 29, 2011 Share Posted June 29, 2011 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 More sharing options...
etopsirhc Posted June 29, 2011 Share Posted June 29, 2011 the problem is where ur css is . place it in a <style> tag in the <head> and it will work <head><style type="text/css">/* your code here */</style></head> Link to comment Share on other sites More sharing options...
knoxdesign Posted June 30, 2011 Author Share Posted June 30, 2011 Thankyou hit a few more issues but managed to work them out thanks again. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.