CSS Float left question
The following code is injected into the page via jQuery. I can't change that, but I can change the css:
<div id="slideshow-prevnext" class="slideshow-prevnext">
<a id="prev" class="left" href="#"><span class="invisible">Prev</span></a>
<a id="next" class="right" href="#"><span class="invisible">Next</span></a>
<a href="#" class="dot"> </a>
<a href="#" class="dot"> </a>
<a href="#" class="dot"> </a>
</div>
I want the three
<a href="#" class="dot"> </a>
appear on the left of and the two ("Prev" and "Next") on the right.
How can I do it? I tried float:left but does not work.
Edit: C开发者_运维知识库SS is too long to post. Development site is here at : http://site2.ewart.library.ubc.ca/
The most basic answer:
a.left, a.right { float: right;}
a.dot { float: left;}
In addition, it looks like the stylesheet '/profiles/ubc_clf/themes/logie/style.css' line 37 is trumping your float:
#slideshow-prevnext .left {
background: url(http://site2.ewart.library.ubc.ca/profiles/ubc_clf/themes/logie/images/controller/controller_left_button_on.gif) no-repeat;
**float: left;**
height: 30px;
margin-top: 8px;
text-decoration: none;
width: 29px;
}
If that is to be on the right, it will need to read:
float: right;
In order to accomplish this, you'll need to provide a CSS style which is more specific than the #slideshow-next .left rule. For example, place this in the page <head> tag:
<style type="text/css">
#slideshow-prevnext .left, #slideshow-prevnext .right {
float: right;
}
</style>
Because the <style> tag on the page has a higher precedence than those loaded before it, the rule should override the float value.
I'm not particularly happy with this way of doing things - ideally you should just change the Javascript.
- On
#slideshow-prevnextaddposition: relative. - On
#slideshow-prevnext .leftand#slideshow-prevnext .rightremovefloat: leftand addposition: absolute. - On
#slideshow-prevnext .leftaddright: 29pxandtop: 0. - On
#slideshow-prevnext .rightaddright: 0andtop: 0. - On
#slideshow-prevnext a.dotaddfloat: left.
It looks like this when you're done:
you can do it by this example.
<div class="wrapper">
<div style="float:left"><a href=""> </a></div>
<div style="float:right;"><a href="">Prev</a> | <a href="">Next</a></div>
<div style="clear:both;"></div>
</div>
i have used Inline Css. You can do it by classes or external Css also.
Without seeing your CSS it makes it hard to guess how you have this working.
Assuming left and right are css classes for floating left/right, just remove them and move the links down like so:
<div id="slideshow-prevnext" class="slideshow-prevnext">
<a href="#" class="dot"> </a>
<a href="#" class="dot"> </a>
<a href="#" class="dot"> </a>
<a id="prev" href="#"><span class="invisible">Prev</span></a>
<a id="next" href="#"><span class="invisible">Next</span></a>
</div>
You'll have to post your CSS if you want a better example.
加载中,请稍侯......
精彩评论