CODEWITHSUNDEEP
xhtml
user1321693
user1321693

Reputation:

Two <ul> and <br/> inside <div> is this OK to use?

I have this horizontal list in XHTML:

<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
</ul>
<br/>
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
</ul>
</div>

And the CSS file is this :

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #005546;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #005546;
}

The output in the browser is OK, i just want to have the one block of

under the other, so i want to know if by using the
tag and this code in general is the right thing to do.

Upvotes: 0

Views: 242

Answers (1)

Ian Clark
Ian Clark

Reputation: 9347

The markup itself is fine, if that's what you're asking. It's all valid XHTML. I'd add some tabbing to your code however so it's more readable.

You don't actually need the line break, in fact - I'd go as far as to say line breaks really have very little application in developer-written code. (I can only see a real purpose for them in things such as translating new lines in user input). In most instances, you can just use CSS to add margins to your elements. In your situation, you could use:

#navcontainer > ul:first-child { margin-bottom:10px; }

That'll add a margin-bottom of 10 pixels to only the first list (as you don't want to select both of them)

A final thing I'd note is that in your case your lists seem like your lists should be separate entities (i.e. it makes sense to use two lists). If you wanted to space out a single list item in a list, but it still makes logical/semantic sense to use only one, then I'd go with that, and just use CSS to add spacing between the items.

Upvotes: 2

Related Questions