September 3, 201015 yr Hi Guys, I have a annoying problem that is so simple i didn't want to ask, unfortuantly I can't work out how to do this; I have created two square text boxes using CSS, I want to place a square image next the top one on the right hand side of it and an image on the left hand side of the second text box ( which is just below the one above). I want all to be alligned in a square equally but I really cant figure out how! PLEASE HELP
September 3, 201015 yr Quick example using a list and floats <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> *{margin:0;padding:0;} ul{ width:400px; list-style:none; margin:0 auto; } li{ float:left; width:198px; height:198px; background-color:#303030; border:solid 1px #fff; color:#fff; } p{margin:10px;} h3{margin:10px;} </style> </head> <body> <ul> <li><h3>box 1</h3><p> place text in here</p></li> <li><h3>box 2</h3><p>place image in here</p></li> <li><h3>box 3</h3><p>place image in here</p></li> <li><h3>box 4</h3><p> place text in here</p></li> </ul> </body> </html>
September 6, 201015 yr Author works brilliantly been having some fun getting to grips with it! I still cant work out how to centre the UL and Li cluster though!??
September 7, 201015 yr Author sorry centering the entire cluster of writing, and images to the middle of the page. I have put a div tag around the cluster and aligned that but it still does not work: <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> <style type="text/css"> *{margin:0;padding:0; } ul{ width:805px; height: 805px; list-style:none; margin:10 auto; padding: auto; } li{ float: left; width:400px; height:400px; background-color:#fff; border: none; color:#999; text-align: center; } p{ margin:10px; color: #BFCDDB; } h3{margin:5px;} </style> <div align="center"> <ul> <li> <h3>Iron Wheels Information Here</h3><p> place text in here </li> <li><img src="Images/Photographs/Homepage/Photo_Template.jpg" width="400" height="400" align="absmiddle" /> </li> <li> <img src="Images/Photographs/Homepage/Photo_Template.jpg" width="400" height="400" align="absmiddle" /> </li> <li> <h3>box 4</h3><p> place text in here</p> </li> </ul> </div>
September 7, 201015 yr Author I used the CSS centering advise <Div id="wrapper"> (pinned to the main forum page) it works perfectly! Thanks
Create an account or sign in to comment