I have a navigation bar with a logo inside and I was able to do it, but I was not able to align properly the text and the figure.
I would like to align the text in the center, considering the height of the logo.
Please any ideas? I tried to change many things, but did not work. In my code here, I only put a other logo as an example, my original logo is very big.
Also I do not want a background color in my logo, only in the text.
<html lang="en">
<head>
<title>data</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<ul>
<li><img src="http://news.olemiss.edu/wp-content/uploads/2016/08/MoW-Logo.jpg" width="140"></li>
<li><a class="active" href="index.htm">Home</a></li>
<li>Info</li>
<li>Photos</li>
<li style="float:right">Help</li>
<li class="dropdown" style="float:right">
About
<div class="dropdown-content">
Team
Events
</div> </li>
</ul>
<h1> Text....</h1>
</body>
</html>
My CSS code is:
#nav a:hover {
color: black;
background-color: #FFF;
}
ul {list-style-type: none;
font-family:calibri;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
border: 2px solid #e7e7e7;
height: 90px;
}
body {font-family:Times New Roman;line-height: 1.5em;}
li {float: left;}
li a {display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
a:hover:not(.active) {background-color: #5E9F49;}
.active {background-color:#9DC690;}
li a, .dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #5E9F49;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color:#9DC690;}
.dropdown:hover .dropdown-content {display: block;}
Thanks a lot
The easiest way here is set ul li and ul li a line-height for 90px (as your ul height) and set padding-top and bottom to 0.
li { float: left; line-height: 90px; }
li a, .dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 0px 16px;
text-decoration: none;
}
But now your drop down list is broken. We fix it by setting line-height and height for .dropdown-content links like that:
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
line-height: normal;
height: auto;
}
Now it looks fine, but your image is not aligned correctly. First of all, we need to set display: inline-block for our list elements.
li { float: left; line-height: 90px; display: inline-block; }
And then add vertical-align: middle for image
li img { vertical-align: middle; }
The last thing you want to know is unwanted hover on the first element. Remember that you can use nth-child, first-child, first-of-type combined with not selector to count elements. Add line:
li:first-child a:hover { background: none; }
And now everything should work just like you want it to. Anyway, few tips for future.
Don't be afraid of using divs. It helps, helps a lot when you need to style and control elements on website. It's nothing more than just a container.
Keep your CSS clean. It's Cascading Style Sheets. You've got in your CSS li a styles and after this li a, .dropbtn styles that override the previous one.
Don't give up and learn on. ;)
Please check this fiddle link for your answer.
I am using margin to align the navbar items in the center.
Related
I want a Dropdown navbar. But the style sheet not work for the drop down element. The elements should be vertical and not horizontal for the sub menue.
Here you can see the code. It is from w3schools. The only change is that add a class name to ensure that this rules are only fot this navbar.
But the submenue ignore now my style sheet like block and color.
Any idea?
https://www.w3schools.com/code/tryit.asp?filename=G42IHSMIFQAA
Just deleted the display: inline-block; over the ul.topnav li a, .dropbtn, as you'd force the elements to be side-by-side, and rather, use display: block; so they can obey the float: left; parameter that you want.
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {
float: left;
}
ul.topnav li a, .dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
ul.topnav li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul class="topnav">
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar
removing overflow:hidden; from ul in css style.
The Menu disappears.
I found the example on w3schools website, when i remove overflow:hidden from style in ul, the Menu is hidden.
Your menu didn't disappear, it is still there! You can inspect it like #Fran suggested or simply roll-over your mouse over it's area and you will see it getting highlighted. The behavior you are experiencing is because overflow: hidden; causes a new formatting to your block, that means that without it each element will follow it's own formatting and displays with the normal flow. Checkout this link for more details on block formatting context.
ul is a block level element. When the li are floated they take up no space and therefore the height of the ul is reduced to 0.
Now declaring overflow (anything but visible) on the ul creates a new block formatting context, which makes the ul contain its children and not be 0px height anymore.
I encountered this problem when trying to apply styles to the hover state of a link.
I couldn't quite come up with the right phrase to google this problem so apologies if this is a duplicate post. I might also add that I am a complete beginner.
Anyway this is what happens:
The padding is not being applied inside the header, it is instead spilling out into the main page content.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Header 1</h1>
<nav>
<ul>
<li>Home</li>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</nav>
</header>
</body>
</html>
CSS:
#font-face{
font-family: LobsterTwoBoldItalic;
src: url(../fonts/LobsterTwo-BoldItalic.ttf);
}
* {
box-sizing: border-box;
margin: 0;
font-family: LobsterTwoBoldItalic;
}
header {
height: 100px;
width: 100%;
background: #3399FF;
position: relative;
}
header h1 {
float: left;
padding: 20px;
color: #FFF;
font-size: 48px;
}
header nav {
float: left;
}
header nav ul {
padding: 0;
list-style: none;
position: absolute;
bottom: 0px;
}
header nav ul li {
display: inline-block;
font-size: 32px;
}
header nav ul li a{
text-decoration: none;
color: #FFF;
padding: 20px 25px 10px 25px;
}
header nav ul li a:hover{
background: #CCC;
color: #217C7E;
}
What is it that I'm doing wrong?
Change
header nav ul li a{
text-decoration: none;
color: #FFF;
padding: 20px 25px 10px 25px;
}
to
header nav ul li a{
text-decoration: none;
color: #FFF;
padding: 20px 25px 1px 25px;//this puts it to the bottom of the nav bar in JS fiddle
}
You can try it in jsfiddle here : http://jsfiddle.net/v93mzvvj/
Padding adds space to the inside of the element.
What you want is to change it so the padding on the bottom is only 0px, this way you get the spacing you want around the text, without going past the bottom of the navigation bar.
JSFiddle
Simply change this part of your CSS file:
header nav ul li a{
text-decoration: none;
color: #FFF;
--> padding: 20px 25px 0px 25px;
}
Why is the logo here having a slight overlap at the bottom portion? The CSS and HTML are given below. I've tried overriding the css properties respective to the logo <li> element. but it didn't work.
working fiddle
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<ul id="nav">
<li>WORK</li>
<li>BLOG</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li class="logo">
<a href="#" style="padding:0;">
<img src="logo.png" />
</a>
</li>
</ul>
</div>
</body>
</html>
CSS
body {
margin: 0;
}
#nav {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
width: 20%;
float: right;
text-align: center;
}
#nav li a {
display: block;
padding: 0.5em 5px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
-webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
}
#nav a:link, #nav a:visited {
background-color: #071726;
}
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
}
Depends on what you're trying to accomplish.
http://jsfiddle.net/66eKE/3/
#nav {
list-style-type: none;
margin: 0;
padding: 0;
-webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
background: #000;
float: left;
width: 100%;
}
#nav li {
margin: 0;
padding: 0;
width: 19%;
text-align: center;
display: inline-block;
float: right;
}
#nav li a {
display: block;
padding: 0.5em 5px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
}
#nav a:link, #nav a:visited {
}
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
}
This makes it so you can resize your logo to whatever you want. The menu item may be floating outside the div. In that case you either need to float the parent, hide the parent with overflow, or clear the float.
Refactor
I refactored a few things such as the drop shadow and background color on the parent. This allows the majority of the effect to be dependent on the parent div rather than the individual items. I'm only assuming here though. Do you have a photoshop mockup of what you want? Gives us a better idea of what you need for CSS.
http://jsfiddle.net/zcfqu/
Been playing around with this piece of code for a while and am confused a bit.
How do I:
Change the color of the each submenu?
Make the submenu the same width as the main button?
HTML
<ul id="menu">
<li>This is the button
<ul class="submenu">
<li>Button one
</li>
<li>Button two
</li>
<li>Button three
</li>
</ul>
</li>
</ul>
Remove all floats and position:absolute
Check this demo
I just removed all floats (which was causing funny jumping of li and really not needed) and position:absolute (which was causing menu to shift sideways)
Also, I didn't read through all your CSS to find which background property is overriding which one, but I just removed them all and added new ones at bottom.
#menu > li { background-color: red; }
#menu > li:hover { background-color: green; }
.submenu li { background-color: blue; }
.submenu li:hover { background-color: yellow; }
EDIT 1
Its a good idea to use CSS shorthands and reduce CSS size and also make it more readable. Also, remove all incorrect CSS and you can also write border-radius: 2px 2px 2px 2px as border-radius: 2px (and save 12 bytes :O)
EDIT 2
CSS shorthands - MDN
font shorthand - W3C
background shorthand - W3C (scroll to the very bottomo of the page)
Change the color of the each submenu
ul.submenu a:hover {
background-color: red !important;
}
This changes on hover. If you want it always the same color remove :hover
Make the submenu the same width as the main button
ul.submenu, ul.submenu>li {
width: 100%;
}
This way you don't need to apply a fixed width. The browser will calculate it using parents adapted width.
Demo
Here is the correct approach in tackling your issues
DEMO http://jsfiddle.net/kevinPHPkevin/zcfqu/37/
// be more specific when targeting
ul#menu ul.submenu li a:hover {
background-color: green;
}
// set width to match button size
ul.submenu, ul.submenu>li {
width: 100%;
}
// assign classes for different coloured buttons. You could do this with css3 and `nth child` but it would limit your browser support considerably.
ul#menu .submenu li.btn1 a {
background: red;
}
ul#menu .submenu li.btn2 a {
background: yellow;
}
ul#menu .submenu li.btn3 a {
background: blue;
}
Take a look to this, I changed the background, and the "hover" and the width. It is correct ? Fiddle
ul#menu, ul#menu ul.sub-menu and ul#menu, ul.submenu --> width: 200px;
ul#menu li a for the background
I've set each li as 150px width. This has fixed the issue.
http://jsfiddle.net/andaywells/zcfqu/34/
ul#menu ul.submenu li {width: 150px;}
You can try the css as below with no changes on the html elements. I have added some comments for your references. Only 3 changes made on the css.
/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
font-family: Helvetica;
background-color: #57AD68;
color: #FFFFFF;
border-radius: 3px 3px 3px 3px;
font-size: 12px;
font-style: normal;
font-weight: 400;
height: 40px;
line-height: 39px;
padding: 0 20px;
position: relative;
text-align: center;
vertical-align: bottom;
border-radius: 3px 3px 3px 3px;
border-style: none none solid;
border-width: 0 0 1px;
cursor: pointer;
display: inline-block;
float: center;
list-style-type: none;
text-decoration: none;
}
ul#menu, ul.submenu{
margin: 0;
padding: 0;
list-style: none;
float: left;
width: 134px; /*Adjust the sub menu width*/
}
ul#menu li{
float: left;
}
/* hide the submenu */
li ul.submenu {
display: none;
}
/* Main Button */
ul#menu li a{
display: block;
text-decoration: none;
color: #ffffff;
padding: 0 20px;
background: ; /*Remove the color here to avoid overlapped*/
float:right;
border-radius: 2px 2px 2px 2px;
font-family: Helvetica;
}
ul.submenu a:hover {
background: red;
}
/* show the submenu */
ul#menu li:hover ul.submenu{
display: block;
position: absolute;
float:right;
background-color:green; /*Adjust the color of sub menu.*/
}
ul#menu li:hover li, ul#menu li:hover a {
float: none;
background: ;
}
ul#menu li:hover li a:hover {
opacity:0.9;
}