SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast Angrypoonani's Avatar
    Join Date
    Mar 2011
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy CSS text-align property in nested div elements

    I can't seem to get my text within my divs to right align. If anyone could throw out a few pointers, errors, or suggestions that would be much appreciated.

    Should I instead be using an inline list with floats?

    Code:
    Code:
    <style type="text/css">
    #accountNav {
    	position: relative;
    }
    #accountNav div.accountcontainer {
    	width: 50%;
    	position: absolute;
    	right: 25px;
    }
    #accountNav div.accountcontainer div {
    	text-align: right;
    }
    #accountNav a {
    	float: left;
    	margin: 5px 10px 0px 10px;
    	white-space: nowrap;
    	font-weight: bold;
    	text-decoration: none;
    }
    </style>
    Code:
    <div id="accountNav">
    <div class="accountcontainer">
    <div style="">
    <a href="login url">Login</a>
    </div>
    <div style="float: left; margin: 5px 2px 0px 2px;">
    |
    </div>
    <div style="">
    <a href="view cart url">View Cart</a>
    </div>
    <div style="float: left; margin: 5px 2px 0px 2px;">
    |
    </div>
    <div style="">
    <a href="check out url">Check Out</a>
    </div>
    </div>
    </div>

  2. #2
    SitePoint Enthusiast Angrypoonani's Avatar
    Join Date
    Mar 2011
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not super mr. css guy so I'm assuming I'm missing something that is keeping my text alignment code from working the way I want it to.

    I need the entire nav content to be aligned to the right side of the 'div.accountcontainer' but even when it is coded like so:
    Code:
    #accountNav div.accountcontainer {
    	width: 50%;
    	position: absolute;
    	right: 25px;
            text-align: right;
    }
    #accountNav div.accountcontainer div {
    	moved to above
    }
    The alignment is not what I want.
    The entire text/content in the accountcontainer div (div.accountcontainer) is aligned to the left but I need it aligned to the right...

    Any ideas on how to accomplish this. I've also coded out a quick left float list, but I still can't get the content to align right.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Am going to assume you mean that you want this whole menu placed to the right. BTW, it's better to code a menu as a UL than as separate lists (the HTML is more semantic that way)

    I coded the solution as such.

    Code:
    CSS
    #accountNav {
    	float:right;
    	/* if you have resests you prolly wont need this part*/
    	list-style:none;
    	padding:0;
    	margin:0;
    }
    #accountNav li  {float:left;}
    #accountNav li a {
    	float: left;
    	 padding:0 10px;
    	white-space: nowrap;
    	font-weight: bold;
    	text-decoration: none;
    }
    #accountNav li + li a {border-left:1px solid #000;}
    
    
    HTML
         <ul id="accountNav">
              <li><a href="login url">Login</a></li>
              <li><a href="view cart url">View Cart</a></li>
              <li><a href="check out url">Check Out</a></li>
         </ul>

  4. #4
    SitePoint Enthusiast Angrypoonani's Avatar
    Join Date
    Mar 2011
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Huh yea I feel retarded now haha dur de dur. So if I want everything to float to the right I would just USE 'float right' LOL. Makes sense, thanks!

    I was so focused on aligning the text I didn't think about floating it to the right...

  5. #5
    SitePoint Enthusiast Angrypoonani's Avatar
    Join Date
    Mar 2011
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help dresden_phoenix!!

    This is what I ended up doing
    CSS:
    Code:
    #accountNav {
        position: relative;
    }
    #accountNav div.accountcontainer {
        float: right;
        width: 303px;
        position: absolute;
        right: 0px;
    }
    #accountNav div.accountcontainer ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    #accountNav div.accountcontainer li{
        float: right;
        margin: 3px 0px;
    }
    #accountNav a {
        display: block;
        width: 100px;
        font-weight: bold;
        text-decoration: none;
        text-align: center;
        color: #4a7ba6;
    }
    
    #accountNav a:visited {
    text-decoration: none;
    color: #4a7ba6;
    }
    
    #accountNav a:hover {
    text-decoration: none;
    color: #097054;
    }
    
    #accountNav a:active {
    text-decoration: none;
    color: #FF9900;
    }
    HTML:
    Code:
    <div id="container">
        <div id="accountNav">
    <div class="accountcontainer">
    <ul>
    <li><a href="checkout url">Check Out</a></li>
        <li style="border-left: 1px solid black; border-right: 1px solid black;"><a href="account url">My Account</a></li>
        <li><a href="cart url">View Cart</a></li>
    </ul>
    </div>
    </div>


Tags for this Thread

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
  •