I have the following code
<li><img src="/business/resources/images/btn_dashboard.png" height="100px" width="70%" class="img-responsive img-rounded center-block"></li>
I'd like to change the img src into btn_dashboard_active.png when the li has class="active"
How can I do this in CSS or Bootstrap ?
You can achive that by deleting the src, height, width attributes inside your IMG tag. Then set them in CSS (like in the jsFiddle example below), with the mention that the image paths (the links inside src attribute) will become the content's value.
For displaying different images when li has class active, just change the content's value (the path) inside li.active>a>img selector.
li.active>a>img{
content:url("/business/resources/images/btn_dashboard_active.png");
}
Example: http://jsfiddle.net/L3qsmeje/
Use an alternating image which shows up on demand.
html:
<li>
<a href="/business/account" id="accountLnk" class="list-group-item">
<img src="/business/resources/images/btn_dashboard.png" height="100px" width="70%" class="img-normal img-responsive img-rounded center-block">
<img src="/business/resources/images/btn_dashboard_active.png" height="100px" width="70%" class="img-active img-responsive img-rounded center-block">
</a>
</li>
css:
li .img-normal, li.active .img-active{
display:block;
}
li .img-active, li.active .img-normal{
display:none;
}
Related
.games_box
{
width:575px;
margin:8px auto;
background:#f8f7f7;
padding:8px;
border-bottom:#000000 1px dotted;
}
<div class="games_box">
<a href='#'>
<img src='$host_name/staff/game-$row[0].gif' width='78' height='75' alt='games' />
<div id='staff' style='position:relative; top:-50px;z-index:1; left:29px'>
<img src='images/staff_picks.png' alt='staffpick' width='50' height='51' /></div>
</a>
</div>
I put staff div.. the games-box div is large..
i use 'clear:both'.. but no use..
1 st
2 nd
place staff pick image
3 rd
finally, z-index used staffpick image, under image more space
Hi you can give parent position relative and child give absolute as like this
Css
.games_box
{
width:575px;
margin:8px auto;
background:#f8f7f7;
padding:8px;
border-bottom:#000000 1px dotted;
position:relative;
}
HTML
<div class="games_box">
<a href='#'>
<img src='$host_name/staff/game-$row[0].gif' width='78' height='75' alt='games' />
<div id='staff' style='position:absolute; top:-5px;z-index:1; left:29px'>
<img src='images/staff_picks.png' alt='staffpick' width='50' height='51' /></div>
</a>
</div>
Live Demo http://jsfiddle.net/rohitazad/grE5A/
To 'suck up the space' you can use margin-top:-50px; or use position:absolute like in this example http://jsfiddle.net/grE5A/2/.
Notice I've given the <a> tag the relative position as it is the 'parent' that #staff needs to be positioned absolutely in.
The reason you had the space under the image is because position:relative; top:-50px moves the staff pick up relative to it's original position, but the parent still behaves like the element is in its original position. (Z-index has no effect what you are trying to do.)
I've a inside container div. Now this gallery div (of set width = 800px) houses lots of thumbnails of sizes 100x100. The thumbnails are taken out from a database, and the number of thumbnails can vary based on the query used. Also, each of the thumbnails are set to "float:left" within the gallery div.
Now the question is, assuming 8 thumbnails get placed in each row, and assuming that 3 such rows got created by the query, can I give a border-bottom design to these rows?
Basically the question is, can i specify the border properties for the rows that are created by floating elements within a set width.
Thanks!
My contribution:
<ul>
<li>
<img src="" alt=""/>
</li>
<li>
<img src="" alt=""/>
</li>
<li>
<img src="" alt=""/>
</li>
<li>
<img src="" alt=""/>
</li>
<li>
<img src="" alt=""/>
</li>
<li>
<img src="" alt=""/>
</li>
<li>
<img src="" alt=""/>
</li>
<li>
<img src="" alt=""/>
</li>
<li>
<img src="" alt=""/>
</li>
<li>
<img src="" alt=""/>
</li>
<li>
<img src="" alt=""/>
</li>
<li>
<img src="" alt=""/>
</li>
<li>
<img src="" alt=""/>
</li>
<li>
<img src="" alt=""/>
</li>
<li>
<img src="" alt=""/>
</li>
<li>
<img src="" alt=""/>
</li>
</ul>
ul { width:500px; }
img {
width:50px;
height:50px;
}
li {
float:left;
border-bottom: 1px solid grey;
padding: 5px 5px 0;
}
Live: http://jsfiddle.net/Bduxm/5/
As far as I read your question.. then no, it's not possible as it stands.. your pseudo three "rows" are not actually wrapped in individual containers so there is nothing to put a border on
the answers you have so far assume you count the min/max number of images selected and wrap up to 8 in a containing element.. this containing element could then be given the border.. however I read from your question the number may vary depending on a query, could you add something to the query to wrap up to eight elements in each row?
added: you could probably use a repeating background image on the container with horizontal lines about 100px apart, then margin the images to leave space to show the line/borders
Why not make the parent div's background the color of the border you want, then make the thumbnail's background white with no margin to the left/right, but a margin at the bottom/top. Make sure there is enough padding around each thumbnail so there is enough white. Then you get a nice grid with horizontally appearing rows.
You could fake it, though you'd need a little more markup.
With this HTML:
<div id="container">
<div class="imageWrapper">
<span class="fakeRowBorder">clever, huh? ;-)</span>
<img src="somesrc" />
</div>
<div class="imageWrapper">
<span class="fakeRowBorder">clever, huh? ;-)</span>
<img src="somesrc" />
</div>
... [etc.]
</div>
And this CSS:
#container{position:relative;width:400px;}
img{width:50px;height:50px;outline:1px dotted green}
.imageWrapper{float:left;position:static;margin-bottom:30px;}
.fakeRowBorder{position:absolute;left:40px;right:40px;margin-top:55px;border-bottom:1px solid blue;text-align:center;font-size:9px}
As long as the .imageWrappers are positioned static (default) then the absolutely positioned .fakeRowBorders will use #container as their reference grid for any positioning properties (top, right, bottom, or left). If you don't specify top or bottom on those fake borders, then they are calculated per how they would be were they positioned normally (rather than taking 0 as a default, as one might think) -- and that's the trick: specify "left" and "right" properties for each one, but leave "top" and "bottom" un-specified.
Adjust top and bottom padding or margin on the image and the fake borders to play with the spacing.
Check out how it works here:
http://jsfiddle.net/5S6j9/3/
Revision
clairesuzy pointed out that the solution didn't work in IE, so I've revised it, including adding in display:block to the fake border, as she suggested.
Also, (partly just to show off) I added some text centered in the row border, and brought it in from the left and right edges of the #container to demostrate how it displays apparently independently of the individual images.
Use tables...
<table id="container" style="width:800px">
<tr style="border-bottom:1px solid black">
<td class="thumbnail">thumbnail</td>
...
</tr>
...
</table>
CSS:
.thumbnail { width: 100px; }
hmm.. i've been thinking about MY own question.. and here's my quick thought on it (i've not yet coded to confirm) -
i guess, if the container element is set with a background-image with say a height of 200px (depending on the thumbnail height calc, it could vary) and a thin 1px line at the bottom of this image (for faking the border), we could do a repeat in both x and y, so that this image will do the border (border for the bottom of each row) setting.
how's that?!
psuedo code for what i think might work -
#container
{
width:1000px; height:auto; margin:0; padding:0;
background-image:url('image-of-height-and-width-100px-each-and-a-thin-line-at-bottom.png');
repeat:x; repeat:y;
}
.thumbnails{
float:left; width:80px; height:80px;
}
how about that?!
guys, seriously thanks for the suggestions.
Considering this sample code:
<div style="width:300px;">
<a href="#">
<img src="images/bracket_open.png"/>
<img src="images/1.png"/>
<img src="images/bracket_close.png"/>
</a>
<a href="#">
<img src="images/bracket_open.png"/>
<img src="images/2.png"/>
<img src="images/bracket_close.png"/>
</a>
<a href="#">
<img src="images/bracket_open.png"/>
<img src="images/3.png"/>
<img src="images/bracket_close.png"/>
</a>
</div>
Basically a long list of anchor tags that contain multiple image tags (because of the font) that make up something like [1] [2] [3] and so on.
How can I make it so that the line breaks only occur between the anchor tags and never between the image tags inside of the anchor tags.
I would preffer a XHTML/CSS solution rather than JavaScript if such exists.
Thank you.
Simple nowrap doesn't work?
div a {
white-space:nowrap;
}
With HTML like
<span>[</span><span>1</span><span>]</span><span>[</span><span>2</span><span>]</span><span>[</span><span>1</span><span>]</span>...
You also can use:
div a {
float:left;
white-space:nowrap;
}
But it's not rather elegant due to making inline elements float with no weighty reason.
I got a problem with the outlining of some div elements.
I got the following structure.
<div id="skillcontent">
<div id="skillname" class="inline">
<div class="skilllist">
<div><h3>[SKILL]</h3></div>
<div><h3>[SKILL]</h3></div>
</div>
</div>
<div id="skillstars" class="inline">
<div class="skilllist">
<div>
<img src="img/star_active.png" alt="" />
<img src="img/star_active.png" alt="" />
<img src="img/star_inactive.png" alt="" />
<img src="img/star_inactive.png" alt="" />
<img src="img/star_inactive.png" alt="" />
</div>
<div>
<img src="img/star_active.png" alt="" />
<img src="img/star_active.png" alt="" />
<img src="img/star_active.png" alt="" />
<img src="img/star_inactive.png" alt="" />
<img src="img/star_inactive.png" alt="" />
</div>
</div>
</div>
<div id="skillinfo" class="inline">
<div class="skilllist">
<div><h4>[YEARS],[LEVEL]</h4></div>
<div><h4>[YEARS],[LEVEL]</h4></div>
</div>
</div>
</div>
Css:
.skilllist div {
padding: 0px;
margin: 0px;
display: block;
height: 25px; /*same height as star images*/
}
div.inline {
display: inline-block;
}
h3 {
font-size: 18px;
color: #5b5b5b;
margin: 0px;
}
h4 {
font-size: 18px;
color: #808080;
margin: 0px;
}
img {
vertical-align: bottom;
}
The divs that contain the text (h3 and h4) elements are a bit smaller as the divs that contain images. There is no margin or padding on any element. The height of all of the divs is the same but there still is some whitespace on top of the divs with the class skilllist that contain text. There is no whitespace above the div that contains images.
Why is this and how can i fix it?
Example: Click
try adding vertical-align:top; to your css on all items misaligned. worked when i did this using firebug on your test page.
Several things:
You seem to be misusing HTML elements: h3, h4, etc. are for headlines.
On the other hand, you use too many divs. Consider the many other HTML elements that exists. For example, the elements you call "skillist" scream to be lists (ol,ul).
If you are worried about small pixel gaps like that, HTML/CSS may be the wrong tool for you. The whole concept of HTML/CSS is to be flexible and allow for different renderings on different systems and not to be a pixel perfect design tool.
Your problem may be because by default images are inline elements that sit on the font baseline and leave space for descenders. Try setting vertical-align: bottom on the images.
Without seeing your CSS, it's hard to say.
You have to remember that every element has default styling provided by the standard/browser. In order to trump this, you have to explicitly define your own values.
For example, most browsers define a page background's default color to be: #FFFFFF
To change it, you have to provide your own value.
Hope this helps.
It could be down to the margins that browsers automatically add to h tags (as well as p and some other tags).
It may help to use a css reset style sheet to remove a lot of the default margins and padding which various browsers render differently. There's one at http://developer.yahoo.com/yui/3/cssreset/
I agree with tobiasmay - it'd help if we had a demo page or something like that.
can you post some css or set up a jsfiddle.net please? else it's hard to help you fix your divities..
//EDIT
here you go, i fixed your markup completly:
<div id="skills">
<div class="skillA">
<h3 class="skill">Skill A</h3>
<ul class="skillRow">
<li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
<li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
<li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
<li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
<li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
</ul>
<p class="foo">Years, Level</p>
</div>
<div class="skillB">
<h3 class="skill">Skill B</h3>
<ul class="skillRow">
<li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
<li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
<li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
<li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
<li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
</ul>
<p class="foo">Years, Level</p>
</div>
</div>
and the CSS with a working ul li
#skills{
background-color:lightgreen;
overflow:auto;
}
.skillA, .skillB{
overflow:auto;
margin-bottom:10px;
}
ul.skillRow{
display: inline;
}
ul.skillRow li{
list-style-type: none;
float:left;
}
p.foo{
float:left;
font-size:18px;
padding:6px;
}
h3.skill{
float:left;
display:inline;
padding:6px;
}
here's the fiddle link: http://jsfiddle.net/tobiasmay/gKrkS/
Add vertical-align: top or vertical-align: bottom (whichever you prefer) to the div.inline rule. That makes it work in all browsers.
The reason the div with the images is positioned a little higher than the others is due to the way inline-blocks are aligned in their containing line box:
(...) [B]oxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. (...) The rectangular area that contains the boxes that form a line is called a line box.
(...)
A line box is always tall enough for all of the boxes it contains. However, it may be taller than the tallest box it contains (if, for example, boxes are aligned so that baselines line up). When the height of a box B is less than the height of the line box containing it, the vertical alignment of B within the line box is determined by the 'vertical-align' property.
Note the bold part. The default value of vertical-align is baseline. The images in your example are moved up in the line box to align them to the baseline of the surrounding text. In doing so they increase the height of the line box, leaving some extra whitespace on top of the text divs.
If you still don't quite understand what's happening, try increasing the font-size of the h4 in your example to, say, 32px, and remove the fixed height from .skilllist div.
I'm trying to a language switching system in this website. The idea is to have a SPAN which upon hover displays a dropdown box (UL based) that contains a list of available languages. Here's a snapshot of the effect I'm trying to achieve.
alt text http://img337.imageshack.us/img337/3474/dropboxfinal.png
The dropdown box is actually an unordered list that is hidden by default. Upon hovering on the span, I'm making the UL visible. Here's the HTML and the CSS.
HTML
<span id="langswitch">Language↓
<ul id="langlist">
<li class="en">
<a title="Current language: English" href="http://domain/en">
<img width="16" height="13" alt="English Language" src="flag-en.gif" />
English
</a>
</li>
<li class="th">
<a title="Switch to Thai language" href="http://domain/th">
<img width="16" height="13" alt="Thai Language" src="flag-th.gif" />
Thai
</a>
</li>
<li class="zh">
<a title="Switch to Chinese language" href="http://domain/zh">
<img width="16" height="13" alt="Chinese Language" src="flag-zh.gif" />
Chinese
</a>
<li>
</ul>
</span>
CSS
ul#langlist {
border:1px solid #3399CC;
color:#006699;
background:#fff;
padding:0 !important;
width:100px;
list-style:none;
position:absolute;
top:62px;
right:0;
z-index:100;
display:none;
}
span#langswitch:hover ul#langlist { display:block; }
But instead of the dropdown appearing aligned with my span, it's appearing at the extreme right end of the browser. Here's the screenshot.
alt text http://img84.imageshack.us/img84/1687/dropbox.png
Can any of the CSS gurus here recommend a fix for this?
Thanks,
m^e
just set the position of the "span" to "relative", set a fixed width to the "span" and play a bit with the values "top" and "left" (applied to #langlist) to manage the vertical and horizontal alignment of the list!
EDIT (IN RESPONSE TO YOUR QUESTION): By default, when you place in a web page an element with an absolute position, its position (defined by the attributes "top" and "left") is calculated relatively to the html page ... so, the "left" and "top" values are the "x" and "y" coordinates of an apparent coordinate system whose origin is the top-left corner.
For elements in the head of the webpage there is no problem (in the most of cases), but the elements absolutely positioned in the content of the page are constantly locked on their position so they don't move with the content of the page if the user scrolls or resizes the web page!
If you set to "relative" the position of the element (in this case the span) that contains the absolutely positioned tag, the values "top" and "left" are calculated relatively to this container, so the problem it's fixed!
ABOUT YOUR CODE: Technically you can't apply the "hover" pseudo-class to non link elements if your Doctype is not HTML5, so my suggestion is to consider to use a jQuery function to apply "display: block" to the list when occurs an hover event on the #label. However, you can correct your code as follow ... manage the distance of the list from the #label modifying the "margin-top" value of #langlist:
<style type="text/css">
#container{
position: relative;
width:100px;
}
#langswitch{
padding: 0px;
margin: 0px;
list-style:none;
position:absolute;
}
#langlist {
border:1px solid #39C;
color:#069;
background:#fff;
padding:0 !important;
margin-top: 2px;
width:100px;
top:20px;
left:0px;
display: none;
}
#container:hover #langlist{
display:block;
}
img{
background-color: #CCC;
border: 1px solid black;
}
</style>
<div id="container">
<ul id="langswitch">
<li>
<a id="label" href="#">Language↓</a>
<ul id="langlist">
<li class="en">
<a title="Current language: English" href="http://domain/en">
<img width="16" height="13" alt="English Language" src="flag-en.gif" />
English
</a>
</li>
<li class="th">
<a title="Switch to Thai language" href="http://domain/th">
<img width="16" height="13" alt="Thai Language" src="flag-th.gif" />
Thai
</a>
</li>
<li class="zh">
<a title="Switch to Chinese language" href="http://domain/zh">
<img width="16" height="13" alt="Chinese Language" src="flag-zh.gif" />
Chinese
</a>
</li>
</ul>
</li>
</ul>
</div>
Notice that this solution doesn't work on IE6!