Menu Bar with html/css

Question

I want to make an horizontal bar with a list and research bar, both separated by a margin (I just don't want them to next to each other). I want all the bar to be of a color (in my example it is blue but I don't care it is just to try). However, when I try to put a margin or padding the color vanishes. I m pretty sure it is not the right way to do it. If someone could also tell me how to get rid of the small white layer above the bar that d be great. I want the color to start at the very top of the page.

Thank you for you help (I know I m bad at coding).

Here is the code:

<html>

<head>
    <style>
        #bar {
            background-color: blue;
        }
        #menu ul li {
            display: inline;
            float: left;
        }
        #form {
            padding-left: 30px;
        }
    </style>
</head>

<body>
    <div id="bar">

        <div id="menu">
            <ul>
                <li id="current"><a href="index.html">Home</a>
                </li>
                <li><a href="index.html">Archives</a>
                </li>
                <li><a href="index.html">Profile</a>
                </li>
                <li><a href="index.html">Followers</a>
                </li>
                <li><a href="index.html">Support</a>
                </li>
            </ul>
        </div>

        <div id="form">
            <form method="get" action="http://www.google.com/custom">
                <input name="q" size="25" maxlength="255" value="" type="text" />
                <input name="sa" value="search" type="submit" />
                <input name="cof" value="" type="hidden" />
            </form>
        </div>
    </div>
</body>

</html>

Well, I want the search box to be placed on the same line than the list — user1281441
– user1281441, Commented Dec 15, 2012 at 1:49
Sorry my bad, it s fine. But do you have an idea to make the bar start at the very top of the page. Right now I still have a tiny white layer above the bar. — user1281441
– user1281441, Commented Dec 15, 2012 at 1:54
Did you check that the body or html doesn't have padding in the user-agent styles? Or explicitly set: html, body { margin:0, padding:0} — joholo
– joholo, Commented Dec 15, 2012 at 2:09

Alex Char · Accepted Answer · 2014-10-17 18:49:20Z

You can try this:

* {
    margin: 0;
    padding: 0;
}

#bar {
    background-color: blue;
}
#menu ul li {
    display: inline;
    float: left;
    padding: 0 10px 0 10px;
}
a {
    color: white;
}

#form {
    padding-left: 30px;
}

<div id="bar">
    <div id="menu">
        <ul>
            <li id="current"><a href="index.html">Home</a>

            </li>
            <li><a href="index.html">Archives</a>

            </li>
            <li><a href="index.html">Profile</a>

            </li>
            <li><a href="index.html">Followers</a>

            </li>
            <li><a href="index.html">Support</a>

            </li>
        </ul>
    </div>
    <div id="form">
        <form method="get" action="http://www.google.com/custom">
            <input name="q" size="25" maxlength="255" value="" type="text" />
            <input name="sa" value="search" type="submit" />
            <input name="cof" value="" type="hidden" />
        </form>
    </div>
</div>

To remove "extra white space on top of the page" you can use css global selector * and set padding and margin to 0(reset all margins and padding).

Leigh · Accepted Answer · 2012-12-15 02:42:41Z

0

In your code proper use of float and clearing the float is missing. This might help you:

#bar {background: red; width: 100%;}
#menu {float: left;}
#menu ul {list-style-type:none;}
#menu li {display: inline-block;}

#form {float: right;}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

http://jsfiddle.net/eHnn5/9/

edited Dec 15, 2012 at 2:42

Leigh

28.9k10 gold badges58 silver badges109 bronze badges

answered Dec 15, 2012 at 2:33

Gopal Juneja

263 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

Maybe like this?

Fiddle: http://jsfiddle.net/ujfLc/

===== HTML =====

<div id="bar" class="clearfix">
    <div id="menu">
        <ul class="clearfix">
            <li id="current"><a href="index.html">Home</a></li>
            <li><a href="index.html">Archives</a></li>
            <li><a href="index.html">Profile</a></li>
            <li><a href="index.html">Followers</a></li>
            <li><a href="index.html">Support</a></li>
        </ul>
    </div>

    <div id="form">
        <form method="get" action="http://www.google.com/custom">
            <input name="q" size="25" maxlength="255" value="" type="text" />
            <input name="sa" value="search" type="submit" />
            <input name="cof" value="" type="hidden" />
        </form>
    </div>   
</div>

===== CSS =====

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

#bar {
    background-color: black;
    padding: 10px;
}

#menu {
    float: left;
}

#menu ul {
    display: inline;
    list-style-type: none;
    padding:0;
    margin:0;
}

#menu ul li {
    list-style-type: none;
    float:left;
    padding: 0 10px;
}

#menu ul li a {
    color: white;
    text-decoration: none;
}

#form {
    float:right;
    padding-left: 30px;

}

===== SCREENSHOT =====

enter image description here

Itachi Coding · Accepted Answer · 2014-09-17 07:05:17Z

u might want to use the reset.css to get rid of the white spaces... you can search the internet for the file or just copy these codes..

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Janx from Venezuela · Accepted Answer · 2015-06-20 01:15:12Z

0

Your bar needs to clear:both so the links gives it the proper height and you should see the background color

answered Jun 20, 2015 at 1:15

Janx from Venezuela

1,2071 gold badge11 silver badges13 bronze badges

Collectives™ on Stack Overflow

Menu Bar with html/css

5 Answers 5

Comments

Comments

Fiddle: http://jsfiddle.net/ujfLc/

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Fiddle: http://jsfiddle.net/ujfLc/

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related