CODEWITHSUNDEEP
htmlcsslistmenu
user2457657
user2457657

Reputation: 15

Coding <ul> <li> menu to fit within main <div>

EDIT: I have found this code, which appears to be sorta working the way I want it to. You can check it out live at EDIT - I still can't get it to sit within my #main div though! I've tried using both 100% and 990px within #menu span for width - neither seem to work.

<div id="menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 2</a></li>
  </ul>

  <span></span>
</div>

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

END EDIT

I have a menu I'm having some issues with - mainly horizontal issues :)

Basically, when you view the website in Chrome, the menu is centered the way I want it to be.

When you view the website in FireFox, the menu is 5-10px short on the right side.

And when you view it in Internet Explorer, the menu is not sitting left and is overflowing off of the right side of the page.

View it for yourself at: EDIT (Keep in mind, index2.php here, not the original index)

So my question is:

How can I style/code this menu correctly to fit within my parent div?

I did look through previous topics with similar questions, however, was unable to make anything work. Thank you in advance :)

HTML:

<!DOCTYPE html>
<html>
<head>
<title>EDIT </title>
<link rel="stylesheet" href="style.css" type="text/css">
<style>

#sliderwrapper {width:635px;}

#control  {
  text-align:right;
  margin-top:5px;
}

#control a  {
  background:#87e7fa;
  padding:0 5px;
  color:#FFFFFF;
  text-transform:uppercase;
  text-decoration:none;
  margin-left:5px;
}

#control a.active {background:#265db9;}
#control a span {visibility:hidden;}

.sexyslider-control span {display:none;}

.sexyslider-title {
 font-weight:bold;
 color: #FFFFFF;
}



</style>

</head>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.sexyslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
      $("#slider").SexySlider({
        width      : 981,
        height     : 500,
        delay      : 3000,
        strips     : 18,
        autopause  : false,
        <!--navigation : '#navigation',--!>
        control    : '#control',
    direction    : 'left',
        effect     : 'fade'
      });
    });
</script>

<body>
<div id="wrapper">
  <div id="header"><img src="images/header.gif" alt="" /></div>


<div id="main">

    <ul>
    <h2><li><a href="index.php">Home</a></li>
    <li><a href="team.php">Meet Our Team</a>
    <li><a href="office.php">Office Information</a></li>
    <li><a href="first.php">First Visit</a></li>
    <li><a href="dental.php">Dental Topics</a></li>
    <li><a href="tour.php">Office Tour</a></li>
    <li><a href="contact.php">Contact Us</a></li></h2>
    </ul>
    <div id="sliderwrapper" class="clearfloat">
        <div id="slider" style="width:100%">
                    <img src="images/slide1.jpg" alt="" "/>
                                    <img src="images/slide4.jpg" alt=""  "/>
                    <img src="images/slide2.jpg" alt="" " />
                                    <img src="images/slide3.jpg" alt=""  "/>
                    <img src="images/slide4.jpg" alt=""  "/>
                                    <img src="images/slide5.jpg" alt=""  "/>
                    <img src="images/slide6.jpg" alt=""  "/>
                </div>

<div id="control" style="margin-top:10px; margin-right:-347px;"></div>
</div>  
</div>      



    <div id="footer"><img src="images/footer.gif" alt=""/></div>
</body>
</html>

CSS:

body {
    margin:0;
padding:0;
background-color: #87e7fa;
font-size:100%;
text-align:center;
}
#wrapper {
margin:0 auto;
padding:0;
    text-align:center;
    background:url('images/bg.gif') repeat-y;
width:1200px;
}
#header {
    width:1200px;
height:358px;
}
#main {
    width:990px;
height:100%;
    margin:0 auto;
text-align:left;

    }

#footer {
clear:both;
width:1200px;
height:354px;
}

h2 {
    font-family:soos_font;
    text-decoration:none;   
    text-shadow:1px 1px 0 rgba(0,0,0, 0.4); 
    }

ul
{
list-style-type:none;
margin:10 0;
padding:0;

}



li
{
display:inline;
width:100%;
margin:0 auto;
}


a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#87e7fa;
text-align:center;
padding:7px;
text-decoration:none;
text-transform:uppercase;
border-radius:5px;
margin:0 auto;

}

a:hover,a:active
{
background-color:#3650a2;
}

Upvotes: 0

Views: 6312

Answers (1)

Roy Sonasish
Roy Sonasish

Reputation: 4599

I have update you css

css

#main {
    width:990px;
    height:100%;
    margin:0 auto;
    text-align:center;
}
#main ul{
    list-style-type:none;
    margin:0;
    padding:0;
}
#main li{
    display:inline-block;
    /*width:100%;*/
    margin:0 3px;
}

html

<div id="main">
    <ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="team.php">Meet Our Team</a>
    <li><a href="office.php">Office Information</a></li>
    <li><a href="first.php">First Visit</a></li>
    <li><a href="dental.php">Dental Topics</a></li>
    <li><a href="tour.php">Office Tour</a></li>
    <li><a href="contact.php">Contact Us</a></li>
    </ul>
    <br style="clear:both;"/>
</div>

here is the jsFiddle File

Also don't wrap li in to h2, this is not a valid code.

Upvotes: 1

Related Questions