CODEWITHSUNDEEP
htmlcss
Kyle
Kyle

Reputation: 1578

How can I keep the <div> inside of the header without messing up the border?

I'm trying to create an example page for myself so I'll never forget the basics, but a problem appeared, I set the border of <a> with border: 5px outset gray;, but now the <div id="tab"> appears out of the header, How can I fixed? and if possible, why did that happen?

May you help?

Thanks in advance.

My page on liveweave:http://liveweave.com/yRuhbM;

html{font-family:Courier;}
button{width: 50%;margin: 4%; border-radius: 5px;height: 10.6%;} /*Any button is gonna get those properties, if you don't want it, set it below it*/
label{width: 50%;margin: 4%;}
div{width: 100%;height:20%; color: white; border-radius: 0px;text-align: center;background-color: gray;}
a{text-decoration: none; color: black;border: 5px outset gray;}

.left{float:left;width: 20%;height: 60%;}
.right{float: right;width: 20%; height: 60%;}

#header{margin:auto;top:1px;}
#footer{clear:both;margin:auto;bottom: 10px;}
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Page Testing</title>
</head>
<body>
  <div id="header">
    <div id="tab">
      
        <a href="http://www.google.com">Home</a>
        <a href="http://www.google.com">Contact Us</a>
        <a href="http://www.google.com">About</a>
 
    </div>
  </div>
  <div class="left">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
    <button>Button 5</button>
    <button>Button 6</button>
  </div>
  <div class="right">
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
  </div>
  <div id="footer"></div>
</body>
</html>

Upvotes: 0

Views: 88

Answers (7)

Stefan Bartel
Stefan Bartel

Reputation: 190

As Pauli_D already pointed out, you need to use li inside an ul element. This answer is basically the same as the others in regard of the a element but completed with the correct html for the ul list.

html{font-family:Courier;}
button{width: 50%;margin: 4%; border-radius: 5px;height: 10.6%;} /*Any button is gonna get those properties, if you don't want it, set it below it*/
label{width: 50%;margin: 4%;}
div{width: 100%;height:20%; color: white; border-radius: 0px;text-align: center;background-color: gray;}
a{text-decoration: none; color: black;border: 5px outset gray;}

.left{float:left;width: 20%;height: 60%;}
.right{float: right;width: 20%; height: 60%;}

#header{margin:auto;top:1px;}
#footer{clear:both;margin:auto;bottom: 10px;}

#tab li {
  display: inline;
  list-style: outside none;
  
}
#tab li a {
  display: inline-block;
  text-decoration: none;
  
}
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Page Testing</title>
</head>
<body>
  <div id="header">
    <div id="tab">
      <ul>
        <li><a href="http://www.google.com">Home</a></li>
        <li><a href="http://www.google.com">Contact Us</a></li>
        <li><a href="http://www.google.com">About</a></li>
      </ul>
    </div>
  </div>
  <div class="left">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
    <button>Button 5</button>
    <button>Button 6</button>
  </div>
  <div class="right">
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
  </div>
  <div id="footer"></div>
</body>
</html>

Upvotes: 1

ctwheels
ctwheels

Reputation: 22837

li is child of ul not span, change your markup (you can copy what I've done below) and use the CSS provided below

EDIT

Also, you should note that setting all the div heights in the entire document should probably not be done as every div element in your markup will use these properties. Use classes. It will prevent many headaches you will have. Only style specific html tags if you are sure you always want these properties. That being said you can always override the properties with specificity, but make your life easier and use classes more often. The same thing should be applied to every element in your HTML (even buttons) as you may want to have 2 different buttons if you ever changed your website, or if someone else works on your website eventually 

html {
    font-family:Courier;
}
button {
    width: 50%;
    margin: 4%;
    border-radius: 5px;
    height: 10.6%;
}
div {
    width: 100%;
    height:20%;
    color: white;
    border-radius: 0px;
    text-align: center;
    background-color: gray;
}
a {
    text-decoration: none;
}
li {
    display: inline-block;
    list-style-type: none;
    color: black;
    border: 5px outset gray;
}
.left {
    float:left;
    width: 20%;
    height: 60%;
}
.right {
    float: right;
    width: 20%;
    height: 60%;
}
#footer {
    clear:both;
    margin:auto;
    bottom: 10px;
}
<div id="header">
    <div id="tab">
        <ul>
            <li><a href="http://www.google.com">Home</a>
            </li>
            <li><a href="http://www.google.com">Contact Us</a>
            </li>
            <li><a href="http://www.google.com">About</a>
            </li>
        </ul>
    </div>
</div>
<div class="left">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
    <button>Button 5</button>
    <button>Button 6</button>
</div>
<div class="right">
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
</div>
<div id="footer"></div>

Upvotes: 1

Stickers
Stickers

Reputation: 78796

As a quick fix, you could add this.

a {
    display: inline-block;
}

Upvotes: 1

hungerstar
hungerstar

Reputation: 21725

First, you should be using <li> where you're using <span>.

Your anchor elements are pushing outside of your #header element for a couple reasons. One is because your ul by default has margin applied to it by the browser. That top and bottom margin extends out beyond your #header element.

The other reason is because #header element will only be as tall as it's content or a specified height. Content height can be counter intuitive when working with inline elements like you are doing. The border you are adding to your anchor elements won't count as height because they are inline, switch them to inline block and then the border will.

Upvotes: 2

jme11
jme11

Reputation: 17407

The main issue is that all browsers style html elements by default. The body and ul elements in most will by default have margins and padding that you need to override:

body, ul {
  margin: 0;
  padding: 0;
}

However, @paulie-d is correct: you must have an li element as a child of a ul.

To further fix the issues, you'll need to add height to your html and body.

html{font-family:Courier;}
body {margin: 0; padding:0}
ul {margin: 0; padding:0}
button{width: 50%;margin: 4%; border-radius: 5px;height: 10.6%;} /*Any button is gonna get those properties, if you don't want it, set it below it*/
label{width: 50%;margin: 4%;}
div{width: 100%;height:20%; color: white; border-radius: 0px;text-align: center;background-color: gray;}
a{text-decoration: none; color: black;border: 5px outset gray;}

.left{float:left;width: 20%;height: 60%;}
.right{float: right;width: 20%; height: 60%;}

#header{margin:auto;top:1px;}
#footer{clear:both;margin:auto;bottom: 10px;}
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Page Testing</title>
</head>
<body>
  <div id="header">
    <div id="tab">
      <ul>
        <span><a href="http://www.google.com">Home</a></span>
        <span><a href="http://www.google.com">Contact Us</a></span>
        <span><a href="http://www.google.com">About</a></span>
      </ul>
    </div>
  </div>
  <div class="left">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
    <button>Button 5</button>
    <button>Button 6</button>
  </div>
  <div class="right">
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
  </div>
  <div id="footer"></div>
</body>
</html>

Upvotes: 1

Swaranan Singha Barman
Swaranan Singha Barman

Reputation: 347

Why are you using <span> if it is not necessary then remove this else you can use it.and add <a> display:inline-block in css.
Fiddle

Upvotes: 1

Shrinivas Pai
Shrinivas Pai

Reputation: 7721

Add this 

a{
text-decoration: none; 
display:inline-block; 
color:black;
border: 5px outset gray;
}

Fiddle

Upvotes: 2

Related Questions