What's wrong with my html and css? [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 9 years ago.

Improve this question

I've been trying to make a basic page that just displays the guidelines of a literary magazine.

I've been using ul and li to make it look organized but something is wrong. I also have the css reset in my css but I didn't think it was necessary to put it in the preview.

I think the problem might be in some of the ul's for the dropdown menu but I'm not sure where to look. Also I did try giving the ul and li classes so it would only load that specific part but it didn't work. I removed the drop down menu and the ul did work.

Edit: The list doesn't display vertically like it would if now css was applied. What it does it display it as if it was a paragraph tag but at the start of each sentence was a bullet. Also their should be visual line breaks between the ul and h2.

image of what it looks like

The css:

#content-container{
width: 960px;
height:1000px;
background-color: red;
margin:auto;
}

#navbar {
width: 100%;
height: 30px;
/*background-color: pink;*/
text-align:center;
display:inline-table;
}

#navbar ul ul {
display: none;
 }

#navbar ul li:hover > ul {
    display: block;
}

#navbar ul {
background: #efefef; 
/*background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); */
/*box-shadow: 0px 0px 9px rgba(0,0,0,0.15);*/
/*padding: 0 20px;*/
/*border-radius: 10px;*/  
list-style: none;
position: relative;
display: inline-table;
}
#navbar ul:after {
    content: ""; clear: both; display: block;
}

li {
float: left;
}
#navbar ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
    #navbar ul li:hover a {
        color: #fff;
    }

#navbar ul li a {
    display: block; padding: 10px 50px;
    color: #757575; text-decoration: none;
}

#navbar ul ul {
background: #5f6975; border-radius: 0; padding: 0;
position: absolute; top: 100%;
}
#navbar ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}
    #navbar ul ul li a {
        padding: 5px 20px;
        color: #fff;
    }   
        #navbar ul ul li a:hover {
            background: #4b545f;
        }

        #navbar ul ul ul {
position: absolute; left: 100%; top:0;
}

*#content{
width:960px;
height:500px;
margin:auto;
background-color:purple;
}

 #content h1{
font-family: 'Droid Serif', 'serif';
font-weight: 700;
}

#content h2{
font-family: 'Droid Serif', 'serif', 'italic';
font-weight: 700;
}

#content ul{
list-style-type:circle;
font-family: 'Droid Serif', 'serif';
padding: 0;
margin: 0;
 }

#content li{
font-family: 'Droid Serif', 'serif';
padding-left:10px;
float:left;
}

The html:

    <div id= "navbar">
                    <ul>
                        <li><a href="#">Today's Content</a></li>
                        <li><a href="#">Genre</a>
                            <ul>
                            <li><a href="#">Fiction</a></li>
                            <li><a href="#">Non-Fiction</a></li>
                            <li><a href="#">Poetry</a></li>
                            <li><a href="#">Drama</a></li>
                            <li><a href="#">Romance</a></li>
                            </ul>   
                        </li>
                        <li><a href="#">Rubric</a></li>
                        <li><a href="#">Content</a>
                            <ul>
                            <li><a href="#">Jan</a></li>
                            <li><a href="#">Feb</a></li>
                            <li><a href="#">Mar</a></li>
                            <li><a href="#">Apr</a></li>
                            <li><a href="#">May</a></li>
                            <li><a href="#">June</a></li>
                            <li><a href="#">July</a></li>
                            <li><a href="#">Sept</a></li>
                            <li><a href="#">Oct</a></li>
                            <li><a href="#">Nov</a></li>
                            <li><a href="#">Dec</a></li>
                            </ul>
                        </li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Submit</a></li>
                    </ul>
                </div>

        <div id="content-container">
            <div id="content">
                <h1>
                    Submission deadline: Friday, May 9th
                </h1>
                <h2>
                    Poetry Submissions
                </h2>
                <ul>
                    <li>Needs a title</li>
                    <li>Cannot be about specific other students</li>
                    <li>Must have a way to contact if any questions </li>
                    <li>Can’t be disrespectful or rude</li>

                </ul>
                <h2>
                    Fiction Submissions
                </h2>
                <ul>
                    <li>5 submissions, 10page cap total</li>
                    <li>Spelling and grammar checked</li>
                    <li>Must be typed</li>
                    <li>Showing vs. telling - wanted</li>
                    <li>Staple work &#38; corresponding artwork or label art w/ title of work</li>
                    <li>Must be fiction &#40;has to fit genre&#41;</li>
                </ul>
            </div>
        </div>

Answer 1

"The list doesn't display vertically like it would if now css was applied."

To get it to display vertically you have to clear the float you've applied to li previously. in your #content li styles, change it from float:left to:

float:none;

"Also their should be visual line breaks between the ul and h2."

There are line breaks already according to my fiddle, if you make the previous change:

http://jsfiddle.net/8Rke2/