I am currently trying to create a navigation bar where I have an medium sized image on top of the <li> tag with text underneath (similar to css-tricks).
I have tried background-image and also an img within li tag itself and still no joy.
My main goal is so that the user can click the icon and/or the text and it will still direct them to the correct page.
If you have any additional questions I am more than happy to assist.
nav#navBar img {
height: 80px;
margin-left: 80px;
}
nav#navBar {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
align-items: center;
box-shadow: 0 0 25px 0 black;
font-family: 'Nunito Sans', sans-serif;
font-variant: small-caps;
font-weight: 600;
}
nav#navBar * {
display: inline;
padding: 15px;
}
nav#navBar li {padding: 30px;}
nav#navBar li.blue:hover {border-bottom: 2px solid #33A1DE;}
nav#navBar li.red:hover {border-bottom: 2px solid #CC3232;}
nav#navBar li.green:hover {border-bottom: 2px solid #28AE7B;}
nav#navBar li.purple:hover {border-bottom: 2px solid #7A378B;}
nav#navBar li a {
color: black;
text-decoration: none;
}
<nav id="navBar">
<img src="#">
<ul>
<li class="green">ARTICLES</li>
<li class="blue">SNIPPETS</li>
<li class="red">MEMBERS</li>
<li class="purple">CONTACT</li>
</ul>
</nav>
You have to put a background image on the li tag and use padding to push the text down.
nav#navBar li.green {background:url(image.jpg) no-repeat; padding-top: 30px;}
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;
}
One of my assignments is to create a responsive webpage. I'm running into trouble when attempting to open it on mobiles. My 'li' elements touch and look awful.
How can I stop the 'box' around each li item from touching?
HTML -
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<body>
<center>
<div id="Menubar">
<ul>
<li id="active">Home
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</div>
</center>
CSS -
#Menubar ul {
padding: .05em 0;
margin: 0;
list-style-type: none;
background-color: #3A3734;
color: #FFF;
width: 100%;
font-family: Oswald;
font-size: 32pt;
font-weight: bold;
text-align: center;
border-top:solid #8E7861 4px;
border-bottom:solid #8E7861 4px;
}
#Menubar ul li { display: inline; }
li a {
text-decoration: none;
margin: 0 0 3px 0;
background-color: white;
color: #6AA0CC;
padding: .1em 1em;
border: 2px solid #6AA0CC;
}
li a:hover {
background-color: #6AA0CC;
color: #fff;
border: 2px solid white;
}
.listcenter{
width:250px;
margin:0 auto;
text-align:left;
}
JSFIDDLE
Add the following code to the li a selector apart from other styles that you have applied.
li a {display:inline-block;}
Check the updated JSFIDDLE
The important thing is that for responsive webpage you should use media queries as well.
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 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
}