CODEWITHSUNDEEP
htmlcss
user3933456
user3933456

Reputation: 21

Positioning of div with UL inside

i'm trying to create an horizontal menu on my site. The idea is to have a layout in this way ----O---- where the - are the links of the menu and the O is a picture put in the middle of the page, so the two list are on the left and on the right and the are around the picture.

I've created the html

<div class="prima">
   <ul class="prima_lista">
      <li><a href="#">primo</a></li>
   </ul>
</div>
<div class="seconda">
   <ul class="seconda_lista">
      <li><a href="#">secondo</a></li>
   </ul>
</div>

and then i've created the CSS that will organize everything

.prima{
position:absolute;
top:400px;
width:50%;
left:-70px; 
border:1px solid red;
}
.seconda{
position:absolute;
top:400px;
width:50%;
right:-70px; 
border:1px solid green;
}

ul.prima_lista {
margin:0 auto;
list-style:none;
text-align:right;
border:1px solid blue;
}

ul.seconda_lista {
margin:0 auto;
list-style:none;
text-align:left;
border:1px solid blue;
}

ul.prima_lista li {
display:inline-block;
border:1px solid gray;
}

ul.seconda_lista li {
display:inline-block;
border:1px solid gray;
}

ul.prima_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}

ul.seconda_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}

The big problem is the while the first ul/li works perfectly and is well aligned on the right edge of the div... the second one instead present some spaces between the UL and the DIV margin. Is there a way to eliminate this space?

No matter how much i try i haven't find a way to solve this riddle -> http://jsfiddle.net/7voe8jea/

--- i've updated the link to the jsfiddle. first of all for it didn't work... and second because i think i haven't explained myself very well. What i'd like to do is to "push" the second ul to the left of the div just like the first one is aligned to the right edge of the first div.

Upvotes: 0

Views: 78

Answers (1)

littleswany
littleswany

Reputation: 483

I saw that rather that using an id for the div you used a class. SO i changed it to an id, and prefixed everything in the css with a #. Here is a link to the js with it working http://jsfiddle.net/fstxsd5g/1/

Here is the html:

<div id="lista">
<div id="prima_lista">
<ul id="prima_lista">
<li><a href="#">primo</a></li>

</ul>
</div>
</div>

And the css

#lista {
position:absolute;
height:60px;
width:100%;
top:400px;
border:1px solid #000;
}
*/
#prima_lista{
position:absolute;
top:400px;
height:60px;
width:50%;
left:-70px; 
border:1px solid red;
}

ul.prima_lista {
margin:0 auto;
list-style:none;
text-align:right;
}

ul.prima_lista li {
display:inline-block;
/*  border-top:1px solid #dededc; */
/*  padding-top:16px;
padding-right:40px; */
}

ul.prima_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}

.seconda_lista{
width:50%;
right:-70px;
}

ul.seconda_lista {
margin:0 auto;
list-style:none;
text-align:left;
}

ul.seconda_lista li {
display:inline-block;
border-top:1px solid #dededc;
padding-top:16px;
padding-right:40px;
}

ul.seconda_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}

Hope this helps! Littleswany

Upvotes: 1

Related Questions