Solved

HTML Lists

Posted on 2016-11-11
3
49 Views
Last Modified: 2016-11-17
If I take out the "overflow:hidden", the page totally can't display. Any idea ?

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Open in new window

0
Comment
Question by:AXISHK
3 Comments
 
LVL 2

Assisted Solution

by:Amita Singh
Amita Singh earned 200 total points
ID: 41883488
replace ul css with this css
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #333333;
    width: 100%;
    float: left;
}

Open in new window

0
 
LVL 55

Accepted Solution

by:
Julian Hansen earned 300 total points
ID: 41883496
That is because of the float left on the <li> items. The <ul> has no way of knowing what its height is. The overflow: hidden forces the <ul> to take on the height of the child elements.

First question - why is this a problem?

To get around it define your li as display: inline-block instead of float: left
li {
  display: inline-block;
}

Open in new window

1

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question