SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    putting "<" to leftward and ">" to rightward

    There are sosthers which is white background in the left side at http://dot.kr/x-test/layOut/16.
    #titleLeft has the text sosthers.
    In style.css the code of #titleLeft related is like the following.
    Code:
    #titleWrap {
    margin:0 1px;
    border:1px solid #555;
    text-align:center;
    padding:4px 4px 0 4px;
    overflow:hidden;
    }
    
    #titleLeft, #titleRight {
     position:relative;
     width:180px;
     border:2px solid #555;
     background-color:#ffffff;
     padding:20px 2px;
     }
    
    #titleLeft {
     margin-left: -190px;
     float:left
    }
    The text "sosthers" is between the link "<" and ">".

    I like to push the link "<" to leftward till just 1px apart from the left border line of #titleLeft.
    and
    I like to push the link ">" to rightward till just 1px apart from the right border line of #titleLeft.


    I currently put some No Break Spaces (& n b s p; ) between the link "<" and the text "sosthers".
    This causes a problem by dropping the right-most link ">" in some low resolution browser.

    How can I put the link "<" to left-end and the link ">" to right-end inside #titleLeft without No Break Spaces?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You can just float them . Look at the added class "left" and "right" I added to each anchor.
    Code:
    <div id="titleLeft"><a href="/x-test/layOut/16/?left=190" class="b1_555 bWhite p1 f12 left"><</a> 
    <a href="/x-test/layOut/16/?left=199" class="b1_555 bWhite p1 f12 left"><</a> 
    sosthers
    <a href="/x-test/layOut/16/?left=201" class="b1_555 bWhite p1 f12 right">></a> 
    <a href="/x-test/layOut/16/?left=210" class="b1_555 bWhite p1 f12 right">></a> 
    </div>
    Then take a look at this CSS. Pretty basic.
    Code:
    .left{float:left;}
    .right{float:right;}
    And due to the text-align:center on "#titleWrap", you're sosthers will remain in the center .

    Edit-I'd use &lt; for < and &gt; for > . Your HTML looks slightly confusing with the < and > hard coded in.
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!


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
  •