SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    'read more' line in <div>

    I have a simple box with a 1px border - html code:
    Code:
    <div class="1">
    <div class="2"><h2 class="3">title</h2></div>
    <img class="xxxx" src="image" alt="text" height="90" width="189">
    <p class="5">Here the short description of the title theme</p>
    Here the line to include
    </div>
    What i want is to include something in css that is in html looking like this:
    Code:
    <table width="100%">
    <tr>
    <td width="50%" bgcolor="#000000">&nbsp;</td>
    <td width="50%" bgc0lor="ffffff">read more</td>
    </tr.
    </table>
    I can include some <div class=""> as the tr with the bg color of the first td, and a <p class=""> where I make the margin left 50% and also include a text alignment.

    Code:
    .divclass {width:100%;margin:0;height:12px;background:#000000;}
    .pclass {width:100%;margin-left:50%;background:#ffffff;font:arial verdana sens serif 9px #000000;text-align:right;}
    Is this the way to make such?

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Canada
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you want is a 12px black box above your text?? You can do that by just adding a 12px black border to the top of your div.

    <div>
    <p>content Here</p>
    </div>

    div {border-top: 12px solid #000;}

  3. #3
    SitePoint Evangelist
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, I want a 12px height line at the bottom of the box where the left half has color1 and the right half color2. In the right half I want to include a short text.

    Of course I can make a <div> with 100% width and a height of 12px. For the text I can use a span which is making a bgcolor behind the text. Here the problem is that the 50% I cannot reach with that.

  4. #4
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heres something that seems to work:
    Code:
    <style type="text/css">
    #bottombox {
    	width: 100%;
    	background: #000;
    	height: 12px;
    }
    #bottomRight {
    	width:50%;
    	float: right;
    	background: #ff0;
    }
    #bottomRight p {
    	margin: 0 0 0 1em;
    	padding: 0;
    	line-height: 12px;
    	font-size: 12px;
    }
    </style>
    </head>
    <body>
    
    <div id="bottombox">
    	<div id="bottomRight">
    		<p>read more</p>
    	</div>
    </div>
    Just place #bottombox at the end of the div where you want it. Tested in FF & IE6

  5. #5
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whaaait a minute. I just saw that I wasn't thinking. It can be done even easier:
    Code:
    #bottombox {
    	width: 100%;
    	background: #000;
    	height: 12px;
    }
    #bottombox p {
    	width:50%;
    	float: right;
    	background: #ff0;
    	margin: 0;
    	padding: 0 0 0 1em;
    	line-height: 12px;
    	font-size: 12px;
    }
    
    and
    
    <div id="bottombox">
    	<p>read more</p>
    </div>
    It's not exactly 50%, because of the padding which adds to the width, but pretty close. If you want exactly 50% you can remove the padding and use an &nbsp; to get some space before the text.

  6. #6
    SitePoint Evangelist
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thnx for that


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
  •