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%
}
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>
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}
I studied a little bit of html and css through high school but I'm having a little bit of trouble creating my website for my small business. I have created my nav bar design but I can't center it in my wrapper. My current code is below.
body {
background-color: #3393FF;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
width: 1300px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
#navigation: {
margin-left: auto;
margin-right: auto;
}
#navigation li {
display: inline-block;
line-height: 40px;
height: 40px;
}
#navigation a {
text-decoration: none;
text-align: center;
color: #fff;
display: block;
width: 204px;
font-size: 15px;
background-color: #3393ff;
}
#navigation a:hover {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 3px #000;
color: #fff;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>Xcite Technologies</title>
</head>
<body>
<div id="wrapper">
<br>
<div id="navigation">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Pricing
</li>
<li>Contact Us
</li>
</ul>
</div>
<br>
<br>
</div>
</body>
</html>
I have tried a couple different things that were posted on here but nothing seems to work. I'm sure it will be an easy fix and feel like im getting tunnel vision. Thank you for you help in advance!
First remove BR from ur html code this is bad idea to create vertical space use padding or margin.
body {
background-color: #3393FF;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
width: 1300px;
padding: 20px 0 40px;
background-color: white;
}
#navigation {
text-align: center;
}
#navigation ul {
display: inline-block;
padding: 0;
}
#navigation li {
display: inline-block;
line-height: 40px;
height: 40px;
}
#navigation a {
text-decoration: none;
text-align: center;
color: #fff;
display: block;
width: 204px;
font-size: 15px;
background-color: #3393ff;
}
#navigation a:hover {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 3px #000;
color: #fff;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>Xcite Technologies</title>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Pricing
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</body>
</html>
hope this help :D
Hi there you can use HTML to do that:
use the <center> tag, your code would become something like that:
<body>
<div id="wrapper">
<br>
<div id="navigation">
<ul>
<center>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact Us</li>
</center>
</ul>
</div>
<br>
<br>
</div>
</body>
Please test it and let me now if it works :)
I'm pulling my hair out trying to get two div tags to align. I've read page after page of solutions on here but I've not been able to get any of them to work. I'm not sure if this is related to this being a Visual Studio project using MVC. It seems unlikely but I thought I'd mention it.
So this is for a header bar on a company website. Logo should be on the left and the menu should be on the right. It must be responsive. Here's what I've got so far:
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
logo {
float: none;
width: 215px;
}
nav {
width: 100%;
height: 100%;
float: left;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
And here is the HTML
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
By changing your CSS like this (note the added dot in .logo)
.logo {
float: left;
width: 215px;
}
nav {
margin-left: 215px;
}
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
.logo {
float: left;
width: 215px;
}
nav {
margin-left: 215px;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
You have many problems in your code:
logo in your css should be .logo to refer to the class of the logo.
The property float:none should be set to float:left; so it should be correctly floated.
And for the nav you shouldn't specify a width:100% because it will be forced to take the whole width of the header, you need to set it to auto for example.
This is a working snippet:
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
.logo {
float: left;
width: 215px;
}
nav {
width: auto;
height: 100%;
float: left;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About
</li>
<li>Residential & Business
</li>
<li>My Accounts Details
</li>
<li>FAQ
</li>
<li>Contact us
</li>
</ul>
</nav>
</div>
</header>
1.Your code was badly formatted.I have formatted it.
2..logo should be set to "float:left".
3..container should have"overflow:hidden"
I have also made Your li straight.(I have made it in one line )
This contains your html formatted code,Css which You may need to change as well as add
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger">
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</div>
</header>
</div>
Your css code:
* {
margin: 0px;
padding: 0px;
}
header{
width:700px;
margin:0 auto;
}
.container {
overflow: hidden;
}
.logo {
float: left;
margin-right:100px;
}
.hamburger {
/* float: left; */
overflow: hidden;
}
li {
float: left;
padding: 5px;
list-style-type: none;
}
Hope This Is what You had expected
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