My unordered list seems to be going out of it's parent element and going under it. I'm sure this is an easy fix but I just can't figure it out. I'm new to html and css.
I've added my codes here in hope of someone figuring something out for me. I think i've asked this question before. I'm not sure, anyways. Thanks in advance.
header {
width: 100%;
height: 36px;
border-bottom: 1px solid #f0efef;
box-shadow: 0 0 5px 0 #f0efef;
}
.header-content {
width: 1030px;
height: 36px;
background-color: red;
}
.header-content p {
margin: 0;
font-size: 14px;
padding: 7px 15px 0 15px;
}
.header-content ul {
margin: 0;
float: right;
list-style: none;
padding: 5px 15px 0 15px;
}
.header-content ul li {
padding-left: 10px;
display: inline;
}
.header-content ul li a, a:visited {
color: #404040;
font-size: 14px;
text-decoration: none;
}
<header>
<div class="header-content">
<p>Welcome, please sign or register</p>
<ul>
<li>My Account</li>
<li>Gift Cards</li>
<li>Customer Care</li>
<li>Community</li>
</ul>
</div>
</header>
That paragraph element is a block level element so it's going to push your ul down. To solve the problem, you can float:left your p tag in the header
header {
width: 100%;
height: 36px;
border-bottom: 1px solid #f0efef;
box-shadow: 0 0 5px 0 #f0efef;
}
.header-content {
width: 1030px;
height: 36px;
background-color: red;
}
.header-content p {
margin: 0;
font-size: 14px;
padding: 7px 15px 0 15px;
float:left;
}
.header-content ul {
margin: 0;
float: right;
list-style: none;
padding: 5px 15px 0 15px;
}
.header-content ul li {
padding-left: 10px;
display: inline;
}
.header-content ul li a, a:visited {
color: #404040;
font-size: 14px;
text-decoration: none;
}
<header>
<div class="header-content">
<p>Welcome, please sign or register</p>
<ul>
<li>My Account</li>
<li>Gift Cards</li>
<li>Customer Care</li>
<li>Community</li>
</ul>
</div>
</header>
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 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 have this code:
nav li{
display: inline-block;
background-color:blue;
width: 70px;
padding: 5px;
}
nav li:first-child, nav li:last-child {
border-radius: 5px;
}
<nav>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
</nav>
I would like to remove this right margin.
How can I do it? I tried:
margin:0
padding:0
It doesn't work.
It's a common problem of inline-blocks, you should remove white space between elements.
nav li{
display: inline-block;
background-color:blue;
width: 70px;
padding: 5px;
}
nav li:first-child, nav li:last-child {
border-radius: 5px 0 0 5px;
}
nav li:last-child {
border-radius: 0 5px 5px 0;
}
<nav>
<li>Home</li><!--
--><li>Work</li><!--
--><li>Contact</li>
</nav>
Reference: Fighting the Space Between Inline Block Elements
Please reset of parent element font-size: 0 and line-height: 0
then set required font-size and line-height on child element
Like this way
nav li{
display: inline-block;
background-color:blue;
width: 70px;
padding: 5px;
font-size: 14px;
line-height: 20px;
color: #fff;
text-align: center;
}
nav li:first-child {
border-radius: 5px 0 0 5px;
}
nav li:last-child{border-radius: 0 5px 5px 0;}
nav ul{
font-size: 0;
line-height: 0;
}
nav li:hover{
background: #333;
}
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
I've set up the following CSS. Everything looks fine except for one thing. When I roll over the links in the nav, the entire "button" is filled with the background color, whereas when I rollover the links in the footer, only the the are behind the text is filled. How do I resolve this so that the entire "button" is filled in the footer, preferably without resort to classes and images (meaning, leverage HTML5/CSS3 as much as possible)?
i've looked at this via multiple web browsers. i am guessing it is because the list items are displayed inline, but i don't know the solution.
--- CSS ---
#CHARSET "UTF-8";
* {
margin: 0;
padding: 0;
}
html * {
margin: 0;
/*padding: 0; SELECT NOT DISPLAYED CORRECTLY IN FIREFOX */
}
/* GENERAL */
body {
background: #fff;
color: #333;
font-family: verdana, "MS Trebuchet", arial, helvetica, sans-serif;
font-size: 62.5%;
margin: 0 auto;
width: 960px;
}
header {
background-color: #999;
border: 1px solid #999;
border-radius: 25px;
margin-top: .5em;
}
header h1 {
color: #fff;
font-weight: bold;
font-size: 2.4em;
margin: .8em 0 .3em 0;
text-align: center;
}
nav {
margin: 1em 30em;
padding: .8em 1.2em;
}
nav ul {
padding-left: 1.5em;
list-style: none;
}
nav ul li {
}
nav ul a {
display: block;
text-decoration: none;
}
nav ul li a {
background-color: #FFF;
border: 1px solid #999;
border-radius: 25px;
color: #222;
display: block;
font-size: 1.2em;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;
padding: 12px 10px;
text-align: center;
text-decoration: none;
}
nav ul a:hover {
color: #333;
background: #ccc;
}
nav#baseball {
display: none;
}
nav#football {
display: none;
}
footer {
border-top: 1px solid #ccc;
margin-top: .5em;
margin-bottom: 1em;
padding: .8em 1.2em;
}
footer ul {
list-style: none;
text-align: center;
}
footer ul li {
border: 1px solid #999;
border-radius: 25px;
display: inline;
margin: 0.0em 1.0em 0.0em 1.0em;
padding: 0em 1.5em 0 1.5em;
}
footer ul a {
/* display: block; */
text-decoration: none;
}
footer ul li a {
color: #222;
}
footer ul a:hover {
color: #333;
background: #ccc;
}
--- HTML ---
<header>
<h1>Sports Fan</h1>
</header>
<nav id='sports'>
<ul>
<li>Baseball
</li>
<li>Basketball
</li>
<li>Football
</li>
<li>Hockey
</li>
<li>Soccer
</li>
</ul>
</nav>
<nav id='baseball'>
<ul>
<li>Homerun
</li>
<li>Big Hit
</li>
<li>Double Play
</li>
<li>Bad Call
</li>
</ul>
</nav>
<nav id='football'>
<ul>
<li>Touchdown
</li>
<li>Big Play
</li>
<li>Sack
</li>
<li>Interception
</li>
<li>Bad Call
</li>
</ul>
</nav>
<footer>
<ul>
<li>Choose
</li>
<li>Manage
</li>
<li>About
</li>
</ul>
</footer>
Placed updated code in a jsFiddle
CSS changes:
footer li{ display:inline }
footer ul a{
border: 1px solid #999;
border-radius: 25px;
display: inline-block;
margin: 0.0em 1.0em 0.0em 1.0em;
padding: 0em 1.5em 0 1.5em;
text-decoration: none;
color: #222;
}