I'm designing a navigation bar. The code looks like this:
<nav class="menu">
<ul class="topnav">
<li>Overview</li>
...
</ul>
</nav>
In css I have the following code for the li elements:
ul.topnav li{
cursor:pointer;
list-style-type:none;
display:inline;
float:left;
background-clip:padding-box;
text-align:center;
width:139px;
background-repeat:repeat-x;
background-image:url(images/nav_normal.png);
background-color:#CC33CC;
font-size:14px;
padding:9px 0 8px 0;
margin:0;
color:#6F5270;
text-shadow:#FCF 0 1px;
}
ul.topnav li a{
font-size:15px;
font-weight:bold;
padding:auto;
color:#FFFFFF;
text-shadow:#903 0 1px;
text-decoration:none;
}
It generates this following button:
The problem is the link-clickable area (shown in blue above) doesn't cover the entire surface of the button. So when I click on the edges of the button, it doesn't work. I tried to play with padding value but couldn't solve the problem. Is there an easy and efficient way to make the link cover the whole area of the button so that it works wherever on the button the user might click?
Try setting display: block; in the CSS for ul.topnav li a.
Make the <a> tag display:block and add the padding, width etc to the anchor.
ul.topnav li{
cursor:pointer;
list-style-type:none;
display:inline;
float:left;
margin:0;
}
ul.topnav li a{
display: block;
color:#6F5270;
text-shadow:#FCF 0 1px;
background-repeat:repeat-x;
background-image:url(images/nav_normal.png);
background-clip:padding-box;
background-color:#CC33CC;
text-align:center;
width:139px;
font-size:14px;
padding:9px 0 8px 0;
font-size:15px;
font-weight:bold;
padding:auto;
color:#FFFFFF;
text-shadow:#903 0 1px;
text-decoration:none;
}
Try this:
ul.topnav li a{
font-size:15px;
font-weight:bold;
color:#FFFFFF;
display:block;
height:17px;
line-height:17px;
text-align:center;
text-shadow:#903 0 1px;
text-decoration:none;
}
i use only this
ul.topnav li a{
display:inline-block;
}
Related
I was wondering if anyone could help me with an issue I'm having. I wanted the text "Liam's Digital Portfolio" to be in the centre of the webpage at the top in line with the navigation bar text. In addition, I then wanted the navigation bar to be on the far right hand corner as shown within the codepen link http://codepen.io/ldocherty1/pen/qRowVK.
I have only started programming and this is my second day and really want to improve, apologies if the code is not in the correct structure.
Below is my HTML code, within the codepen is my CSS if needed.
<div id="Navagationbar">
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
<li><b><center>Liam's Digital Portfolio<center></b></li>
</ul>
</div>
</body>
</html>
Thanks,
Liam.
I wish you all the best with your coding journey :) I will give you an easy solution to get the desired effect. First off, cut the padding-top from the body in the css:
padding-top: 180px;
Now from your html, remove
<li><b><center>Liam's Digital Portfolio<center></b></li>
Since this is your page title, it is standard practice to have it inside of h1 tags. Then we can center it with simple css. The html will look like this:
<h1 class="title">Liam's Digital Portfolio</h1>
<div id="Navagationbar">
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
</ul>
</div>
And now we can simply add this to the css
.title{text-align:center;}
With the padding-top removed and this added, the title will be in the center of the page inline with the navigation bar. I see you have a lot of issues with your css so I suggest you go through a good tutorial, like this one from w3schools http://www.w3schools.com/css/ . I hope this helps, and good luck!
Make the HTML changes as below
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
<li style="position:absolute;right:45%"><b>Liam's Digital Portfolio</b></li>
</ul>
CSS changes as below
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
h1 {
font-family:Arial;
color:white;
font-size:10pt;
text-align:center;
}
li a:hover:not(.active) {
background-color:grey;
}
#Navagationbar {
font-family:Arial;
color:white;
font-size:10pt;
text-align:center;
}
#Navagationbar ul {
list-style:none;
float:right;
margin:0;
padding:0;
}
#Navagationbar ul li {
display:block;
list-style:none;
margin:0;
padding:0;
}
#Navagationbar ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
color:white;;
text-decoration:none;
line-height:1.3em;
}
#Navagationbar ul li a:hover {
color:white;
}
#Navagationbar ul li a.active,
#Navagationbar ul li a.active:hover {
color:white;
}
body {
margin:0;
}
.page{
min-height:-590px;
background:linear-gradient(45deg, #999, #FFF);
}
#footer{
list-style:none inside none;
margin:0;
padding:0;
position:fixed;
right:0;
bottom:0;
left:0;
height:50px;
background-color:#1f1f1f;
font-size:0;
}
#footer li {
font-family:Arial;
float: right;
color:white;
font-size:10pt;
display:inline-block;
text-align:center;
height:50px;
padding:0 20px;
line-height:3.3;
border-right:1px solid #000;
border-left:1px solid #333;
}
#footer li {
font-family:Arial;
float: left;
color:white;
font-size:10pt;
display:inline-block;
text-align:center;
height:50px;
padding:0 20px;
line-height:3.3;
border-right:1px solid #000;
border-left:1px solid #333;
}
#footer li:last-child {
border-right:0;
}
body {
background:url('https://static.pexels.com/photos/34088/pexels-photo.jpg');
position:static;
height:400px;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
}
I am trying to center my nav bar. I checked my sites but nothing works
and I'm completely stumped as to why it won't center, here is my navigation bar HTML that I want to center:
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li><a class='drop-ctg' href='#'>PORTFOLIO</a>
<ul>
<li><a href='http://effectsforshare.blogspot.com/p/trailer.html'>TRAILER</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/motion-graphics.html'>MOTION GRAPHICS</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/trapcode-particular.html'>TRAPCODE PARTICULAR</a></li>
</ul>
</li>
<li><a href='http://effectsforshare.blogspot.com/'>TEMPLATES</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/my-blog.html'>MY BLOG</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/contact-me.html'>CONTACT ME</a></li>
</ul>
</div>
and here is the CSS
*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:950px;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:$pagenavifont;
text-align:center;
margin:0 auto;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
width:auto;
line-height:36px;
padding:0 20px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:left;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#777;
}
I would give you a link to the page but it's being done in Dreamweaver and is not up yet. The logobar.jpg is the logo for the webpage. I love how it looks, but it needs to be centered and not be cut off or taken to the next line when I shrink my screensize.
I tried each of float: right, float: left, and float: none on almost all of the classes; text-align: center on each class on the html side; I have tried align=center on each class; display: inline, inline-block on ul and li classes.
Thank you for your help!
On your .menu class, you do have text-align:center set. We can certainly use that to center the child nodes.
So within your .menu li css property, add display:inline-block and remove the floats. This will center your list items.
See the fiddle: http://jsfiddle.net/RGREA/
<style>
div.nav{margin: 3px auto;}
</style>
How can it be that there are so many answers on this topic and I still can't figure this out? I've been fiddling with the CSS on jsfiddle for hours and I still don't understand why my navigation bar won't center without going into a vertical list.
The html:
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li><a class='drop-ctg' href='a'>MAKEUP</a>
<ul>
<li><a href='a'>EYES</a></li>
<li><a href='a'>LIPS</a></li>
<li><a href='a'>FACE</a></li>
</ul>
</li>
<li><a href='a'>SKINCARE</a></li>
<li><a href='a'>LIFESTYLE</a></li>
<li><a href='a'>DIY</a></li>
<li><a href='a'>CONTACT</a></li>
</ul>
</div>
and the CSS, I think:
*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:950px;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:$pagenavifont;
text-align:center;
margin:0 auto;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
width:auto;
line-height:36px;
padding:0 20px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:left;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#777;
}
I just started my blog today, and so far I've learned that getting rid of floats and putting inline-block might help, but there are so many that I really don't get which code applies to what. Any help is appreciated!
Here's the fiddle link: http://jsfiddle.net/vFDrV/9/
Here's the link to my blog: http://theprettyfoxes.blogspot.com/
if I understand correctly your question, its quite simple.
Add the follow code to your menu css class.
.menu { /* applying to a ul element */
/* ... your code ... */
display: inline-block;
}
You can read more about this at the Mozilla Docs
https://developer.mozilla.org/en-US/docs/Web/CSS/display
What it's going on when we add "inline-block" is this:
The element generates a block element box that will be flowed with
surrounding content as if it were a single inline box (behaving much
like a replaced element would)
Thats all!
remove float from following:
.menu a {
/*float: left;*/
color: #999;
text-decoration: none;
text-transform: uppercase;
width: auto;
line-height: 36px;
padding: 0px 20px;
}
.menu li {
position: relative;
/*float: left;*/
width: auto;
display: inline; /* <- add this */
}
I have made a drop down menu for a website I'm creating, it looks nice I think, though there is this one px space between the horizontal nav bar and the vertical drop down bars. When you hover your mouse on the space the vertical menu disappears again and since you sometimes put your mouse on the one px space it's very confusing for the users.
This is my html;
<div class="nav">
<div class="links">
<ul id="dropdown">
<li class="currentpage">
Tetterode
<ul>
<li>Project</li>
<li>Promenade</li>
<li>Brochure</li>
<li>Impressies</li>
</ul>
</li>
<li>
Woningen
<ul>
<li>Oplevering</li>
<li>Impressies</li>
<li>Kavelkaart</li>
</ul>
</li>
<li>
Locatie
<ul>
<li>Ligging</li>
<li>Routplanner</li>
<li>Situatie</li>
</ul>
</li>
<li>
Financiering
<ul>
<li>Hypotheken</li>
<li>Fiscale mogelijkheden</li>
</ul>
</li>
<li>
Contact
<ul>
<li>Makelaars</li>
<li>Gegevens</li>
</ul>
</li>
</ul>
</div>
</div>
And this is my css;
.nav{
width: 100%;
height:50px;
background-image:url("bg.jpg");
background-repeat:repeat;
text-align:center;
padding-bottom:0px;
margin-bottom:0px;
}
.links ul li {
list-style-type: none;
padding-right: 17px;
height:50px;
position:relative;
display:inline-block;
padding-top:0px;
line-height:50px;
padding-left:17px;
text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.50);
margin-top:0px;
}
.links ul li:hover {
height:50px;
background-color:#b2071a;
display:inline-block;
margin:0px;
}
.links a {
text-transform:uppercase;
font-family:helvetica;
font-size:18px;
color:#fff;
display:inline-block;
font-size:20px;
text-decoration:none;
}
.links a:hover {
background-color:transparent;
}
#dropdown ul{
background-color:#b2071a;
list-style:none;
position:absolute;
left:-9999px;
z-index:20;
font-size:16px;
padding-top:0px;
margin-top:0px;
}
#dropdown ul li{
float:none;
}
#dropdown ul a{
white-space:nowrap;
font-size:16px;
}
#dropdown li:hover ul{
left:0;
}
#dropdown li:hover a{
text-decoration:underline;
}
#dropdown li:hover ul a{
text-decoration:none;
}
#dropdown li:hover ul li a:hover{
color:#000;
}
.currentpage{
height:50px;
background-color:#b2071a;
display:inline-block;
}
I don't see any margin/padding that causes the 1 px space and I don't know how to solve this. I hope someone can help me, thank you.
Your code and style sheet are pretty good, easy to read and follow.
A solution is to tweak the top margin of #dropdown ul to -2px as follows:
#dropdown ul{
background-color:#b2071a;
list-style:none;
position:absolute;
left:-9999px;
z-index:20;
font-size:16px;
padding-top:0px;
margin-top:-2px;
}
Negative margins are allowed and can be quite useful. The problem you encountered is quite common in pull-down menus and this fix is a typical one.
For reference, see the fiddle: http://jsfiddle.net/audetwebdesign/Ygn6X/
I have a horizontal list (for a nav bar) and i want an individual list item to be multilined. I tried using a <br /> but that causes the entire list to skip a line
Here's what i got for html :
<ul class="nav_list">
<li><a href="#">Home<a></li>
<li><a href="#">Bar/Bat Mitzvah<br />Tutoring<a></li>
<li><a href="#">Early <br />Childhood<a></li>
<li><a href="#">Home<a></li>
<li><a href="#">Home<a></li>
</ul>
and css:
.nav_list {
float:right;
height:30px;
margin-top:55px;
width:510px;
}
.nav_list li {
display:inline;
list-style-type:none;
}
.nav_list li a {
font-size:18px;
font-family: arial;
color:#b64366;
text-decoration:none;
padding:4px 4px 5px 10px;
background-image:url('../images/nav_divider.png');
background-repeat:no-repeat;
background-position:right;
font-weight:bold;
cursor:pointer;
}
And this is what it should look like (photoshop):
Any suggestions?
Here is your solution: http://jsfiddle.net/3jWwH/
The Html had some errors, like the 'a' tag wasn't ended correctly '/a'.
'br /' works fine, you just have to add float:left to '.nav_list li'
Also I think you should apply padding to 'li' instead of 'a'.
Is this correct?
You can set a width to each of the list elements to constrain them to a certain width. This will cause the words to split to multiple lines.
.nav_list li a {
width: 100px;
}
Then add a bottom border to make the underline on hover.
.nav_list li :hover {
border-bottom: 1px solid #b64366;
}
I think this is what you want:
http://jsfiddle.net/zXzXn/1/
CSS:
.nav_list {
float:right;
margin-top:55px;
}
.nav_list li {
display:inline-block;
list-style-type:none;
text-align:center;
margin:0 10px 0 0;
}
.nav_list li a {
font-size:18px;
font-family: arial;
color:#b64366;
text-decoration:none;
padding:4px 10px 5px 10px;
background-image:url('../images/nav_divider.png');
background-repeat:no-repeat;
background-position:right;
font-weight:bold;
cursor:pointer;
display:block;
}
.nav_list li a:hover{
border-bottom:2px solid #b64366;
}