I have currently designed a webpage to have a header that follows the user as they scroll down when I did this I used style tags. But now everything I link or try to list gains these attributes and I cant figure out how to stop it.
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<!DOCTYPE html>
<html>
<head>
<title>About</title>
</head>
<body bgcolor="#E6E6FA">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
}
li {
float: left;
}
a:link, a:visited {
display: inline;
width:550px;
height: auto;
font-weight: bold;
font-size: 25px;
color: #D2291F;
background-color: #30166B;
text-align: center;
padding: 20px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
color: #30166B;
background-color: #D2291F;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Awards</li>
</ul>
<br>
<br>
<p>
<br>
My Co-op NBE was created in 1985, since then the company has been helping the Orillia area
with all IT issues both personal and commercial. The team at NBE has won many Awards and specializes in everything IT including:
</body>
</html>
I shortened the html as much as possible to paste it so how would I make this style stuff only apply to the header and not the rewards link in the chat
This is all I want in the header and affected by the style
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Awards</li>
</ul>
Your CSS currently specifies styles for ALL <ul> elements. If you want it to only apply to your nav, you have to be more specific by using a class, like "sticky". So first, add 'class="sticky"' to your <ul> element, like this:
<ul class="sticky">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Awards</li>
</ul>
and the css, if you want all of the styles to ONLY apply to your "sticky" nav, should be:
<style>
ul.sticky {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
}
ul.sticky li {
float: left;
}
ul.sticky li a:link, ul.sticky li a:visited {
display: inline;
width:550px;
height: auto;
font-weight: bold;
font-size: 25px;
color: #D2291F;
background-color: #30166B;
text-align: center;
padding: 20px;
text-decoration: none;
text-transform: uppercase;
}
ul.sticky li a:hover, ul.sticky li a:active {
color: #30166B;
background-color: #D2291F;
}
</style>
Related
I used another post (positioning an image next to a menu bar with html/css), and it worked well, but now my heading is acting really weird! If you look at the result of the example code in full screen, you'll see some of it is stuck next to my menu bar. May someone please help me? I want my heading to be BELOW my menu bar.
body {
font-family: sans-serif;
}
h1 {
font-family: comic sans ms;
float: top;
}
nav ul {
list-style-type: none;
background-color: blue;
border: 4px solid orange;
border-radius: 500px;
font-family: sans-serif;
font-weight: bold;
padding: 16px;
}
nav ul li {
display: inline;
border-right: 2px solid orange;
padding-right: 8px;
padding-left: 8px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: orange;
}
nav {
display: inline;
}
div {
float: left;
}
nav {
float: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link type="text/css" rel="stylesheet" href="css/example.css"/>
<div>
<img src="images/example.jpg">
</div>
<nav>
<ul>
<li>Home</li>
<li>Example</li>
<li>Random</li>
<li>Blah Blah</li>
<li>Other</li>
<li>Something Else</li>
<li>More</li>
</ul>
</nav>
</head>
<body>
<h1>Example Example Example Example Example Example Example</h1>
</body>
</html>
Your html is invalid, you're not supposed to place those html tags inside the <head>. Anyway, I think your css is way too invasive, setting a float for every div on the page? Definitely too aggressive, I removed some of those unnecessary floats and set the nav to be inline-block
body {
font-family: sans-serif;
}
h1 {
font-family: comic sans ms;
}
nav {
display: inline-block;
}
nav ul {
list-style-type: none;
background-color: blue;
border: 4px solid orange;
border-radius: 500px;
font-family: sans-serif;
font-weight: bold;
padding: 16px;
}
nav ul li {
display: inline;
border-right: 2px solid orange;
padding-right: 8px;
padding-left: 8px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link type="text/css" rel="stylesheet" href="css/example.css"/>
</head>
<body>
<div>
<img src="images/example.jpg">
</div>
<nav>
<ul>
<li>Home</li>
<li>Example</li>
<li>Random</li>
<li>Blah Blah</li>
<li>Other</li>
<li>Something Else</li>
<li>More</li>
</ul>
</nav>
<h1>Example Example Example Example Example Example Example</h1>
</body>
</html>
I'm new to HTML and CSS and I'm making my first website. I came across this issue in my project and I can't find the way to solve it. For some reason, my navbar isn't sitting on the top of my page. I also want to know how I can centre my image and also text so it's inline with the box.
CSS/HTML
body {
margin: 0;
padding: 0;
font-family: 'Arial', serif;
background-color: #232323
}
.nav {
background-color: #b73844;
color: #FFFFFF;
list-style: none;
text-align: left
}
.nav > li {
display: inline-block;
padding-right: 25px;
}
.nav > li > a {
text-decoration: none;
color: #ffffff;
}
.nav > li > a:hover {
color: #ffffff;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AccountPanda - Home</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<ul class="nav">
<a href="index.html">
<img src="images/logo.png" title="AccountPanda" style="width:225px;height:75px;">
</a>
<li>Accounts</li>
<li>About</li>
<li>FAQ</li>
</ul>
</body>
</html>
vertical-align: middle and line-height: 0 is what you're looking for.
.nav > li {
display: inline-block;
padding-right: 25px;
vertical-align: middle;
line-height: 0;
}
I also wrapped the <a> that holds the image with a li, so all items in the ul are li:
<ul class="nav">
<li>
<a href="index.html">
<img src="//placehold.it/225x75" title="AccountPanda" style="width:225px;height:75px;">
</a>
</li>
<li>Accounts</li>
<li>About</li>
<li>FAQ</li>
</ul>
Plunker Demo here: http://plnkr.co/edit/PUpoQcGn6qexWD1hkDKF?p=preview
Using flex you can align it center. Also your class nav is on a ul element which has its default properties like margin, padding etc. You can either override them or use them. See below.
/* CSS Document */
body {
margin: 0;
padding: 0;
font-family: 'Arial', serif;
background-color: #232323
}
.nav {
background-color: #b73844;
color: #FFFFFF;
list-style: none;
text-align: left;
margin: 0;
display: flex;
align-items: center;
padding: 10px;
}
.nav > li {
display: inline-block;
padding-right: 25px;
}
.nav > li > a {
text-decoration: none;
color: #ffffff;
}
.nav > li > a:hover {
color: #ffffff;
}
<body>
<ul class="nav">
<a href="index.html">
<img src="images/logo.png" title="AccountPanda" style="width:225px;height:75px;">
</a>
<li>Accounts</li>
<li>About</li>
<li>FAQ</li>
</ul>
</body>
I'm trying to make the following horizontal along the page, instead of vertical. I would like to do this as it is meant to be a header along the top of the site. Thanks.
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Problems with you code:
The <header> element is wrong, should be <head>.
There's no <html> tag.
The </header> is orphaned.
There's no end tags for </body> and </head>.
Just do the two things:
Remove the width for the <ul>.
Add display: inline-block for the <li>.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
ul li {
display: inline-block;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
try below css property for li
float: left;
Your code has several errors:
Look at this:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
/* width: 200px;*/
background-color: #f1f1f1;
}
li {display: inline-block}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
You need to put "display:inline-block" for the li.
<style>
ul li{
display:inline-block;
width: 20%; /* put width as per your requirement*/
}
</style>
add with display:inline-block its shows as horizontal and width will be auto its show as log. if you no need the change width into px`
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:auto;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li{display:inline-block;}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
I am trying to center my ul, but I can't seem to get it to center. I have tried using display: table margin: 0 auto That puts the ul in the middle, but not exactly in the center. I have also tried using display: block with margin: 0 auto but that doesn't center it either
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Droplet Games - Official Site</title>
<link rel="stylesheet" href="css/styles-index.css">
</head>
<body>
<header>
<h1>DROPLET GAMES</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Games</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</html>
You can add this rule to the <ul>:
display: inline-block;
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Droplet Games - Official Site</title>
<link rel="stylesheet" href="css/styles-index.css">
</head>
<body>
<header>
<h1>DROPLET GAMES</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Games</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</html>
I assume that the issue isn't so much that you want the ul element centered, but rather you want the menu items (the li items) inside the ul to be centered.
The entire issue is solved by simply changing the style on your li from float:left to display:inline-block. See below.
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
display:inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Droplet Games - Official Site</title>
<link rel="stylesheet" href="css/styles-index.css">
</head>
<body>
<header>
<h1>DROPLET GAMES</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Games</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</html>
Updated answer: use flexbox
For the best control over spacing of elements in a column or a row, I'd recommend using flexbox now that it has widespread browser support.
To use flexbox here, set display: flex; on the ul, making it the flex container. By default, this will make the ul act as a row with the li acting as flex items within that row. CSS Tricks has a great guide about using flexbox.
I've left my original answer which uses display: inline-block; below.
Original answer
Sounds like display: inline-block; is exactly what you need.
As the name alludes, an element with display: inline-block; acts as if it's an inline element as far as its parent is concerned, and internally it acts like a block element.
Its use here requires a container with width: 100%; and text-align: center;. I've used the <nav> element below. The <ul> can then be given display: inline-block; to achieve the effect you want.
You can also use display: inline-block; in combination with display: inline; for the <li> and their child <a> elements as follows, in order to avoid the float: left; use.
li {
display: inline;
}
li a {
display: inline-block;
...
}
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
}
li {
display: inline;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
nav {
width: 100%;
margin: 0 auto;
text-align: center;
}
<header>
<h1>DROPLET GAMES</h1>
<nav>
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>Games
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
</header>
What I've done is I placed   a lot of times but when you change the size of the window, the logout button does not stay put.How do you make the logout button stay in the rightmost portion of the navigation bar besides using the   code? Thanks
Try This
<!DOCTYPE html>
<html>
<head>
<style>
div.horizontal ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
div.horizontal {
width: 100%;
height: 30px;
background-color: #98BF21;
}
div.horizontal li {
float: left;
}
div.horizontal a:link, div.horizontal a:visited {
font-weight: bold;
color: #FFF;
background-color: #98BF21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
div.horizontal a {
display: block;
width: 100px;
}
li.last
{
float:right !important;
}
</style>
</head>
<body>
<div class="horizontal">
<ul>
<li>Home</li>
<li>News</li>
<li>Articles</li>
<li>Forum</li>
<li>Contact</li>
<li>About</li>
<li class="last">Logout</li>
</ul>
</div>
</body>
</html>