Skip navigation
Currently Being Moderated

css layout issues

Jul 11, 2012 11:12 AM

im probably missing something dopey and obvious but im trying to add previous and next buttons to my layout and its not working

 

i want this:

 

http://toddheymandirector.com/ARCHIVE/2/

 

to look like this:

 

http://toddheymandirector.com/images/archive.jpg

 

my stylesheet:

 

http://toddheymandirector.com/css/style_heyman_1.css

 

ideas?

 
Replies
  • Currently Being Moderated
    Jul 11, 2012 11:34 AM   in reply to reelhero

    Instead of floating the previous and next buttons, make the main-contents class relatively positioned.

     

    Then make the fadehover class absolutely positioned.

     

    #next { top: 170px; right -30px; }

     

    #prev { top: 170px; left: 30px }

     

    Very rough calculations, but it should give you the idea.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 11, 2012 11:44 AM   in reply to reelhero

    This is one of those rare situations when absolute positioning (AP) really is necessary.  

     

    First establish the parent container and set its position to relative. 

     

    .main-contents{

        position:relative;  /**to control AP elements**/

         height: 369px;

         margin: 40px auto;

         width: 812px;

    }

     

    Next, replace floats and margins with positioning.  Adjust values to suit.

     

    #prev {

         position:absolute;

         top:160px;

         left:-40px;

         width: 38px;

         height: 100px;

    }

     

    #next {

         position:absolute;

         top:160px;

         right:-40px;

         width: 38px;

         height: 100px;

    }

     

     

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 11, 2012 12:36 PM   in reply to reelhero

    With respect to the Tribeca and HBO logos, sure.  Just be sure to make the parent container position:relative to keep the APs under control.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 11, 2012 1:22 PM   in reply to reelhero

    Yes.

     

    N

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points