Im trying to make the navigation bar highlight fully when we hover over a link but it's currently only working horizontally. I think its something really small I'm doing wrong and have been trying four hours. Heres the code I have:
html, body {
/*require html and body 100% height and width to allow other child elements to use percentages*/
height: 100%;
width: 100%;
margin: 0;
}
a {
text-decoration: none;
display: block;
color: black;
}
li {
list-style: none;
}
div{
margin-left: 2.5%;
margin-right: 2.5%;
margin-top: 1%;
border: 1px solid black;
}
.content_section{
height: 150%;
margin-bottom: 1%;
}
#footer{
height: 25%;
margin-bottom: 1%;
}
#banner{
margin-top: 2.5%;
height: 15%;
position: relative;
}
#banner img{
width: 100%;
height: 100%;
}
#navbar{
padding: 0;
height: 5%;
text-align: center;
position: relative;
background-color: #FFCB3D;
}
#navbar li a {
display: block;
text-align: center;
text-decoration: none;
width: 20%;
height: 100%;
float: left;
}
#navbar ul a:hover{
height: 100%;
background-color: #FFF17C;
}
<!DOCTYPE html>
<html>
<head>
<title>Sample Site</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="banner">
<img src="resources/images/banner-image.png">
</div>
<div id="navbar">
<ul id="navbar">
<li>Page A</li>
<li>Page B</li>
<li>Page C</li>
<li>Page D</li>
<li>Page E</li>
</ul>
</div>
<div class="content_section">
</div>
<div id="footer">
</div>
</body>
</html>
I would make the ul a display: flex parent to create a row out of the li's, remove the height on #navbar so it's fluid based on the content, remove the ul's default margin, then set flex-grow: 1 on the li's (or flex: 1 0 0 for short) so they'll stretch to fill the parent evenly, then apply vertical padding to the li > a's and remove the height and floats.
html, body {
/*require html and body 100% height and width to allow other child elements to use percentages*/
height: 100%;
width: 100%;
margin: 0;
}
a {
text-decoration: none;
display: block;
color: black;
}
li {
list-style: none;
}
div{
margin-left: 2.5%;
margin-right: 2.5%;
margin-top: 1%;
border: 1px solid black;
}
.content_section{
height: 150%;
margin-bottom: 1%;
}
#footer{
height: 25%;
margin-bottom: 1%;
}
#banner{
margin-top: 2.5%;
height: 15%;
position: relative;
}
#banner img{
width: 100%;
height: 100%;
}
#navbar{
padding: 0;
position: relative;
background-color: #FFCB3D;
text-align: center;
}
ul#navbar {
display: flex;
margin: 0;
}
#navbar li {
flex: 1 0 0;
}
#navbar li a {
display: block;
text-decoration: none;
padding: 1em 0;
}
#navbar ul a:hover{
background-color: #FFF17C;
}
<!DOCTYPE html>
<html>
<head>
<title>Sample Site</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="banner">
<img src="resources/images/banner-image.png">
</div>
<div id="navbar">
<ul id="navbar">
<li>Page A</li>
<li>Page B</li>
<li>Page C</li>
<li>Page D</li>
<li>Page E</li>
</ul>
</div>
<div class="content_section">
</div>
<div id="footer">
</div>
</body>
</html>
Related
I don't know how to align it with the logo. I'm trying to use padding but it won't work and even float maybe I would change the container size for it to work. Btw you won't be able to see the image and the li option due to overflow not allowing links so I have attached an image for more convenience
if possible maybe even tell some tips to be better in HTML
enter image description here
header {
height: 600px;
background-image:urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo{
height: 150px;
width: 450px;
}
img.logo{
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
}
nav ul {
margin: 0;
padding:0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
color: #111111;
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
If you want to make logo and menu in a line, you should add "float: left" style to your div. So your style will be this:
.header-logo {
height: 150px;
width: 450px;
float: left;
}
Then if you want change your menu vertical align you can add "margin-top: px" to your ul like this:
nav ul {
margin: 0;
padding: 0;
margin-top: 50px;
}
As logo div and ul are children of same parent,
you can make their parent i.e <nav> as display: flex to align it's children in a flex-row
Learn More on FlexBox
nav {
display: flex;
}
header {
height: 600px;
background-image: urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo {
height: 150px;
width: 450px;
}
img.logo {
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
display: flex;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
/* color: #ffffff; */
color: #000; /* changing this so that you can see color */
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I have changed the font color, so that you can see it working.
I cannot get hover to work on the dummy links in my CodePen. The cursor won’t even change to the hand icon. I am referring to the navigation bar, the dummy links do not work properly. Here is the CodePen
* {
box-sizing: border-box;
}
body {
width: 100%;
margin: 0 auto;
padding: 0;
background-image: url("wallpaper2.jpg");
background-repeat: repeat;
}
.header {
width: 100%;
background: black;
height: 100px;
color: white;
}
.wrapper {
margin: 0 auto;
width: 75%;
background: pink;
height: 1000px;
}
h1 {
margin: 0 auto;
position: relative;
top: 30px;
left: 15px;
font-size: 2em;
}
ul {
list-style-type: none;
float: right;
margin: auto;
}
li {
display: inline-block;
padding-left: 20px;
font-size: 1.4em;
}
.lastlist {
padding-right: 65px;
}
a:hover {
color: #f0c330;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="gallery.css">
</head>
<body>
<div class="header">
<nav>
<h1>Daniel Savva</h1>
<ul>
<li> Home </li>
<li> Gallery </li>
<li> About </li>
<li class="lastlist"> Contact </li>
</ul>
</nav>
</div>
<div class="wrapper"></div>
<div class="column"></div>
</body>
</html>
Your h1 tag is overlapping the ul tag
Solution is to add position:relative to your ul tag :)
Because Without any z-index value, elements stack in the order that they appear in the DOM and elements with non-static positioning ( relative ,absolute ..) will always appear on top of elements with default static positioning.
h1 : position:relative
ul : default static position
Adding position:relative will force your ul element to be on TOP.
* {
box-sizing: border-box;
}
body {
width: 100%;
margin: 0 auto;
padding: 0;
background-image: url("wallpaper2.jpg");
background-repeat: repeat;
}
.header {
width: 100%;
background: black;
height: 100px;
color: white;
}
.wrapper {
margin: 0 auto;
width: 75%;
background: pink;
height: 1000px;
}
h1 {
margin: 0 auto;
position: relative;
top: 30px;
left: 15px;
font-size: 2em;
}
ul {
list-style-type: none;
float: right;
margin: auto;
position : relative ;
}
li {
display: inline-block;
padding-left: 20px;
font-size: 1.4em;
}
.lastlist {
padding-right: 65px;
}
a:hover {
color: #f0c330;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="gallery.css">
</head>
<body>
<div class="header">
<nav>
<h1>Daniel Savva</h1>
<ul>
<li> Home </li>
<li> Gallery </li>
<li> About </li>
<li class="lastlist"> Contact </li>
</ul>
</nav>
</div>
<div class="wrapper"></div>
<div class="column"></div>
</body>
</html>
So heres all my code I'm quite new to web design so I might of made a few mistakes. The problem is that when I load the about me page the font size for the navigation is smaller. I've tried looking for anwsers but none make sense to me. Can you help? I've never made a post on here before so forgive m if the code looks messy.
Page 1
<head>
<link rel="stylesheet" style="text/css" href="main.css" />
</head>
<body>
<header>
<nav>
<ul>
<li> Gallery </li><!-- commenting out white space caused by display: inline-block
--><li> About Me </li><!--
--><li> Contact </li>
</ul>
</nav>
</header>
</body>
Page 2
<head>
<link rel="stylesheet" style="text/css" href="main.css" />
</head>
<body>
<header>
<nav>
<ul>
<li> Gallery </li><!-- commenting out white space caused by display: inline-block
--><li> About Me </li><!--
--><li> Contact </li>
</ul>
</nav>
</header>
</body>
CSS
*{
margin: 0px;
padding: 0px;
}
html{
height: 100%;
width: 100%;
}
body{
background-color: #fff;
height: 100%;
width: 100%;
}
hr{
width: 90%;
margin: 2% auto;
}
header{
margin: 0 auto;
width: 90%;
height: 14%;
background-color: #ddd;
position: relative;
}
nav{
float: left;
width: 40%;
/*background-color: green;*/
position: absolute;
left: 30%;
bottom: 0px;
}
nav ul{
text-align: center;
width: 100%;
}
nav ul li{
list-style-type: none;
display: inline-block;
width: 28%;
margin: 0 1%;
}
nav ul li a{
text-decoration: none;
/*background-color: #aaa;*/
display: block;
width: 100%;
font-size: 1.4em;
color: #000;
}
nav ul li a:link{
background-color: #aaa;
}
nav ul li a:hover{
background-color: #ff5588;
}
nav ul li a:active{
background-color: red;
}
function ServicesMenu() {
document.getElementsByClassName("services-cont")[0].classList.toggle("showS");
}
#charset "UTF-8";
*{padding:0;margin:0;}
body{min-width:300px; margin: 0px; padding: 0px; background:#f8f8f8 }
.wrapper {
max-width: 980px;
height:2000px;
margin: 0px auto;
position: relative;
background-color: #fff;
}
header{
width:980px;
height:105px;
background: #e60000;
}
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
top:63px;
right:60px;
width: 560px;
display: block;
position: absolute;
}
ul.navbar li {
display:inline-block;
Margin-left:15px;
background: black;
}
ul.navbar li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 5px 15px;
text-decoration: none;
font-size: 17px;
}
ul.navbar li a:hover {background-color: #660000;}
.services-cont{display: none;}
.services-cont.showS {
list-style-type: none;
display: block;
background-color: #707070 ;
}
.services-cont.showS li {
float: none;
display: inline;
height:0;
border:none;
}
.services-cont.showS li a {
display: block;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="menustyle.css">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<script src="MenuFunc.js"></script>
<Title>Menu</title>
</head>
<body>
<div class="wrapper">
<header>
</header>
<ul class="navbar">
<li>Home</li>
<li>Services
<ul class="services-cont">
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
However, the parent <li> appears on top with the nested list below and the rest <li> of the parent list are below aligned with the end of the child list.
How do I get the parent list items Home, Services and Contact horizontally aligned in a straight line?
Explanation
The position: absolute and overflow: hidden properties were interfering and not allowing the dropdown list to display properly. I have commented them in the code so you can see.
You should refrain from using absolute positioning where you can achieve the same effect by simply nesting the tags properly. For instance, I nested your navbar inside the red header.
Code
Press the 'Run code snippet' button below to see the code output.
* {
padding: 0;
margin: 0;
}
body {
min-width: 300px;
margin: 0px;
padding: 0px;
background: #f8f8f8
}
.wrapper {
max-width: 980px;
height: 2000px;
margin: 0px auto;
/*position: relative;*/
background-color: #fff;
}
header {
padding: 20px;
width: 980px;
height: 30px;
background: #e60000;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
/*overflow: hidden;*/
top: 63px;
right: 60px;
width: 560px;
display: block;
/*position: absolute;*/
}
.navbar li {
display: inline-block;
Margin-left: 15px;
background: black;
}
.navbar li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 5px 15px;
text-decoration: none;
font-size: 17px;
}
.navbar li a:hover {
background-color: #660000;
}
.navbar li ul {
position: absolute;
top: auto;
list-style-type: none;
display: none;
background-color: #707070;
}
.navbar li ul li {
float: none;
display: inline;
height: 0;
border: none;
}
.navbar li ul li a {
display: block;
text-align: left;
}
.navbar li:hover>ul {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<Title>Menu</title>
</head>
<body>
<div class="wrapper">
<header>
<ul class="navbar">
<li>Home
</li>
<li>Services
<ul>
<li>Service 1
</li>
<li>Service 2
</li>
<li>Service 3
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</header>
</div>
</body>
</html>
Explanation
You need to add the following two line of CSS code for the nested <li> tag.
ul li ul {
position: absolute;
top: auto;
}
Setting the position to absolute and top to auto will display your nested ul under the parent tag.
Code
Press the 'Run code snippet' button below to see the code output.
ul li {
background: black;
color: white;
display: inline-block;
width: 100px;
}
ul li ul {
margin: 0px;
padding: 0px;
background: grey;
/*YOU NEED THE TWO LINES BELOW*/
position: absolute;
top: auto;
}
ul li ul li {
color: white;
background: grey;
display: block;
width: 80px;
padding: 10px;
}
<html>
<body>
<ul>
<li>
Home
</li>
<li>
Services
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</body>
</html>
The left sidebar won't position itself on the left side of the main area. It seems to get stuck on the navigation link. It should be placed "below" the navigation links and the "buttons" should overlap the sidebar just as they overlap the header. Then I want the text to wrap around the sidebar (works in the code I posted here).
I have tried using z-index on the navigation and sidebar. I have also tried using position:relative; and float:left; on the sidebar without result. The text should also wrap around the sidebar as it is in the example below. I managed to move the sidebar to the left using position:relative; but then the text won't wrap it.
HTML:
<html lang="sv">
<head>
<link href="layout1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="topbanner">
<h1>TopBanner</h1>
</div>
<div class="header">
<h1>Header</h1>
<h2>underrubrik</h2>
</div>
<div class="navigation">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</div>
<div id="main">
<div class="leftsidebar">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</div>
<div class="content">
<p>Content text here</p>
</div>
</body>
</html>
CSS
body {
margin: 0;
background: #fff;
}
/* BANNER */
.topbanner {
width: 980px;
height: 80px;
margin: auto;
border: 1px solid;
text-align: center;
font-family: sans-serif;
}
/* HEADER */
.header {
width: 980px;
height: 100px;
margin: auto;
border: 1px solid;
text-align: center;
font-family: sans-serif;
}
.header h1 {
margin: 0;
}
.header h2 {
margin: 0;
}
/* NAVIGATION LINKS */
.navigation {
width: 980px;
margin: auto;
}
.navigation a {
text-decoration: none;
color: #000;
}
.navigation ul {
float: left;
margin: -10px 0 0 0;
list-style: none;
}
.navigation ul li {
display: inline;
padding: 0 10px 0 10px;
border: 1px solid;
background: #fff;
}
.navigation ul li:first-child {
border-radius: 10px 0 0 10px;
}
.navigation ul li:last-child {
border-radius: 0 10px 10px 0;
}
/* CONTENT */
#main {
width: 980px;
margin: 0 auto;
border: 1px solid;
}
.leftsidebar {
width: 20%;
position: relative;
}
.leftsidebar ul {
margin: 0;
border: 1px solid;
list-style: none;
}
.leftsidebar ul li {
}
.content {
}
.content p {
font-family: sans-serif;
}
Set the following for .navigation ul styles
margin: -10px 0 -10px 0;
position: relative;
z-index: 2;
list-style: none;
Add float: left; to .leftsidebar to allow text to wrap around that, and add padding-top: 20px 30px; (adjust to your liking) to .leftsidebar ul to compensate for the overlap.
http://jsfiddle.net/ocfjsqpp/3/
Try putting padding-left:0 in your ul container.
Here have a look at what I did here with you code, also you haven't ended one of you h2 tags at the start.
Visit http://jsfiddle.net/4p6gdka9/ enter code here