Jump to content

Layout | Help


HBen
 Share

Recommended Posts

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 :D , Picture : 3.jpgThis is the Content Container layout . Thanks in Advance Guys ;)

Edited by HBen
Link to comment
Share on other sites

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 by Themoonstarsun
  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

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

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...