I'm trying to create a clickable image that has text running across the bottom with a background behind the text set to half opacity. Quite common in a lot of websites. I have this working other than a bottom lip running the length of the image poking out below the text background. It seems to be coming from the li containing the image and anchor. I've searched online and tried several ways to remove it but without any success.
How can I get the background color for my text to fit neatly to the bottom of my image ?
<ul id='main-aside-buddhaImgs'>
<li>
<div class='titleCont'>
<a href='#'><img src='images/squarebuddha.jpg' alt='budda' height='120' width='120'/>
<span>title</span>
</a>
</div>
</li>
ul#main-aside-buddhaImgs {
float:left;
}
ul#main-aside-buddhaImgs li {
float:left;
padding:12px 15px;
}
ul#main-aside-buddhaImgs li div.titleCont {
position:relative;
}
ul#main-aside-buddhaImgs li a {
display:block;
}
ul#main-aside-buddhaImgs li a span{
display:block;
position: absolute;
bottom: 0;
left:0;
width:100%;
color:#fc6;
text-align: center;
line-height: 30px;
background: #300;
background: rgba(51,0,0,.5);
}
Change your bottom attribute for ul#main-aside-buddhaImgs li a span to 4px
ul#main-aside-buddhaImgs li a span{
display:block;
position: absolute;
bottom: 4px;
left:0;
width:100%;
color:#fc6;
text-align: center;
line-height: 30px;
background: #300;
background: rgba(51,0,0,.5);
}
http://jsfiddle.net/Kr5QP/
Related
I am trying to make a green check mark in CSS in the following way:
I am using the following CSS in order to get that:
div.default.tabs ul.child:first-child li.child.active::after
{
display: block;
position: absolute;
right: 20px;
top: 10.5px;
content: "✔";
font-size:xx-large;
width: 20px;
height: 20px;
line-height: 22px;
text-align: center;
color:#9CD106;
font-weight: normal;
}
At this moment, I am getting some list of alphabets(as shown in below image) in place of a green check mark although in the content section, I have put ✔. Just want to know why this is happening and how we can get the same check mark as shown in the top image.
Another possibility: don't use a character at all. Since you want a checkmark that's very squared off, create it out of the borders of a pseudo-element, rotated as needed.
ul {width:200px; list-style:none; margin:0; padding:0;}
li {position:relative; background:#658B00; margin:0; padding:3px; color:white; border-radius:4px;}
li::after {
content: "";
position: absolute;
right:4px;
top:6px;
width:14px;
height:5px;
border-left:4px solid #9CD106;
border-bottom:4px solid #9CD106;
transform:rotate(-45deg);
}
<ul>
<li>testing</li>
</ul>
This question already has answers here:
Title with bottom border smaller than width
(7 answers)
Closed 8 years ago.
I came across interesting underline effect that looks like this:
It's simple, but I can't think of a way to achieve it without using additional html elements in markup, that will be not semantic. I am wondering if it is possible to achieve it using css and without having any additional elements. Effect is essentially an underline / bottom border that is smaller than element and centered under it.
Here is my markup for navigation, where this effect will be used on current page links.
<nav id="navigation" class="right">
<ul>
<li> Home </li>
<li> About </li>
<li> Work </li>
<li> Blog </li>
<li> Contact </li>
</ul>
</nav>
try this one - http://jsbin.com/lumasive/1/
#navigation li a { position:relative; }
#navigation li a:after {
content: '';
position:absolute;
bottom:0;
left: 30%;
right: 30%;
height: 2px;
background:red;
display:block;
}
same as others , the use of a pseudo , but in the flow: DEMO
li ,a {
display:inline-block;
color:#EE7972;
font-size:40px;
font-variant:small-caps;
text-decoration:none;
}
a {
margin:1em;
}
a:after {
content:'';
display:block;
height:0.2em;
width:35%;
margin:auto;
border-bottom:solid ;
}
a:hover {
color:turquoise;/* change color of text and mini-border*/
}
Without additional HTML:
jsFiddle
You can use the "after" css property:
a:after {
display: block;
position: absolute;
content:"__";
width: 100%; top: 10px;
text-align: center;
left: 0;
}
You can use an :after pseudo-element to append extra markup your a elements:
Like all the other answers, but perhaps a little less CSS required.
a:after {
display: block;
content: "";
width: 60%;
margin: 0 auto;
border-bottom: solid 1px steelblue;
}
http://codepen.io/anon/pen/qebHo
use "after" property to achieve this. : jsFiddle
CSS:
.right ul li a{
position:relative;
text-decoration:none;
}
.right ul li a:after{
content: '';
position:absolute;
bottom:0;
left: 30%;
right: 30%;
background:black;
height:1px;
}
You can as well use linear backgrounds: DEMO or DEMO 2
CSS demo 1
a {
margin:1em;
padding-bottom:0.2em;
background:linear-gradient(
to left,
transparent 33%,
#EE7972 33%,
#EE7972 66%,
transparent 66%
)
bottom no-repeat;
background-size: 100% 3px;
}
CSS demo 2
a {
margin:1em;
padding-bottom:0.2em;
background:linear-gradient(
to left,
#EE7972 ,
#EE7972
)
bottom no-repeat;
background-size: 1em 3px;
}
Possible animation with this border: border animated
i've been designing an menu for my website. i've reached an issue with converting in to html/css. The idea is to have an divider line on each side of the text and on mouse over the navigation lines will disappear and show the hover image. but whatever i do the line is still there on one of the sides.
An image of my navigation menu
nav-lnie.png: is just only the line
hover.png is the whole mouseover image
does anybody have a solution or an explanation how to do this?
css looks like this:
.navigation{
width:370px;
float:left;
position: absolute;
left: 300px;
background:url(../images/nav-lnie.png) repeat-y 0 0;
padding:0 0 0 4px; font-size:14px;
font-family:Arial, Helvetica, sans-serif;
color:#fff; text-shadow:1px 1px 1px #333
}
.navigation ul li{background:url(../images/nav-lnie.png) repeat-y right 0;
margin:0 2px 0 0;
}
.navigation ul li a{
display:block;
float:left;
width:90px;
height:38px;
padding:70px 0 0 0;
text-align:center;
color:#fff;
text-decoration:none;
}
.navigation ul li a:hover{
background:url(../images/hover.png) repeat-x;
}
And html like this:
<div class="navigation">
<ul>
<li>Videos</li>
<li>Top Videos</li>
<li>Upload</li>
<li>FAQ</li>
</ul>
</div>
It's most likely due to the margin code you have here:
.navigation ul li{
background:url(../images/nav-lnie.png) repeat-y right 0;
margin:0 2px 0 0;
}
Since there's a 2px margin on the right of each menu item, the left margin won't get hidden if you mouse over the next element. If the margin isn't really needed, you can remove it and it should work fine, given that there's enough space. If it's necessary, then on the hover command, you can change the spacing on the element:
.navigation ul li a:hover{
background:url(../images/hover.png) repeat-x;
margin-left: -2px;
padding-left: 2px;
}
Of course, it's a rough hack to fix the problem. Spacing can be adjusted on both ends as well.
sorry I know sprites are covered quite a lot but I haven't been able to find an answer out there with my specific context.
I have 4 absolutely positioned buttons using the same .png file with 3 states (link,hover,active) for the 'home' button the hover works but the hover area is not the whole button, for the 'cars' button the hover is all of the button, but the other 2 buttons have no clickable or hoverable area.
Most articles dealing with this problem say to adjust the height/width, but all that does for me is move the image but not the text and doesn't change any of the hovering issues... not sure what else to try..
necessary style:
span.nav-button-adjust { display:block;
position:relative;
top:3px;
left:9px;
}
span.nav-button a:link,
span.nav-button a:visited { display:block;
width: 91px; height: 30px;
background-image: url(images/nav-button.png);
background-position: top;
background-repeat: no-repeat;
font-family:arial black;
text-decoration:none;
color:#1461b2;
}
span.nav-button a:hover { background-image: url(images/nav-button.png);
background-position: center;
}
span.nav-button a:active { background-image: url(images/nav-button.png);
background-position: bottom;
}
necessary html:
<span class="nav-button"><span class="nav-button-adjust"> HOME</span></span>
<span class="nav-button"><span class="nav-button-adjust"> ABOUT</span></span>
<span class="nav-button"><span class="nav-button-adjust"> CARS</span></span>
<span class="nav-button"><span class="nav-button-adjust">SEARCH</span></span>
EDIT: per request:
the image I am using: https://dl.dropboxusercontent.com/u/12017360/cars/images/nav-button.png
You have too much going on with your CSS and especially your HTML. You can tidy up what you want to do with the following. You don't need to use absolute positioning.
In the following jsFiddle you'll notice that when you hover or click a link, a tiny sliver of another part of the background image pokes through. That has to do with how you made/setup your sprite.
http://jsfiddle.net/ucsNH/
Not sure if those links have to be 30px tall. If not you can fix them by setting #nav a { height: 29px; line-height: 29px; and adjusting the background-positions by 1px so they'd be 0 -1px, 0 -30px, 0 -59px. See second jsFiddle.
http://jsfiddle.net/ucsNH/2/
CSS
ul, li {
margin: 0;
padding: 0;
list-style: none;
font: 12px/1.5em Arial, sans-serif; /* this should be inherited */
}
#nav {
width: 202px; /* ( 5px + 91px + 5px ) x 2 */
}
#nav li {
float: left;
margin: 5px;
}
#nav a:link,
#nav a:visited {
display: block;
width: 91px;
height: 30px;
line-height: 30px; /* vertically centers text */
text-transform: uppercase;
color:#1461b2;
background: url(images/nav-button.png) no-repeat 0 0;
text-decoration: none;
text-align: center;
font-weight: bold;
}
#nav a:hover {
background-position: 0 -29px;
}
#nav a:active {
background-position: 0 -58px;
color: white;
}
.home,
.about {
position: relative;
left: 25%;
}
HTML
<ul id="nav">
<li class="home">Home</li>
<li class="about">About</li>
<li>Cars</li>
<li>Search</li>
</ul>
That HTML is a lot tidier wouldn't you say?
Navigation should be placed in an un-ordered list <ul>. Please avoid inline styles like you have on your anchor <a> tags. The span tag is not need inside the anchor tag and you should not use to push things (text) around. If you need some space use margin and padding. That's what they're for!
Here you go i created a jfiddle with all the hover buttons working, just click on it to check, is this what you were looking for? If yes then please select this as the correct answer by clicking on the tick to the left.
The only changes i made were to the positioning,
<span class="nav-button"><a href="home.php" style="position:absolute;left:220px;top:17px"><span class="nav-button-adjust"> HOME</span>
</a>
</span>
<span class="nav-button"><a href="about.php" style="position:absolute;left:322px;top:17px"><span class="nav-button-adjust"> ABOUT</span>
</a>
</span>
<span class="nav-button"><a href="cars.php" style="position:absolute;left:192px;top:59px"><span class="nav-button-adjust"> CARS</span>
</a>
</span>
<span class="nav-button"><a href="search.php" style="position:absolute;left:296px;top:59px"><span class="nav-button-adjust">SEARCH</span>
</a>
</span>
I am pretty new at CSS but have been learning, doing my moms small business website to save her money but I'm having a little CSS trouble with my nav bar.
Basically if you go here: http://area25dallas.com/s and look at the nav bar, I'm having trouble with the il listing to have the images line up vertically (instead of aligning with the top which is what they currently do) with the text, also for some reason the images are going on top of each other instead of sitting next to each other (I don't want them in separate lists like the text links because the margins are too spread out).
I have been playing around with the CSS and also googled the hell out of this but still haven't found a solution. Is there any quick fix to this?
Thanks!
EDIT:
Here is the HTML and CSS blips though if you are using chrome I feel just inspecting the elements are the easiest way to see what's going on
<div id = "header">
<div class = "container">
<ul id = "main-menu">
<li class = "active">home</li>
<li>about</li>
<li>gallery</li>
<li>press</li>
<li>contact</li>
<li><img src="images/twitter_newbird_boxed_ white.png" />
<img src="images/Pinterest_Favicon white.png" /></li>
</ul>
</div>
</div>
and the CSS
#main-menu
{
float: right;
position:relative;
top:122px;
right:150px;
}
#main-menu li
{
float: left;
margin: 30px 12px 15px 12px;
padding:0;
height:23px;
list-style:none;
line-height:20px;
}
#main-menu li:hover, #main-menu li.active { background-position: 0 -23px;}
#main-menu li:hover a, #main-menu li.active a{
background-position: 100% -30px;
}
#main-menu li a
{
display:block;
padding:0px 15px 5px 10px;
font-size:17px;
color:#fff;
text-decoration:none;
}
The images are broken onto multiple lines because they reside inside an <a> tag which has been styled as a block level element. Change the style to something like:
#main-menu {
float: right;
position: relative;
right: 75px; /* Changed */
top: 122px;
}
#main-menu li a {
color: #fff;
display: inline-block; /* Changed */
font-size: 17px;
padding: 0 15px 5px 10px;
text-decoration: none;
}
/* New */
#main-menu li a img {
position: relative;
top: -10px;
}
The new rule at the bottom moves the images up a little bit. You can play around with your css and get the same results in a lot of different ways - I went with a method that didn't involve many changes to the existing work.
Thanks for the tips, guys, this helped me out too with images in my css navigation.
I'd also recommend some added code to alleviate your spacing issue ...
#main-menu li a img {
position:absolute;
background:inherit;
top: 0px;
margin-bottom:auto;
max-height: 33px;
}