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 :)
Related
it works fine with all browsers except chrome, while real-preview using Dreamweaver seems fine with all of them, but when uploading it to the server the problem shows up in chrome only. tried to change the inline/block tag. the display: none/block tag everything and still can not solve it. is it a CSS related thing or javascript or what? the dropdown menu works fine on every browser except Chrome
html, body {
margin: 0px;
padding: 0px;
width: 100%;
}
ul > li{
list-style-type: none;
display: inline-block;
}
.grid-container {
display:grid;
}
a {
display: block;
}
#upper-bar {
background-color: #00A2CB;
color: white;
font-weight: bold;
font-family: sans-serif;
padding-left: 50px;
padding-right: 50px;
}
div[id="upper-bar"] a {
color: white;
padding: 5px;
}
#lower-bar {
font-weight: bold;
font-family: sans-serif;
padding-left: 70px;
padding-right: 70px;
}
div[id="lower-bar"] a {
color: black;
padding: 5px;
}
.align-left {
float:left;
}
.align-right {
float: right;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #00A2CB;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #008FB3;}
.dropdown:hover .dropdown-content {
display: block;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>Test page</title>
</head>
<body>
<header class="grid-container">
<div id="upper-bar">
<div class="align-left">
<ul>
<li>|</li>
<li><a href="#" >ABOUT US</a></li>
<li>|</li>
<li><a href="#" >OUR SERVICES</a></li>
<li>|</li>
<li class="dropdown">
HELP
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
</div>
<div id="lower-bar">
<div class="align-left">
<ul>
<li></li>
<li><a href="#" >Home</a></li>
<li><a href="#" >Individuals</a></li>
<li><a href="#" >doctors</a></li>
<li><a href="#" >Companies</a></li>
</ul>
</div>
<div class="align-right">
<ul>
<li><a href="#" >Login</a></li>
<li><a href="#" >Signup</a></li>
</ul>
</div>
</div>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
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'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%
}
How can I set up the positioning of my nav and header to look like this?
I have been trying search around on google and stack overflow, but couldn't find anything.
Here is my code, thanks.
body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}
#wrap { margin: 0 auto; width: 700px; }
#header{
}
ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #000000;
text-decoration: none;
font-size: 25px;
}
li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #ffdc99;
}
#content{
background: #ffffff;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: bottom;
}
/* Edits */
#header,
#content{ clear: both; }
#header,
#header h1,
#header #nav { float: left; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gullible</title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div id="wrap">
<div id="logo">
<h1>Gullible</h1>
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
<h1></h1>
</div>
</div>
<footer>
<h2>Gullible</h2>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</footer>
</body>
</html>
Try Flexbox and justify-content: space-around;
Flex items are evenly distributed so that the space between two adjacent items is the same. The empty space before the first and after the last items equals half of the space between two adjacent items.
ul {
display: flex;
list-style-type: none;
justify-content: space-around;
align-items: center;
border-bottom: 2px solid black;
padding: 0;
}
.logo {
font-size: 30px;
font-weight: bold;
padding: 10px 0;
}
a {
text-decoration: none;
color: black;
}
<ul>
<li>LINK</li>
<li>LINK</li>
<li class="logo">LOGO</li>
<li>LINK</li>
<li>LINK</li>
</ul>
Just place your <h1> inside of a new <li> in the center of the existing ones.
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li><h1>Gullible</h1></li>
<li>Visit</li>
<li>Contact</li>
</ul>
Here you will find an example of how you can achieve that https://jsfiddle.net/5czgjkyj/
<!DOCTYPE html>
<body>
<div id="wrap">
<div id="logo">
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li><h1>Gullible</h1></li>
<li>Visit</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
<h1></h1>
</div>
</div>
<footer>
<ul>
<li>Home</li>
<li>Shop</li>
<li><h2>Gullible</h2></li>
<li>Visit</li>
<li>Contact</li>
</ul>
</footer>
</body>
css
ul {
text-align: center;
}
ul li {
display: inline-block;
}
I am trying to build a simple website and i cannot figure out how to do a couple of things.
There is a nav bar, but it is stuck underneath the image at the top, how do i move it down?
I would like to arrange all of the ul's to be alongside each other, horizontally not vertically.
.jumbotron h1 {
color: #ffffff;
font-size: 150px;
font-family: Sans-serif;
font-weight: bold;
text-align: center;
margin-top: 0px;
}
.nav a {
color: #ff0000;
font-size: 50px;
padding-top: 250px;
}
.jumbotron {
background-image: url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
position: absolute;
left: 0px;
top: 0px;
height: 350px;
}
.page h3 {
color: #000000;
font-size: 30px;
font-family: Calibri;
padding-top: 250px;
padding-left: 50px;
}
.page ul {
color: #000000;
font-size: 20px;
font-family: Calibri;
padding-left: 75px;
}
.page a {
color: #000000;
font-size: 15px;
font-family: Calibri;
padding-left: 70px;
}
.nav li {
display: inline;
left: 20px;
position: relative;
}
background:url(./image.png) no-repeat top center;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li>History of Gaming
</li>
<li>Atari
</li>
<li>Other Games
</li>
<li>Future
</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Gaming: Then, Now & Beyond</h1>
</div>
</div>
<div class="page">
<div class="container">
<div>
<div>
<div>
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>Learn more about the history of gaming
</p>
</div>
<div>
<h3>Atari</h3>
<ul>
<li>40 years of fun</li>
<li>Who is Nolan Bushnell</li>
<li>Bought & Sold</li>
</ul>
<p>Learn more about Atari
</p>
</div>
<div>
<h3>Other Games</h3>
<ul>
<li>PC</li>
<li>Xbox</li>
<li>PlayStation</li>
</ul>
<p>Learn more about other games
</p>
</div>
<div>
<h3>Future</h3>
<ul>
<li>Gaming in society</li>
<li>Who is driving who?</li>
<li>CrowdFunding</li>
</ul>
<p>Learn about future gaming
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Well you can either change the jumbotron to position: relative/static
or
make the nav go down a bit:
.nav{
margin-top: 350px;
}
Regarding the uls:
ul {
text-align: center;
background: grey;
}
ul li {
display: inline;
}
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<ul>
Here's what I would do:
First move all of the jumbotron above the nav in the HTML. Set them both to display: block; if you need to.
For the uls, add
.page ul li {
display: inline-block;
}
or
ul li {
display: inline-block;
}
for all of them on the page