I was reading an article and just wonder how the arrows as shown in the picture below are inserted. I viewed the html source and there was nothing there.
How to insert arrows just like that?
They are background-images.
#content .bodytext a.external { padding-right: 7px; background: transparent url(/img/extlink.gif) no-repeat top right; }
They are using this CSS
#content .bodytext a.external {
background: url("/img/extlink.gif") no-repeat scroll right top transparent;
padding-right: 7px;
}
And the link is this
http://www.informationweek.c<wbr></wbr>om/news/windows/operatingsys<wbr></wbr>tems/showArticle.jhtml?articleID=208800494
The CSS is to find an element with id="content". Then find it's children with class="bodytext". Now for each child find anchor tag with class="external" and apply the background image to it.
They are set using CSS background images and classes on the elements.
For example the grey arrow for external links is associated with the class external on anchors. You should be able to check the other arrows by inspecting the elements using the developer tools in your browser e.g. FireBug in FireFox.
In relation to above link from Duniyadnd - which I found very interesting, a quick solution for internal links could be:
a[href*="here"] {
padding-right: 7px; background: transparent url(/img/intlink.gif) no-repeat top right; }
What the above code does is look for any links with the word 'here' in them and then stick an arrow indicating 'internal'. That would of course mean you would have to refer to all internal links as 'here', or run up a couple more rules. You could then change the rule to suit external links as well:
a[href ^='http'] {
padding-right: 7px; background: transparent url(/img/extlink.gif) no-repeat top right; }
It's an image, styled that way with css. As you can see the hyperlink has a class='external' and class='internal'
http://forums.whirlpool.net.au//img/exteml.gif
http://forums.whirlpool.net.au//img/extlink.gif
#content .bodytext a.internal { padding-right: 7px; background: transparent url(/img/intlink.gif) no-repeat top right; }
#content .bodytext a.internal,
#content .bodytext a.internal:link,
#content .bodytext a.internal:active,
#content .bodytext a.internal:visited { color: #730; text-decoration: none; }
#content .bodytext a.internal:hover { color: #A50; text-decoration: underline; }
#content .bodytext a.internal img { display: none; }
/* inter-links */
#content .bodytext a.external { padding-right: 7px; background: transparent url(/img/extlink.gif) no-repeat top right; }
#content .bodytext a.external img { display: none; }
/* inter-links */
#content .bodytext a.email { padding-right: 7px; background: transparent url(/img/exteml.gif) no-repeat top right; }
#content .bodytext a.email img { display: none; }
Related
please go through below link :
http://2.kidsdial.com/customer/account/login
and login with this email id : kidsdial2#gmail.com & password : kidsdial2
than please check this : http://2.kidsdial.com/marketplace/marketplaceaccount/myproductslist/
on top , you can see : Listings, Orders, Returns . above there is a
logo image: totaltoys.
I want to display background color from top of the logo [totaltoys] to bottom of the menu as like this :
you can test these CSS rules
#horizontalmenu .mymenu > li {
height: 32px;
line-height: 32px;
width: 100px;
}
#main_header .header-container .header {
background-color: #ffff00;
}
#horizontalmenu{
margin-top: -5px;
}
I would remove .bkg_header_bottom from:
.adapt-0 .em-box-custom .bkg_header_bottom, .em-box-custom .container_header, .bkg_header_bottom{
background-color:#fff !important;
}
and possibly remove the color here as well so you aren't duplicating code:
.adapt-0 .em-box-custom .bkg_header_bottom, .em-box-custom .container_header, .bkg_header_bottom {
background-color: #3fbdf7;
background-image: url(../images/stripes/blank.gif);
background-position: 0 0;
background-repeat: repeat;
color: #FFFFFF;
clear: both;
}
Add the background color you want here, this class contain both elements you want colored:
.page.one-column{
background-color: #3fbdf7;
}
I am using the HTML button tag for my submit buttons as well as buttons that direct to other pages and features I would like to be able to have buttons with different backgrounds (one blue, one grey, one red, one green, etc) but can't seem to get it working by simply adding a class tot he button tag.
Here is what I have so far
HTML
<button class="green_btn" type="submit" name="cnp">News Control</button>
CSS
button {
margin: 0 auto 5px auto;
display: block;
width: 134px;
height: 35px;
background: url('../images/darkgrey_btn_bg.png') no-repeat left;
border: 0 none;
font-weight: bold;
text-align: center;
color: #fff;
cursor: pointer;
}
.grey_btn button {
background: url('../images/darkgrey_btn_bg.png') no-repeat left;
}
.green_btn button {
background: url('../images/green_btn_bg.png') no-repeat left;
}
.ltblue_btn button {
background: url('../images/ltblue_btn_bg.png') no-repeat left;
}
.blue_btn button {
background: url('../images/blue_btn_bg.png') no-repeat left;
}
.red_btn button {
background: url('../images/red_btn_bg.png') no-repeat left;
}
by default I want the button to be the garkgrey_btn_bg.png as the background, but if I want to use the green_btn_bg.png for the background, adding class="green_btn" to the html does nothing.
Anyone have any ideas?
You're targeting your class improperly with .class-name button. That is actually looking for an element with a child button.
Here you go...
button.grey_btn {
background: url('../images/darkgrey_btn_bg.png') no-repeat left;
}
button.green_btn {
background: url('../images/green_btn_bg.png') no-repeat left;
}
button.ltblue_btn {
background: url('../images/ltblue_btn_bg.png') no-repeat left;
}
button.blue_btn {
background: url('../images/blue_btn_bg.png') no-repeat left;
}
button.red_btn {
background: url('../images/red_btn_bg.png') no-repeat left;
}
Your classes are looking for a button inside an element with a colour class. For example:
.red_btn button
...is looking for a button inside a parent element with the class red_btn. It should in fact be:
button.red_btn
...though the button part of the selector is probably redundant unless you have other elements of different types with the same class names.
For anyone that ends up here who, like me, wasn't sure how to change a button's background color...
Instead of this in your CSS file:
#footer_join_button {
background-color: $light_green;
}
... or even:
#footer_join_button {
color: $light_green;
}
... the correct attribute/property to target is simply background:
#footer_join_button {
background: $light_green;
}
Note: I'm using SASS precompiler, hence the potentially strange-looking $light_green variable above.
What I want:
Current Code
<div class="grid3"><h1 class="lines">Welcome!</h1> <p class="lines2">Text</p></div>
.lines { color: #d5a72b; padding-right: 4px; float: left;}
.lines2 { text-indent: -999999px; background: url('../images/line.png') repeat-x; }
What I get:
I'd do it like this:
<h1><span>Heading</span></h1>
h1 {
background-image: url("lines.png") left middle repeat-x; }
h1 span {
background: #bgcolor;
padding: 1em; }
It's a hack, but I don't believe even CSS3 currently has a solution for this problem except possibly border-image, however that still isn't supported by IE10.
I have a newsfeed which is obviously organized by an . When the user hovers over each of the items, the background is highlighted. I'd also like to have a small "x" in the top right hand corner of each item, only shown when hovered. This "x" would be a delete button to remove that post.
Right now I just have some basic html stating: <div class="hide-button">x</div>
I know that I don't want the "x" displayed in the html, but rather have it in the CSS. So I have the <li> css below for hovering, as well as the CSS for the hide button. I'd like to know the best method to integrate the hide button div into the <li>
.hide-button {
float: right;
margin-top: -13px;
font-size: 11px;
font-family: helvetica;
color: gray;
}
.hide-button a{
text-decoration: none;
color:gray;
}
.hide-button a:hover {
text-decoration: underline;
color:gray;
}
and the list:
.newsfeedlist li {
background: white;
border-bottom: 1px solid #E4E4E4;
padding: 12px 0px 12px 0px;
overflow: hidden;
}
.newsfeedlist li:hover {
background-color: #F3F3F3;
}
Thank you so much!!!!!
Presuming your delete buttons are inside another container you could do something like
.hide-button {
float: right;
margin-top: -13px;
font-size: 11px;
font-family: helvetica;
color: tray;
display: none;
}
... the other bits of CSS ...
.newsfeedlist li:hover .hide-button {
display: block;
}
Modifying the close button to be hidden by default and then when hovering on a list item you set the display back again on the close button.
Hope this makes sense
Tim
You might really be in need of this:
Demo at jsFiddle.net
I modified an example and tushed it up for multiple content areas or images.
But hide-button element in the li and do
.newsfeedlist li:hover .hide-button {
display: inline-block;
}
and add display: none; to .hide-button
Otherwise, there's always javascript.
I'm just trying to use this little trick I saw in one of my web design magazines to make a little image rollover but I'm having just a small bit of trouble. My attempt was a terrible fail lol. I just want to see the top half (42px tall) and then the bottom half on rollover (-42px obviously)
width is also 42px. Could someone write something up to make that happen?
image:
http://img826.imageshack.us/img826/6568/homebi.png
It's all about the initial (non-:hover) and final (:hover) values of background-position.
#test {
height: 42px;
width: 42px;
background-image: url(http://img826.imageshack.us/img826/6568/homebi.png);
background-repeat: no-repeat;
background-color: transparent;
background-position: top; /* <-- key step #1 */
}
#test:hover {
background-position: bottom; /* <-- key step #2 */
}
Demo
As per your comment re: wrapping the <div> with an anchor (<a>), here's what to do:
Swap the <div> out for a <span>. This is because valid children of anchors must be inline elements
But inline-displayed elements won't behave accept dimensions! So, fix this new problem with one additional CSS property: display: inline-block on the span.
Demo 2
Try this:
<style type="text/css">
.menu {
}
.menu a {
float: left;
display: inline;
width: 42px;
height: 42px;
text-decoration: none;
}
.menu a span {
display: block;
overflow: hidden;
height: 0;
}
.menu .home {
background: transparent url(http://img826.imageshack.us/img826/6568/homebi.png) 0 0 no-repeat;
}
.menu .link:hover {
background-position: 0 -42px;
}
</style>
<div class="menu">
<span>Home</span>
</div>
Heres the bare bones for an image rollover.
the css
.rollover{display:block; height:42px; width:42px; background:url(http://img826.imageshack.us/img826/6568/homebi.png) top;}
.rollover:hover{background-position:bottom;}
.rollover span{display:none}
The html
<span>Home</span>
The important part is the background position, which on the buttons normal state is set to 'top', when you rollover the background postion is 'bottom'.
Assuming your image which contains both button states is 84px high this will work fine.