|
CSS - Justify Last Sentence
by default text-align:justify doesnt apply to the last line... how can i make it apply to the last line?
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. 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. How do I make a paragraph sentence Case (first alphabet of each word capital) in CSS? Thanx for your help. 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 Hello, In my menu, I'm trying to center the first level of the List Items, and left justify the second level of the List Items. So the Menu will be centered and the pop-up links will be left justified. I know it's probably super simple, but for some reason, I'm missing it! Quote: /*!!!!!!!!!!! Menu Core CSS !!!!!!!!!!!!!*/ .qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:10000;} .qmmc .qmdividery{float:left;width:0px;} .qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:10000;} .qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;} .qmmc {position:relative;zoom:1;z-index:10000;} .qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:10000;} .qmmc div a, .qmmc ul a, .qmmc ul li {float:none;} .qmsh div a {float:left;} .qmmc div{visibility:hidden;position:absolute;} .qmmc .qmcbox{cursor:default;display:block;position:relative;z-index:10000;} .qmmc .qmcbox a{display:inline;} .qmmc .qmcbox div{float:none;position:static;visibility:inherit;left:auto;} .qmmc li {z-index:10000;} .qmmc ul {left:-10000px;position:absolute;z-index:10000;} .qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;} .qmmc li a {float:none} .qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;} |
|||||||