I have made a navigation bar using <ul> and <li>
I would like to customize each tab with border, gradient etc.
Where should it be applied?
My CSS styling tend to affect only the letters, not anything else.
CSS
#nav {
width: 100%;
margin: 20px 0px 20px 0px;
}
#nav ul {
padding: 12px 0px 12px 0px;
border-top: solid black 1px;
border-bottom: solid black 1px;
}
#nav ul li {
display: inline;
margin-left: 50px;
font-weight: bold;
background-color: grey;
}
HTML
<div id="nav">
<ul>
<li>Home</li>
<li>Files</li>
<li>Info</li>
<li>About</li>
</ul>
</div>
'a' tags inside of a styled tag (such as an 'li' tag) will not pick up any of the styles you set. They want their own styles. You will need to move all the 'li' styles to the 'a' tag and then put a display:block; on the 'a' tag.
#nav {
width: 100%;
margin: 20px 0px 20px 0px;
}
#nav ul {
padding: 12px 0px 12px 0px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#nav ul li {
display: inline;
margin-left: 10px;
width:50px;
height:20px;
line-height:20px;
font-weight: bold;
background-color: grey;
}
a {
display: block;
// then whatever other rules you want to apply: width, height, border, pink flowers, etc
}
Related
I want to have the entire tab menu to be clickable. In order to do that, I need the "a href" to fill the entire tab but doing so I lose the exact size and shape I want. I'm trying to accomplish by adding the :not(#sub_menu ul il) to the main ul, il{} css styles but it throws the portions out of whack.
So how can I accomplish this in HTML & CSS? Also, the bottom border is still viewable, so how can I fix this as well? Thank you
Adding :not(#sub_menu ul li) to the main p, il settings.
Then increasing the padding by 5px to "10px 20px" in #sub_nav ul li #selected.
Home Page
<body>
<main>
<h3>Home</h3>
<nav id="sub_nav">
<ul>
<li id="selected">Home</li>
<li>Away</li>
</ul>
</nav>
</body>
Away Page
<body>
<main>
<h3>Away</h3>
<nav id="sub_nav">
<ul>
<li>Home</li>
<li id="selected">Away</li>
</ul>
</nav>
</body>
CSS
#sub_nav {
float: left;
width: 100%;
font-weight: bold;
padding-bottom: 5px;
border-bottom: 1px solid;
}
#sub_nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#sub_nav ul li {
display: inline;
border: 1px solid black;
}
#sub_nav ul li a {
padding: 5px 15px;
color: inherit;
text-decoration: none;
border-width: 1px 1px 0px 1px;
}
#sub_nav ul li#selected {
border-bottom: 1px solid white;
}
main {
margin-bottom: 1px;
padding: 1px;
height: 4000px;
width: 80%;
border: 1px solid black;
float: left;
}
main ul {
margin: 10px;
padding: 10px;
}
main p, li {
margin: 5px;
padding: 5px;
}
When you move the mouse over image thumbnails, i.e. all images in ul .thumbs, you should see a small box which shows the text in the span embedded in the image link. This does not happen. Why and how do I fix it ?
http://jsfiddle.net/raj4dev/hbyg43d9/3/
html
<body>
<div id="container">
<h1>css slide show</h1>
<ul class="thumbs">
<li><img src="img/thumb1.jpg"><span>Img 1</span></li>
<li><img src="img/thumb2.jpg"><span>Img 2</span></li>
<li><img src="img/thumb3.jpg"><span>Img 3</span></li>
</ul>
<ul class="slides">
<li class="first" id="slide-1"><img src="img/slide1.jpg"></li>
<li id="slide-2"><img src="img/slide2.jpg"></li>
<li id="slide-3"><img src="img/slide3.jpg"></li>
</ul>
</div>
</body>
css
*{
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
}
body{
background: #465c8f url(../img/bg-image.jpg) repeat-x;
font-family: 'Arial', 'sans-serif';
}
#container{
width: 718px;
overflow: hidden;
margin: 40px auto;
}
h1{
color: #fff;
text-align: center;
margin-bottom: 20px;
}
ul.thumbs li{
float: left;
margin-bottom: 10px;
margin-right: 9px;
}
ul.thumbs a{
display: block;
position: relative;
width: 85px;
height: 55px;
border: 4px solid transparent;
font: bold 12px/25px Arial, sans-serif;
color: #515151;
text-decoration: none;/*remove underlines*/
text-shadow: 1px 1px 0px rgba(255,255,255,0.25), inset 1px 1px 0px rgba(0,0,0,0.15);
}
ul.thumbs img{
border: #333 solid 4px;
}
ul.slide{
overflow: hidden;
clear: both;
border: #333 solid 4px;
}
ul.slides, ul.slides li, ul.slides a, ul.slides img{
width: 705;
height: 350px;
position: relative;
}
ul.thumbs li a:hover span{
position: absolute;
z-index: 101;
bottom: -30px;
left: -22px;
display: block;
width: 100px;
height: 25px;
text-align: center;
border-radius: 3px;
}
This is a clever approach to creating a slide show that does not require JavaScript or jQuery, rather nicely done.
There was a typo in one of your class names in the CSS and that was creating some confusion (change ul.slide to ul.slides).
I guessed that what you wanted to do was display the span on hover, which means that to begin with, the span need to be hidden using display: none, and I added a new CSS rule for ul.thumbs li a span to correspond with ul.thumbs li a:hover span. (Note, you could also use :hover on li instead and get a similar effect.)
I also altered how the floated elements are styled. If you add overflow: auto to ul.thumbs, all the floats are contained within the parent block and you can then add the bottom margin to the parent ul instead of the li, which is more advantageous in some designs, your can decide.
For the thumbnail images, see ul.thumbs img, I set the height to 100% and let the thumbnails scale to fit the inherited height (from li) and use vertical-align: top if you want to remove the whitespace below the images.
I also set the with on the li instead of the a, but the distinction really depends on the details of our design.
For the most part, your CSS is good as is. The only missing concept was the initial hiding of the span so that it can appear on hover.
Note: I did not pay much attention to the width of the span and its exact positioning. If you have a lot of text (like a caption), the width of 100% will not be enough (I set it that way to make it fit in the li container). You can change it as you see fit.
*{
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
}
body {
background: #465c8f url(../img/bg-image.jpg) repeat-x;
font-family: 'Arial', 'sans-serif';
}
#container{
width: 718px;
overflow: hidden;
margin: 40px auto;
}
h1{
color: #fff;
text-align: center;
margin-bottom: 20px;
}
ul.thumbs {
border: 1px dotted white; /* for demo only... */
overflow: auto;
margin-bottom: 10px;
}
ul.thumbs li{
float: left;
width: 85px;
height: auto;
margin-right: 9px;
border: 1px dotted white; /* for demo only... */
}
ul.thumbs a {
display: block;
position: relative;
border: 4px solid transparent;
font: bold 12px/25px Arial, sans-serif;
color: #515151;
text-decoration: none;/*remove underlines*/
text-shadow: 1px 1px 0px rgba(255,255,255,0.25), inset 1px 1px 0px rgba(0,0,0,0.15);
}
ul.thumbs img{
vertical-align: top; /* if you need to remove whitespace below image */
height: 100%;
border: #333 solid 4px;
}
ul.slides { /* fix typo in class name */
overflow: hidden;
clear: both;
border: #333 solid 4px;
}
ul.slides, ul.slides li, ul.slides a, ul.slides img{
width: 705;
height: 350px;
position: relative;
}
ul.thumbs li a span { /* Need to provide a default styling for the span... */
position: absolute;
bottom: 0px;
left: 0px;
display: block;
width: 100%;
height: auto;
text-align: center;
border-radius: 3px;
background-color: white;
display: none;
}
ul.thumbs li a:hover span {
display: block;
}
<div id="container">
<h1>css slide show</h1>
<ul class="thumbs">
<li><img src="http://placehold.it/60x60"><span>Img 1</span></li>
<li><img src="http://placehold.it/60x60"><span>Img 2</span></li>
<li><img src="http://placehold.it/60x60"><span>Img 3</span></li>
</ul>
<ul class="slides">
<li class="first" id="slide-1"><img src="http://placehold.it/240x120"></li>
<li id="slide-2"><img src="http://placehold.it/180x120"></li>
<li id="slide-3"><img src="http://placehold.it/120x120"></li>
</ul>
</div>
Your hover styles work fine, but you have ul.slides on top of ul.thumbs, so the :hover action isn't being passed to your anchor.
In the future, please share the relevant pieces of code in your question on StackOverflow for posterity and searchability.
Just add z-index: 2; to your ul.thumbs a css like coryward said your link is underneath something so you can't hover over it you need to bring it to the top so you can hover on it.
I would like add a border-bottom that displays when I hover over it with the mouse. I want it to override the border underneath so it looks like it changes colour. An example of this can be found here http://www.formaplex.com/services (in the nav bar)
Here is a jsfiddle https://jsfiddle.net/ey006ftg/
Also, a small question: does anyone know why there is a small gap in-between the the links (can be seen when hovering from link to link) and how to get rid of it.
Thanks
Just add this to your css:
nav a {
border-bottom: solid transparent 3px;
}
Here's a jsfiddle with the above code: https://jsfiddle.net/AndrewL32/ey006ftg/1/
You can use a negative margin to overlay the border below, as shown:
nav {
border-top: 1px solid grey;
border-bottom: 3px solid black;
width: 100%;
font-size:0;
}
nav ul {
width: 1056px;
margin: 0 auto;
text-align: center;
width: 1056px;
}
nav ul li {
display: inline-block;
width: 17%;
}
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
}
nav a:hover {
color: orange;
transition: 0.2s;
border-bottom: solid orange 3px;
margin-bottom: -10px;
}
a {
color: black;
text-decoration: none;
outline: 0;
}
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
As for fighting the inline gap, seeing as you defined a font-size later for the a tag, I would just add a font-size:0, which I added to nav in the above Snippet.
fiddle demo
Simply set your default border to transparent - change color on hover
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: solid transparent 3px; /* add this! */
transition:0.3s; /* or even this :) */
}
Try this fiddle
To set border-bottom the way you want, you have to add border to anchor tag like this:
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 3px solid black;
}
and to make sure the space between menu items is gone use a little fix adding negative margin to your li tags inside menu like this:
nav ul li {
display: inline-block;
width: 17%;
margin-right: -4px;
}
I'm just learning CSS and HTML and decided to have a go at making a mock up website. I'm having trouble with the border not meeting the end of the top bar. Other times I've had it go over.
https://jsfiddle.net/9gonuvu7/
#topnav li {
float: left;
margin: 0;
padding: 16px 10px 10px 20px;
list-style: none;
color: white;
font-size: 1.2em;
border-right: solid #3E6F87 1px;
You can see this in the above link. If you could explain to me why this is happening and how I can avoid it in future I would be very grateful.
Remove the padding from the parent.
That's preventing it from reaching top.
#topbar {
background-color: #2A4F6E;
width: 100%;
height: 50px;
padding: 0px 0 0px 0;
margin: 0;
}
Okay, because you said you just started with HTML and CSS I changed a bit more in your code.
At the moment your fixedwith div has no impact on the code (maybe you use it in your full website).
You applied the background on the whole topbar, that HTML-wise also contains your menu points, assuming you only want your headline to have that blue background I swapped that property to the h1-tag.
With this change the borderlines are overlapped b the headline, which should do the job.
new JSFiddle
* {
margin:0;
padding:0;
}
body {
margin: 0;
font-family: arial, helvetica, sans-serif;
}
a {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: underline;
}
#topbar {
float:left;
width:100%;
height:100%;
overflow:hidden;
}
#topbar h1 {
display: block;
width:100%;
height:100%;
background-color: #2A4F6E;
padding: 7px 50px 7px 40px;
margin: 0;
color: white;
float: left;
border-right: solid #3E6F87 1px;
}
#topnav {
float:left;
width:100%;
height:50px;
background:#ccc;
}
#topnav li {
float: left;
margin: 0;
padding: 16px 10px 10px 20px;
list-style: none;
color: white;
font-size: 1.2em;
border-right: solid #3E6F87 1px;
}
#topnav ul {
margin: 0;
padding: 0;
}
#topnav a:hover{
color: #A97437;
}
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<h1>Neil's Tech Reviews</h1>
<div id="topnav">
<ul>
<li> Home</li>
<li> Reviews</li>
<li> Forum</li>
<li> Partners</li>
<li> About</li>
</ul>
</div>
</div>
</div>
</div>
</body>
Whatever I do I can't get the navigation to center.
I have a wrapper and the navigation bar has an underline across this div. The top of the buttons are rounded of so it just looks like they are coming out of the bottom border.
I've tried searching for a good way to center them. A lot of people use margin auto or margin 0 auto. Other people also use this in combination with display inline-block but then the border gets cut off from the nav buttons.
This is my HTML:
<div id="nav">
<ul>
<li>Home</li>
<li>About me</li>
<li>Portfolio</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
The CSS:
#nav {
margin: auto;
color: #FFFFFF;
width: 100%;
border-bottom: 1px solid #000000;
}
#nav ul {
margin: auto;
padding-top: 6px;
padding-bottom: 8px;
padding-left: 5px;
list-style:none;
}
#nav li {
display: inline;
width: 120px;
margin:0;
padding: 10px 5px;
border-radius: 10px 10px 0px 0px / 10px 10px 0px 0px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(100,100,100)), to(rgb(132,132,132)));
background : -moz-linear-gradient(top, rgb(200,200,200), rgb(232,232,232));
}
#nav li:last-child {
border-right: none;
}
#nav a {
text-decoration: none;
color: #383838;
font-weight: bold;
font-size: 20px;
padding-right: 10px;
padding-left: 5px;
}
For the ease for you i've also put it in a js fiddle http://jsfiddle.net/ge702rna/
Really hope someone can help me out because i've got my hands tied up in my hair right now.
Probally i'm just doing something simple wrong.
Simply add text-align:center;
#nav {
color: #FFFFFF;
width: 100%;
border-bottom: 1px solid #000000;
text-align:center; /* <-- ADD THIS LINE */
}
I just change the width in
#nav {
margin: auto;
color: #FFFFFF;
width: 77%; //changed
border-bottom: 1px solid #000000;
}
Are you looking for this..DEMO