Jump to content

Box Css - Difficulties with position


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 post
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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...