Jump to content

Box Css - Difficulties with position


Felipe Ramalho
 Share

Recommended Posts

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!

Sem_t_tulo_1.gif

  • Like 1
Link to comment
Share on other sites

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

 

Maybe the following CSS code will help you out.
Feel free to ask any other question.

 

 

Omg :Shock:

 

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

 

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 by leev18
Link to comment
Share on other sites

:facepalm: 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 by Deirdre's Dad
Link to comment
Share on other sites

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

 

 

Omg :Shock:

 

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 by umanga
  • Like 1
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...