CODEWITHSUNDEEP
csscss-float
Minghui Yu
Minghui Yu

Reputation: 1363

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">&nbsp;</a>
  <a href="#" class="dot">&nbsp;</a>
  <a href="#" class="dot">&nbsp;</a>
</div>

I want the three 

<a href="#" class="dot">&nbsp;</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: CSS is too long to post. Development site is here at : http://site2.ewart.library.ubc.ca/

Upvotes: 0

Views: 486

Answers (4)

Jeff Stice-Hall
Jeff Stice-Hall

Reputation: 328

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.

Upvotes: 3

thirtydot
thirtydot

Reputation: 228152

I'm not particularly happy with this way of doing things - ideally you should just change the Javascript.

  • On #slideshow-prevnext add position: relative.
  • On #slideshow-prevnext .left and #slideshow-prevnext .right remove float: left and add position: absolute.
  • On #slideshow-prevnext .left add right: 29px and top: 0.
  • On #slideshow-prevnext .right add right: 0 and top: 0.
  • On #slideshow-prevnext a.dot add float: left.

It looks like this when you're done:

winner

Upvotes: 1

Richard Marskell - Drackir
Richard Marskell - Drackir

Reputation: 13292

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">&nbsp;</a>
  <a href="#" class="dot">&nbsp;</a>
  <a href="#" class="dot">&nbsp;</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.

Upvotes: 1

GitsD
GitsD

Reputation: 668

you can do it by this example.

<div class="wrapper">
<div style="float:left"><a href="">&nbsp</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.

Upvotes: 1

Related Questions