I am trying to place an unordered list underneath two headers. I currently have the two headers aligned right and floated right, and they seem to be in the right position. However, when I try to align and float the unordered list to the right or use margins, it goes to very strange positions on the page.
body {
background-color: forestgreen;
color: yellow;
}
ul {
list-style-type: none;
align: right;
float: right;
padding: 0px;
width: 200px;
background-color: greenyellow;
text-align: center;
border: 2px solid yellow;
}
li a {
display: block;
margin: 0;
padding: 8px 16px;
color: darkcyan;
text-decoration: none;
font-family: Helvetica;
}
li a.active {
background-color: yellow;
color: red;
}
li a:hover:not(.active) {
background-color: skyblue;
color: forestgreen;
text-decoration: underline wavy brown;
}
h1 {
float: right;
align: right;
font-family: Helvetica;
font-size: 50px;
padding-right: 10px;
}
h2 {
float: right;
align: right;
font-family: Helvetica;
font-size: 30px;
margin-left: 1200px;
padding-right: 30px;
}
<h1>Welcome to ENlightenment!</h1>
<h2>Can you feel the love?</h2>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Programming</li>
<li>Japanese</li>
<li>Russian</li>
<li>Video Games</li>
<li>Music</li>
</ul>
And here is an image explaining what I am trying to do:
Webpage plan
The best way to do this would be Flex Box.
I edited some parts of your code to see. with the arrival of CSS3, people won't use float / position to do this kind of stuff.
<!DOCTYPE html>
<html>
<head>
<title>ENlightenment</title>
</head>
<body>
<style>
body {
background-color: forestgreen;
color: yellow;
}
ul {
list-style-type: none;
padding: 0px;
width: 200px;
background-color: greenyellow;
text-align: center;
border: 2px solid yellow;
}
li a {
display: block;
margin: 0;
padding: 8px 16px;
color: darkcyan;
text-decoration: none;
font-family: Helvetica;
}
li a.active {
background-color: yellow;
color: red;
}
li a:hover:not(.active) {
background-color: skyblue;
color: forestgreen;
text-decoration: underline wavy brown;
}
h1 {
/* float: right; */
font-family: Helvetica;
font-size: 50px;
padding-right: 10px;
}
h2 {
/* float: right; */
font-family: Helvetica;
font-size: 30px;
/* margin-left: 1200px; */
padding-right: 30px;
}
.navBar {
display: flex;
justify-content: space-between;
}
</style>
<h1>Welcome to ENlightenment!</h1>
<div class="navBar">
<h2>Can you feel the love?</h2>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Programming</li>
<li>Japanese</li>
<li>Russian</li>
<li>Video Games</li>
<li>Music</li>
</ul>
</div>
</body>
</html>
Related
Hey I'm trying to create a web with a nav bar. However when I hover one a tag(link) all the others moves for some reason and I can't find a solution , guess some play with css which I'm still learning.... any help for what's wrong here?
.container {
width: 85%;
margin: auto;
overflow: hidden;
}
header {
background-color: #262626;
color: white;
padding-top: 20px;
min-height: 70px;
}
header a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: color 0.3s;
display: block;
padding: 8px 16px;
}
header a:hover {
padding: 8px 16px;
border-color: #2a2a2a;
color: #D52B1E;
letter-spacing: 1.5px;
border: none;
cursor: pointer;
outline: none;
display: block;
}
header li {
display: inline;
padding: 0 20px 0 20px;
display: inline-flex;
}
header #logo {
float: left;
}
header #logo h1 {
margin: 0;
font-family: 'Dancing Script', cursive;
}
header nav {
float: right;
margin-top: 10px;
}
<header>
<div class="container">
<div id="logo">
<h1>Coupon<span style="color:#D52B1E">System</span></h1>
</div>
<nav>
<ul>
<li><a routerLink="/home">Home</a></li>
<li><a routerLink="/about">About</a></li>
<li><a routerLink="/contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
appreciate any help, thanks guys!
You should add letter-spacing: 1.5px; in your header a class not on hover thats why its moving when you hover a li.
If you really want to show a little movement on hover you can try below method.
.container {
width: 85%;
margin: auto;
overflow: hidden;
}
header {
background-color: #262626;
color: white;
padding-top: 20px;
min-height: 70px;
}
header a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: color 0.3s;
display: block;
padding: 8px 16px;
letter-spacing: 1.5px;
position: relative;
}
header a:hover {
padding: 8px 16px;
border-color: #2a2a2a;
color: #D52B1E;
letter-spacing: 1.5px;
border: none;
cursor: pointer;
outline: none;
display: block;
right: 2px;
}
header li {
display: inline;
padding: 0 20px 0 20px;
display: inline-flex;
}
header #logo {
float: left;
}
header #logo h1 {
margin: 0;
font-family: 'Dancing Script', cursive;
}
header nav {
float: right;
margin-top: 10px;
}
<header>
<div class="container">
<div id="logo">
<h1>Coupon<span style="color:#D52B1E">System</span></h1>
</div>
<nav>
<ul>
<li><a routerLink="/home">Home</a></li>
<li><a routerLink="/about">About</a></li>
<li><a routerLink="/contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
I found a solution:
letter-spacing: 1.5px;
I forgot this line in the a tag
You're adding letting spacing to the header a:hover. This means whenever you hover over the link, letter spacing will be added.
i have a project at school where im trying to make a flashgames website but im stuck with a problem.I want the picture be bigger than the gray box.The picture how i want it : https://prntscr.com/frvzyy
My html Code:
*{
margin: 0px;
background-color:darkred;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
padding-left: 30%;
padding-right: 30%;
overflow: hidden;
background-color: gray;
}
li {
float: left;
}
li a {
display: block;
font-family: Verdana, Helvetica, sans-serif;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color: darkred;
}
#logo {
display: block;
font-family: Verdana, Helvetica, sans-serif;
background-color: black;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
li a:hover {
background-color: black;
}
}
p{font-family:Tahoma;}
<!DOCTYPE html>
<html>
<head>
<title>Games</title>
<link rel="stylesheet" href="css/nav.css">
</head>
<ul>
<li>Games</li>
<li>1vs1 Games</li>
<li id="logo"><img src="src/flash%20games%20logo.png" style="width:250px;"></li>
<li>Categories</li>
<li>About us</li>
</ul>
<h1>Games</h1>
<p>content bla bla</p>
</html>
You need to make some changes to achieve this.
*{
margin: 0px;
background-color:darkred;
}
.nav{
height: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
/*padding-left: 30%;
padding-right: 30%;*/
/*overflow: hidden;*/
background-color: gray;
height: 48px;
}
li {
/*float: left;*/
display: inline-block;
vertical-align: top;
margin: 0 -2px;
}
li a {
display: block;
font-family: Verdana, Helvetica, sans-serif;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color: darkred;
}
#logo {
/*display: block;*/
font-family: Verdana, Helvetica, sans-serif;
background-color: black;
text-align: center;
padding: 10px;
text-decoration: none;
}
#logo img{
display: block;
}
li a:hover {
background-color: black;
}
}
p{font-family:Tahoma;}
<div class="nav">
<ul>
<li>Games</li>
<li>1vs1 Games</li>
<li id="logo"><img src="https://s-media-cache-ak0.pinimg.com/originals/94/77/f9/9477f98e6d5154911c05467c4acb24c5.jpg" style="width:250px;"></li>
<li>Categories</li>
<li>About us</li>
</ul>
</div>
<h1>Games</h1>
<p>content bla bla</p>
I hope it will helps you :)
I would like to add a line above and below my nav-bar that would fade out at the ends of it, like shown in the image below:
this is my HTML so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Portfolio - Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="header">
<h1>Alex Trotter</h1>
<ul id="nav">
<li>Home</li>
<img class="circle" title="circle" alt="circle" src="images/circle.png" />
<li>About Me</li>
<img class="circle" title="circle" alt="circle" src="images/circle.png" />
<li>Contact</li>
</ul>
</div>
<div id="content">
<div id="webInfo">
<p>Hi, my name is Alex Trotter and this is my portfolio website</p>
<p>below you will find some of work that I have created.</p>
<p>Above you can navigate to different pages to learn more about me.</p>
</div>
<div id="exampleWork1"></div>
<div id="exampleWork2"></div>
<div id="exampleWork3"></div>
</div>
</body>
And this is my CSS:
body {
display: block;
margin: 0;
padding: 0px;
}
#header {
background-color: #b9fee2;
width: 1920px;
height: 200px;
display: inline-block;
}
h1 {
font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
font-size: 75px;
font-weight: 500;
text-align: center;
margin: 0px;
color: #000000;
text-decoration: none;
}
h1 a {
text-decoration: none;
}
h1 a:visited {
color: #000000;
text-decoration: none;
}
#nav {
display: inline-block;
-webkit-padding-start: 0px;
text-align: center;
margin: auto;
width: 100%;
}
#nav li {
display: inline-block;
vertical-align: top;
}
#nav a {
-webkit-transition: background-color 0.2s linear;
}
#nav a:link {
display: block;
text-align: center;
color: #000000;
text-decoration: none;
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 50px;
padding-right: 50px;
}
#nav a:visited {
color: #000000;
}
#nav a:hover {
display: block;
text-align: center;
color: #000000;
background-color: #FFFFFF;
text-decoration: none;
padding-left: 50px;
padding-right: 50px;
font-size: 30px;
}
.circle {
padding-top: 25px;
}
Whenever I try to add a border to the nav-bar it goes across the entire screen, but if I make it so that the nav-bar border is only as big as it needs to be, the nav bar isn't in the center of the screen. What is the best way to solve this problem?
A couple of positioned pseudo-elements with a linear gradient background would be probably the simplest method.
Note: Your menu HTML is invalid, ul can only have li as direct children..not images, you can search SO for other options for menu dividers.
body {
margin: 0;
padding: 0px;
}
#header {
background-color: #b9fee2;
height: 200px;
text-align: center;
}
h1 {
font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
font-size: 75px;
font-weight: 500;
text-align: center;
margin: 0px;
color: #000000;
text-decoration: none;
}
h1 a {
text-decoration: none;
}
h1 a:visited {
color: #000000;
text-decoration: none;
}
#nav {
display: inline-block;
-webkit-padding-start: 0px;
text-align: center;
margin: auto;
position: relative;
}
#nav::before,
#nav:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75) 50%, rgba(0, 0, 0, 0) 100%);
}
#nav::before {
top: 0;
}
#nav:after {
bottom: 0;
}
#nav li {
display: inline-block;
vertical-align: top;
}
#nav a {
-webkit-transition: background-color 0.2s linear;
}
#nav a:link {
display: block;
text-align: center;
color: #000000;
text-decoration: none;
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 50px;
padding-right: 50px;
}
#nav a:visited {
color: #000000;
}
#nav a:hover {
display: block;
text-align: center;
color: #000000;
background-color: #FFFFFF;
text-decoration: none;
padding-left: 50px;
padding-right: 50px;
font-size: 30px;
}
<div id="header">
<h1>Alex Trotter</h1>
<ul id="nav">
<li>Home
</li>
<li>About Me
</li>
<li>Contact
</li>
</ul>
</div>
in the CSS, add a hover:
#nav {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
}
#nav.noHighlight {
background:transparent;
border-color:transparent;
}
then add a jQuery script, and put
setTimeout(function(){
$('#abc').fadeIn();
$('#abc').addClass('noHighlight');
},1000);
I am building a menu. I have this code:
<nav>
<ul>
<li>Kontakt</li>
<li>Reference</li>
<li>Moje služby</li>
<li>Kdo jsem</li>
</ul>
</nav>
And CSS:
nav{
width: 100%;
height: 90px;
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
}
nav li{
float: right;
padding: 20px 35px 0 0px;
}
nav ul{
margin-right: 100px;
height: 90px;
list-style-type: none;
}
nav a{
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
}
nav a:hover{
text-align: center;
color: 33adae;
What I am trying to do is to make the links clickable like blocks with the height of the whole navbar. The way I have done It so far, you can click only the text in the links.
Generally all that is needed is.
nav a{
display:block;
}
However for a fuller example it's generally easier to let the links determine the height of the header.
For centering, don't use floats, set the ul to text-align:center and the li to display:inline-block.
* {
margin: 0;
padding: 0;
;
box-sizing: border-box;
}
nav {
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
overflow: hidden;
/* clearfix */
}
nav li {
display: inline-block;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav a {
display: block;
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
height: 90px;
line-height: 90px;
padding: 0 25px;
}
nav a:hover {
text-align: center;
color: 33adae;
background: plum;
<nav>
<ul>
<li>Kontakt
</li>
<li>Reference
</li>
<li>Moje služby
</li>
<li>Kdo jsem
</li>
</ul>
</nav>
You could remove the padding from your lis and add it to your a tags. See example http://codepen.io/anon/pen/gaGxpb
Move your <li> padding to the <a> children, and give the links a height:
See codepen
NB: Added a border to the links so as you see the boundaries.
display the links as blocks display: block; and use the line-height to give them the height you want. Try this:
nav {
width: 100%;
height: 90px;
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
}
nav li {
float: right;
padding: 0px 35px 0 0px;
}
nav ul {
margin: 0 100px 0 0;
height: 90px;
list-style-type: none;
}
nav a {
display: block;
line-height: 90px;
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
}
nav a:hover {
text-align: center;
color: 33adae;
<nav>
<ul>
<li>Kontakt</li>
<li>Reference</li>
<li>Moje služby</li>
<li>Kdo jsem</li>
</ul>
</nav>
Here is my version using height and with properties instead of padding, i used background colors so you can see how is working: http://codepen.io/aluknot/pen/wKrqaG
HTML:
<nav>
<ul>
<li>Kontakt</li>
<li>Reference</li>
<li>Moje služby</li>
<li>Kdo jsem</li>
</ul>
</nav>
CSS:
nav {
width: 100%;
height: 90px;
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
}
nav li{
float: right;
background: red;
text-align: center;
height: 100%;
width: 120px;
line-height: 90px
}
nav ul{
margin: 0;
padding-right: 100px;
height: 90px;
list-style-type: none;
background: green;
}
nav a{
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
display: block;
width: 100%;
height: 100%;
background: blue;
}
nav a:hover {
background: black;
color: white;
}
I have a header on my website, with a list in it. The list is aligned properly on 100% size, but when I ctrl-scroll to expand, the text in the list goes out of the header area.
HTML
body {
margin: 0;
}
.header {
background-color: #606060;
text-align: center;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 125%;
height: 4.5%;
width: 100%;
line-height: 50%;
margin-left: auto;
margin-right: auto;
position: fixed;
overflow: hidden;
top: 0px;
}
#headerLinks {
list-style-type: none;
text-shadow: 3px 3px 3px #aaaaaa;
}
#headerLinks li {
display: inline-block;
padding-left: 2%;
padding-right: 2%;
text-align: center;
color: #ffffff;
}
#headerLinks a {
color: #ffffff;
text-decoration: none;
}
#headerLinks a:hover {
color: #cccccc;
}
.introContent {
background-color: #cccccc;
height: 40%;
width: 100%;
margin-top: 2%;
}
<div class="header">
<div id="headerLinks">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
I want the list text to remain inside the header at all times.
EDIT: If I remove the height, since there is a position:fixed; the other containers will get overlapped by the header on zooming.
In your .header class, remove the height attribute - the browser will set the height of that div based on the content inside it (in this case, your menu items).
body {
margin: 0;
}
.header {
background-color: #606060;
text-align: center;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 1.25em;
height: 2.5em;
width: 100%;
line-height: 50%;
margin-left: auto;
margin-right: auto;
position: fixed;
overflow: hidden;
top: 0px;
}
#headerLinks {
list-style-type: none;
text-shadow: 3px 3px 3px #aaaaaa;
}
#headerLinks li {
display: inline-block;
padding-left: 2%;
padding-right: 2%;
text-align: center;
color: #ffffff;
}
#headerLinks a {
color: #ffffff;
text-decoration: none;
}
#headerLinks a:hover {
color: #cccccc;
}
.introContent {
background-color: #cccccc;
height: 40%;
width: 100%;
margin-top: 2%;
}
<div class="header">
<div id="headerLinks">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
If you want to be able to scale everything relatively when you zoom you should use em units instead of percentages.