0

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>
8
  • 1
    Please post your html code as well. only css won't help us.
    – Sachin
    Feb 11, 2014 at 17:21
  • you can always try using divs
    – Dev Man
    Feb 11, 2014 at 17:22
  • you haven't showed us enough code to help you. have you tried removing margin and padding from both ul and li ?
    – LorDex
    Feb 11, 2014 at 17:22
  • Please post a fiddle. Feb 11, 2014 at 17:24
  • @LokeshSuthar link
    – dmrcs
    Feb 11, 2014 at 17:27

5 Answers 5

1

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

3
  • Thank you, Unfortunately I tried with those settings and the links keep being pushed up.
    – dmrcs
    Feb 11, 2014 at 18:16
  • I'm about to give up with this site, this is killing my reputation, which directly affects the elements I can provide for other people to help me, now it is at 4 and I cannot even publish links... This is driving me insane, I don't understand what the site is doing and I don't know where to ask for help, sincerely.
    – dmrcs
    Feb 11, 2014 at 18:23
  • what else can I share with you? I would like the gap between the links and the header removed, I want those 2 to stick together. What I'd like is a gap between the links and the very top of the page.
    – dmrcs
    Feb 11, 2014 at 18:29
1

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

0

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;
}
4
  • Thank you, maybe the following screenshot will help you better.
    – dmrcs
    Feb 11, 2014 at 17:34
  • I tried your fix and it did not work, do you need more bits of code? This is probably a question that would be more typical of a novice, it's as frustrating for me because I don't know how to put all the elements you need at reach. I would like to remove the gap between the li/ul element and the header-container border, essentially switching that gap so it is on the top on the page. I don't know which of the CSS/HTML is leading the ul/li elements to stuck to the very top of the page.
    – dmrcs
    Feb 11, 2014 at 17:37
  • can you post your complete css for the Nav and Header divs?
    – 173901
    Feb 11, 2014 at 17:39
  • If the logo being used is of a certain height, it creates the gap seen on the screenshot, I would like that gap with the top of the page as opposed than with the border of the header-container.
    – dmrcs
    Feb 11, 2014 at 17:44
0

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!

0
0

change your li tags style into

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

this is the : fiddle :)

2
  • This is what the fiddle does looks odd... Any turnarounds?
    – dmrcs
    Feb 11, 2014 at 18:15
  • Floating elements create more trouble than good for most beginner developers as they don't fully understand the implications. This isn't a good answer.
    – Etheryte
    Feb 14, 2014 at 13:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.