SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2003
    Location
    netherlands
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    In same textblock how to center and align right the same time?

    Hoi CSS fanatics,
    just joined your forum. The books I have them since 2001.
    But now i ran into a problem and i can not solve it. May somebody else can??
    I have a textblock that i center. no problem. Some of the rules are 1-liners, others are not. Ther is a price indication and the end of the rule. I would like to align this price at the right side.
    May be it's clearer if you watch the attachment. I know that it is easier if I align one block at the left and the price-block at the end.
    But i do need to center the textblock for filling space.
    Is there somebody who can fixed this or am i just dreaming and is this impossible in CSS??

    Hope you can help me,
    thnx & grtz,

    jef

  2. #2
    SitePoint Member
    Join Date
    Jul 2003
    Location
    netherlands
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe it will help if i include the css i use:
    Code:
    #mainR {
    	float:right;
            width:483px;
            height: 500px;
            background:#F5D3B0;
            border-top: solid #330000 10px;
            border-right: solid #330000 10px;
            border-bottom: solid #330000 10px;
            margin-right: 7px;
    	}
    
    
        .mainRh2
     {
       margin-bottom: 3px;
    }
    
     .mainRtekst
     {      font-family: "Verdana",Arial, Helvetica, sans-serif;
            font-size: 14px;
           /* line-height: 1.3;      */
            color:  #330000;
            text-align: center;
            margin: 5px;
    }
    Tried to work with <span>, like this:

    Code:
    .mainRalignR
     {
     text-align: right;
     margin-right: 5px;
    }
    But that does not work either.
    Any tip or advice would be welcome.

    hope it does.

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    There are a couple of easy ways to do this.

    One is to use a <table>, and have the description and price in separate columns. It could legitimately be described as tabular data, so there's no problem there. It might also lead to a neater presentation, with the text keeping separate from the price on items with more than one line of text, and the price being vertically centred on those items.

    The other is to put the price before the description and set it to float:right;. The downside to this is that it will always appear alongside the first line of the description, whereas you probably want it to appear alongside the last line.

    (The reason that you are not getting any joy out of span {text-align:right;} is that a <span> will by definition only be as large as is needed to enclose the text/content within it. You can see this if you put a border on it. So while the text is right-aligned within the <span>, there is nowhere for it to move to, so it looks exactly the same as any other alignment.)

  4. #4
    SitePoint Member
    Join Date
    Jul 2003
    Location
    netherlands
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Stevie,
    Just tried your second tip, but i probably will be doing something wrong, cause the price was either above the first rule or under the last.
    I think i better follow your first advice. You're right concerning the presentation.
    And also thanks for the explantion with span. I really did make a "thinking error".
    Learned a lot.
    thnx.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I assume the attachment was not what you wanted but an example of what you had tried?

    If you want the price aligned right you will probably need to move it outside so the text can wrap before.

    e.g.
    IE8+ only.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    ul.menu {
    	margin:20px auto;
    	padding:0;
    	list-style:none;
    	width:50%;
    	background:#f5d3b0;
    	color:#4d1d18;
    	border:5px solid #300;
    	padding:20px 1px;
    }
    ul.menu li {
    	text-align:center;
    	position:relative;
    	zoom:1.0;
    	font-size:18px;
    	line-height:1.3;
    	margin:15px 6em 15px 3em;
    	clear:both;
    }
    ul.menu li strong {
    	float:right;
    	width:5em;
    	text-align:right;
    	margin-right:-3em;
    	margin-left:-2em;
    }
    </style>
    </head>
    
    <body>
    <ul class="menu">
    		<li>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem <strong>11.75</strong></li>
    		<li>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet <strong>11.75</strong></li>
    		<li>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem dolor sit amet <strong>11.75</strong></li>
    		<li>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametsit amet Lorem ipsum dolor sit amet <strong>11.75</strong></li>
    		<li>Lorem ipsum dolor sit amet Lorem ipsum dolor <span></span> <strong>11.75</strong></li>
    		<li>Lorem ipsum dolor sit <strong>11.75</strong></li>
    </ul>
    </body>
    </html>
    Or using display:table.
    IE8+ only.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    ul.menu {
    	margin:20px auto;
    	padding:0;
    	list-style:none;
    	width:50%;
    	background:#f5d3b0;
    	color:#4d1d18;
    	border:5px solid #300;
    	padding:20px 100px;
    }
    ul.menu li {
    	text-align:center;
    	zoom:1.0;
    	font-size:18px;
    	line-height:1.3;
    	margin:15px 0;
    	display:table;
    	table-layout:fixed;
    	width:100%;
    	border-bottom:1px dotted #aaa;
    	padding:0 0 10px;
    }
    ul.menu li strong, ul.menu li span {
    	display:table-cell;
    	vertical-align:bottom
    }
    ul.menu li strong {
    	width:1px;
    	white-space:nowrap;
    	text-align:right;
    	padding:0 0 0 10px;
    }
    </style>
    </head>
    
    <body>
    <ul class="menu">
    		<li><span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem</span> <strong>11.75</strong></li>
    		<li><span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</span> <strong>11.75</strong></li>
    		<li><span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem dolor sit amet</span> <strong>11.75</strong></li>
    		<li><span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametsit amet Lorem ipsum dolor sit amet</span> <strong>11.75</strong></li>
    		<li><span>Lorem ipsum dolor sit amet Lorem ipsum dolor</span> <strong>11.75</strong></li>
    		<li><span>Lorem ipsum dolor sit </span><strong>11.75</strong></li>
    </ul>
    </body>
    </html>
    IE8+ only

    Or as Stevie said a normal table would be ok also.

  6. #6
    SitePoint Member
    Join Date
    Jul 2003
    Location
    netherlands
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    thanks for helping me. I already fixed it with Stevie's tip (tabular data).
    And to be honest, is indeed a cleaner and netter result. By the end of the week, you can have a look at www.bistrolafrontiere.com
    Then the site will be online.
    Thank you all for lookig for a solution.

    thnx,

    jef


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
  •