Currently, i've got a footer at the bottom of the viewpoint but i'd like it to be at the bottom of the webpage. I'd like this because it overlaps most of the content on each page. How can I change the below HTML and CSS to fix this?
body {
background-color: #40E39C;
}
#nav-menu a {
text-align: center;
padding: 30px 45px 30px 45px;
}
#nav-menu ul{
margin-bottom: 100px;
text-align: center;
}
#nav-menu li {
display: inline-block;
margin-top: 40px;
border-style: solid;
border-width: 1px;
background-color: white;
padding: 30px 45px 30px 45px;
}
.footer {
background-color: #EAEDD0;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: auto;
}
.footer li {
display: inline-block;
}
.footer ul {
text-align: center;
}
<body>
<div id="nav-menu">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
</div>
<footer class="footer">
<ul>
<li>A | </li>
<li>B | </li>
<li>C | </li>
<li>D | </li>
<li>E | </li>
<li>F</li>
</ul>
</footer>
</body>
UPDATE
I've removed the css
position: fixed;
bottom: 0;
left: 0;
and added
display: relative;
to the body tag, but the footer still has some space between the bottom of the page and it.
body {
background-color: #40E39C;
position: relative;
}
#nav-menu a {
text-align: center;
padding: 30px 45px 30px 45px;
}
#nav-menu ul {
margin-bottom: 100px;
text-align: center;
}
#nav-menu li {
display: inline-block;
margin-top: 40px;
border-style: solid;
border-width: 1px;
background-color: white;
padding: 30px 45px 30px 45px;
}
.footer {
background-color: #EAEDD0;
text-align: center;
width: 100%;
position: fixed;
bottom: 0;
}
.footer li {
display: inline-block;
}
.footer ul {
text-align: center;
}
<body>
<div id="nav-menu">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
</div>
<p>a<p/>
<p>a<p/>
<p>a<p/>
<p>a<p/>
<p>a<p/>
<p>a<p/>
v
<p>a<p/><p>a<p/>
<p>a<p/>
<p>a<p/>
v
v
v<p>a<p/><p>a<p/><p>a<p/>
<footer class="footer">
<ul>
<li>A | </li>
<li>B | </li>
<li>C | </li>
<li>D | </li>
<li>E | </li>
<li>F</li>
</ul>
</footer>
</body>
Maybe this might help
This is my gallery page. I hope you can find the problem a bit easier with this.
#nav-menu a {
text-align: center;
padding: 30px 45px 30px 45px;
}
#nav-menu ul{
margin-bottom: 100px;
text-align: center;
}
#nav-menu li {
display: inline-block;
margin-top: 40px;
border-style: solid;
border-width: 1px;
background-color: white;
padding: 30px 45px 30px 45px;
}
.footer {
background-color: #EAEDD0;
text-align: center;
width: 100%;
}
.footer li {
display: inline-block;
}
.footer ul {
text-align: center;
margin: 0;
}
<body>
<head>
<link rel="stylesheet" href="styles.css" type="text/css"/>
</head>
<div id="nav-menu">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
</div>
<div style="clear: both;">
<img src="images/hotelRoom1.jpg" width="360" height="210" style="float:left; padding: 0px 0px 20px 20px;"/>
<img src="images/hotelRoom2.jpg" width="360" height="210" style="float:right; padding: 0px 20px 20px 0px"/>
</div>
<div style="clear: both;">
<img src="images/hotelRoom3.jpg" width="360" height="210" style="float:left; padding: 0px 0px 20px 20px;"/>
<img src="images/hotelRoom4.jpg" width="360" height="210" style="float:right; padding: 0px 20px 20px 0px"/>
</div>
<div style="clear: both;">
<img src="images/hotelRoom5.jpg" width="360" height="210" style="float:left; padding: 0px 0px 20px 20px;"/>
<img src="images/hotelRoom6.jpg" width="360" height="210" style="float:right; padding: 0px 20px 20px 0px"/>
</div>
<footer class="footer">
<ul>
<li>A | </li>
<li>B | </li>
<li>C | </li>
<li>D | </li>
<li>E | </li>
<li>F</li>
</ul>
</footer>
</body>
Code snip of an attempt to fix.
Add this CSS:
body {
position: relative;
}
Also add two CSS prop to your .footer class. So your .footer CSS will be like:
.footer {
background-color: #EAEDD0;
text-align: center;
width: 100%;
position: fixed;
bottom: 0;
}
And this is working as I have checked it in code snip.
Remove the following code from .footer css
position: fixed;
bottom: 0;
left: 0;
Remove position:fixed from the .footer and also remove unnecessary left, bottom etc. Final styles for footer is:
.footer {
background-color: #EAEDD0;
text-align: center;
width: 100%;
}
Update for clearfix and Unwanted Margin
Problem is not on our solution. In your code snipped there are 2 other cause preventing you to get your expected result. You didn't use clearfix on right place and there is some small margin on body causing the space. The solution for clearfix is here:
div:after{
content: "";
display: table;
clear: both;
}
You should give those style to every parent which having children with float left or right.
And as I am finding browser given margin on body the fix is to give:
body{margin: 0}
Related
I have the topnav bar in the middle and when zooming out it stays there, but the picture(logo) and the tickets thing don't. Like you can see everythings is position relative. Also tried with margin auto, margin-left and margin-right auto but it just doesnt stay there. Also tried making the div just in the middle but that didn't work either. Every help is appreciated. :)
body{
margin: 0;
}
#header{
background-color: #a61b2b;
display: grid;
grid-template-columns: 20% 80%;
height: 120px;
align-content: center;
justify-content: flex-end
}
#topnav li{
margin: 0px 5px;
}
#topnav{
position: relative;
top: 40px;
right: 460px;
font-family: 'Open Sans',arial,sans-serif;
color: #f2f2f2;
padding: 14px 16px;
font-size: 12px;
font-weight: bold;
list-style: none;
display: flex;
margin: auto;
}
#topnav a:hover {
background-color: #eb0627;
}
#topnav a{
text-decoration:none;
color: #fff
}
#topnav li:hover ul{
display: block;
list-style: none;
background: black;
color: #fff;
padding: 10px;
position: absolute;
left: 0;
}
#topnav li ul li{
margin: 10px 0px;
}
#logo{
position: relative;
left: 500px;
width: 55%;
}
#tickets{
position: relative;
left: 450px;
background-color: black;
}
.hidden{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Granada Club de Fútbol | Granada </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="scripts.js"></script>
</head>
<body>
<div id="header">
<img alt="Logo" id="logo" src="https://i.ibb.co/gTqYynf/logo.png">
<ul id="topnav">
<li>NEWS
<ul class="hidden">
<li>CLUB
</li>
<li>FIRST TEAM
</li>
</ul>
</li>
<li>
THE CLUB
<ul class="hidden">
<li>CLUB INFORMATION
</li>
<li>STRUCTURE
</li>
</ul>
</li>
<li>
FIRST TEAM
<ul class="hidden">
<li>SQUAD </li>
<li>TRAINING</li>
</ul>
</li>
<li>TEAMS
<ul class="hidden">
<li>GRANADA B </li>
<li>GFC LADIES</li>
</ul>
</li>
<li>GRANADA TV
</li>
<li><a id="tickets" href="#">TICKETS</a>
</li>
</ul>
</div>
</body>
</html>
For everyone having a similiar problem, i found a solution. just make a second div tag under the header tag which has a fixed with and margin left and right auto. this makes a div tag in the middle which won't move.
Here's the code of how i fixed it.
body{
margin: 0;
}
a{
transition: all .25s;
}
#header{
background-color: #a61b2b;
display: flex;
grid-template-columns: 20% 80%;
height: 110px;
align-content: center;
justify-content: flex-end;
}
#h2{
width: 975px;
margin-left: auto;
margin-right: auto;
padding-top: 6px;
}
#topnav li{
margin: 0px 5px;
}
#topnav{
position: relative;
font-family: 'Open Sans',arial,sans-serif;
color: #f2f2f2;
padding: 14px 16px;
font-size: 12px;
font-weight: bold;
list-style: none;
display: flex;
margin: auto;
}
#topnav a:hover {
background-color: #eb0627;
}
#topnav a{
text-decoration:none;
color: #fff
}
#topnav li:hover ul{
display: block;
list-style: none;
background: black;
color: #fff;
padding: 10px;
position: absolute;
left: 0;
}
#topnav li ul li{
margin: 10px 0px;
}
#logo{
position: relative;
width: 20%;
}
#tickets{
position: relative;
left: 480px;
background-color: #343434;
padding: 8px;
}
#search{
position: relative;
top: -30px;
left: 650px;
width: 20px;
}
#fb{
padding-right: 5px;
width: 10px;
}
.hidden{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Granada Club de Fútbol | Granada </title>
</head>
<body>
<div id="header">
<div id="h2">
<img alt="Logo" id="logo" src="https://i.ibb.co/gTqYynf/logo.png">
<img id="search" src="https://cdn.discordapp.com/attachments/629756354701295616/707198877857480744/search-icon.png">
<ul id="topnav">
<li>NEWS
<ul class="hidden">
<li>CLUB
</li>
<li>FIRST TEAM
</li>
</ul>
</li>
<li>
THE CLUB
<ul class="hidden">
<li>CLUB INFORMATION
</li>
<li>STRUCTURE
</li>
</ul>
</li>
<li>
FIRST TEAM
<ul class="hidden">
<li>SQUAD </li>
<li>TRAINING</li>
</ul>
</li>
<li>TEAMS
<ul class="hidden">
<li>GRANADA B </li>
<li>GFC LADIES</li>
</ul>
</li>
<li>GRANADA TV
</li>
<li><a id="tickets" href="#"><img id="fb" src="https://image.flaticon.com/icons/svg/27/27212.svg">TICKETS</a>
</li>
</ul>
</div>
</div>
</body>
</html>
I am using the following code in my header to display my logo and my navigation. I vertically centered my text with line-height: 90px; but when I try to give my logo vertical-align: middle; it doesn't seem to work. What am I doing wrong?
header {
max-width: 960px;
height: 90px;
margin: 0 auto;
line-height: 90px;
background: #444444;
}
header img {
width: 59px;
height: 32px;
float: left;
}
nav {
float: right;
}
nav ul li {
display: inline-block;
}
nav li:not(:last-child) {
margin: 0px 50px 0px 0px;
}
<header>
<img src="images/logo.png" alt="Logo">
<!-- Bild fehlt noch - SVG -->
<nav>
<ul>
<li>Start
</li>
<li>About me
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
Flexbox can do that:
header {
max-width: 960px;
height: 90px;
margin: 0 auto;
line-height: 90px;
background: #444444;
display: flex;
justify-content: space-between;
align-items: center;
}
header img {
width: 59px;
height: 32px;
}
nav {} nav ul li {
display: inline-block;
}
nav li:not(:last-child) {
margin: 0px 50px 0px 0px;
}
nav ul li a {
color: white;
}
<header>
<img src="http://www.fillmurray.com/59/32" alt="Logo">
<!-- Bild fehlt noch - SVG -->
<nav>
<ul>
<li>Start
</li>
<li>About me
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
I'm trying to make a navbar using CSS. The nav links need to be spaced evenly from the picture in the middle of the bar. At the moment it looks like this:
The Code:
body {
background-image: url("../img/bg.jpg");
margin-left: 0px;
margin-right: 0px;
}
div.menucontainer {
margin-top: 50px;
background-image: url("http://www.thevincentcollection.com/img/menubg.jpg");
height: 35px;
box-shadow: 0px 5px 10px #000;
text-align: center;
}
IMG.vcmenulogo {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 10px;
}
.menulinks {
position: relative;
right: 0px;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.menulinks li {
display:inline;
}
.menulinks a {
display:inline-block;
padding:10px;
}
#footer {
position: fixed;
background-image: url("http://www.thevincentcollection.com/img/menubg.jpg");
box-shadow: 0px -6px 5px 0px rgba(0,0,0,0.75);
width:100%;
height:20;
bottom:0;
}
P.footer {
text-align: center;
color: white;
font-size: 11px;
font-family: Arial;
}
<!DOCTYPE html>
<html>
<head>
<title>The Vincent Collection: Luxury in Haircare</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="menucontainer">
<img class="vcmenulogo" src="http://www.thevincentcollection.com/img/vc-logo-menu.png" />
<ul class="menulinks">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div>
<div id="footer"> <p class="footer">Copyright © 2016 Salon on Wheels, LLC. All rights reserved.</p> </div>
</body>
</html>
you can change your HTML, insert the img as li and then remove the position:absolute from it and with a few other tweaks regarding position value and vertical-align, you have what you want.
body {
background-image: url("../img/bg.jpg");
margin: 0
}
.menucontainer {
margin-top: 50px;
background-image: url("http://www.thevincentcollection.com/img/menubg.jpg");
height: 35px;
box-shadow: 0px 5px 10px #000;
text-align: center;
}
.menulinks {
position: relative;
top: -90px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.menulinks li {
display: inline-block;
padding: 10px;
vertical-align: middle
}
<div class="menucontainer">
<ul class="menulinks">
<li>Home
</li>
<li>About
</li>
<li>
<img class="vcmenulogo" src="http://www.thevincentcollection.com/img/vc-logo-menu.png" />
</li>
<li>Products
</li>
<li>Contact
</li>
</ul>
If you are trying to add some space between 2nd and 3rd button as I understood
just give class to 2nd and 3rd li element and give margin. Or maybe you can just add 2 ul elements and margin between
#joshua, its a gud approach to do as #ryuk said as well, and if i was to do this i would just make a dummy li between 2nd and 3rd child then margin it appropriately.
U can either do this,
<ul class="menulinks">
<li>Home</li>
<li>About</li>
<li class="third">Products</li>
<li>Contact</li>
</ul>
.third{ margin-left: 10% }
or make a dummy between 2nd and 3rd li
<ul class="menulinks">
<li>Home</li>
<li>About</li>
<li class="dummy"></li>
<li>Products</li>
<li>Contact</li>
</ul>
.dummy{
padding-left:10%
}
I am trying to make a miniature vertical bar like in this site, where they have the navigation and the vertical bars in between each link. I have tried the solution to a previous question, but when I tried to use 'margin-left' to move the text, the bar wouldn't stay between each link, it'd to this.
HTML
<div id="nav-clearfix">
<div id="nav">
<ul class="nav-pages">
<li>HOME</li>
<li><div class="mini-divider"></div></li>
<li>ROSTER</li>
<li><div class="mini-divider"></div></li>
<li>GALLERY</li>
<li><div class="mini-divider"></div></li>
<li>ABOUT US</li>
<li><div class="mini-divider"></div></li>
<li>SPONSORS</li>
</ul>
</div>
</div>
CSS
#nav-clearfix {
width: 100%;
height: 100px;
background: #000;
}
#nav {
margin-left: 10%;
width: 100%;
}
.nav-pages {
padding-top: 10px;
}
.mini-divider {
position: absolute;
top: 26%;
bottom: 71%;
border-left: 1px solid white;
}
.nav-pages li, .mini-divider {
float: left;
margin-left: 50px;
}
CSS
.nav-pages li:not(:last-child) a:after{
content: "";
/* width: 0px; */
background: white;
margin-left: 20px;
position: absolute;
height: inherit;
color: white;
border: 1px solid white;
height: 15px;
}
Remove The Border Related HTML & CSS
<li><div class="mini-divider"></div></li>
DEMO
You can also use + css selector to give border to the next element no need to add extra element for border
added
*{
margin: 0;
padding: 0;
}
for removing default styles given by browsers
* {
margin: 0;
padding: 0;
}
#nav-clearfix {
width: 100%;
height: 100px;
background: #000;
}
#nav {
width: 100%;
}
.nav-pages {
padding-top: 10px;
text-align:center;
}
.nav-pages li {
display: inline-block;
padding: 0 10px;
}
.nav-pages li + li {
border-left: 1px solid white;
}
<div id="nav-clearfix">
<div id="nav">
<ul class="nav-pages">
<li>HOME</li>
<li>ROSTER</li>
<li>GALLERY</li>
<li>ABOUT US</li>
<li>SPONSORS</li>
</ul>
</div>
</div>
Use this .separator class for vertical separator.
CSS
ul > li{
float: left;
display: block;
position: relative;
}
ul > li > a{
padding: 4px 6px;
display: block;
}
.separator {
background: none repeat scroll 0 0 #222;
border-left: 1px solid #333;
float: left;
height: 30px;
width: 1px;
}
HTML
<ul>
<li >
<a href="#" >Home</a>
</li> <span class="separator"></span>
<li> Link 1 </li> <span class="separator"></span>
<li > Link 2 </li> <span class="separator"></span>
<li> Link3 </li> <span class="separator"></span>
<li > Contact </li>
</ul>
jsfiddle: demo
I have a page that has a dark grey sidebar that has a ul in it that is holding some navigation. Currently the UL is getting pushed over within the side bar.
Fiddle: http://jsfiddle.net/PWZJd/
I would like the UL to be pressed up against the left side of the sidebar. Then I can add some padding to move it over as I see fit.
HTML:
<div class="content">
<header id="myNav" class="top_block navbar-fixed-top" >
<ul>
<li>Home</li>
<li>4Tell</li>
<li>Console 1</li>
<li>Console 2</li>
<li>About</li>
</ul>
</header>
<aside class="background sidebar">
<div class="sidenav">
<ul class="menu side-menu">
<li>NCR at your service</li>
<ul class="sub-menu">
<li>My Support Link</li>
<li>My Asset List</li>
<li>My Invoices</li>
<li>My Somthing Else</li>
</ul>
<li>Q2C MAC</li>
<ul class="sub-menu">
<li>Move</li>
<li>Add</li>
<li>Change</li>
<li>Swap</li>
</ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</aside>
<div class="left_block sidebar">
</div>
<div class="bottom_block footer">
<p class="text-center">Designed by Steve Wilson <br>With contributions from Alex Cronon and Robert Moua</p>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.content {
min-height: 100%;
position: relative;
overflow: auto;
z-index: 0;
}
.background {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
margin: 0;
padding: 0;
}
.top_block {
width: 100%;
display: block;
}
.bottom_block {
position: absolute;
width: 100%;
display: block;
bottom: 0;
}
.left_block {
display: block;
float: left;
}
.right_block {
display: block;
float: right;
}
.center_block {
display: block;
width: auto;
}
.background.sidebar {
height: auto !important;
padding-bottom: 0;
left: 0;
width: 200px;
background-color: #33404c;
margin-top: 50px;
margin-bottom: 50px;
border-right: 1px solid;
}
.sidebar {
height: auto;
width: 20%;
padding-bottom: 75px;
}
.footer {
width: 100%;
height: 50px;
background-color: #e3e6ea;
padding-top: 5px;
}
.sidenav {
margin-top: 10px;
color: #f9fafb;
}
.side-menu {
font-size: 1.2em;
font-family: 'Open Sans', sans-serif;
list-style: none;
line-height: 2em;
}
*Note: I have cut some of the code for Stack Overflow, see the fiddle for a more complete version.
adjust the padding and margin on your side-menu to 0.
See: http://jsfiddle.net/PWZJd/2/
The default padding on the ul element is what's moving it to the right. Just update the padding and you can dock the ul up against the left side of the side-bar as close as you want.
Demo: http://jsfiddle.net/PWZJd/3/