Felipe Ramalho Posted July 12, 2013 Share Posted July 12, 2013 Use % layout responsive HTML Source <!DOCTYPE HTML><html lang="pt-br"><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="estilo.css"><title></title></head><body><!-- Top --><div id="top"> TOP</div><!-- Menu MID LEFT --><div id="midleft"> Menu Meio Esquerda</div><!--MID--><div id="mid"> BANNER</div><!-- Back --><div id="back"> RordaPé </div></body></html> CSS Soruce html, body {font-family: Verdana, Geneva, Arial, sans-serif; }margin:0; height: 100%;}#top{background-color: #bfb;position: relative;width: 100%;height:18%}#midleft{background-color: #ddd; position: relative; width: 12%;height: 65%;padding: 1%;padding-right: 2%;}#mid{background-color: #ff9;float: right;width: 75%;height: 35%}#back{background-color: #bfb;width: 100%;height: 7%;clear:both;} I need to make my layout like this! 1 Link to comment Share on other sites More sharing options...
umanga Posted July 12, 2013 Share Posted July 12, 2013 Maybe the following CSS code will help you out. html, body { font-family: Verdana, Geneva, Arial, sans-serif; margin:0; height: 100%; text-align:center; } #top { background-color:#bfb; width: 100%; height:18%; } #midleft { float:left; background-color: #ddd; width: 12%; height: 65%; padding: 1%; padding-right: 2%; } #mid{ background-color: #ff9; float: left; margin-left:5px; width: 75%; height: 35% } #back{ background-color: #bfb; width: 100%; height: 7%; clear:both; } Feel free to ask any other question. Link to comment Share on other sites More sharing options...
Felipe Ramalho Posted July 12, 2013 Author Share Posted July 12, 2013 Maybe the following CSS code will help you out. Feel free to ask any other question. Omg Very Good - Gratz Você e Brasileiro? '' Adiciona Skype: Felipe.Ramalho '' How Do I # mid { background-color: # ff9; float: left; margin-left: 5px; width: 75%; height: 35% } Stay Centered in the Midst of the Index! ? '' Full Container Index, Middle ta full screen? Link to comment Share on other sites More sharing options...
davej Posted July 12, 2013 Share Posted July 12, 2013 Interesting. I have never used html as a selector. What is that? html, body {font-family: Verdana, Geneva, Arial, sans-serif; margin:0; height: 100%;text-align:center;} Link to comment Share on other sites More sharing options...
leev18 Posted July 12, 2013 Share Posted July 12, 2013 (edited) Interesting. I have never used html as a selector. What is that? html, body Almost every websites have it. Right click and view source on any website. It's kind of like an entire body for all other tags. <!DOCTYPE html><html><head></head><body>Content</body></html> Even if you don't have it in your HTML file, most web browser will pretend that it's there anyway. Try adding this to css to see: html { display: none;} Edited July 12, 2013 by leev18 Link to comment Share on other sites More sharing options...
jeffman Posted July 12, 2013 Share Posted July 12, 2013 (edited) I'm pretty sure Dave knows what the html element is. The html selector is seldom required because applying most CSS properties to the body element does the trick. Typically, if the html selector is used, it's so designers can apply height and min-height properties to the html element, and they normally apply the same height properties to the body element when they do so. In most cases, you would not define a font (for example) for the html element but not the body element. So it's usually quite harmless to combine the html selector with the body selector; all you're doing that's useful is defining one of the height values for the html element. Edited July 12, 2013 by Deirdre's Dad Link to comment Share on other sites More sharing options...
Ingolme Posted July 13, 2013 Share Posted July 13, 2013 On occasion you need to set values on the html element. I believe that in order to use 100% height in an element inside the document, both the html and body elements need to have their height set. Another reason they're both used is in the case that browsers give a default margin or padding to it and it needs to be removed. Link to comment Share on other sites More sharing options...
umanga Posted July 13, 2013 Share Posted July 13, 2013 (edited) Omg Very Good - Gratz Você e Brasileiro? '' Adiciona Skype: Felipe.Ramalho '' How Do I # mid { background-color: # ff9; float: left; margin-left: 5px; width: 75%; height: 35% } Stay Centered in the Midst of the Index! ? '' Full Container Index, Middle ta full screen? I don't actually understand what you are saying. But the following code may solve the problem. #wrapper { width: 960px; margin: 0px auto; } Try adding this to your CSS and enclose everything in the HTML BODY with <div id="wrapper"> <body> <div id="wrapper"> <div>Every other thing you code goes here.</div> </div> </body> Edited July 13, 2013 by umanga 1 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