|
CSS - Css Justify Text With Centered Last Line
Usiing ONLY CSS, is it possible to "justify" a block of text and have the last line centered?
For example: Code:
Fig. 13. Scatter diagram comparing two subspecies of
Nyctimene albiventer. One individual of specimens thought
to be intergrades is as large as specimens of Nyctimene a.
bougainville, whereas the other three intergrades are about
the same size as specimens of N. a. minor.
CSS seems to only offer one or the other text-align:justify; or text-align:center; Thanks. Similar Tutorialsi need to justify a single line of text. As there is text-align-last in IE it works perfectly.. but i need it to be cross browser - ie. FF and Safari.. so this is not the sollution.. as i got just a certain number of links i've tried this way: Code: <div class="table"> <div class="tr"> <div class="firsttd"><a href="">link</a></div> <div class="td"><a href="">link</a></div> <div class="td"><a href="">veri long text</a></div> <div class="td"><a href="">link</a></div> <div class="td"><a href="">link</a></div> <div class="td"><a href="">long text</a></div> <div class="td"><a href="">link</a></div> <div class="td"><a href="">link</a></div> <div class="lasttd"><a href="">link</a></div> </div> </div> simulation the table through CSS : Code: .table {
display:table;
width: 100%;
}
.tr {
display:table-row;
}
.td {
display:table-cell;
text-align: center;
background-image: url(images/redbg.gif);
background-position: right;
background-repeat: no-repeat;
}
.firsttd {
display:table-cell;
text-align: left;
background-image: url(images/redbg.gif);
background-position: right;
background-repeat: no-repeat;
}
.lasttd {
display:table-cell;
text-align: right;
}
but another problem shows up.. when the link text is long.. the cell width is not set equally - i.e. it goes too long and IE6/7 doen't displays it correctly - it goes vertically instead of horizontally.. here a live link: http://89.215.52.231/templates/26/ i'm talking about the black footer navigation.. You know when you do text sentences on one line then you do the text-align:justify to spread out the whitespace between words to make the sentence fit the maximum length. I was wondering about the image tags instead of the words. Because for some customers, he/she would see one image while some other would see 3 images while some other would see 5 images. I just couldn't figure out how to use even spacing between those images. Is there a way to accomplish that with CSS and div tag? Thanks... edited: What!! 3 days later and no one know the answer. How interesting... Um, look like I'll have to bit the bullet and use the margin-left and margin-right properties in a class for each image. It's the best I can do but it will also be a problem if I have 5 images in a row where image #1 at the left and image #5 at the right would push the web layout wider or overlap something. Hi all, I noticed that when I give the text-align style as "justify", the words are unevenly spaced to justify the alignment. But it looks really weird if there are only two long words in a sentence and many small letter words in the next line. Can any1 suggest a way to align the text inside a <p> to be evenly spaced as well as justified. How to make the text to hyphenate (i.e split words with a '-' and display it in the next line). Is there a CSS property to accomplish this. I wud be grateful to recieve comments. Thanks in Advance. - John Hi there...First post in this forum cause Firefox (and mozilla / netscape) are driving me mad! Please consider the following code: Code: <html>
<head>
<style type="text/css">
@media print {
p {font-size:11px;text-align:justify;}
table {width:100%;}
}
</style>
</head>
<body>
<table width="770" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFCC">
<tr>
<td>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam molestie, tortor id tempor fringilla, ante massa consequat dui, eget fermentum ante dolor sed felis. Curabitur mollis, velit sit amet lobortis pulvinar, mi lorem condimentum metus, cursus malesuada lectus leo in purus. Suspendisse vehicula, nisl ac varius iaculis, purus felis sodales lorem, in porttitor massa risus a odio. Cras urna felis, sagittis bibendum, ultrices vel, accumsan ac, pede. Maecenas felis nisl, rhoncus non, imperdiet in, tincidunt vitae, ante. Vestibulum cursus, elit non rutrum eleifend, arcu ligula bibendum velit, eget pharetra dui ipsum et tortor. Praesent lectus felis, consectetuer a, varius fringilla, elementum quis, diam. Morbi posuere sem eget odio. Pellentesque imperdiet tellus eget augue. Aliquam et tortor et libero nonummy tristique. Sed feugiat pellentesque sem. In hac habitasse platea dictumst. Vivamus a ipsum eu odio fringilla scelerisque. Ut et neque. Sed fermentum neque nec pede. Morbi enim erat, tempor nec, porttitor eu, tempus ut, nunc. Pellentesque lacinia dapibus urna. Curabitur leo tortor, cursus quis, semper quis, luctus ac, quam. Phasellus sit amet nisl. Nullam molestie nonummy lorem. Etiam consectetuer, ante in lacinia molestie, tellus nisl tincidunt dui, in commodo lectus elit ut elit. In ornare fermentum ante. Nullam felis. Maecenas tempor, lectus vel dignissim tincidunt, metus erat feugiat odio, eu dapibus mauris orci vitae enim. Etiam quis quam vitae risus aliquam iaculis. Ut nunc nulla, hendrerit ut, auctor id, ullamcorper a, risus. Integer fringilla, erat eu interdum imperdiet, lorem purus fermentum wisi, at mattis lectus nisl sit amet ante. Cras dolor. Nunc elementum quam at ligula. Maecenas ut mi ornare neque suscipit vulputate. Praesent ornare. Pellentesque nonummy posuere massa. Morbi sed risus et purus eleifend pulvinar. Proin suscipit ultricies enim. Morbi luctus. Nam quis sem. Quisque mattis. In laoreet velit eu nunc.
</p>
</td>
</tr>
</table>
</body>
</html>
This is basically a reconstruction of an existing problem of a far more complex design...in any case, if you try to print->Preview from Opera or IE 5+ everything is sweet...However, Firefox (and the other Gecko browsers) will not properly justify the text when previewing. More precisiely: Firefox will wrap text over 12px correctly yet for small text, the p block will not wrap properly and some text will be cropped. I'm not fussy about justification but even when I removed it I would get the same problem. I'm sure there's a perfectly logical solution to this problem. Maybe the width:100% gets inherited by the td and p but that should not affect the layout...Despite my various experiements of chaging the width and the wrapping properties, I could not solve this. I'm still learning the intricasies of block elements in CSS2 so I would definitely appreciate any help! Thanks in advance, Angelos Hi, This is my code Code: <style type="text/css">
#leftcolumn {
float: left;
width: 10%;
text-align: center;
margin: 30px auto;
}
#rightcolumn {
float: left;
width: 25%;
text-align: center;
margin: 30px auto;
}
</style>
<div id="leftcolumn">
<p>Left 1</p>
</div>
<div id="rightcolumn">
<p>Right 1</p>
</div>
<div id="leftcolumn">
<p>Left 2</p>
</div>
<div id="rightcolumn">
<p>Right 2</p>
</div>
I expected it to be centered and both left and right 1 and 2 to be on the same line each left and right I want to start on a new line, although currently they are both on the same line, how can I do this Thanks This is my rendition of Claire Campbell's "Vertical Buttons". Why is my text "Quick Links" not centered in IE? All the other text is centered? Thanks in advance. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<style type="text/css">
#quikcontainer
{
position: absolute;
top: 120px;
left: 30px;
height: 650px;
width: 143px;
background: white;
border: orange 2px solid;
margin: 0 auto;
padding-top: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: center;
color: #1E599F;
}
ul#quiklist
{
text-align: center;
color: #1E599F;
list-style: none;
padding: 0;
margin: 0 auto;
width: 100%;
}
ul#quiklist li
{
display: block;
margin: 0;
padding: 0;
}
ul#quiklist li a
{
display: block;
width: 100%;
padding: 0.5em 1em 0.5em 1em;
color: #1E599F;
text-decoration: none;
background: white;
}
#quikcontainer>ul#quiklist li a { width: auto; }
ul#quiklist li a:hover, ul#quiklist li#active a:hover
{
color: white;
background: #1E599F;
border-color: orange;
border-bottom: 2px solid;
border-top: 2px solid;
}
</style>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<div id="quikcontainer">
<p><strong>Quick Links</strong></p>
<ul id="quiklist">
<li id="active"><a href="#" target="_blank">Aaaaaaa A-A</a></li>
<li><a href="#" target="_blank">AA Aaaa aa Aaaaaa Aaaaaaaa</a></li>
<li><a href="#">Aaaaaaa A-A Aaaaaaa</a></li>
<li><a href="#">Aaa A-A Aaaa</a></li>
<li><a href="#">Aaaaaa A-A Aaaaaa Aaaaaaa</a></li>
</ul>
</div>
</body>
</html>
hi, i'm wondering whether anyone here knows something that i don't about this... here's some code: Code: <div style="position:absolute; left:30px; top:90px; width:380px; height:80px; border: 3px double #000000; padding:10px; padding-top:5px; line-height:150%"> <table width="380" height="80" border=0 cellspacing=0 cellpadding=0> <tr> <td valign="middle"> <div align="center" style="width:380px;"> <span style="font-size:11px; text-align:left;"> aligned to the left.<BR> but is it centered?<BR> i think not.<BR> </span> </div> </td> </tr> </table> </div> i'm able to achieve vertically centered text in the table cell, and i can center it or align it to the left, but so far in my experimenting i haven't found a way to have text that is aligned to the left, centered in the div. i could always just add a bunch of padding-left on the div so that the text is pushed over and looks nicer although it is not centered, but i'm wondering whether there's a way to do it the way i originally planned to.. thanks very much for looking at this. Hi, Okay my boss wants me to do this: Have a rectangualr div that has another div in it that is smaller and is in the (vertically and horizontally) center. No probs, but the one in the middle has to have text floating around it, thats above left right and bottom. Me thinks this is impossible! Does anyone have any idea??? Cheers, by default text-align:justify doesnt apply to the last line... how can i make it apply to the last line? i am trying to do something like: <h6>blah</h6><span class="note">*blah</span> but *blah is appearing underneath the h6 which is fair enough but how do i make it appear on the same line? i cant for the life of me think of a css property that lets me do that? I'm having problems getting my text to show up on the same line. I'm not sure what I'm doing wrong. Here is my code: Code: <div id="subtitle"><b>What Personal Information Is Collected?</b> <div style="font-size:7px"><a href="#whatinfo">SEE MORE DETAILS</a></div></div> The "subtitle" CSS is external: Code:
#subtitle {
font-family:sans-serif, arial, verdana;
font-size:9pt;
background-color:#cccccc;
padding-left:6px;
}
I don't understand why the "SEE MORE DETAILS" link showing up on a second line? I want it at the end of my subtitle. Thanks for your help in advance. Hello, more issues(!) I'm using "text-decoration: line-through" to cross out retail prices - catalogue style. The trouble is, when the effect is used with certain numbers like "8" and "3", the numbers become unreadable and it looks like we're charging more than the retail price on some products. My boss likes the effect, so I need to find out how to raise the height of the line-through. Does anyone know how I can do this, or any other methods (such as border control) that will be more effective. Many thanks! I'm not that familiar with css yet...so this might be a stupid question. I'm creating this website for my department. on the index page, there are several lists of links. between the links there is line spacing. but some link name is too long it got wrapped under. the wrapped under text also have line spacing. this makes the viewer feels that there are 2 links instead of one. how can i make the wrapped under text go right under without the line spacing? here is the link if you wanna see how it looks like now. http://www.scienceevents.uwaterloo.ca/ for example under the first left hand side menu, international year of astronmy is one link. but it looks like 2 links. how can i make them move together? this is the css for the primary nav Code:
#primary_navigation {
background:url(../images/primary_navigation_bg.jpg) no-repeat; /* This controls the background image on the home page. */
width:960px;
height:200px;
margin-top:20px;
font-size:0.75em;
clear:both;
}
#primary_navigation ul {
list-style:none;
margin-left:-20px;
height:110px;
}
#primary_navigation ul li {
line-height:2.0em;
margin-right:5px;
}
Hi, I'm trying to include some text within a div, but the last line always seems to fall outside the bottom border. An image of what it looks like is attached. Here's the html I'm using: Code:
<div class="tbl-row <?php echo ($intRow % 2 == 0) ? ("tbl-row-odd") : ("tbl-row-even"); ?>">
<div class="title-lbl">Site: </div>
<div class="title-text"><?php echo $aCols["site_name"]; ?></div>
<img src="{ImgSpacer}" alt="" width="1" height="20" /><br />
<div class="contents-text"><?php echo nl2br($aCols["contents"]); ?></div>
<div>
<span class="subon-text"><?php echo $aCols["local_time"]; ?></span>
<span class="subon-lbl"> at: </span>
<span class="subon-text"><?php echo $aCols["local_date"]; ?></span>
<span class="subon-lbl"> on: </span>
<span class="subby-text"><?php echo $aCols["full_name"]; ?></span>
<span class="subby-lbl">Submitted by: </span>
</div>
</div>
and here's the css: Code:
.contents-text {
color : #F98537;
font-size : 15px;
text-align : left;
}
.tbl-row {
border-radius : 15px;
-moz-border-radius : 15px;
-webkit-border-radius : 15px;
margin-left : auto;
margin-right : auto;
padding : 8px;
vertical-align : top;
width : 96%;
}
.tbl-row-even {
background-color : #FFEBCB;
}
.tbl-row-odd {
background-color : transparent;
}
.subby-lbl {
color : #F98537;
display : inline;
float : right;
font-size : 15px;
vertical-align : top;
}
.subby-text {
color : #F0F;
display : inline;
float : right;
font-size : 15px;
vertical-align : top;
}
.subon-lbl {
color : #F98537;
display : inline;
float : right;
font-size : 15px;
vertical-align : top;
}
.subon-text {
color : #F0F;
display : inline;
float : right;
font-size : 14px;
vertical-align : top;
}
After much testing, I've found that it's the floats that seem to be causing the problem. When I take them out, the row is included within the outside div, but when I put them back in, the row falls outside. I need to keep the floats, because I would like to have the "Submitted" row aligned to the right, unless there's another way to achieve the same effect. So, does anyone know how I can have the last row right-aligned and included within the surrounding div? Debbie Like on this page, under each of the photos: http://www.sdtars.com/development/events/camp.php What causes the text to appear like: Quote: Originally Posted by In IE Officers discuss TAR Days at an executive board meeting Hi How can I wrap a long line of text inside a fixed width div? i wish to have two bits of text show as described in subject this is the code i have at present. i know that i have used a style for an image but how do i do this for text ? thanks Code:
<style>
img.floatRight {
float: right;
margin: 15px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 3px;
}
</style>
left text here<b class="floatRight"> right text here</b>
Hello, I have a problem that hopefully someone has seen before and found a solution. I have some text being displayed. When the text includes a image, in IE, it will repeat the last line of the text twice. so if I have this html Code: <div id="dorm_room_article_text"> <strong>HI</strong><br /> <br /> <br /> <img alt="image" src="some_image" width="525" /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> I love this game! </div> and this as the css Code: #dorm_room_article_text {
float: left;
clear: both;
width: 100%;
font-size: 95%;
margin: 0 0 20px;
}
it will display: I love this game! I love this game! at the end, only in IE. I assume it has something to do with floats and displays but can't figure it out. Any ideas? Thanks. Hello everyone, I am trying to layout a small "table-like" system. I am running into problems formatting the text properly to fit in my design. Here is a link to my current progress: http://www.suicidenote.net/csshelp/test.html Here is a link to my css: http://www.suicidenote.net/csshelp/default.css I would be very pleased if anyone has any sugestions on how to make the text to vertically fit in the div. I would rather use css as I want a variety of pages to follow the style sheet, as well as database integration Thanks, Case |
|||||||