I am very frustrated with trying to use CSS Sprites. I have asked a couple of times here, and got great advice, but still no solution. The problem is that I want my sprites in a horizontal line, not a vertical stack. I can't seem to find an example of this on the web, and all tutorials I have found seem to only describe menus and other vertical stacks.
I have given it my best shot trying to get the widths and display styles right but still to no avail.
The following code is my best shot. I'd appreciate it if anyone could look and tell me where I am going wrong. (Note the image referred to in the code is a 32x32 image with 4 different sprites in the obvious places.)
http://codepaste.net/4kwx2c
You could try
.LICtrlList
{
display: inline;
}
change to
.LICtrlList
{
display: inline-block;
}
Related
I can't seem to find any other Tumblr theme questions like this, so I'm starting a new thread!
My issue is that in my Tumblr theme, is a container theme (or so I believe), but the images in the posts are in fact bleeding through the side of the container. There is use of a max-width:400px snippet of code in the img entry, but it doesn't seem to be working. So this is what's there:
img {
margin-bottom:0px;
max-width:400px;
}
.entry img {
max-width:400px;
height:auto;
}
I tried doing width:auto; as well for the best fit of the image. But while that makes the image look perfectly matched to its original ratio, it still bleeds out the side of the container.
I have browsed Stackoverflow for a bit, but haven't found any solution that quite matches. I've also tried various adjustments, but they don't seem to be working.
Any help is greatly appreciated! I know this is a question easily solved, but I'm quite new to CSS and would appreciate the help this time!
Basically I want the background-image (the logo) to overlay the white div below it, I tried my best using z-indexes etc and Googling but I can't manage to get it fixed.
I know the question is a duplicate but Im desperate since other solutions didnt work out for me.
Most likely it's an easy fix, I posted the website online here: http://tostimc.net/stackoverflow/ so you guys can see my code etc.
You can fix this by adding z-index: -1; to you .panel-default class in the css file: tosti.css rule 215
OK, I have scanned the forums trying to find a solution to my dilemma and have tried everything I found. If someone could please take a look at the following URL: angrybullhartford
When I resize any browser, the problems seem to differ a little, The two images in the right sidebar do not center and scale to a tiny size. The slider at the top of the page is small and off center as well. I had this working at one point and cannot get back to it. If it is something simple and someone could tell me why this is occurring I would appreciate it.
Thank you!
There is some sort of left margin or padding on the slider. It does not line up with the elements below it. When you start to make the page smaller, you can really see this margin I'm talking about.
Anyhow, try this: Change your CSS to
#page .pad {
padding: 40px;
background-color: transparent;
}
This produced a much cleaner result for me, not sure if it's exactly what you want though. Being that you're using BS2, you may have to write some media queries to handle your extra styles.
I'm programming my website and I wanted to create different css for different resolutions.
I've done this by following the tutorial up there: http://css-tricks.com/resolution-specific-stylesheets/
Everything done correctly, but when my window resizes for the narrow css, all images are big.
1 Question: How can I resize them in the css?
2 Question: If I don't want to show some div in the narrow style, using "display: none;" will block it from loading or it just hide it?
Thanks a lot and sorry for my bad english.
This might be a good article to read through. It's one of the better articles I've read about "responsive web design." http://www.alistapart.com/articles/responsive-web-design
This might also help with fluid images in case you wanted to dynamically resize images through the use of the following:
img {
width: 100%;
}
Not super IE friendly from the sounds of it, but workarounds are explained in the article.
http://unstoppablerobotninja.com/entry/fluid-images
This is the final result of the first "A List Apart" article... pretty well done IMO. Try resizing your browser to see how it adjusts. http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
Use this for resizing images
#my_image {
width: 50px;
height: 100px;
}
To answer your second question, display: none just hides it. The image will be downloaded
Hi I have already read posts which suggest using style="vertical-align: middle;"
however this is not working for me. I am a beginner so I was hoping somebody could take a look. I've been playing around on jsfiddle with it and getting nowhere.
here is my jsfiddle.
It is a dynamic form so to get to the area I am having the issue you must select option 5 "True/false" on the drop down.
as for the html for it, it is located within the javascript in 'case 5'.
Also for some reason on the jsfiddle one label is out of line and I don't know why as it works fine on firefox and chrome :S
please enlighten me, thanks
I eliminated many of the float on labels and inputs, and set width: auto and it improved greatly.
That would affect all inputs though, and I think part of your problem is the large width of just the radio button inputs.
As a broader issue, I would probably have all those question types already in the page in hidden divs, and show the appropriate one when the question type is selected. That makes it easier to work with your CSS by showing them all during dev/debug of the styles then hiding them when you're done.
Not much of an answer, but it's all I've got without really digging into the fiddle a lot.
Try this and play with the margins to get the desirable output.
#stylized label.smaller input{
float:none;
width: 25px;
}