For those of you who have helped me over the years, thank you things are starting to come together. I am doing codeacdemy tutorials almost daily and I am really gaining a solid understanding of css and even programming.
My current problem is probably not that hard to fix, but I do need some guidance.
I am working a project with twitter bootstrap to build a web app. I have used the class .btn along with the class .up in my html. This styles a little button with a lot of css3 properties attached to it and is great, but is not for me.
I have created a little gif of a tick and a cross, kind of like for yes or no. I added another class to my html called voteyes, and the string everything together in my stylesheet, something lie this
.btn, .up, .voteyes {
Background-image: …
}
I got my background image but ofcourse all of the other style was there. I could have gone in and set the display to none on each property, however I knew there was a better way. Just trying to go through this in my head here, but I have not done a lot of pseudo selector stuff previously.
I think I need to set an active, hover and clicked state for cool custom button. I also need to position it within it’s containing element, which I think I will do with margin alone. Not sure if I should do this as a % (i avoid %) as I am using bootstrap responsive. I’ll prob just use media queries to collapse but it’s so small I think it will still function in it’s form.
So I am looking for a good resource to creating making custom buttons. Here is my go at it. (off top of head not tested so excuse poor syntax).
There are three states. Unselected, hover, and selected.
I’m not sure on the size of the container, or if I need set a height or width. The image is very small
.voteyes a:link {
Background-image: url (‘…/images/tick.gif’);
Margin: auto 0; /* I can figure it out later in terms of position*/
Display: inline;
Text-align: -999px; /* accessibility /
Height: 10px;
Width: 10px;
}
.voteyes a:hover {
Background-image: url (‘…/images/tickhover.gif’);
Margin: auto 0; / I can figure it out later in terms of position*/
Display: inline;
Text-align: -999px; /* accessibility /
Height: 10px;
Width: 10px;
}
.voteyes a:active {
Background-image: url (‘…/images/tickhover.gif’);
Margin: auto 0; / I can figure it out later in terms of position*/
Display: inline;
Text-align: -999px; /* accessibility */
Height: 10px;
Width: 10px;
}
Sorry about that. The site I working on is on a DEV server I access at home.
I will have a go at doing this the way I think it should be done and get back to you guys. I posted this at work. Been a little quiet so I have been going through codecademy all day. man. CSS. Man. Gets really nitty gitty. those spaces, those operators. gets you.
-999px is not a valid value for text-align I think you meant text-indent and you should use -999em as a value otherwise the item will still likely be rendered on screen.
You only need to define what changes in the different anchor states and not all the same rules again.
I am doing so much css study right now it is blowing my mind. Up to 4 hrs a day (things at work are not as busy). Still running into walls.
I am styling a button. It’s not a link, it’s a button. I have made my own classes for this button, see below. Really it is very simple, in a link state, it looks like a. In a hover state it looks like b. I suspect, that in html when you use a label like ‘button’ a default style is generated. This is what I don’t get yet / have not learnt about. I have seen labels, input fields etc. Just don’t get it yet.
I’m using Bootstrap in a project right now, too, and have been a little frustrated with it. If you’re using any of the Bootstrap button classes, those styles will be applied and you will have to overwrite what you want to change. That said, it is still a good idea to keep things consistent by using similar styles for all of your buttons, even if that means applying Bootstrap classes and overwriting things. It’s extra work, but that’s the downside of relying on a framework.
So it sounds like the problem you’re having above is that the image repeats in the button? Is it meant to be a background image or an icon next to the text in the button?
If it’s an icon, I would put it in the HTML next to the button text instead of as a background image in CSS. I guess it depends on how much control you want to have with placement of the image and whether or not you want it only to show when it is hovered. If you’re wanting the image only to display upon hover, put it as a background image, but specify that the image not be repeated by doing this:
If you’re having trouble positioning the background image, you can either add extra space in the image itself or maybe try something like this to have more control of positioning it:
.voteyes a:after:hover { /* Not sure if :after and :hover will work together, but you can try it. Could also use :before. */
content: "url('../images/tickhover.gif')"; /* not sure if it needs "" or not */
position: absolute;
top: 0;
left: 5px;
}
Just presenting ideas here. Not sure if they’ll work for your specific task, but hope I helped.
“background-image” is not a shorthand property and only applies to the image. The “background” property is the shorthand and refers to all the background properties as required.
It is not a form that I am using. I want this button to be diffrent to other buttons on the site, happy to use bootstraps work for these.
Basiclly I have an image displayed as a button ( a tick) on hover it changes color, and once selected it changes color again.
I am taking a look at this right now
Prob place my code in the custom stylesheet I have as I want so pretty tigh control on how it displays.
Thsi is very useful:
.voteyes a:hover {
background: url(…/images/tickhover.gif) no-repeat;
}But I don’t think I have this set up as an a tag. I’ll have to have a look when I get home. Spent a whole longweekend away from the computer (cept friday night:)
I got this sorted, thanks. I used a plugin (bootstrap button creator) to help me so I need to do more reading on this. Managed to figure some things out.
You’re right - background, not background-image.