CODEWITHSUNDEEP
css
John
John

Reputation: 4944

CSS to make pagination links 200 pixels right of browser margin

The pagination code below displays nicely. However, it is always left-justified against the edge of the browser.

How can I move it 200 pixels to the right?

The HTML:

echo " <div class='pages'><a href='http://www.domain.com/index.php?currentpage=1' class='links'><<</a></div> "; 

echo " <div class='pages'><a href='http://www.domain.com/index.php?currentpage=$prevpage' class='links'><</a></div> ";   

echo " <div class='pages'>[<b>$x</b>] </div>";  

echo " <div class='pages'><a href='http://www.domain.com/index.php?currentpage=$x' class='links'>$x</a></div> ";  

echo " <div class='pages'><a href='http://www.domain.com/index.php?currentpage=$nextpage' class='links'>></a></div> ";

The CSS:

    .pages
        {
        color: #000000;
        overflow: hidden;
        display: block;
        float: left;
        margin: 4px;
        margin-top: 1600px;
        margin-bottom:0px;
        margin-left: 10px;
        padding-bottom: 0px;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 24px;
        }   


 a.links:link {
    color: #004284; text-decoration: none;
    text-align:center;
    margin-left:8px;
    margin-bottom:0px;
    padding:2px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    }

 a.links:visited {
    color: #004284; text-decoration: none;
    text-align:center;
    margin-left:8px;
    margin-bottom:0px;
    padding:2px;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    }

 a.links:active {
    color: #004284; text-decoration: none; 
    text-align:center;
    margin-left:8px;
    margin-bottom:0px;
    padding:2px;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    }

 a.links:hover {
    color: #FFFFFF; text-decoration: none; 
    background-color: #004284;
    text-align:center;
    margin-left:8px;
    margin-bottom:0px;
    padding:2px;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    }

Upvotes: 0

Views: 275

Answers (3)

albert
albert

Reputation: 8153

A bunch of ways. Easiest (imo) is to create a new class and apply it to your first pagination div:

.pagesfirst{margin-left:210px}

then add that class to your first div echo:

echo "&#60;div class='pages pagesfirst'&#62;&#60;a href='http://www.domain.com/index.php?currentpage=1' class='links'&#62;<<&#60;/a&#62;&#60;/div&#62; ";

Upvotes: 0

Elen
Elen

Reputation: 2343

or you can simply wrap it into external <div>, which you can then control all together:

<div id="wrap">
<div class='pages'><a href='http://www.domain.com/index.php?currentpage=1' class='links'><<</a></div> 
<div class='pages'><a href='http://www.domain.com/index.php?currentpage=1' class='links'><<</a></div> 
....
</div>

then just css it:

#wrap {
margin-left: 200px;
}

Upvotes: 1

peduarte
peduarte

Reputation: 1677

You need to give it some margin-left like so:

.pages {
    /*your code here...*/
    margin-left: 200px;
}

Upvotes: 0

Related Questions