I'm very confused. #top div has a weird extra space in the bottom of it, setting height of course works, but the problem is that I want to add back compatibility, so if a custom font doesn't load, it uses Verdana, which is wider, so it takes more place, and if the navbar gets bigger, it won't properly fit in the #top
The code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sidebar test</title>
</head>
<style>
div {
border: 1px solid #999;
}
body { font-family: Verdana, sans-serif; font-size: 17px; }
#navbar {
border-radius: 6px;
overflow: hidden;
display: inline-block;
margin: 0;
padding: 0;
}
#navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
float: left;
}
#navbar ul li {
display: inline;
color: black;
text-decoration: none;
}
#navbar ul a {
float: left;
padding: 10px 18px;
text-decoration: none;
color: black;
background-color: #f1f1f1;
-webkit-transition: background-color 0.02s;
transition: background-color 0.02s;
}
#navbar ul a:hover {
background-color: #e6e6e6;
}
#navbar ul a:selected {
background-color: #c7c7c7;
}
#content {
padding: 35px 50px 60px 50px;
}
#container {
width: 900px;
margin: 20px auto;
border-radius: 5px;
box-shadow: 0px 2px 2px 1px #d5d5d5;
}
</style>
<body>
<div id="container">
<div id="top">
<img alt="logo" height="27px" src="http://static.tumblr.com/zicio7x/Tphntwm0j/yvemiro.svg">
<div id="navbar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</div>
<div id="content">
Content
</div>
</div>
</body>
</html>
By default, inline elements are vertically aligned to the baseline. Now the navbar contains an image and the menu bar next to each other, so it has to shift these up and down a bit in order to align them.
Solution: give these things vertical-align:middle (or any other value that doesn't require shifting the blocks out of center).
div {
border: 1px solid #999;
}
body {
font-family: Verdana, sans-serif;
font-size: 17px;
}
#top > a > img { /* this was added */
vertical-align: middle;
}
#navbar {
border-radius: 6px;
overflow: hidden;
display: inline-block;
margin: 0;
padding: 0;
vertical-align: middle; /* and this */
}
#navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
float: left;
}
#navbar ul li {
display: inline;
color: black;
text-decoration: none;
}
#navbar ul a {
float: left;
padding: 10px 18px;
text-decoration: none;
color: black;
background-color: #f1f1f1;
-webkit-transition: background-color 0.02s;
transition: background-color 0.02s;
}
#navbar ul a:hover {
background-color: #e6e6e6;
}
#navbar ul a:selected {
background-color: #c7c7c7;
}
#content {
padding: 35px 50px 60px 50px;
}
#container {
width: 900px;
margin: 20px auto;
border-radius: 5px;
box-shadow: 0px 2px 2px 1px #d5d5d5;
}
<div id="container">
<div id="top">
<a href="#">
<img alt="logo" height="27" src="http://static.tumblr.com/zicio7x/Tphntwm0j/yvemiro.svg">
</a>
<div id="navbar">
<ul>
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
</ul>
</div>
</div>
<div id="content">
Content
</div>
</div>
Related
I want to know how to put a logo in my css navbar because I don't know how to put a logo in my css navbar. I have no clue on how to put the logo in the css navbar so it would be very nice if one of yall can help me out.
body {
margin: 0px;
}
ul {
list-style-type: none;
overflow: hidden;
margin: 0px auto;
background: #222;
padding: 0px;
}
li {
float: right;
font-size: 20px;
}
li a {
text-decoration: none;
color: white;
padding: 20px 20px;
display: block;
text-align: center;
}
ul li a:hover {
border-bottom: 3px solid grey;
padding-bottom: 17px;
}
img {
height: 70px;
}
<img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325">
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
The first thing you need to do is to create a columnar structure and have the background on the parent. And then add the logo to the left and links to the right. The best way to do is to use the <header> and <nav> tags as they are really semantic.
Here's something you might find useful:
body {
margin: 0px;
}
/* Add these */
header {
overflow: hidden;
background: #666;
}
header h1 {
float: left;
padding: 0 20px;
}
header nav {
float: right;
padding: 20px 0 0;
}
/* End Add these */
ul {
list-style-type: none;
overflow: hidden;
margin: 0px auto;
padding: 0px;
}
li {
float: left; /* Changed here. */
font-size: 20px;
}
li a {
text-decoration: none;
color: white;
padding: 20px 20px;
display: block;
text-align: center;
}
ul li a:hover {
border-bottom: 3px solid grey;
padding-bottom: 17px;
}
img {
height: 70px;
}
<header>
<h1>
<img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325" />
</h1>
<nav>
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
</header>
Also, I just changed the background colour from #222 to #666 to keep it websafe and also make the logo visible. Feel free to change it.
Preview
Here is a fiddle that I hope will help you get you on the right track;
https://jsfiddle.net/Lyrw49mj/7/
HTML
<ul>
<li class="NavHeader"><a><img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325"></a></li>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
CSS
body {
margin: 0px;
}
ul {
list-style-type: none;
overflow: hidden;
margin: 0px auto;
background: #222;
padding: 0px;
}
li {
float: right;
font-size: 20px;
}
li a {
text-decoration: none;
color: white;
padding: 20px 20px;
display: block;
text-align: center;
}
ul li a:hover {
border-bottom: 3px solid grey;
padding-bottom: 17px;
}
.NavHeader a img{
position: relative;
top: 0px;
left: 0px;
height: 70px;
width: auto;
}
.NavHeader a:hover{
border-bottom: none;
padding-bottom: 20px;
}
I have made a css dropdown menu out of only css and html. My problem is when I hover over the nav bar- my page content moves to the right. Then when I hover over the dropdown menu, the page content moves back to the left. I have not found anything that can help me so far. I have attached the relevant code below.
Please help me, and thank you
* {
padding: 0;
margin: 0;
}
nav {
background-color: #cccccc;
width: 100%;
height: 80px;
}
ul {
float: left;
}
ul li {
position: relative;
list-style: none;
float: left;
line-height: 80px;
font-size: 20px;
color: #c92d39;
}
ul li a{
display: block;
text-decoration: none;
color: #c92d39;
padding: 0 30px;
}
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
ul li:hover ul {
display: block;
}
ul li ul {
display: none;
position: absolute;
background-color: #e5e5e5;
border-radius: 0 0 3px 3px;
}
ul li ul li a:hover {
background-color: #b2b2b2;
color: #c92d39;
border-bottom: none;
}
ul li ul li {
font-size: 15px;
width: 100%;
text-align: center;
}
h1 {
color: #c92d39;
padding: 30px;
}
h2 {
color: #c92d39;
padding: 5px 30px 10px 30px;
}
p {
padding: 0px 30px;
}
a {
text-decoration: none;
}
#logo {
background-color: #cccccc;
padding: 0 51px 0 75px;
font-size: 30px;
font-weight: bold;
}
.page-body {
background-color: #e5e5e5;
}
.wrapper {
margin: 0 300px 0 300px;
padding-left: 0px;
height: 100%;
background-color: white;
}
.footer {
background-color: #cccccc;
width: 100%;
height: 80px;
}
.empty_box {
height: 1000px;
width: 100%;
}
#contacts {
margin: 0px 0px 0px 60px;
padding: 0 20px;
border-top: 1px solid #cccccc;
}
#contacts:hover {
border-top: 1px solid #c92d39;
}
#copyright {
font-size: 10px;
float: right;
padding: 0px 30px 0 770px;
}
#copyright:hover {
background-color: #cccccc;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Basecode</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<ul>
<li id="logo">Cultural Asia</li>
</ul>
<ul>
<li>Home</li>
<li>
Attractions
<ul>
<li>attraction1</li>
<li>attraction2</li>
<li>attraction3</li>
</ul>
</li>
<li>
Packages
<ul>
<li>package1</li>
<li>package2</li>
<li>package3</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</nav>
<div class="page-body">
<div class="wrapper">
<p>hi</p>
<div class="empty_box"></div>
</div>
</div>
<div class="footer">
<ul>
<li>Contact Details</li>
<li id="copyright">Copyright Lachlan Dunn</li>
</ul>
</div>
</body>
</html>
You need to clear your floats.
.page-body {
…
clear: left;
}
Demo
* {
padding: 0;
margin: 0;
}
nav {
background-color: #cccccc;
width: 100%;
height: 80px;
}
ul {
float: left;
}
ul li {
position: relative;
list-style: none;
float: left;
line-height: 80px;
font-size: 20px;
color: #c92d39;
}
ul li a {
display: block;
text-decoration: none;
color: #c92d39;
padding: 0 30px;
}
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
ul li:hover ul {
display: block;
}
ul li ul {
display: none;
position: absolute;
background-color: #e5e5e5;
border-radius: 0 0 3px 3px;
}
ul li ul li a:hover {
background-color: #b2b2b2;
color: #c92d39;
border-bottom: none;
}
ul li ul li {
font-size: 15px;
width: 100%;
text-align: center;
}
h1 {
color: #c92d39;
padding: 30px;
}
h2 {
color: #c92d39;
padding: 5px 30px 10px 30px;
}
p {
padding: 0px 30px;
}
a {
text-decoration: none;
}
#logo {
background-color: #cccccc;
padding: 0 51px 0 75px;
font-size: 30px;
font-weight: bold;
}
.page-body {
background-color: #e5e5e5;
clear: left;
}
.wrapper {
margin: 0 300px 0 300px;
padding-left: 0px;
height: 100%;
background-color: white;
}
.footer {
background-color: #cccccc;
width: 100%;
height: 80px;
}
.empty_box {
height: 1000px;
width: 100%;
}
#contacts {
margin: 0px 0px 0px 60px;
padding: 0 20px;
border-top: 1px solid #cccccc;
}
#contacts:hover {
border-top: 1px solid #c92d39;
}
#copyright {
font-size: 10px;
float: right;
padding: 0px 30px 0 770px;
}
#copyright:hover {
background-color: #cccccc;
}
<nav>
<ul>
<li id="logo">Cultural Asia</li>
</ul>
<ul>
<li>Home</li>
<li>
Attractions
<ul>
<li>attraction1</li>
<li>attraction2</li>
<li>attraction3</li>
</ul>
</li>
<li>
Packages
<ul>
<li>package1</li>
<li>package2</li>
<li>package3</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</nav>
<div class="page-body">
<div class="wrapper">
<p>hi</p>
<div class="empty_box"></div>
</div>
</div>
<div class="footer">
<ul>
<li>Contact Details</li>
<li id="copyright">Copyright Lachlan Dunn</li>
</ul>
</div>
The problem is that you add a bottom-border to element which pushes paragraph out of its position. do
ul li a:hover {
color: black;
}
instead of
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
or if you really want that border check out css box-sizing property documentation
I have a header consists of a website name (at the left part) and a horizontal navigation menu (at the right part). My objective is to add a slogan under the site name. Meanwhile, the bottom of site name should still completely match with the bottom of menu elements, the only change is adding slogan.
Here are my header and a picture with expected result: https://jsfiddle.net/1nc9ch3x/1/
Give me please a hint how to figure it out. Thank you in advance!
body {
background: url(http://i.imgur.com/Asbdvgw.png);
font-family: 'Open Sans', sans-serif;
}
header {
width: 950px;
margin: auto;
position: relative;
background: #fff;
overflow: hidden;
}
.wrapper {
width: 950px;
margin: 0 auto;
}
header .logo {
display: inline;
border-left: 1px dashed #333333;
padding: 0 0 25px 10px;
text-decoration: none;
float: left;
font-size: 30px;
color: #cc3333;
margin: 25px 0px;
}
header nav {
float: right;
margin: 25px 0px;
}
header nav ul {
margin-top: 0px;
}
header nav ul li {
display: block;
float: left;
}
header nav ul li a {
text-decoration: none;
color: #333333;
font-size: 17px;
padding-top: 15px;
padding-bottom: 15px;
transition: all .2s linear;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
}
header nav ul li a.active,
header nav ul li a:hover {
color: #cc3333;
border-top: 1px dashed #cc3333;
border-bottom: 1px dashed #cc3333;
}
header li {
display: inline;
border-left: 1px dashed #cc3333;
padding: 10px 25px 10px 25px;
}
header li:first-child {
border: none;
}
<header>
<div class="wrapper">
<div class="logo">
Name
</div>
<nav>
<ul>
<li>Category 1
</li>
<li>Category 2
</li>
<li>Category 3
</li>
<li>Category 4
</li>
</ul>
</nav>
</div>
</header>
<br>
<br>
<center><font color="#fff">My goal:</font>
<br>
<br>
<img src="http://i.imgur.com/aW7k0QI.png">
This should do the trick : Fiddle : https://jsfiddle.net/1nc9ch3x/3/
HTML :
<div class="logo">
Name<span>Slogan</span>
</div>
CSS :
header .logo {
position:relative;
}
header .logo span {
white-space:nowrap;
color:black;
font-size:18px;
position:absolute;
bottom:0;
left:10px;
}
To achieve what you want is as easy as putting the following code inside <div class="logo">:
<p id = "slogan">Slogan should be right here</p>
Then, you can go in your CSS file and make the necessary changes for #slogan. Something like the following:
#slogan {
color: #0c0c0c;
font-size: 16px;
display: block;
margin-top: 5px;
}
You can check out this working demo or the following snippet.
Snippet:
body {
background: url(http://i.imgur.com/Asbdvgw.png);
font-family: 'Open Sans', sans-serif;
}
header {
width: 100%;
height: 100px;
margin: auto;
position: relative;
background: #fff;
overflow: hidden;
}
.wrapper {
width: 950px;
margin: 0 auto;
}
header .logo {
display: inline;
border-left: 1px dashed #333333;
padding: 0 0 25px 10px;
text-decoration: none;
float: left;
font-size: 30px;
color: #cc3333;
margin: 25px 0px;
}
header nav {
float: right;
margin: 25px 0px;
}
header nav ul {
margin-top: 0px;
}
header nav ul li {
display: block;
float: left;
}
header nav ul li a {
text-decoration: none;
color: #333333;
font-size: 17px;
padding-top: 15px;
padding-bottom: 15px;
transition: all .2s linear;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
}
header nav ul li a.active,
header nav ul li a:hover {
color: #cc3333;
border-top: 1px dashed #cc3333;
border-bottom: 1px dashed #cc3333;
}
header li {
display: inline;
border-left: 1px dashed #cc3333;
padding: 10px 25px 10px 25px;
}
header li:first-child {
border: none;
}
#slogan {
margin-top: 5px;
color: #0c0c0c;
font-size: 16px;
display: block;
}
<header>
<div class="wrapper">
<div class="logo">
Name
<p id="slogan">Slogan should be right here</p>
</div>
<nav>
<ul>
<li>Category 1
</li>
<li>Category 2
</li>
<li>Category 3
</li>
<li>Category 4
</li>
</ul>
</nav>
</div>
</header>
Get your code:
html:
<header>
<div class="wrapper">
<div class="logo">
<h4>
Name
</h4>
<p>your slogan here</p>
</div>
<nav>
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
</ul>
</nav>
</div>
</header>
<br><br>
<center><font color="#fff">My goal:</font><br><br>
<img src="http://i.imgur.com/aW7k0QI.png">
css:
body {
background: url(http://i.imgur.com/Asbdvgw.png);
font-family: 'Open Sans', sans-serif;
margin:0;
}
header {
width: 950px;
margin: auto;
position: relative;
background: #fff;
overflow: hidden;
}
.wrapper {
width: 950px;
margin: 0 auto;
}
header .logo{
border-left: 1px dashed #333333;
padding:5px 10px;
}
header .logo h4{
padding: 0px ;
text-decoration: none;
font-size: 30px;
color: #cc3333;
padding: 10px;
padding-bottom:0;
}
.logo h4{
margin:0;
padding:0;
}
.logo p{
color:rgba(0,0,0,0.7);
margin:0;
padding:0 10px;
}
header nav{
position:absolute;
right:0;
top:0;
margin: 0px 0px;
}
header nav ul{
margin: 0px;
}
header nav ul li{
display: block;
float: left;
margin: 0px;
}
header nav ul li a{
text-decoration: none;
color: #333333;
font-size: 17px;
padding-top: 15px;
padding-bottom: 15px;
transition: all .2s linear;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
}
header nav ul li a.active,
header nav ul li a:hover{
color: #cc3333;
border-top: 1px dashed #cc3333;
border-bottom: 1px dashed #cc3333;
}
header li {
display: inline;
border-left: 1px dashed #cc3333;
padding: 10px 25px 10px 25px;
}
header li:first-child {
border: none;
}
Here's an updated Fiddle.
Critical CSS:
header .slogan {
color: #000;
font-size: 20px;
display: block;
}
And HTML:
<div class="logo">
Name
<span class="slogan">Tagline here</span>
</div>
I am trying to figure out how to remove the last black section of my secondary nav.
I want the "wishlist" link to be the last thing there, not have the border and then more black space afterwards basically. I'm just not sure how to do this.
my html:
<title>LOST Collector</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<!--Header-->
<header>
<a href="http://www.lostcollector.com">
<img src="images/logo.png" alt="Lost Collector" title="Lost Collector"/>
</a>
<!--Primary navigation-->
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!-- Secondary Navigation -->
<ul id="navigation_layout">
<li>Artwork</li>
<li>Autographs</li>
<li>Books/Magazines</li>
<li>Clothing</li>
<li>Dvds and Cds</li>
<li>Film Crew</li>
<li>Original Props</li>
<li>Special Events</li>
<li>Toys and games</li>
<li>Trading cards</li>
<li>Everything else</li>
<li>Wish list</li>
</ul>
my css:
body {
width: 1200px;
height: 130px;
margin: 0 auto;
background-color: #ffffff;
color: #111111;
font-family: "Georgia", "Times New Roman", serif;
font-size: 90%;
}
header a {
float:left;
display:inline-block;
}
header a img {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right:10px;
display: inline;
height: 112px;
width:; 113px;
}
nav {
display: inline;
float: right;
}
nav ul {
list-style: none;
display: inline;
}
nav ul li {
display: inline-block;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #000000;
margin-right: 50px;
padding: 40px 30px;
padding: right 10px;
}
nav li a {
display: inline-block;
padding: 4px 3px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #000000;
}
nav li a:hover {
color: #ff0000;
background-color: #ffffff;
}
/*secondary navigation*/
#navigation_layout {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #000000;
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
}
#navigation_layout li {
float: left;
}
#navigation_layout li a {
display: block;
padding: 4px 3px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #ffffff;
border-right: 2px solid #ffffff;
}
#navigation_layout li a:hover {
color: #ff0000;
background-color: #fff;
}
I have put it into a jsfiddle here, so it is clearer what I am trying to do.
https://jsfiddle.net/thzfm0fe/1/
Apply the background color to your list items <li> and not the <ul>.
Remove background-color from here:
#navigation_layout {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
/* background-color: #000000; */
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
}
And add to here:
#navigation_layout li {
float: left;
background-color: black;
}
https://jsfiddle.net/thzfm0fe/3/
A <ul> by default is a block level element and will fill up the full width of the parent element. Your list items <li> did not fill up the full width of the parent but your <ul> did, hence the extra black after your list items.
By applying the background color to the <li> you don't need to add white border to your anchors anymore. You could apply a margin instead.
I am having trouble removing the last border divider after 'PART C'. I would like to keep the border on the right of each element in the navigation list apart from the last one.
a {
text-decoration: none;
color: #000000;
display: block;
width: 150px;
}
li {
list-style: none;
float: left;
padding-left: 10px;
width: 150px;
}
ul {
width: 900px;
margin: 0px auto;
}
.nav {
padding: 25px 50px 10px 0px;
z-index: 1;
font-family: "Avenir";
}
.nav a:hover {
color: #cccccc;
}
.nav a {
color: #000;
display: block;
line-height: 14px;
padding-left: 10px;
padding-right: 30px;
text-decoration: none;
border-right: 1px solid #000;
text-align: center;
width: 100px;
}
<div class="header">
<div class="container">
<div class="nav">
<ul>
<li>HOME
</li>
<li>ABOUT ME
</li>
<li>PART A
</li>
<li>PART B
</li>
<li>PART C
</li>
</ul>
</div>
</div>
</div>
You could use :last-child css selector.
a {
text-decoration: none;
color: #000000;
display: block;
width: 150px;
}
li {
list-style: none;
float: left;
padding-left: 10px;
width: 150px;
}
ul {
width: 900px;
margin: 0px auto;
}
.nav {
padding: 25px 50px 10px 0px;
z-index: 1;
font-family: "Avenir";
}
.nav a:hover {
color: #cccccc;
}
.nav a {
color: #000;
display: block;
line-height: 14px;
padding-left: 10px;
padding-right: 30px;
text-decoration: none;
border-right: 1px solid #000;
text-align: center;
width: 100px;
}
.nav li:last-child a {
border-right: none;
}
<div class="header">
<div class="container">
<div class="nav">
<ul>
<li>HOME
</li>
<li>ABOUT ME
</li>
<li>PART A
</li>
<li>PART B
</li>
<li>PART C
</li>
</ul>
</div>
</div>
</div>
Reference: MDN
Add this rule:
.nav li:last-child a{border-right:none}
Demo :http://jsfiddle.net/lotusgodkk/Lewza63r/
Another solution is add class to last li a{ which li doesn't need border} and write style to class.
'a.no_border { border-right: 0; }'
Demo link
:last-child do not work below IE9
Use this it will work on all browser
a#button2 {border-right: none;}