I need to center these links while leaving Santos Fire Department where it is
BTW the only reason that Santos Fire Department has two different tags is to avoid the hover animation.
ul.nav{
display: block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 3.3em;
}
ul.nav li {
float:left;
}
ul.nav li a{
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
text-align: center;
}
ul.nav li .navlogo{
overflow: hidden;
background-color: #333;
height: 3.3em;
}
ul.nav li a.navlogo{
display: inline-block;
padding-top: 10px;
margin-left: 10px;
font-size: 150%;
z-index: -1;
}
<nav class="navbar">
<ul class="nav">
<li id="logo"><a class="navlogo">Santos Fire Department</a></li>
<li id="nav">TeamSpeak (Temp Server)</li>
<li id="nav">US Server</li>
<li id="nav">EU Server</li>
<li id="nav">SantosRP</li>
</ul>
</nav>
Santos Fire Department in original position, navbar centered :)
.navbar {
background-color: #333;
}
.nav {
display: table;
margin: 0 auto;
}
ul.nav li {
display: inline-block;
}
ul.nav li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
text-align: center;
}
.navlogo a {
color: white;
font-size: 150%;
margin: 8px;
position:absolute;
}
<nav class="navbar">
<span class="navlogo"><a>Santos Fire Department</a></span>
<ul class="nav">
<li id="nav1">TeamSpeak (Temp Server)
</li>
<li id="nav2">US Server
</li>
<li id="nav3">EU Server
</li>
<li id="nav4">SantosRP
</li>
</ul>
</nav>
Update
position:absolute; on .navlogo a class, might not be the best way but gives you the results desired.
First of all you should eliminate multiple ids like id="nav" this is important for styling.
Now the parent needs to be text-align: center; and for your #logo you can float: left; like now. Otherwise, never avoid flexbox, but remember the browser support http://pleeease.io/play/
Related
I am trying to keep this menu on one line, when the browser gets resized, some of them make a new line and go under the first line.
Here is my code:
.menu{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
.item{
float: left;
}
.item a{
display: inline-block;
color: white;
text-align: center;
padding: 16px 100px 16px 100px;
text-decoration: none;
white-space: nowrap;
}
.item a:hover{
background-color: #111111;
}
<header>
<ul class="menu">
<li class="item">Home</li>
<li class="item">Popular Categories</li>
<li class="item">Today's Special</li>
<li class="item">Locations</li>
</ul>
</header>
Just use display: flex. I recommend you to have a read here https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.menu{
display: flex;
list-style: none;
}
.item a{
padding: 20px;
text-decoration: none;
color: #000;
}
.item a:hover{
background-color: #000;
color: #fff;
}
<header>
<ul class="menu">
<li class="item">Home</li>
<li class="item">Popular Categories</li>
<li class="item">Today's Special</li>
<li class="item">Locations</li>
</ul>
</header>
This is my HTML:
<nav class="navbar">
<ul>
<li><a class="active home_button" href="#home">Home</a></li>
<li>Profile</li>
<li>Results</li>
<li>About Us</li>
</ul>
</nav>
This is the CSS:
.navbar {
height: 73px;
width: 100%;
}
.navbar ul {
list-style-type: none;
margin: 0;
height: 70px;
padding: 0;
overflow: hidden;
background-color: #362890;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: #fff;
text-align: center;
padding: 22px 20px;
text-decoration: none;
font-size: 26px;
I want to do two things. Firstly I want to make the color of Home orange. Secondly, I want to move About Us on the right side while keeping others on the left side. How can I do that?
Use float:right for the About Us item, and color:orange for the Home item.
.navbar {
height: 73px;
width: 100%;
}
.navbar ul {
list-style-type: none;
margin: 0;
height: 70px;
padding: 0;
overflow: hidden;
background-color: #362890;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: #fff;
text-align: center;
padding: 22px 20px;
text-decoration: none;
font-size: 26px;
}
.home_button{
color:orange !important;
}
#about-us{
float:right;
}
<nav class="navbar">
<ul>
<li><a class="active home_button" href="#home">Home</a></li>
<li>Profile</li>
<li>Results</li>
<li id="about-us">About Us</li>
</ul>
</nav>
I think adding a
!important to .home_button should do the trick, give it a try...
Example
.home_button {
color: orange !important;
}
The !important property in CSS is used to provide more weight (importance) than normal property. In CSS, the !important means that “this is important”, ignore all the subsequent rules, and apply !important rule
For more info on how !important works check here
give home and about a class, then style it
I am designing a hotel website with a fixed navbar. I am having trouble getting the items to be inline with an image item. It's getting quite frustrating.
Here's my HTML
<nav id="navigation">
<ul>
<li class="left">Rooms</li>
<li class="left">Dining</li>
<li class="home"><img src="assets/navbarimg.png" height="64.5px" weight="250px"></img></li>
<li class="right">Activities</li>
<li class="right">Book a Stay</li>
</ul>
</nav>
and here's my CSS
#navigation ul {
text-align: center;
position: fixed;
width: 100%;
max-width: 100%;
font-size: 2vh;
font-family: 'Raleway', sans-serif;
z-index: 100;
background-color: rgba(255,255,255,.55);
display: inline-block;
}
#navigation li {
display: inline-block;
list-style-type: none;
}
#navigation a {
text-decoration: none;
margin: 0px 75px 0 75px;
color: black;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
}
.left {
display: inline;
}
.home {
display: inline;
}
.right {
display: inline;
}
My code is super basic, so work with me here.
#navigation ul {
text-align: center;
position: fixed;
width: 100%;
max-width: 100%;
font-size: 2vh;
font-family: 'Raleway', sans-serif;
z-index: 100;
background-color: rgba(255, 255, 255, .55);
display: inline-block;
}
#navigation li {
display: inline-block;
list-style-type: none;
}
#navigation a {
text-decoration: none;
margin: 0px 75px 0 75px;
color: black;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
}
.left {
display: inline;
}
.home {
display: inline;
}
.right {
display: inline;
}
<nav id="navigation">
<ul>
<li class="left">Rooms</li>
<li class="left">Dining</li>
<li class="home">
<a href="index.html"><img src="https://placehold.it/250x65" height="64.5px" weight="250px"></img>
</a>
</li>
<li class="right">Activities</li>
<li class="right">Book a Stay</li>
</ul>
</nav>
Live Example I made: https://akainth015.github.io/Inked-Out
Often, you can align things with vertical-align(CSS). However, it is a little counter-intuitive. When you use the vertical-align style, the element it is applied to becomes the standard for the rest of the elements. So, if you have this structure:
li {
display: inline-block;
}
ul {
list-style-type: none;
}
li img {
vertical-align: middle;
}
<ul>
<li>Home</li>
<li><img src="https://placehold.it/64x64"></li>
<li>About</li>
</ul>
Notice how it is applied to the image, not the the text you want in the center. Good luck!
I'm new to this, so I'm clueless.
Whenever I go to my site with a different resolution the menu changes a lot and does not align correctly. Just tell me if i need more of the html or css.
My webpage is Aulan.co
My code:
ul {
font-size: 25px;
color: black;
text-align: center;
list-style-type: none;
margin-bottom: 2em;
line-height: 150%;
margin-left: 3em;
margin-right: 5em;
}
#menu {
list-style-type: none;
margin: auto;
width: 90%;
height: auto;
padding: auto;
overflow: hidden;
background-color: #353B4E;
text-align: center;
font-size: 18px;
}
li {
text-align: center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 5px 70px;
text-decoration: none;
height: auto;
}
li a:hover {
background-color: #111;
display: inline;
}
#menus {
float: left;
<h1> AuLan </h1>
<ul id="menu">
<li id="menus"><a class="active">Forside</a></li>
<li id="menus">Informasjon</li>
<li id="menus">Regler</li>
<li id="menus">Crew</li>
<li id="menus">Kontakt oss</li>
<li id="menus">Seatmap</li>
<li id="menus">Timeplan</li>
</ul>
it's not really clear what you want to achieve, but I tried to change your code in a way that I think you might want. I took out a lot of unneccessary code from the CSS and added some. In the HTML, i change the menusID to a class, since IDs should only be used once per page.
You can adjust especially the min-width and padding setting in the menu li a rule to your needs (but also the other width and padding settings)
#menu {
font-size: 25px;
list-style-type: none;
width: 90%;
background-color: #353B4E;
font-size: 18px;
padding: 10px 20px;
}
#menu li {
display: inline-block;
line-height: 150%;
}
#menu li a {
display: block;
min-width: 100px;
color: white;
padding: 5px 15px;
text-decoration: none;
}
#menu li a:hover {
background-color: #111;
}
<h1> AuLan </h1>
<ul id="menu">
<li class="menus"><a class="active">Forside</a></li>
<li class="menus">Informasjon</li>
<li class="menus">Regler</li>
<li class="menus">Crew</li>
<li class="menus">Kontakt oss</li>
<li class="menus">Seatmap</li>
<li class="menus">Timeplan</li>
</ul>
I've been trying to center the items within the navigation but no such luck. Every single solution turns my navigation bar from this: horizontal navigation bar to this: vertical navigation bar.
Any help would be greatly appreciated!
HTML with CSS code:
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<html>
<head>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
Just remove the float from the li and make the inline-block
li {
/* float: left; */
display:inline-block;
}
The first rule of centering is..."Don't use floats"
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
I removed your css on li tag with float and changed it to display and width:
li {
display: -webkit-inline-box;
width: 60px;
}
https://i.stack.imgur.com/LbYd4.png`
I hope this helped you #C. Lagos