SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS question trying to positions buttons next to a horizontal list.

    take a look at:
    http://www.occasionalconfections.com/beta/portfolio.php

    I would like to position the prev and next buttons next to the images slider instead of above and below it but cant figure out how to tweak my css to make that happen. can someone please assist?

  2. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove
    Code:
    <button class="next">>></button>
    and replace this line
    Code:
            	<button class="prev"><<</button>
    with this
    Code:
            	<button class="prev">&lt;&lt;</button> <button class="next">&gt;&gt;</button>
    then in css add this
    Code:
    button.prev { float: left; }

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you- thats much closer to the desired layout but still not quite it. i woudl actually like the buttons to be right next to the carousel (not above or below it)

    like the one found here:
    http://www.gmarwaha.com/jquery/jcarousellite/

  4. #4
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then undo those code changes and add the following to css:
    Code:
    button.prev, button.next { float: left; margin-top: 20px; }
    .carousel { float: left; }
    then after second </button> add this
    Code:
    <div style="clear:both;"></div>

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for all your help with this - i got it working nicely but i just found that its not quite right in IE6.

    for some reason in IE6, my .carousel div has a large height (244px).

    works fine in FF, IE7+, Chrome, safari though...

    any ideas on why it might be blowing out the height of this div in ie6?

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, the <li>'s are falling to the double float margin bug and as a result the images are dropping thus increasing the height .
    Code:
    .carousel li{display:inline;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the tip!! that definitely helped.

    now the last piece is that my caption overlay is not working in ie6.

    take a look at the site in another browser and you will see that there is a semi-transparent caption div that floats over the bottom of the main image. when you roll over it, the caption div slides up to reveal the caption.

    in ie6, it looks like that div is at the bottom of the carousel.

    any ideas on how to make that work in ie6?

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, the probem is is that the parent has position:relative and no haslayout and as a result IE often gets the placement of child elements (even with coordinates) if the parent with relative positioning (to set stacking context) has no haslayout

    I don't think that made sense, but hte point is is that IE needs haslayout on the parent with position:relative that is setting a stacking context for the AP child(ren)
    Code:
    #mainPic{zoom:1;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •