|
CSS - Text-align: Justify Giving Problems
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 Similar Tutorialsim sure this may be answered somewhere on this forum inside another post, but using search, i could not find anyone who had actually asked this specific question... i found a few posts back in 2002 that never got a responce... i'd hope we'd have an answer 3 years later... anyhow, my question is quite simple... i think.. i have a div that is 50px in height, and has some text inside it.. the text aligned center, and now i want it to vAlign center.. but the CSS doesnt seem to work... my problem is that the text in that field changes quite often, and having to constantly change margins in CSS would be a pain. anyhow, now for a snippit Code:
.advertboxtitle {
margin:10px 0px 0px 110px;
height:50px;
border:1px dashed #900;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#CCFFFF;
font-weight:bold;
text-align:center;
}
.advertboxtitlevalign {
vertical-align:middle;
}
Code: <div class="advertboxtitle"> <span class="advertboxtitlevalign">From X-Box to Xbox</span> </div> anyhow, reason why it is in a span is because i read that inline elements react to vertical-align:middle... but apparently not... anyhow, here is a link.. http://defunctgames.com/helpfix/middle.htm the text needs to be align verticaly in the dashed red box. thanks 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. 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 I have a master page in my .net project that has a template. In this template it has a line for all links a:link { color......} So all my pages get this style sheet. Now I have a jquery tab plugin that has a theme and it also uses a:link{} but it uses white but the a:link in my master page is overriding this. When I look with firebug at the css the color from the jquery theme is crossed out. How can I stop this from being crossed out? I'm so excited! I recently decided to try again (the third time) to see if I could convert my horrid table layout to divs. I was finally able to make something reletivly good in most browsers, but I am still having alot of browser-related problems! Normally I would have given up by now...but i found that my table layout was at 28 seconds over 56.6 ( :O ) and once i converted it it was only 3 seconds over (double :O ) Anyway, pretty much everything validates (including the css) when I put in the doctype, but when the doctype is in it looks like a mess in all browsers. I've been using transitional xhtml. When I take it out it looks better in all browsers, but is still really bad in all but IE. I have put together on my site two pages with the same code except one has the doctype and the other doesn't. The css for both is: Code: body {
background: #EFF7FF url(bg.gif);
text-align:center;
padding:0;
}
#outer {
border:5px double #234B77;
width:650px;
padding:0px;
margin:0px;
}
#hdr {
width:650px;
height:151px;
background: #21558C;
}
#bar {
width: 650px;
height:90px;
background: #ADD7EF url(rainbowsitedesign_2x1.gif);
border:solid #000000;
border-width:0px;
padding-top: 37px;
text-align:left;
}
#bodyblock {
position:relative;
background: #ADD7EF url(backgroundforsite.gif);
width:650px;
padding:0;
}
#l-col {
float:left;
background: #ffffff url(white.gif);
color: #333333;
width:140px;
border-left: 1px solid #234B77;
border-right: 1px solid #234B77;
border-top: 1px solid #234B77;
border-bottom: 1px solid #234B77;
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}
#coltop {
height: 42px;
background: #3971B5 url(tabletop.gif);
color: #000;
text-align: center;
padding:10px;
font-size: 105%;
font-weight: bold;
color:#1A3958;
}
#cont {
width:485px;
background: #ffffff url(white.gif);
border-left:1px solid #234B77;
border-right:1px solid #234B77;
border-top:1px solid #234B77;
border-bottom:1px solid #234B77;
text-align:left;
margin-top:10px;
margin-bottom:10px;
margin-right:5px;
font-size: 100%;
font-weight: normal;
color:#1A3958;
}
#contentop {
width:485px;
height:42px;
background: #3971B5 url(tabletop.gif);
color: #333333;
border-left:0px solid #234B77;
border-right:0px solid #234B77;
border-top:0px solid #234B77;
border-bottom:1px solid #234B77;
margin:0px;
text-align: center;
padding:10px;
font-size: 105%;
font-weight: bold;
color:#1A3958;
}
#ftr {
width:650px;
height:25px;
background:#346EB4;
color: #333333;
border: 0px solid #000000;
margin:0;
}
#ftr2 {
width:650px;
height:25px;
background:#346EB4;
border: 0px solid #000000;
margin:0;
}
#ftr3 {
width:650px;
height:99px;
background: #346EB4 url(websitedesign.gif);
border: 0px solid #000000;
margin:0;
padding-top: 20px;
}
#home {
width:50px;
height:10px;
border: 1px solid #000000;
margin:0;
}
p:first-letter {
font-size: 120%;
font-weight: bold;
}
a.red:link { text-decoration: none; color: #234B77; }
a.red:visited { text-decoration: none; color:#ff0000; }
a.red:hover { text-decoration: underline; color:#ff0000; }
a.orange:link { text-decoration: none; color: #234B77; }
a.orange:visited { text-decoration: none; color: #ff6600; }
a.orange:hover { text-decoration: underline; color:#ff6600; }
a.yellow:link { text-decoration: none; color: #234B77; }
a.yellow:visited { text-decoration: none; color: #ffff00; }
a.yellow:hover { text-decoration: underline; color:#ffff00; }
a.green:link { text-decoration: none; color: #234B77; }
a.green:visited { text-decoration: none; color: #009900; }
a.green:hover { text-decoration: underline; color:#009900; }
a.blue:link { text-decoration: none; color: #234B77; }
a.blue:visited { text-decoration: none; color: #0000ff; }
a.blue:hover { text-decoration: underline; color:#0000ff; }
a.violet:link { text-decoration: none; color: #234B77; }
a.violet:visited { text-decoration: none; color: #660066; }
a.violet:hover { text-decoration: underline; color:#660066; }
#ftr2 a:link { text-decoration: underline; color: #152F4D; }
#ftr2 a:visited { text-decoration: line-through; color: #ccc; }
#ftr2 a:hover { text-decoration: none; color: #88B2DC; }
Here are the two pages: With doctype: http://rainbowsitedesign.com/withdoctype.html Without it: http://rainbowsitedesign.com/nodoctype.html How can I fix both my browser problems and my doctype problems? Any help is app! After five plus hours of work last night on a layout which can be found here ( http://www.politicalanalyst.net/test.php ) I have a layout that works.. but only in Safari. I'm going to grab the stylesheet for connivence sake. I know my way around CSS but I'm self taught and I frequently run into these kinds of problems, I really appreciate any help. Safari Screen ... the way it should look ( http://www.politicalanalyst.net/safari_screen.png ) Firefox ... t3h b0rk3n ( http://www.politicalanalyst.net/firefox_screen.png ) And the CSS stylesheet can be found here ( http://www.politicalanalyst.net/test.css ) Thanks again, Max Hi, I'm trying to vertically align an element in my layout which is xhtml strict but it's not working. Here's the page: http://www.valeit.com/ben/test.htm The text should be vertically aligned in the middle of the layout but I can't seem to work it out. All the CSS is on the page - can anyone see what I'm doing wrong? Many thanks Kevin I have spent more than 6 hours researching and reading to solve these two problems. I have included a complete example in one file to assist others in helping me quickly and easily. Just copy to an HTML file and examine my complete issue. 1. Left black bar needs to match right-column height. 2. Image in left column needs to align to the bottom of the left bar. I tried absolute positioning the left image but it would then over-lap stuff in the left bar if the leftbar was not tall enough. In other words, it didn't take any space anymore and just covered up anything. Code: <html>
<head>
<style tyle="text/css">
body {
width: 850px;
margin-left: auto;
margin-right: auto;
height: 100%;
background-color: #fff;
color: #000;
font: 11pt arial, sans-serif;
}
div.leftbar {
width: 201px;
height: 100px; /* Should Not Be Required--adding for demonstration */
margin: 0px 5px 0px 0px;
padding: 0px;
background-color: #000;
color: #ffd600;
float: left;
}
div.rightbar {
width: 670px;
margin: 0px 0px 0px 201px;
padding: 4px;
background-color: #fff;
border: 1px solid #f00; /* Added For Visibility */
}
</style>
</head>
<body>
<div class="leftbar">
Menu (pulled in from php)
<div class="search">
Search
</div>
<div class="leftimage">
<img src=".jpg" />
</div>
</div>
<div class="rightbar">
MAIN CONTENT<br /><br /><br /><br />left bar should stretch to bottom of this column.<br />Image in left column should align to the bottom of the black leftbar. I forced a height on the left bar to show it should touch the bottom (but doesn't) when the height is greater than sized for the content.<br /><br />Thanks for your help!
</div>
</body>
</html>
I am using the following code. In firefox the input box (including the border) fits a nice box of 83 by 15. In IE it seems to not be so well, and is bothering things near it. Any ideas on how to rectify this? Code:
<td><input type="text" class="loginbox" size="13" /></td>
.loginbox
{
border: 1px;
border-style: solid;
border-color: #9AA8C3;
padding: 0;
margin: 0;
text-decoration: none;
font-size: 11px;
color: #40668C;
}
i 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.. by default text-align:justify doesnt apply to the last line... how can i make it apply to the last line? I have the following CSS: Code: span.title
{
{color:#c38ec7;text-decoration: underline;font-family: forte;font-variant:small-caps;font-weight:bold;font-size:165%}
}
... it works fine but when I try and put 'text-align:center;' that attribute does not seem to work. Is there any way of doing this??? Thanks OK I have a layer that is described here : div#footer { position: absolute; top: 0; left: 0; width: 100%; height:14; background-color: #EED; font: 10px Verdana, sans-serif;} In this layer I wish to have some text in the left of the bar and at the far right (align-right) some text also ... how would i achieve this ??? -Thanks- I have both Chinese characters and English characters in one paragraph, but they don't align to the bottom with the English characters appearing like <sup>. I have used 'vertical-align' to align the text, but not successful. Pls help. I'm creating a dynamic calendar and I can't get the numbers in the cells of my calendar table to align top-right! Here is my unformatted table... Code: <tr height="75"> <td><div align="right">12</div></td> <td><div style="vertical-align:top; text-align:right">13</div></td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> <td>18</td> </tr> I want the numbers to be aligned top right, but if I put other data in there(currently there is none, but there will be), I'd like it to be aligned left. I tried using the vertical-align property in a div tag, but that didn't do anything... I can get it to align right with a div tag... sorry if it's such a stupid quesiton... Also, a side note... I thought that span allows you to align text as well using the style property, but that doesn't work at all (not even just to the right) OK, I have a few links stacked vertically and I'm trying to get them to align to the right. You can see the links here Please look at the sub navigation to the left of the big image. My CSS looks like this: Code: a.subnav{
font-family:arial,helvetica, sans-serif;
font-size:11pt;
color:#FFFFFF;
line-height:24px;
text-decoration:none;
text-align:right;
}
what am I doing wrong? How can I get the text to align to the right? - thanks Hi there, ahhhh I have just decided to start using Firefox and now am rreworking my site. All new set up issues to try and fix and i don't even know where to start. Here is my site: www.kohlrbaby.com The issues: 1) nav bars are no longer positioned correctly vertically, nor can I get the text to center in FF 2) the white box extends longer then it should in FF vs IE 3) the text is extending off the white box in the catalogue area in FF please please offer me some css insight here is my .css code: BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-TOP: 0px; PADDING-BOTTOM: 0px; margin:0px auto; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #a1b7d2; SCROLLBAR-FACE-COLOR: #a1b7d2; SCROLLBAR-ARROW-COLOR: #003366; SCROLLBAR-TRACK-COLOR: #cccccc; FONT-FAMILY: verdana, helvetica, arial, sans-serif; BACKGROUND-COLOR: #a1b7d2; TEXT-ALIGN: center; COLOR: black; FONT-SIZE: 12px; } #menuList { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } #menuList UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } #menuList LI { DISPLAY: inline; LIST-STYLE-TYPE: none } A.actuator { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 9px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none } A.actuator:hover { COLOR: #958550 } .menu { BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; VISIBILITY: hidden; BORDER-LEFT: #ccc 1px solid; COLOR: #000; BORDER-BOTTOM: #ccc 1px solid; POSITION: absolute; BACKGROUND-COLOR: #ffffff } .menu LI A { PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; FONT-SIZE: 9px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; LINE-HEIGHT: 1.75em; PADDING-TOP: 0px; BACKGROUND-COLOR: #ffffff; T EXT-DECORATION: none } .menu LI A:hover { COLOR: #eee; BACKGROUND-COLOR: #a1b7d2 } SPAN.key {TEXT-DECORATION: underline} #homeMenu {WIDTH: 100px} #catalogueMenu {WIDTH: 100px} #wholesaleMenu {WIDTH: 100px} #wheretobuyMenu {WIDTH: 100px} #contactMenu {WIDTH: 100px} A {FONT-WEIGHT: normal; COLOR: #000000; TEXT-DECORATION: none } A:visited {COLOR: #000000} A:hover {COLOR: #958550} A.set1:link {text-decoration: none; color: #7c8895 } A.set1:visited {text-decoration: none; color:#990000} A.set1:hover {text-decoration: none; color:#958550} #navHeader { PADDING-TOP: 0; HEIGHT: 110px; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; WIDTH: 650px; POSITION: relative; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center; z-index: 10; } #logoHolder{ position: relative; } img.nav_left{ float: left; } #smallLogo { POSITION: relative; top: 30px; left: -145px; font size: 11px; font-weight: bold; } div.gray_layer { background:#cccccc; height: 20px; width: 650px; border: solid #000000; border-right-width: 0px; border-left-width: 0px; border-top-width: 1px; border-bottom-width: 1px; position: relative; text-align: center; z-index: 50; top: 56px; } #second_links { FONT-SIZE: 9px; TEXT-ALIGN: center; position: relative; top: 58px; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; margin:0px auto; } #navImageBox{ BORDER-RIGHT: #000000 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #000000 1px solid; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; WIDTH: 650px; POSITION: relative; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center; } #verticalLine{ height: 12px; width: 500px; border-right:#000000 1px solid; } img.banner{ BORDER-TOP: #000000 1px solid; BORDER-bottom: #000000 1px solid; } #contentHolder{ PADDING-TOP: 0; PADDING-bottom: 0; PADDING-left: 0; PADDING-right: 0; BORDER-RIGHT: #000000 1px solid; BORDER-Bottom: #000000 1px solid; BORDER-LEFT: #000000 1px solid; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; WIDTH: 650px; POSITION: relative; BACKGROUND-COLOR: #ffffff; text-align: center; } #text{ padding: 10 30 0 30; line-height: 1.75em; text-align: left; } #catalogue{ padding: 20 30 15 25; width: 650px; position:relative; height: 100%; background:transparent; margin-right: auto; margin-left: auto; } .outline {border: 1px solid black;} div.catalogue_pic { position: relative; float: left; padding-right: 8px; } div.catalogue_text{ text-align: left; position: relative; LINE-HEIGHT: 1.25em; } div.float { position: relative; float: left; margin: 5 5 5 5; } div.float p { text-align: center; } #bottomText{ padding: 0px; margin-top: 10px; margin-bottom: 0px; margin-right: 20%; margin-left: 20%; /* opera does not like 'margin:20px auto' */ background: none; border: none; border-top: none; text-align:center; voice-family: "\"}\""; voice-family:inherit; font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; } #blueBox{ text-align: center; position: relative; height: 27px; width: 150px; background-COLOR: #a1b7d2; top: -26px; } Hi, I have a list of items a bullet on the left --> check.gif (13 X 12) and I'm totally new with CSS... but my check aligns ok only with IExplorer, firefox doesn't. here is my code... Code: #myul
{
color: #000000;
font-family: Calibri, Geneva, Arial, Helvetica, sans-serif;
list-style-position: outside;
margin-left: 15%;
margin-right: 15%
}
#myul li
{
color: #0076a3;
font-family: Calibri, Geneva, Arial, Helvetica, sans-serif;
background-repeat: no-repeat;
background-image: url(images/check.gif);
}
Code: <ul id="myul" class="listObj"> <li class="style16">Test item 1</li> <li>Checks all devices</li> <li>Verifies ....quality, ....resolution, precision/accuracy</li> <li>Compares current imagesbla bla bla bla bla bla bla bla bla some more below.........................ok thanks</li> </ul> PLEASE NOTE that I want the check align on top, sometimes the text lenght makes it move, I don't want that to happen. Can you help Thanks, my first post here Hi all if you look here -> http://www.prxa.info/gol2/community.php to the right where it has status updates i wish the update itself to align to the top of the avatar images to the left of it? |
|||||||