When I hover on "Newsletter" it takes large space, I tried to adjust margin but nothing happened, and I also tried margin-left and margin-right but the problem is the same. Below is the code:
hr {
margin: 0px;
}
body {
background: url(../images/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
word-wrap: break-word;
}
h1 {
font-family: "Sacramento";
color: #F0FFF0;
}
.title >h1 {
color: #222;
transition: color 2s;
}
.title:hover >h1 {
color: #6565f0;
}
.title {
line-height: 40px;
margin-top: 0px;
margin-bottom: -22px;
font-size: 19px;
transition: font-size 0.4s;
}
.title:hover {
font-size: 22px;
}
.nav ul {
background-color: transperent;
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
margin-top: 10px;
height: 40px;
border-bottom: 1px solid #888;
transition: font-size 0.4s;
}
.nav li:hover {
font-size: 1.6em;
}
.nav a {
text-decoration: none;
color: #222;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline*/
.nav li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
}
}
<font align=center>
<div class="title">
<h1>Welcome</h1>
</div>
</font>
<hr />
<div class="nav">
<ul>
<li class="home">Home
</li>
<li class="tutorials">Tutorials
</li>
<li class="about">About
</li>
<li class="news"><a href="fb.com" target=_blank>Newsletter</a>
</li>
<li class="contact">Contact
</li>
</ul>
</div>
<hr style="margin-top:5px;" />
Update width of li to width:130px;
.nav li {
width:130px;
}
Related
ul {
padding: 0;
margin: 0;
text-decoration: 0;
list-style: none;
background: #343434;
height: 20 px;
}
ul li a.home {
float: left;
color: white;
font-size: 24px;
line-height: 0px;
padding: 20px 100px;
margin: 0px 30px;
}
ul li a.home:hover {
background-color: white;
color: black;
transition: .5s;
}
ul {
list-style: none;
color: white;
}
ul li {
display: inline-block;
line-height: 80px;
}
.main ul {
display: none;
}
ul li a {
font-size: 18px;
color: white;
padding: 12px 100px;
border-radius: 2px;
}
a:hover {
text-decoration: none;
background: #A179C9;
color: black;
transition: .7s;
}
.main li:hover>ul {
display: block;
position: absolute;
}
<ul class="main">
<li><a class="home" href="index.html">blank</a></li>
<li>listen
<ul>
<li><a id="spotify" href="https://open.spotify.com/">spotify</a></li>
<li><a id="apple" href="https://open.spotify.com/">apple music</a></li>
</ul>
</li>
<li>gallery</li>
<li>download</li>
<li>store</li>
</ul>
The "spotify" and "apple music" block elements display in one line next to each other as opposed to below each other.
I also use bootstrap on the page. Not sure if it's got anything to do with the issue because when I remove the script it still works the same.
Sorry if my code is hard to see through.
It's the inline-block on ul li in your CSS. inline-block won't break the line. See MDN Inline Elements.
in css I marked my edits.
was it necessary?
ul {
padding: 0;
margin: 0;
text-decoration: 0;
list-style: none;
background: #343434;
height: 20 px;
}
ul li a.home {
float: left;
color: white;
font-size: 24px;
line-height: 0px;
padding: 20px 100px;
margin: 0px 30px;
}
ul li a.home:hover {
background-color: white;
color: black;
transition: .5s;
}
ul {
list-style: none;
color: white;
}
ul li {
display: inline-block;
line-height: 80px;
}
.main ul {
display: none;
flex-direction: column; /*add this it*/
position: absolute; /*add this it*/
}
ul li a {
font-size: 18px;
color: white;
padding: 12px 100px;
border-radius: 2px;
}
a:hover {
text-decoration: none;
background: #A179C9;
color: black;
transition: .7s;
}
.main li:hover>ul {
display: flex; /*add this it*/
position: absolute; /*add this it*/
}
<ul class="main">
<li><a class="home" href="index.html">blank</a></li>
<li>listen
<ul class="sub_main">
<li><a id="spotify" href="https://open.spotify.com/">spotify</a></li>
<li><a id="apple" href="https://open.spotify.com/">apple music</a></li>
</ul>
</li>
<li>gallery</li>
<li>download</li>
<li>store</li>
</ul>
The code below has issues.
The CSS code for the menu bar does not seem to be working along with the HTML.
<!DOCTYPE html>
<html>
<body class="news">
<head>
<style type="text/css">body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}</style>
</head>
<header>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials"><a class="active" href="#">About</a></li>
<li class="about">Newsletter</li>
<li class="news">Media</li>
<li class="contact">Contact</li>
</ul>
</div>
</header>
</body>
</html>
I do not understand why the code does not work.
This is correct code which you need...
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
<!DOCTYPE html>
<html>
<body class="news">
<head>
</head>
<header>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials"><a class="active" href="#">About</a></li>
<li class="about">Newsletter</li>
<li class="news">Media</li>
<li class="contact">Contact</li>
</ul>
</div>
</header>
</body>
</html>
I want to build navigation menu bar like this
I follow the tutorial and I try to build it but I can not build it.
HTML markup:
<header>
<div class="nav">
<ul>
<li class="home"><img src="home.jpg" height="40px"></li>
<li class="tutorials">OPPORTUNITIES FOR SAVING</li>
<li class="about">CASE STUDIES</li>
<li class="news">TESTMONALS</li>
<li class="contact">BLOG</li>
</ul>
</div>
CSS:
.nav ul {
list-style: none;
background-color: #197b30;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
padding:0 0 0 0;
}
#media screen and (min-width: 600px) {
.nav li {
padding:0 15px 0 0;
border-bottom: none;
height: 40px;
line-height: 40px;
font-size: 1em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
Result is like this
How to fix this? I am new to css and html please help me?
You just need to add vertical alignment
.nav li {
display: inline-block;
vertical-align: middle;
margin-right: -4px;
}
JSfiddle Demo
.nav ul {
list-style: none;
background-color: #197b30;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
padding: 0 0 0 0;
}
#media screen and (min-width: 600px) {
.nav li {
padding: 0 15px 0 0;
border-bottom: none;
height: 40px;
line-height: 40px;
font-size: 1em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
vertical-align: middle;
margin-right: -4px;
}
<div class="nav">
<ul>
<li class="home">
<a href="#">
<img src="http://lorempixel.com/image_output/abstract-q-c-40-40-10.jpg" height="40px">
</a>
</li>
<li class="tutorials">OPPORTUNITIES FOR SAVING
</li>
<li class="about">CASE STUDIES
</li>
<li class="news">TESTMONALS
</li>
<li class="contact">BLOG
</li>
</ul>
</div>
[link]http://ramadaan.rocks/test.html?nocache=1
Somehow I broke my media query. Trying to make a nav and now when under 600px, the media query seems to not be working.
So where is the media query being broken? Is the nav too long? Too many list items?
Any help? Thanks,
.nav ul {
list-style: none;
background-color: #000;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Francois One', sans-serif;
font-size: 20px;
text-transform: uppercase;
line-height: 40px;
height: 40px; /* line-height and height set at same value centers the content vertically in the middle */
border-bottom: 1px solid #888;
color: #fff;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #e17143;
}
.nav a.active {
background-color: #fff;
color: #e17143;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 14px;
}
}
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
<div class="nav">
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>What Is Ramadan?</li>
<li>How Do I Fast?</li>
<li>Who Can Fast?</li>
<li>Prophetic Commentary</li>
<li>Tarawih Prayer</li>
<li>30 Ajza' of Qur'an</li>
<li>Commonly Asked Questions</li>
<li>Contact</li>
</ul>
</nav>
I'd like to have the navigation bar centered and the text placed to left as it is, but when I add the h3-tag the navigation bar moves to the right. How can I do this?
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#toptext {
margin: 5px 0px 0px 10px;
padding: 0;
display: inline-block;
float: left;
font-style: bold;
font-size: 2em;
color: white;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav">
<h3 id="toptext">Text text text text</h3>
<ul>
<li class="home"><a class="active" href="#">Home</a>
</li>
<li class="about">About
</li>
<li>Other
<ul>
<li>Site1
</li>
<li>Site2
</li>
</ul>
</li>
<li class="contact">Contact
</li>
</ul>
</div>
I used the navigation bar from: http://css-snippets.com/drop-down-navigation/
Anything that is in the document flow is going to affect the position of the menu. So you would would have to take the h3 out of the flow by positioning it absolutely.
#toptext {
margin: 5px 0px 0px 10px;
padding: 0;
font-style: bold;
font-size: 2em;
color: white;
position: absolute;
}
This has other issues but solves your initial problem.
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#toptext {
margin: 5px 0px 0px 10px;
padding: 0;
/*
display: inline-block;
float: left;
*/
font-style: bold;
font-size: 2em;
color: white;
position: absolute;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav">
<h3 id="toptext">Text text text text</h3>
<ul>
<li class="home"><a class="active" href="#">Home</a>
</li>
<li class="about">About
</li>
<li>Other
<ul>
<li>Site1
</li>
<li>Site2
</li>
</ul>
</li>
<li class="contact">Contact
</li>
</ul>
</div>
Its because your h3 is inside the nav div. try making the h3 absolute positioned and your .nav class relatively positioned.