CODEWITHSUNDEEP
html
Zenoxis
Zenoxis

Reputation: 1

Blank spaces html

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.

Upvotes: 0

Views: 75

Answers (1)

Wiafe
Wiafe

Reputation: 84

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;
}

Upvotes: 1

Related Questions