SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: CSS Help Please

  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Help Please

    Hello,

    I'm trying to get my pagination to be flush against the very top of the page.


    Here is my layout code:

    Code:
    <div class=TopBar id=TopBar>
      <div class=Pages>
        <div class=Paginator>
    
    <span class=AtStart>&lt; Prev</span>
    
    <span class=this-page>1</span> 
    
    <a href="">2</a> 
    <a href="">3</a>
    <a href="">4</a>  
    <a href="">5</a> 
    <a href="">6</a>
    <a href="">7</a>
    
    <a class=Next href="">Next &gt;</a> 
    
    </div>
      </div>
        </div>
    Here is my css code... where the problem lies:

    Code:
    .TopBar {
    	BACKGROUND-POSITION: left bottom; BACKGROUND-IMAGE: url(/images/dotted.gif); PADDING-BOTTOM: 1px; BACKGROUND-REPEAT: repeat-x; TEXT-ALIGN: center
    }
    
    
    A:link {
    	COLOR: #0063dc; TEXT-DECORATION: underline
    }
    A:visited {
    	COLOR: #2e67c7; TEXT-DECORATION: underline
    }
    A:hover {
    	BACKGROUND: #0063dc; COLOR: #ffffff; TEXT-DECORATION: none
    }
    A:active {
    	BACKGROUND: #0259c4; COLOR: #ffffff; TEXT-DECORATION: none
    }
    .Pages {
    	MARGIN-TOP: 20px; MARGIN-BOTTOM: 20px; TEXT-ALIGN: center
    }
    .Paginator {
    	FONT-SIZE: 12px; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; PADDING-TOP: 10px
    }
    .Paginator A {
    	BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #ddd 1px solid; PADDING-LEFT: 6px; BACKGROUND: #fff; PADDING-BOTTOM: 2px; BORDER-LEFT: #ddd 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #ddd 1px solid; TEXT-DECORATION: none
    }
    .pageList .this-page {
    	BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #ddd 1px solid; PADDING-LEFT: 6px; BACKGROUND: #fff; PADDING-BOTTOM: 2px; BORDER-LEFT: #ddd 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #ddd 1px solid; TEXT-DECORATION: none
    }
    .Paginator A:visited {
    	BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #ddd 1px solid; PADDING-LEFT: 6px; BACKGROUND: #fff; PADDING-BOTTOM: 2px; BORDER-LEFT: #ddd 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #ddd 1px solid; TEXT-DECORATION: none
    }
    .Paginator .AtStart {
    	PADDING-RIGHT: 6px; PADDING-LEFT: 6px; BACKGROUND: #fff; PADDING-BOTTOM: 2px; COLOR: #aaa; MARGIN-RIGHT: 20px; PADDING-TOP: 2px
    }
    .Paginator .Prev {
    	BORDER-RIGHT: #ddd 2px solid; PADDING-RIGHT: 6px; BORDER-TOP: #ddd 2px solid; PADDING-LEFT: 6px; BACKGROUND: #fff; PADDING-BOTTOM: 2px; BORDER-LEFT: #ddd 2px solid; MARGIN-RIGHT: 20px; PADDING-TOP: 2px; BORDER-BOTTOM: #ddd 2px solid
    }
    .Paginator .break {
    	BORDER-RIGHT: medium none; PADDING-RIGHT: 6px; BORDER-TOP: medium none; PADDING-LEFT: 6px; BACKGROUND: #fff; PADDING-BOTTOM: 2px; BORDER-LEFT: medium none; PADDING-TOP: 2px; BORDER-BOTTOM: medium none; TEXT-DECORATION: none
    }
    .Paginator .Next {
    	BORDER-RIGHT: #ddd 2px solid; PADDING-RIGHT: 6px; BORDER-TOP: #ddd 2px solid; PADDING-LEFT: 6px; BACKGROUND: #fff; PADDING-BOTTOM: 2px; MARGIN-LEFT: 20px; BORDER-LEFT: #ddd 2px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #ddd 2px solid
    }
    .Paginator .AtEnd {
    	PADDING-RIGHT: 6px; PADDING-LEFT: 6px; BACKGROUND: #fff; PADDING-BOTTOM: 2px; MARGIN-LEFT: 20px; COLOR: #aaa; PADDING-TOP: 2px
    }
    .Paginator .this-page {
    	PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FONT-WEIGHT: bold; FONT-SIZE: 13px; BORDER-LEFT-COLOR: #999; BACKGROUND: #fff; BORDER-BOTTOM-COLOR: #999; PADDING-BOTTOM: 2px; VERTICAL-ALIGN: top; COLOR: #ff0084; BORDER-TOP-COLOR: #999; PADDING-TOP: 2px; BORDER-RIGHT-COLOR: #999
    }
    .Paginator A:hover {
    	BORDER-LEFT-COLOR: #036; BACKGROUND: #0063dc; BORDER-BOTTOM-COLOR: #036; COLOR: #fff; BORDER-TOP-COLOR: #036; TEXT-DECORATION: none; BORDER-RIGHT-COLOR: #036
    }
    .Pages DIV.Results {
    	MARGIN-TOP: 8px; FONT: 11px/15px Arial, Helvetica; COLOR: #aaa; TEXT-ALIGN: center
    }
    The code works, it's just that I want everything to be at the very very top of the page, and don't know how to do this without scruing it up.

    Thanks for your help.

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you provide a link to the page or a more complete version of your code?

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.cheapwebhosters.com/test.htm

    I just want what you see there to be at the very top of the screen.

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Set the margin and padding of the body to 0 and then make sure all the margin/padding-tops of your elements that butt up against the top of the window are 0.

  5. #5
    SitePoint Guru
    Join Date
    Jul 2002
    Location
    space
    Posts
    845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    Set the margin and padding of the body to 0 and then make sure all the margin/padding-tops of your elements that butt up against the top of the window are 0.
    That's what I did, but when I change them, part of the little box around the numbers disappear...

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Care to be a bit more specific about which change is producing the unwanted results?


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
  •