I have made a dropdown menu. I need a 25px x 25px image to the left of the dropdown list's text? Every time i try, the image will not appear? Why? and how do i fix it? I have tried and tried, but the image will never appear. http://jsfiddle.net/Hunter4854/M4Ef2/1/
Try:
.custom-select ul {
...
background: url("myimage.png") left top no-repeat;
padding-left: 50px;
}
I don't think you can put an image tag in a option tag, the best thing would be to set a background image and padding on the option tag.If you look at the script you'll see that it rebuilds the .custom-select ul that's why you lose any <img> in the markup, check out this fiddle where I comment out that code.
$('#test_select option').each(function(i){
html.push('<li rel="'+$(this).val() +'">'+$(this).text()+'</li>');
});
$('.custom-select ul').html(html.join(''))
Unless I am missing someting, I am not sure why people are suggesting stuff with <li>. If you want the 25x25 image to appear in the drop down, use:
CSS
select#test_select option[value="graphic designer"] {
background: url("myimage.png") left top no-repeat;
padding-left: 50px;
} // continue with every value
Related
I must change two things:
Move the Header, so that it is on the same "view line" like the
unordered List.
Make a frame around every box, so that any letter
not hit the frame.
Here is the Image and the url It's on the Startpage before the footer.
CSS
https://gist.github.com/DarthKeks/5eacceba397d8d950d06d448f7b473ac
HTML
https://gist.github.com/DarthKeks/19a7645e4d831106de674d92f92fa85e
Thanks for your answers.
I'm not really sure I got what you meant, but maybe trying some padding and margin might help you:
.box {
padding: 10px;
}
.box h3 {
margin-left: 20px;
}
https://jsfiddle.net/gg3m397b/
So I signed up here because I have something that drives me crazy. I am sure the answer is pretty straight and simple, but I just can see it...
I want to make a small gallery for an article, showing screenshots from different video games. The problem: The list wont align correctly with the text within the content div. No matter what I do. text-align: left just gets it to exactly this position, center and right work. It is like it is aligning on the edge of a div, but there is none. Putting it within the needed <p> tags destroys the text like seen in the picture. Keeping it out of the <p> tags keeps the text like it should be, but the list is exactly at the same place. I tried inline-block, inline, position: absolute etc, but nothing seems to work. I already tried searching the other divs for problems, but I just can't find anything. Here is a picture.
This is the css:
.gallerie {
text-align: left;
width: 100%;
}
.gallerie ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.gallerie li {
display: inline;
margin: 0px;
padding: 0px;
}
Can't somehow show the HTML part here, but it's just a simple ul li list with images. The whole thing is simple, but something just doesn't.
Thanks in advance!
Edit:
So as I can't get the thing with the code right, here is the direct linkt to the page with that problem: Link to the Problem
I hope this is allowed here. Thank you to the admin for editing, I am new here, and really not used to it. Thank you very much.
So guys, in short:
wanted to add the pictures here, can't post more than two links
Edit:
Funny thing, it works when I put the ul li outside of the article tag. So I would have a workaround.
Edit: The problem seems to be within the article tag. I have both, right and left margin in there. But when I make it to margin 0px, the whole text moves left (thats why I have a margin of 20px there). I guess the problem will be a second unneeded margin.
Edit: I fixed this by taking away the margin-left: 20px; out of the article tag, and added the value to the p tag for that class instead. Works. I don't really know what the error was, but it seems fine now. Thank you all for your help.
Last Edit: You can see the working example when you refresh the link to the site. Thanks for your help.
Your problem is css padding
<ul> tags have default padding. If you set padding: 0; then the spacing should disappear.
I would say set text-align: center; and padding: 0; for the .gallerie class
Is this what you want?
Corresponding css for .gallerie
Padding Example:
.padded {
padding: 10px;
background: red;
}
p {
background: yellow;
}
<div class="padded">
<p>This is some text</p>
</div>
Try adding padding-left: 20px to the <ul> and wrap the text underneath in a <p>
Looking at the link to the page where the issue lies. Just give the .gallerie class padding:0; and a margin-left:15px; (to achieve uniform indentation).
It appears from the page that you may be attempting to wrap the <ul> in a <p>, which is not valid HTML.
Go to this link to get the code
http://jsfiddle.net/o3rh4oeb/
Go to this link for actual design I want.
http://www.bbc.com/news/
See here my problem is the white spaces,between the boxes.How to get rid of it,I tried both margin and padding 0px but never worked for top one not the below one :(
help me please...
The ul in the #topicmenu section has a margin-top applied by the browser. You just need to remove it:
#topicmenu ul {
margin-top: 0;
}
Can anyone help me with list.
I have an image:
And now I need to build list with default bulls replaced with left side arrow (but not with whole image):
How I can achive it using cross-browser css?
My HTML markup is:
<ul>
<li>Conveniently located on Adelaide St. W, one block east of the Bathurst and Adelaide intersection, just north of the Gardiner Expressway, downtown Toronto.</li>
<li>All units are located indoors, which means they are all climate controlled.</li>
<li>There is an indoor loading dock with four bays, two of which are large enough to accommodate up to 50' trailers.</li>
<li>Complimentary use of on-site dollies and pallet truck.</li>
</ul>
See this question regarding using Sprite images with list style backgrounds:
use CSS sprites for list (<li>) background image
I guess this is what you were asking for.
Check out this fiddle
Here is the code
The HTML is the same.
The CSS
ul {
list-style: disc inside none;
}
ul li:before {
position: absolute;
content: "";
left: 8px;
background: url('http://i.stack.imgur.com/KKMcz.png') no-repeat #fff;
width: 8px;
height: 14px;
}
you need to set the
background: transparent, url(/image/sprite.png) no-repeat -XXpx -XXpx;
where the -XXpx moves the position of the element. The only problem with this is you will have to make sure the padding on the li where the bullet shows is not too wide and shows only the size of the image you want.
the other option you have is to set the list-style-type: none; and then drop a div or span at the beginning of you li elements that you want to have the image. I wouldn't recommend this but it would work,
ul {
list-style-image: url(/xxx/xxx.gif);
}
Will give you the whole image, can't you just then split the image down the middle and use the left part?
Here's another method that should be cross-browser. You would need to change your sprite image, however. (I couldn't seem to open the image with Photoshop or GIMP or any thing else without it messing up, though. You would have to fix it up yourself). (fixed)
Demo
Basically it offsets the other image vertically instead of horizontally. If you have longer lists, you will have to modify how far it is offset vertically. This should work on all browsers and I tested it in IE9 with compatibility settings changed. it works even in quarks mode.
The modified image looks like this:
This is my HTML:
<div id="links">
Link 1
Link 2
Link 3
Link 4
</div>
And these are the CSS styles:
#links {
position: absolute;
border: 1px solid #000;
}
#links a {
display: block;
}
#links a:hover {
background-color: #CCC;
}
This displays a list of links, the problem is that in IE, I can only click a link by directly clicking the text link, which is not the case with other browsers (where you can click anywhere whether the text link or anywhere else as long as it's in the link block), is there any fix for that (with only CSS, no javascript)?
Please note that I don't want to specify a width for the links or the div.
I have had the same problem and none of the solutions above worked for me.
I also needed the background of the links to be transparent.
A very uncomfortable solution, but one that worked perfectly is to set the background to a transparent gif. Only needs to be 1x1 px as it will repeat.
#links a
{
display: block;
background: url(/images/interface/blank/1dot.gif);
}
This seems to have no side effects apart from one additional request to the server.
Put position:relative; in your CSS at #links a{ }
like this
It will fix it :)
Enclose the link text in a span element. Then it will accept clicks anywhere within its bounds.
I have no idea why, but giving the anchor a background color seemed to fix this problem for me.
Setting the background color to #FFF and an opacity of 0 worked for me in IE9, Chrome and Firefox. Don't know about other versions though. Setting it to transparent didn't help me.
This has the advantage of being pure CSS and cross-browser, so maybe it could be a better alternative.
Ok, the fix for this problem is to give the anchors a background property other than transparent. Some proposed to give the anchors a transparent background image. I have an addition to this: The image does not have to exist. You can simply write any path and it will make it work:
a {
background:url('dummy/doesnotexist.png') no-repeat;
}
Insert this inside your a-tag style:
background:url('images/dot.png') no-repeat;
where dot.png is a 1x1 transparent image.