CODEWITHSUNDEEP
htmlcss
dmrcs
dmrcs

Reputation: 19

CSS Enquiry (Margins? Padding?)

Please see screenshot here

I would like the li elements to be stuck to the header-container border element as opposed to the top of the page.

Basically, removing the white gap between the li element and the header-container border, then leaving the gap with the top of the page instead.

I've tried with margins, increasing padding... does not work.

Please see CSS for screenshot attached below:

nav ul {
margin: 0;
padding: 0;

}

nav a {
    display: block;
    padding: 15px 0;
    font-size: 17px;

    text-align: center;
    text-decoration: none;
    font-weight: bold;

    color: #000000;
    background: #f3f2f2;
}

HTML code as requested:

<div class="header-container">
            <header class="wrapper clearfix">
                <h1 class="title"><img src="img/mimosa.png" alt="logo"></h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="lodging.html">Lodging</a></li>
                        <li><a href="tinfo.html">Tourist Info</a></li>
                    </ul>
                </nav>
            </header>
        </div>

Upvotes: 0

Views: 72

Answers (5)

Protonblast
Protonblast

Reputation: 81

you could try to make them into divs and then seperate them as needed. like this 

ul > li /* design the look and feel */
{
    display:block;
    float:left;
    margin: 0 4px 0 4px; /* specify the spacing between each list item. */
 }
li /* stretch each list item */
{
    width:170px;
}

here is the fiddle

Upvotes: 1

173901
173901

Reputation: 709

thanks for the fiddle, that helped ok, the issue is caused by your image being on the same horizontal area as the nav the image size pushed the links up. a quick way to solve this is to add this 

.title{
    position:relative;
    top:10px;
    left:40px;
}

just adjust the top and left as you need them.
and double check with the mobile settings. you may need to position it differently if min-width is however many you set mobile to

Upvotes: 1

thanhtung9630
thanhtung9630

Reputation: 74

change your li tags style into

nav ul li
{
    display:block;
    float:left;
}

this is the : fiddle :)

Upvotes: 0

Faiqa
Faiqa

Reputation: 155

What I got is sometimes if 0 padding or margin doesn't work then u can use negative padding or margins, u can try that!

Upvotes: 0

173901
173901

Reputation: 709

is the whole tab a link or only the text? you have a padding 15px on the link. so if you are using an image for the tab you could try to change that to :

padding-top: 15px;

alternately you could try :

nav li {
margin: 0;
padding: 0;
}

Upvotes: 0

Related Questions