dean7 Posted April 25, 2014 Share Posted April 25, 2014 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! Quote Link to comment https://forums.phpfreaks.com/topic/288013-simple-frames/ Share on other sites More sharing options...
possien Posted April 25, 2014 Share Posted April 25, 2014 (edited) 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 April 25, 2014 by possien Quote Link to comment https://forums.phpfreaks.com/topic/288013-simple-frames/#findComment-1477282 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.