Caleb Smith
Reputation: 5
Removing space below webpage
I am trying to remove this little space I get below my entire webpage. Below will be my css page and my html page. It showed up some time between moving my css from local to a stylesheet. Not sure what it could be. Any ideas would be greatly appreciated! Thank you!
HTML:
<html
<head>
<link rel="icon" href="Pictures/BluBeatsLogo2.png"> <!-- Icon in browser tab -->
<link rel="stylesheet" type="text/css" href="styling.css"><!-- Stylesheet Import -->
<style>
.music{
padding-top:130px;
text-align: center;
}
.music h1{
font-size:64px;
color:rgba(75,75);
text-shadow: -3px 3px rgb(255,255,255);
text-align: center;
}
</style>
</head>
<body>
<div class=header>
<a href ="index.html">
<img src = "Pictures/BluBeatsLogo2.png" alt="Logo.png" style="height:150px; width:150px; grid-column:1/2; grid-row:1/1;margin-bottom:0px; vertical-align: bottom;">
</a>
<ul class="nav">
<li><a href="index.html" style="color:white;">Home</a></li>
<li><a href="music.html" style="color:white;">Music</a></li>
<li><a href="beats.html" style="color:white;">Beats</a></li>
</ul>
</div>
<!-- End of Header -->
<div class=main>
<div class=music>
<h1>Latest Tracks</h1>
<iframe width="75%" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/223570682&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
</div><!-- End of Music -->
<div class=connect>
<h1>Connect</h1>
<div class=connectList>
<ul>
<a href="https://www.instagram.com/blubeats/" target="_blank">
<li><img src = "Pictures/InstagramLogo.png" alt=IGLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> Instagram</li>
</a>
<a href="https://soundcloud.com/blubeatsmusic/" target="_blank">
<li><img src = "Pictures/SoundCloudLogo.png" alt=SoundCloudLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> SoundCloud</li>
</a>
<a href="https://open.spotify.com/artist/4RGM8nv60UrFGArNSyCZdY" target="_blank">
<li><img src = "Pictures/SpotifyLogo.png" alt=SpotifyLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> Spotify</li>
</a>
</ul>
</div><!-- End of connectList -->
</div><!--End of connect -->
<footer>
<h1>Contact</h1>
<ul>
<li>Email: [email protected] </li>
</ul>
</footer><!-- End of Footer -->
</div><!-- End of Main -->
</body>`enter code here`
</html>
CSS:
/Font Import/ @import url('https://fonts.googleapis.com/css?family=Oleo+Script');
body{
background-color: rgba(63, 133, 244,.75);
font-family: 'Oleo Script';
margin:0px;
padding:0px;
}
ul{
list-style:none;
}
.nav{
list-style: none;
margin:0;
float:right;
padding-top:62px;
display:grid;
grid-template-columns: repeat(3,1fr);
grid-gap:10px;
grid-auto-rows: repeat(1,1fr);
grid-row:1/1;
grid-column: 2/2;
}
.nav li{
font-size: 64px;
display:inline;
color:white;
padding-left:10px;
padding-right:10px;
padding-bottom:0px;
}
.nav li:hover{
color:#1995d3;
cursor: pointer;
text-shadow: 0 0 15px #1995d3;
}
.header{
background-color:rgba(30,30,30,.7);
position: fixed;
top: 0;
padding-bottom:0;
margin:0;
width:100%;
}
.header a{
height: 150px;
width: 150px;
}
.header img{
height: auto;
width:auto;
max-height: 100%;
max-width: 100%;
}
.connect{
width: 100%;
max-width:100%;
}
.connectList {
width: 100%;
max-width:100%;
}
.connect h1{
color:rgba(0,0,0,1);
font-size: 64px;
text-shadow: -3px 3px rgb(255,255,255);
text-align:center;
}
.connectList ul{
list-style: none;
display:grid;
grid-template-columns: repeat(3,1fr);
grid-gap:200px;
grid-auto-rows: repeat(1,1fr);
font-size:40px;
color:rgba(75,75);
text-shadow: -3px 3px rgb(255,255,255);
text-align: center;
}
a{
text-decoration: none;
}
a:visited{
color:rgba(0,0,0,1);
}
connect a:hover{
cursor:pointer;
}
footer h1{
color:rgba(0,0,0,1);
font-size: 36px;
text-shadow: -3px 3px rgb(255,255,255);
text-align:center;
}
footer ul{
text-align:center;
font-size: 24px;
}
.about{
text-align:center;
padding-top:0px;
margin-top:0px;
}
.about h1{
color:rgba(0,0,0,1);
font-size: 64px;
text-shadow: -3px 3px rgb(255,255,255);
text-align:center;
margin-top:0px;
padding-top:0px;
}
.about p{
color:rgba(0,0,0,1);
font-size:24px;
text-align:center;
}
.main{
background-color:rgba(0,0,0,.5);
}
Upvotes: 0
Views: 64
Answers (3)
Kresimir Pendic
Reputation: 3614
that space commes from your footer ul element. You can cancel it with adding this to your css:
footer ul{
text-align:center;
font-size: 24px;
margin-bottom: 0;
}
Upvotes: 0
Dean Coakley
Reputation: 1877
I was able to resolve this issue by adding setting the margin of ul to 0px. This is overwriting the default css of the browser.
footer ul {
margin-bottom: 0px;
}
Upvotes: 0
Itay Ganor
Reputation: 4205
You're having collapsing margins. To fix this, add overflow: auto; to your footer:
.music {
padding-top: 130px;
text-align: center;
}
.music h1 {
font-size: 64px;
color: rgba(75, 75);
text-shadow: -3px 3px rgb(255, 255, 255);
text-align: center;
}
body {
background-color: rgba(63, 133, 244, .75);
font-family: 'Oleo Script';
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
.nav {
list-style: none;
margin: 0;
float: right;
padding-top: 62px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: repeat(1, 1fr);
grid-row: 1/1;
grid-column: 2/2;
}
.nav li {
font-size: 64px;
display: inline;
color: white;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
}
.nav li:hover {
color: #1995d3;
cursor: pointer;
text-shadow: 0 0 15px #1995d3;
}
.header {
background-color: rgba(30, 30, 30, .7);
position: fixed;
top: 0;
padding-bottom: 0;
margin: 0;
width: 100%;
}
.header a {
height: 150px;
width: 150px;
}
.header img {
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
}
.connect {
width: 100%;
max-width: 100%;
}
.connectList {
width: 100%;
max-width: 100%;
}
.connect h1 {
color: rgba(0, 0, 0, 1);
font-size: 64px;
text-shadow: -3px 3px rgb(255, 255, 255);
text-align: center;
}
.connectList ul {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 200px;
grid-auto-rows: repeat(1, 1fr);
font-size: 40px;
color: rgba(75, 75);
text-shadow: -3px 3px rgb(255, 255, 255);
text-align: center;
}
a {
text-decoration: none;
}
a:visited {
color: rgba(0, 0, 0, 1);
}
connect a:hover {
cursor: pointer;
}
footer {
overflow: auto;
}
footer h1 {
color: rgba(0, 0, 0, 1);
font-size: 36px;
text-shadow: -3px 3px rgb(255, 255, 255);
text-align: center;
}
footer ul {
text-align: center;
font-size: 24px;
}
.about {
text-align: center;
padding-top: 0px;
margin-top: 0px;
}
.about h1 {
color: rgba(0, 0, 0, 1);
font-size: 64px;
text-shadow: -3px 3px rgb(255, 255, 255);
text-align: center;
margin-top: 0px;
padding-top: 0px;
}
.about p {
color: rgba(0, 0, 0, 1);
font-size: 24px;
text-align: center;
}
.main {
background-color: rgba(0, 0, 0, .5);
}<div class=header>
<a href="index.html">
<img src="Pictures/BluBeatsLogo2.png" alt="Logo.png" style="height:150px; width:150px; grid-column:1/2; grid-row:1/1;margin-bottom:0px; vertical-align: bottom;">
</a>
<ul class="nav">
<li><a href="index.html" style="color:white;">Home</a></li>
<li><a href="music.html" style="color:white;">Music</a></li>
<li><a href="beats.html" style="color:white;">Beats</a></li>
</ul>
</div>
<!-- End of Header -->
<div class=main>
<div class=music>
<h1>Latest Tracks</h1>
<iframe width="75%" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/223570682&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
</div>
<!-- End of Music -->
<div class=connect>
<h1>Connect</h1>
<div class=connectList>
<ul>
<a href="https://www.instagram.com/blubeats/" target="_blank">
<li><img src="Pictures/InstagramLogo.png" alt=IGLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> Instagram</li>
</a>
<a href="https://soundcloud.com/blubeatsmusic/" target="_blank">
<li><img src="Pictures/SoundCloudLogo.png" alt=SoundCloudLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> SoundCloud</li>
</a>
<a href="https://open.spotify.com/artist/4RGM8nv60UrFGArNSyCZdY" target="_blank">
<li><img src="Pictures/SpotifyLogo.png" alt=SpotifyLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> Spotify</li>
</a>
</ul>
</div>
<!-- End of connectList -->
</div>
<!--End of connect -->
<footer>
<h1>Contact</h1>
<ul>
<li>Email: [email protected] </li>
</ul>
</footer>
<!-- End of Footer -->
</div>
<!-- End of Main -->Upvotes: 2
Related Questions
- How can I remove this space from my html page
- How do I remove empty white space on my webpage?
- Remove unnecessary white space in html
- remove vertical space html
- How to delete space in css?
- How to remove space from top of web page
- How do I remove the space that is automatically added above text?
- CSS - Trying to remove white space on website
- Removing excess whitespace - CSS
- How to remove blank space from website?