Blank spaces html

Question

I learnt html and css recently and there's something I don't understand how to remove the blank space on the bottom of my website : http://puu.sh/kSu7r/2fd0ed9532.png

And I have a bar http://puu.sh/kSudx/2d6c69a679.png that I would like to be fixed (stays even if I scroll down) but since the code of it involves position:relative it doesnt work ..

Here's the code:

.bar {
 padding:0px;
 background-color:#333333;
 height:60px;
 top: -10px;
 width:100%;
 text-align:center;
}

.bar ul {
 position:relative;
  transform: translateY(-50%);
  top: 50%;
}


.bar li {
 display:inline;
 color:white;
 font-style:Verdana;
 text-align:center;
 font-size:2em;
 font-family:'Raleway';
 margin:10px;
 padding:10px;
}

.bar a {
 text-decoration:none;
 color:white;
}

<div class="bar">
<ul>
<li class="btn"><a href="#bottom">Element1</a></li>
<li class="btn"><a href="#bottom">Element2</a></li>
<li class="btn"><a href="#bottom">Element3</a></li>
<li class="btn"><a href="#bottom">Element4</a></li>
</ul>
</div>

Thank you very much.

Can't see the blank space you are talking about from the png links. As far as keeping the menu bar fixed, just use position: fixed. — rby, Oct 21 '15 at 18:28

Wiafe · Answer 1 · 2015-10-21T19:33:02.827

1

So first I started with: .bar in CSS. Couple of things I'll change.

For the .bar class I would remove the padding:0;, height:40px, top:-10px;. You remove padding because div tags have no padding already, height will be controlled by the ul (more on that later). And I believe you were using top to get rid of the whitespace, but we fix that later.

Next we go to ultag. Remove position:relative;, transform:translateY(-50%);, and top:50%;. Then add margin:0;, and padding:20px 0. I could tell that you were trying to use position to center the ul within your .bar div. We handle that with the padding addition. I remove the margin because the ul tag has built in margins and you want to remove that or you will have whitespace.

Final touch is the li tag. I just change display: inline; to display: inline-block allowing the ul padding to work.

This is only for the code you added to your post, don't understand the other issues you linked about, might need code for those. Hope this helped!

EDITED

body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Helvetica';
    background-color: #E6E6E6;
}


.bar {
    background-color:#333333;
    width:100%;
    text-align:center;
}

.bar ul {
    margin: 0;
    padding: 20px 0;
}


.bar li {
    display:inline-block;
    color:white;
    font-style:Verdana;
    text-align:center;
    font-size:2em;
    font-family:'Raleway';
    margin:10px;
    padding:10px;
}

.bar a {
    text-decoration:none;
    color:white;
}

edited Oct 21 '15 at 19:33

answered Oct 21 '15 at 18:47

Wiafe

84
1
8

Thank you for the answer ! Problem is that when I deleted position:relative; transform: translateY(-50%); top: 50%; The li elements aren't showing up in the middle of the bar anymore : http://puu.sh/kSAFm/ffbb7ce08d.png – Zenoxis Oct 21 '15 at 19:26
Did you add `margin:0;` and `padding:20px 0` and did you change `li`'s `display:inline;` to `display:inline-block;`? – Wiafe Oct 21 '15 at 19:30
@Zenoxis I just updated my answer with what your css should look like now. – Wiafe Oct 21 '15 at 19:33
Okay it worked, thanks ! Could you please explain me when to use padding and margin ? I'm a bit confused :s – Zenoxis Oct 21 '15 at 19:35
I had to reduce .bar ul { margin: 0; padding: 20px 0; } to .bar ul { margin: 0; padding: 0px 0; } btw because otherwise the bar was too huge, is that normal? – Zenoxis Oct 21 '15 at 19:37
I tend to use padding to give spacing around the content, and margin to separate content from other content. Here's a question that was asked here: http://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css – Wiafe Oct 21 '15 at 19:41
@Zenoxis I use padding to set the height instead of setting an actual height, mainly to make it responsive. I would actually remove the padding on the `li` tag. And change it's margin to `margin:0 10px` (This will remove the height added by the margin). – Wiafe Oct 21 '15 at 19:47

Blank spaces html

1 Answers1