HBen Posted April 14, 2014 Share Posted April 14, 2014 (edited) Hello guys, I am having some problems with the layout , i am developing a website for android application , the PHP coding is going great , CSS Not So Good ,i failed to do a simple thing . i design a basic layout for the website with Photoshop , i hope someone can help me turn it to code , Picture : This is the Content Container layout . Thanks in Advance Guys Edited April 14, 2014 by HBen Link to comment Share on other sites More sharing options...
moonstarsun Posted April 22, 2014 Share Posted April 22, 2014 (edited) Best to start with a solid and clean heirarchy. Start with a container div. Create 6 div tags inside of your container div Figure out the margins you would like Interesting part... Give the div tags widths that would total twice the width of the container. (be sure to account for margins or paddings you've previously applied) Then float the items left. This should push the later three panels to a new line. Below is a really basic template (Not necessarily optimal for all purposes) which you can tweak for your project specifictions. <style>.container {width:1000px;}.panel {width:300px; float:left;}</style><div class="container"> <div class="panel">content</div> <div class="panel">content</div> <div class="panel">content</div> <div class="panel">content</div> <div class="panel">content</div> <div class="panel">content</div> </div> Edited April 22, 2014 by Themoonstarsun 1 Link to comment Share on other sites More sharing options...
davej Posted April 22, 2014 Share Posted April 22, 2014 Yes, perhaps something like... <!DOCTYPE html><html lang="en"><head><meta chartype="utf-8"><title>tab title</title><style>.container {width:1100px;margin:0 auto;overflow:hidden;background-color:#14B;}#wrap{margin:50px;}.panel {width:300px;height:350px;float:left;margin:10px;background-color:#fff;border:1px dotted red;}.img1{width:150px;height:200px;display:block;float:left;background-color:#B8860B;margin:5px;}.inside{float:left;margin:5px;}.btn1{background-color:#14B;color:#fff;width:100px;height:40px;border-radius:10px;float:right;margin:60px 5px 5px 0;font-weight:bold;font-size:18pt;}</style></head><body><div class="container"><div id="wrap"><div class="panel"><h2>Name</h2><image src="#" class="img1" alt="img"/><div class="inside"> <h3>Rate</h3> <p>Description</p> <p>Text</p> </div> <input type="button" value="More" class="btn1"/></div><div class="panel">content</div><div class="panel">content</div><div class="panel">content</div><div class="panel">content</div><div class="panel">content</div></div></div></body></html> ...but then again, if this is a mobile design you would probably reconfigure the panels with several @media css blocks. 1 Link to comment Share on other sites More sharing options...
HBen Posted April 30, 2014 Author Share Posted April 30, 2014 Best to start with a solid and clean heirarchy.Start with a container div. Create 6 div tags inside of your container divFigure out the margins you would like Interesting part...Give the div tags widths that would total twice the width of the container. (be sure to account for margins or paddings you've previously applied) Then float the items left.This should push the later three panels to a new line. Below is a really basic template (Not necessarily optimal for all purposes) which you can tweak for your project specifictions. <style>.container {width:1000px;}.panel {width:300px; float:left;}</style><div class="container"> <div class="panel">content</div> <div class="panel">content</div> <div class="panel">content</div> <div class="panel">content</div> <div class="panel">content</div> <div class="panel">content</div> </div> i Got the Idea , Thanks Themoonstarsun . Link to comment Share on other sites More sharing options...
HBen Posted April 30, 2014 Author Share Posted April 30, 2014 Yes, perhaps something like... <!DOCTYPE html><html lang="en"><head><meta chartype="utf-8"><title>tab title</title><style>.container {width:1100px;margin:0 auto;overflow:hidden;background-color:#14B;}#wrap{margin:50px;}.panel {width:300px;height:350px;float:left;margin:10px;background-color:#fff;border:1px dotted red;}.img1{width:150px;height:200px;display:block;float:left;background-color:#B8860B;margin:5px;}.inside{float:left;margin:5px;}.btn1{background-color:#14B;color:#fff;width:100px;height:40px;border-radius:10px;float:right;margin:60px 5px 5px 0;font-weight:bold;font-size:18pt;}</style></head><body><div class="container"><div id="wrap"><div class="panel"><h2>Name</h2><image src="#" class="img1" alt="img"/><div class="inside"> <h3>Rate</h3> <p>Description</p> <p>Text</p> </div> <input type="button" value="More" class="btn1"/></div><div class="panel">content</div><div class="panel">content</div><div class="panel">content</div><div class="panel">content</div><div class="panel">content</div></div></div></body></html> ...but then again, if this is a mobile design you would probably reconfigure the panels with several @media css blocks. Thanks davej , i really appreciate the CSS code . Link to comment Share on other sites More sharing options...
HBen Posted April 30, 2014 Author Share Posted April 30, 2014 Thank you davej & Themoonstarsun for the help and I hope you don't mind me mentioning you're names in my project . Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now