Jump to content


Photo

Simple Frames


  • Please log in to reply
1 reply to this topic

#1 dean7

dean7

    Advanced Member

  • Members
  • PipPipPip
  • 275 posts

Posted 25 April 2014 - 09:20 AM

Hey guys, I don't really have any knowledge of Frames, so I'm unsure how to actually create a layout I'm wanting. I've tried using google to help me but I can't get my head around how to make a certain design... struggling with this yet I know some PHP...  ::)

 

Anyway I'm trying to create a layout which looks like this:

 

---------------------------------------------

|  Frame 1                         | Frame 5|

|                                        |              |

---------------------------------------------

|              Frame 7                            |

-------------------------------------------- |

|              |                         |              |

|              |                         |              |

| Frame 2|                         | Frame 4|

|              |                         |              |

|              |  Frame 3          |              |

|              |                         |              |

|              |                         |              |

---------------------------------------------

|             Frame 6                            |

---------------------------------------------

 

Can anyone please show me how to make that. 

 

Many thanks! :)

 



#2 possien

possien

    Advanced Member

  • Members
  • PipPipPip
  • 80 posts
  • LocationArizona

Posted 25 April 2014 - 02:24 PM

You can play with this code and tweek it to meet your needs.  There are better ways in HTML5 and CSS3 to do this but this will give you an idea of how it works.

Basically you create divisions within sections by floating divisions left or right.  The total width cannot exceed 100% .  I.e., the margins + borders + plus division widths <= 100%. You can use px, em, etc. but the math is easier with % .If you use px or em the total width of the elements can't exceed the total of the body width.

You have to clear the float after to display the next section correctly.  There is a better way to clear them but this is just and example.  The height of each section can be pre-determined for your header and footer but for your main div content it is generally determined by the content itself.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout</title>
<style>
body{width:90%}
#header{background:#ddd;height:200px;border:2px solid blue;}
#header-right{float:right;width:32%;background:#555;height:200px;}
#header-left{float:left;}
#main{background:#98AFC7}
.div-25{width:24%; background:#333;margin:.5%;border:2px solid blue;float:left;height:500px;}
.div-50{width:48%; background:#ccc;margin: .5% 0;border:2px solid blue;float:left;height:500px;}
#footer{height:200px;border:2px solid blue;}
.clear{clear:both}
</style>
</head>

<body>
<div id="header">
<div id="header-right"><p>some text</p></div>
<div id="header-left"><h1>Header</h2></div>
<div class="clear"></div>
</div>
<div id="main">
<div class="div-25"></div>
<div class="div-50"></div>
<div class="div-25"></div>
<div class="clear"></div>
<div id="footer"></div>
</div>
</body>

</html>

Edited by possien, 25 April 2014 - 02:27 PM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com