Member Avatar for hermann87

Hi, I am having trouble with the layout of a website I'm making.
I'm not very good with CSS.

So the trouble I'm having is that I want to have a horizontal menu bar that I want to center in my website. This menu can have dropdown children.

The implementation is in jQuery.
So this is the HTML code of my menu bar :

echo "<ul class='dropdown'>
            <li><a href='index.php'>Home</a></li>
            <li><a href='#'>Incident</a>
            <ul class='sub_menu'>
            <li><a href='index.php?action=new'>New</a></li>
            <li><a href='index.php?action=edit'>Edit</a></li>
            <li><a href='index.php?action=manage'>Manage</a></li></li>
            </ul>";
    if ($_SESSION['isAdmin']) {
        showAdmin();
    }
    echo "<li><a href='action_logout.php'>Log out</a></li>
            </ul>";

and this is the CSS that is being implemented :

*                                   { margin: 0; padding: 0; }
body                                { font: 14px Helvetica, Sans-Serif; margin: 15px; } 
a                                   { text-decoration: none; }
ul                                  { width: 800px; list-style: none; text-align: center; margin: auto; padding: 2px 2px;}
p                                   { margin: 15px 0; }

/* 
    LEVEL ONE
*/
ul.dropdown                         { position: relative; }
ul.dropdown li                      { display: inline; font-weight: bold; background: #ccc; padding: 2px 2px; border-bottom: 1px solid #777; }
ul.dropdown a:hover              { color: #000; }
ul.dropdown a:active                { color: #ffa500; }
ul.dropdown li a                    { display: inline; padding: 2px 8px; border-right: 1px solid #777; border-bottom: 1px solid #777;
                                      color: #222; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #F3D673; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }


/* 
    LEVEL TWO
*/
ul.dropdown ul                      { width: 175px; visibility: hidden; position: absolute; top: 100%; left: 0; text-align: left; }
ul.dropdown ul li                   { font-weight: normal; background: #f6f6f6; color: #000; 
                                      border-bottom: 1px solid #ccc; float: none; }

                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a                 { border-right: none; width: 100%; display: inline-block; }

I did manage to center my menu bar after all. However there seems to be a little gap between Home and Incident menus and I've no idea how to get rid of it.

Any ideas?
Thank you in advance.

  • 3 Contributors
  • 3 Replies
  • 105 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by manzoor.ilahi77

Dani AI

Generated

Most likely cause: the small gap is from browser-rendered whitespace between inline-level list items, not the PHP/HTML error spotted (that fix was still needed). 's float+left approach can work, but it is brittle for responsive layouts and requires extra clearfix work. Two safer fixes follow.

Use flexbox to center the menu and eliminate inline whitespace:

ul.dropdown {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 15px 0;
  padding: 0;
}
ul.dropdown > li { position: relative; }
ul.dropdown a { display: block; padding: 6px 10px; }

If you must keep inline-block, remove the gap by collapsing the space or using the font-size:0 trick:

ul.dropdown { text-align: center; font-size: 0; list-style: none; padding: 0; margin: 15px 0; }
ul.dropdown > li { display: inline-block; font-size: 14px; vertical-align: middle; }
ul.dropdown a { font-size: 14px; display: block; }

Notes and cautions: set each top-level li to position: relative (not only on hover) so absolutely positioned submenus stay anchored correctly. If you try removing the whitespace in HTML, make sure your code stays readable (comments between tags or minifying are common ways). Use flexbox for modern browsers (IE10+); fall back to inline-block for older browsers.

Quick debug tip: in DevTools, toggle display on the li (inline/inline-block/flex) or temporarily set contrasting background colors to see where the gap originates.

Recommended Answers

All 3 Replies

Member Avatar for drjohn

I think that this bit

<li><a href='index.php?action=manage'>Manage</a></li></li>
</ul>";

should be

<li><a href='index.php?action=manage'>Manage</a></li>
</ul>
</li>
";

i.e. close the nested ul inside the li containing it

Edited by drjohn
Member Avatar for hermann87

Thanks, that was wrong indeed, however that didn't fix it.

Member Avatar for manzoor.ilahi77

not like this

ul.dropdown                         { position: relative; }
ul.dropdown li                      { display: inline; font-weight: bold; background: #ccc; padding: 2px 2px; border-bottom: 1px solid #777; }

Change as

ul.dropdown                         { position: relative; left:350px; }
ul.dropdown li                      { display: inline; float:left; font-weight: bold; background: #ccc; padding: 2px 2px; border-bottom: 1px solid #777; }

u can fix trhe pixel of left in ul.dropdown and add float:left in ul.dropdown li

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.