I am trying to re-position some navigation tools in CSS but anything I try doesn't work. Is there a way I could group it together and move it as a div?
I've tried adjusting the background properties and also playing with padding and margins of the individual tags. I'm not sure how else it can be done?
This is the code i'm working with:
#slides .slidesjs-navigation {
margin-top:5px;
}
a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
background-image: url(images/btns-next-prev.png);
background-repeat: no-repeat;
display:block;
width:12px;
height:18px;
overflow: hidden;
text-indent: -9999px;
float: left;
margin-right:5px;
}
a.slidesjs-next {
margin-right:10px;
background-position: -12px 0;
}
a:hover.slidesjs-next {
background-position: -12px -18px;
}
a.slidesjs-previous {
background-position: 0 0;
}
a:hover.slidesjs-previous {
background-position: 0 -18px;
}
a.slidesjs-play {
width:15px;
background-position: -25px 0;
}
a:hover.slidesjs-play {
background-position: -25px -18px;
}
a.slidesjs-stop {
width:18px;
background-position: -41px 0;
}
a:hover.slidesjs-stop {
background-position: -41px -18px;
}
It's sitting in the bottom of the page! I would like it to sit just beneath the slideshow of images! Any help would be great!
Related
I have the below which works really well for all browsers except Firefox.
Basically it loads a background sprite image and positions it depends on the classes. Is there a work around for Firefox or a better way?
example page - http://smf.jynk.net/events/making-progress-boosting-the-skills-and-wage-prospects-of-the-low-paid/
.social__icon--share{
.svg-bg('smf-site-icons-02',#position: -200px -200px) ;
.single-publications &{
background-position-y: -200px;
}
.single-events &{
background-position-y:-400px;
}
.single-post &{
background-position-y:-600px;
}
display: inline-block;
width: 31px;
height: 31px;
&.social__icon--share--twitter{
background-position-x: -200px;
}
&.social__icon--share--facebook{
background-position-x: -800px;
}
&.social__icon--share--google{
background-position-x: -1000px;
}
&.social__icon--share--linkedin{
background-position-x: -1200px;
}
&.social__icon--share--pinterest{
background-position-x: -1400px;
}
}
Found a workaround with a mixing -
.bgpos(#ypos) {
&.social__icon--share--twitter{
background-position: -200px #ypos;
}
&.social__icon--share--facebook{
background-position: -800px #ypos;
}
&.social__icon--share--google{
background-position: -1000px #ypos;
}
&.social__icon--share--linkedin{
background-position: -1200px #ypos;
}
&.social__icon--share--pinterest{
background-position: -1400px #ypos;
}
}
// icons.less
.single-publications &{
.bgpos(-200px);
}
.single-events &{
.bgpos(-400px);
}
.single-post &{
.bgpos(-600px);
}
When I replace background image mbg.jpg,mbgg.jpg,mbgr.jpg,mbgh.jpg with sprite image sprite_mbg.png and also add background-position to css of input, the button color become mixing due to the width and position.
/*Sprite Image generated by Instant Sprite - Generate CSS Sprites Instantly*/
.sprite { background: url('http://s13.postimage.org/xmzbbctt1/sprite_mbg.png') no-repeat top left; width: 40px; height: 40px; }
.sprite.mbg { background-position: 0px 0px; }
.sprite.mbgh { background-position: -50px 0px; }
.sprite.mbgg { background-position: -100px 0px; }
.sprite.mbgr { background-position: -150px 0px; }
I changed to vertical sprite and it solved the problem.
I am trying to keep an image attached to the bottom-left of my page, but unlike How to keep background image on bottom left even scrolling, I do not want the image to follow the user as they scroll.
I have a feeling it has something to do with making #wrap fill up the entire window, but I can't seem to figure out how.
I am using normalize, with this code appended to the style sheet:
body {
background-image:url('/img/graph-paper3.png');
background-repeat:repeat;
}
#container {
width:960px;
margin:0 auto;
}
#sidebar {
float:left;
width:310px;
padding:10px;
}
#main {
float:right;
width:610px;
padding:0 10px 10px 10px;
margin-top: 40px;
background-image:url('/img/top.png');
background-repeat:no-repeat;
background-position:top center;
}
#paper {
margin:40px 0 147px 0;
padding:20px;
background-color:#ffffff;
min-height:400px;
}
#footer {
clear:both;
padding:5px 10px;
}
#footer p {
margin:0;
}
#wrap {
background-image:url('/img/jeremy-david.png');
background-repeat:no-repeat;
background-position:left bottom;
}
You can see the code in action here: http://www.jeremydavid.com.
How about:
.bottom-image{
position: absolute;
bottom: 0px;
left: 0px;
}
This will position the image absolutely to the page. (Make sure it isn't a child of another absolute or relative or fixed positioned element).
Use
.bottom-image {
max-width: //some %
z-index: -100;
position: fixed;
bottom: 0px;
left: 0px;
}
You can also use
#wrap{ //your main #wrap container
background: url('/img/jeremy-david.png') no-repeat bottom left;
}
I'm working on a right to left aligned website (in Hebrew) and would like the icons to appear to the right of the text. For example: http://kaptinlin.com/themes/striking/shortcodes/typography/ at the bottom Contact Us widget, the icon is on the left, I want it on the right.
Here is the relevant code (HTML):
<section id="contact_info-3" class="widget widget_contact_info">
<h3 class="widgettitle">Contact Us</h3>
<p><span class="icon_text icon_phone default">(+40) 111 222 333</span></p>
<p class="contact_address">
<span>city, state</span>
<span class="contact_zip">1111</span>
</p>
</div>
</section>
CSS:
.icon_text {
padding: 0 22px 0 0;
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-color: transparent;
}
#footer .icon_text.default {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/footer_icons.png");
}
.icon_globe {
background-position: -390px 0px;
}
.icon_home {
background-position: -360px -30px;
}
.icon_email {
background-position: -330px -60px;
}
.icon_user {
background-position: -300px -90px;
}
.icon_multiuser {
background-position: -270px -120px;
}
.icon_id {
background-position: -240px -150px;
}
.icon_addressbook {
background-position: -210px -180px;
}
.icon_phone {
background-position: -180px -210px;
}
.icon_link {
background-position: -150px -240px;
}
.icon_chain {
background-position: -120px -270px;
}
.icon_calendar {
background-position: -90px -300px;
}
.icon_tag {
background-position: -60px -330px;
}
.icon_download {
background-position: -30px -360px;
}
.icon_cellphone {
background-position: 1px -390px;
}
.icon_text.default {
background-image: url("http://kaptinlin.com/themes/striking/wpcontent/themes/striking/images/icons_black.png");
}
.icon_text.black {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_black.png");
}
.icon_text.gray {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_gray.png");
}
.icon_text.red {
background-image: url("../images/icons_red.png");
}
.icon_text.orange {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_orange.png");
}
.icon_text.magenta {
background-image: url(http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_magenta.png);
}
.icon_text.yellow {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_yellow.png");
}
.icon_text.blue {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_blue.png");
}
.icon_text.pink {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_pink.png");
}
.icon_text.green {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_green.png");
}
.icon_text.rosy {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_rosy.png");
}
Thanks.
Your icons are background-images so in short you need to adjust the padding, background-position and text-align properties to move it from the left to the right side.
You need to make a few adjustments. First you need to make sure the padding is set to the right side instead of the left side. Then you need to adjust the background-position to put the icons on the right:
.icon_text {
padding: 0 22px 0 0; /* changed from 0 0 0 22px on live site*/
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-color: transparent;
}
.contact_info_wrap .icon_text, .contact_info_wrap .contact_address {
padding-right: 26px; /* changed from padding-left on live site */
}
.icon_phone { /* obviously you would change each of the icons as necessary */
background-position: -72px -210px; /* changed from -180px -210px */
}
However doing this will lead to your icons not being in line with each other down the right side. So you will want to align the text to the right by adjust the p tags:
.contact_info_wrap p {
margin-bottom: 5px;
text-align: right; /* add this */
}
I would guess you would also want your titles to be aligned so:
#footer h3.widgettitle {
color: #FFFFFF;
font-size: 24px;
text-align: right; /* add this */
}
Should you need any further assistance on your rtl question, please visit the Striking support forum and we will assist you. RTL is generally straightforward. We can provide you the code for moving all body text to rtl, and assist with any particular element for which you are uncertain of the element movement.
My CSS Sprite here
The problem is that the image changes position even when the empty area to the right of links is hovered over with mouse..what I want is the image position to change ONLY when mouse is over those texts ie "Link1", "Link2", etc.
What do I need to change in my code ?
You need to shrinkwrap the elements.
http://jsfiddle.net/xkRcN/8/
Bad HTML! Bad bad HTML! Shrinkwrapping is of course the correct solution, but surely it'll be good to use valid HTML at the same time?
Using the general sibling selector, this code will work without causing dozens of validation errors at the same time.
HTML:
<div class="container">
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
<div class="sp_ID0"></div>
</div>
CSS:
.sprite {
display: block;
margin-bottom: 5px;
float: left; /* These two lines are where the shrinkwrapping occurs */
clear: both;
color: white;
}
.container, .sp_ID0 {
width: 600px;
height: 203px;
}
.sp_ID0 {
background-image: url(http://farm5.static.flickr.com/4106/5064283850_fc6b5fac15_b.jpg);
background-repeat: no-repeat;
}
.container {
position:relative;
}
.sp_ID0 {
z-index: -2;
position: absolute;
top: 0px;
left: 0px;
display: block;
}
.sp_ID1:hover ~ .sp_ID0 { background-position: 0px -203px; }
.sp_ID2:hover ~ .sp_ID0 { background-position: 0px -406px; }
.sp_ID3:hover ~ .sp_ID0 { background-position: 0px -609px; }
.sp_ID4:hover ~ .sp_ID0 { background-position: 0px -812px; }
.sp_ID5:hover ~ .sp_ID0 { background-position: 0px -203px; }
.sp_ID6:hover ~ .sp_ID0 { background-position: 0px -406px; }