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.
Related
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.
I am having difficulty changing the font color on my Nav bar heres the HTML.
<div id="nav" class = "menu">
<ul>
<li>Home</li>
<li>Team members
<ul class ="sub-menu">
<li>F.E.A.R Ballard</li>
<li>F.E.A.R Snakeshit</li>
<li>Redi</li>
</ul>
</li>
<li>Cool Stuff</li>
<li>Gallery
<ul class ="sub-menu">
<li>Squad</li>
<li>Dayz</li>
<li>Arma III</li>
</ul>
</li>
<li>Contact
<ul class ="sub-menu">
<li>Teamspeak</li>
<li>E-mail</li>
</ul>
</li>
<li>Facebook</li>
<li>Steam</li>
</ul>
</div><!-- links -->
And the CSS
.menu {
margin: 0px;
width: auto;
}
.menu li {
margin: 0px;
}
/*----- Top Level -----*/
.menu ul li {
display: inline-block;
position: relative;
font-size: 15px;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 100%;
border-top: none;
border-left: 1px solid green;
border-right: 1px solid green;
margin: 0px;
position: absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
}
.sub-menu li {
display: block;
font-size: 10px;
margin-top: 5px;
padding-bottom: 2px;
border-bottom: 1px solid green;
}
.sub-menu li a {
padding:10px 30px;
margin: 5px;
display:block;
}
#nav {
display: inline;
width: 100%;
height: 150px;
background-color: #879396;
}
#nav ul {
text-align: center;
padding: 0px;
background-color: #9C9898;
}
#nav li {
width: 105px;
background-color: #9C9898;
}
#nav li a {
padding: 0px;
margin: 1px;
}
#nav li a:link
{
text-decoration: none;
font-color: #000;
font-weight: bold;
}
I have tried multiple things i just cant seem to get the font color to change at the moment. Please Note i just want the font to change color, it is currently red and blue which looks horrible.
I have been out the game too long, Please advise.
Try this
#nav li a { color: green; }
Remember it's color:value in CSS and not font-color. Also adding :link to an a tag is not necessary. Just use a instead of a:link unless you really need to target links with actual hrefs
You have to provide color for the anchor tag because it don't inherit the color
check this fiddle
a {color: #fff;}
https://jsfiddle.net/Med7at/j4fxj7gw
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;
}
I have searched lots of question in this forum and it doesnt seems to help. I'm trying to center my navigation bar however despite following most of the answers text-align = center; doesn't work for me.
HTML code in ASP.NET:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!--[if lt IE 8]>
<script src ="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE8.js"></script>
<![endif]-->
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>Login</li>
<li>Report</li>
<li>Recent cases</li>
<li>About</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>
CSS Code:
body {
font-family: helvetica, arial, sans-serif;
background: #e3e3e3;
text-align: center;
}
/* MENU */
#nav {
text-align: center;
background: #e5e5e5;
float: left;
margin: 0; padding: 0;
border: 1px solid white;
border-bottom: none;
}
#nav li a, #nav li {
text-align: center;
float: left;
}
#nav li {
text-align: center;
list-style: none;
position: relative;
}
#nav li a {
text-align: center;
padding: 1em 2em;
text-decoration: none;
color: white;
background: #292929;
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
border-right: 1px solid #3c3c3c;
border-left: 1px solid #292929;
border-bottom: 1px solid #232323;
border-top: 1px solid #545454;
}
#nav li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
/* Submenu */
.hasChildren {
position: absolute;
width: 5px; height: 5px;
background: black;
right : 0;
bottom: 0;
}
#nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0; margin: 0;
}
#nav li:hover > ul {
display: block;
}
#nav li ul li, #nav li ul li a {
float: none;
}
#nav li ul li {
_display: inline; /* for IE6 */
}
#nav li ul li a {
width: 150px;
display: block;
}
/* SUBSUB Menu */
#nav li ul li ul {
display: none;
}
#nav li ul li:hover ul {
left: 100%;
top: 0;
}
#nav li ul
Indeed the most easiest way is to use text-align: center;. The problem you encounter is that <li> tags are block level elements. Thus it is not possible to apply text-align (applies only on inline elements) on the outer <ul> element in order to center the inner <li> elements. Therefore you have to tell the <li> tags first to behave like inline elements by applying the display property:
Markup:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Style:
ul {
margin: 0;
padding: 0;
text-align: center;
}
ul li {
display: inline-block; // or display: inline;
}
Here is my working example on jsfiddle: http://jsfiddle.net/7MKdk/
Try This:
#nav{
position:absolute;
left:30%;
}
you can remove float
Is this the part you mean?
#nav li a, #nav li {
text-align: center;
float: left;
}
By the way, try removing the float: left part. Your code almost drove me crazy. You should add IDs and classes.
Try margin:auto with exact width and remove float:left
jsfiddle link
At first float:left is needed to calculate exact width of ul. And then we need to make float:none to make use of margin:auto;
Try this:
#nav{
margin-left:10px; (Increase the px until the nav reach center)
}
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
ive managed to center it in firefox and chrome but it doesnt work in IE8.
Also a scrollbar appers att the bottom in IE8.
Here the site hugoth
and heres the css:
ul {
font-family: Arial, Verdana;
font-size: 14px;
display:block;
padding: 0;
list-style: none;
width: 100%;
margin: 0px 0px 0px 40px;
padding: 0px 0px 0px 30px;
text-align: center
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
Thanks in advance
Alex
I was feeling generous, so I remade your entire page with better code (no more nested tables for layout).
Live Demo
Oh, and I centered your menu for you.
If you have any questions, let me know.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hugoth</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
border: 0
}
body {
font: 12px Tahoma, sans-serif
}
#container {
margin: 0 auto;
width: 754px;
border-left: 2px solid #333;
border-right: 2px solid #333;
}
#header {
background: url(http://hugoth.com/test2/images/top.jpg) no-repeat;
height: 150px
}
#header h1 {
display: none
}
#content {
background: #666
}
#menu {
height: 40px
}
#middle {
clear: both;
margin: 0 auto;
width: 474px;
padding: 15px;
background: #fff;
text-align: center;
font-family: Tahoma, sans-serif;
font-size: 11px
}
#middle p {
margin: 21px 0
}
#middle .important {
font-family: Verdana, sans-serif;
font-size: 12px;
font-weight: bold
}
#footer {
padding: 11px 0;
text-align: center;
color: #fff;
font-size: 11px
}
#footer a {
color: #f90;
text-decoration: none
}
#footer a:hover {
text-decoration: underline
}
/* dropdown section */
#menu {
font: 14px Arial, Verdana, sans-serif;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
margin-left: 73px;
}
#menu ul {
margin: 0;
padding: 0;
width: 100%;
list-style: none
}
#menu li {
display: block;
position: relative;
float: left
}
#menu li ul {
display: none
}
#menu li a {
display: block;
text-decoration: none;
color: #fff;
border-top: 1px solid #fff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-right: 1px;
/*white-space: nowrap*/
}
#menu li a:hover {
background: #617f8a
}
#menu li:hover ul {
display: block;
position: absolute
}
#menu li:hover li {
float: none;
font-size: 11px
}
#menu li:hover a {
background: #617f8a
}
#menu li:hover li a:hover {
background: #95a9b1
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<ul id="menu">
<li>Home</li>
<li>Our Firm
<ul>
<li>About Us</li>
<li>Executive</li>
<li>Board</li>
</ul>
</li>
<li>Client Services
<ul>
<li>Internationalization</li>
<li>Business Thriving Advisory Board</li>
<li>Venture Engine: supporting start-ups and smaller companies</li>
<li>Financial Services</li>
</ul>
</li>
<li>Industry Practices
<ul>
<li>Clean Technology</li>
<li>Med Technology</li>
<li>Other</li>
</ul>
</li>
<li>Useful Links</li>
<li>Contact</li>
</ul>
<div id="middle">
<p class="important">This site is under construction</p>
<p class="important">Hügoth AB<br />Scheelevägen 15<br />223 70 Lund, Sweden</p>
<p>For questions or other matters please contact any of the below: </p>
<p>Bo Unéus • + 46 (0)70 - 6773656 • bo.uneus#hugoth.com</p>
<p>Lottie Norrsén • + 46 (0)70 - 4248321 • lottie.norrsen#hugoth.com</p>
<p>org.nr. 556306-0986</p>
</div>
<div id="footer">
www.hugoth.com © 2011 • Privacy Policy • webmaster#hugoth.com
</div>
</div>
</div>
</body>
</html>
Not sure about the centering issue. Have you tried using the XHTML doctype instead of the HTML docytype?
As far as the scroll bar, it looks like the banner is too wide. Try either trimming the image or widening the div