How do I vertically align the element in this picture?
<html lang="en-us">
<head>
<meta charset="utf-8">
</head>
<style type="text/css">
* {
text-decoration: none;
padding: 0px; margin: 0px;
list-style: none;
}
#headercontainer {
background-color:gray;
}
#headercontainer ul li {
display: inline-block;
}
nav {
margin: 0px 10%;
padding: 10px 0px;
}
#floatedright {
float: right;
}
#floatedright a {
color: darkgreen;
font-size: 20px;
margin: 10px;
}
#floatedright > li {
float: left;
}
#piercarla {
font-size: 48px;
color: white;
font-family: cursive;
}
</style>
<body>
<section id="headercontainer">
<nav>
<ul>
<li>Piercarla</li>
<section id="floatedright">
<li>Home</li>
<li>Events</li>
<li>Contact</li>
</section>
</ul>
</nav>
</section>
you can resolve your problem using this.
I think vertical-align: middle; is suitable for your question.
Just give some class to the three list items Home,Events,Contact class="m", and then style them to give margin-left margin-right to vertically align them accordingly.
Related
I am currently having difficulties trying to get a bar I made using hover to appear in the a element bottom instead of the top, do you guys have any suggestions? I am new with CSS and been googling for the better part of 2 hours and cannot find a solution.
Heres the code I am using
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css.css">
<title>Untitled Document</title>
</head>
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
<li>Eighth</li>
<li>Ninth</li>
</ul>
</nav>
<body>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
nav {
background-color: red;
height: 40px;
width: 100%;
}
nav ul {
list-style: none;
padding-left: 0;
display: flex;
margin-top: 0;
justify-content: center;
}
nav li {
height: 40px;
padding: inherit;
}
nav li:hover {
background-color: white;
height: 5px;
}
nav a {
font-family: 'Oswald', sans-serif;
float: left;
font-size: 14px;
font-weight: 500;
line-height: 1;
padding: 18px 12px;
position: relative;
text-transform: uppercase;
}
Instead of setting the height of nav li, just set the padding of li and add border-bottom color to the hovered element. Also remove the padding of nav li a
nav {
background-color: red;
height: 40px;
width: 100%;
}
nav ul {
list-style: none;
padding-left: 0;
display: flex;
margin-top: 0;
justify-content: center;
}
nav li {
/* height: 40px; */
padding: 10px 15px;
}
nav li:hover {
border-bottom: 5px solid #fff;
}
nav a {
font-family: 'Oswald', sans-serif;
float: left;
font-size: 14px;
font-weight: 500;
line-height: 1;
/* padding: 18px 12px; */
position: relative;
text-transform: uppercase;
}
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
<li>Eighth</li>
<li>Ninth</li>
</ul>
</nav>
I am trying to use css on an <ul> but for some reason I can't figure out why it won't apply. I am trying to style the list into a menu bar for practice but am unable to get it to register. Can anyone see what I'm missing?
I have tried #menu ul{} #menu ul li{} but neither of those work either.
#container {
width: 1050px;
border: 1px solid grey;
margin: 0 auto;
}
#header {
height: 100px;
padding: 10px 0;
}
#brand {
float: left;
}
h1 a{
font-size: 40px;
font-weight: 100;
text-decoration: none;
color: #861BFF;
}
#searchBox {
float: right;
background: linear-gradient(#E4F2B9, #B7E953);
width: 400px;
height: 50px;
padding: 20px 20px 0 20px;
}
.text {
float: left;
width: 200px;
padding: 5px;
font-size: 15px;
color: #E36A0C;
background: white url(./images/search22px.png) right center no-repeat;
}
.submit {
float: right;
font-weight: bold;
padding: 5px;
color: white;
background: #A751D6;
font-size: 15px;
}
ul {
list-style: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Maths Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" href="maths.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="brand">
<h1>Maths the Fun Way</h1>
</div>
<div id="searchBox">
<form method="get">
<input type="text" class="text" name="searchBox">
<input type="submit" class="submit" value="Search a Topic">
</form>
</div>
<div class="clear">
</div>
</div>
<div id="menu">
<ul>
<li>Home</li>
<li>Online Tutorials</li>
<li>Get a Private tutor</li>
<li>Sign Up</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</body>
</html>
The above is the full code. I have tried in both firefox and chromium and the problem is present in both.
Your code works perfectly fine as Adam mentioned.
See https://jsfiddle.net/kabsw9gr/
#menu ul {
margin: 0 0 10px 0;
padding: 0;
list-style: none;
}
#menu ul li {
display: inline-block;
padding: 10px 20px;
background: linear-gradient(#E4F2B9, #B7E953);
}
I'm having trouble getting the a:hover element to work. I am an amateur, so please be easy... I've tried using the #menubar:hover as well but that doesn't seem to work either.
This code is going into the header of another program. The only reason I got into this was to make the header of this program look identical to the website. Below is my code for the header.
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
Please Help!
check this
#menubar li a:hover {
color: yellow;
}
full code :
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
#menubar li a:hover{
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow !important;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
Here the style of a tag is overriding the hover. So if you place it as !important, that style will be given priority than other styles and it will override all other styles. Just place !important at color:yellow and it works.
I wanted to see if I could get this working without an !importance. The issue is that the CSS selector which sets the text to white is using a greater specificity than the hover style. The best way to do this is to set a better level of specificity to the hover which will allow it to work. Use this in the hover.
#menubar li a:hover {
color: yellow;
}
It is because #menubar>li>a{background-color: #303432;} will overlap your css. a:hover{color:yellow;} So, make it important on hover like in answer.
a:hover {color: yellow !important;}
Or
#menubar>li>a:hover{color: yellow;}
Will solve your issue.
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow !important;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
Hope it helps.
How do I get the nav in the container (on top of a background photo) on the right spot? It's now outside on the left bottom corner...
I positioned the nav on the right place but it will not work along with the image in the container.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>goodidea</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<style type="text/css">
img.c1 {width:1024px;height:1500px}
</style>
</head>
<body>
<div id="container"><img src="images/photo-1.jpg" class="c1"/></div>
<ul id="nav">
<li>photo-2</li>
<li>photo-3</li>
<li><a href="#">photo-4<3/a></li>
<li>photo-5</li>
</ul>
</body>
</html>
* {
padding: 0;
margin:0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 130%;
}
#container {
width: 1080px;
height: 2000px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
}
#nav {
list-style-type: none;
padding-top: 170px!important;
padding-bottom: 13px;
}
#nav a:link, #nav a:visited {
color: #000000;
padding-top: 13px;
padding-bottom: 13px;
text-decoration: none;
}
#nav a:hover, #nav a:active {
padding-top: 10px;
padding-bottom: 10px;
color: #d2d2d2;
text-decoration: none;
}
THNX for your Tip/Help
Hope this is what you are expecting. But as #MelanciaUK commented, ou should not use links out of the container class.
http://plnkr.co/edit/XSDrVmNmwsM2novVgm4T?p=preview
<div class='imagediv'>
<img src="http://dummyimage.com/500x800/f5f0f5/d6d7e8.jpg" class="c1"/>
</div>
<ul id="nav" class='navlinks'>
<li>photo-2</li>
<li>photo-3</li>
<li><a href="#">photo-4<3/a></li>
<li>photo-5</li>
</ul>
I'm working on this page but am having trouble figuring a few things out. First question is how do I keep the navigation links from moving on a hover? Second is how do I get the navigation links closer together? I've been trying to figure this out and seem to be missing something. Thanks!!
header{
height: 80px;
color: #ffffff;
border: 3px solid #000000;
background-color: white;
background-repeat: no-repeat
}
header img {
float: left;
width: auto;
height: 230%;
}
nav ul{
list-style: none;
}
nav li {
display: inline;
padding: 5px;
}
nav a{
margin-left: 150px;
}
nav li a{
color: #92d050;
text-decoration: none;
padding: 5px;
}
nav a:hover {
font-weight: bold;
color: black;
}
nav a.current{
color: black;
}
#about{
float: left;
padding-top: 75px;
padding-left: .25em;
width: 300px;
}
the HTML5 sheet is this:
<!doctype html>
<head>
<meta charset="utf-8">
<title>Hair by Sasha </title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="main_print.css" media="print">
</head>
<body>
<header>Hair by Sasha
<img src="images/logo.jpg" alt="Hair by Sasha">
<nav>
<ul>
<li>Home</li>
<li><a href="services.html" >Services</a></li>
<li><a href="about.html" >About Us</a></li>
<li><a href="contact.html" >Contact Us</a></li>
</ul>
</nav>
</header>
Remove
nav a:hover {
font-weight: bold; /* this moving links remove it */
}
And to bring them closer give float to li.