CSS - Text On Same Line

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

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,

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">&nbsp;at:&nbsp;</span>
					<span class="subon-text"><?php echo $aCols["local_date"]; ?></span>
					<span class="subon-lbl">&nbsp;on:&nbsp;</span>
					<span class="subby-text"><?php echo $aCols["full_name"]; ?></span>
					<span class="subby-lbl">Submitted by:&nbsp;</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

Hi
How can I wrap a long line of text inside a fixed width div?

Hello, I've been having trouble with a simple design I have been creating. I was wanting the footer text to display in a straight line, but it's displaying horizontally. Could you please look at my HTML and CSS coding and see if I had made an error:

Code:

www.wendyhenrichs.com/huy

Thanks!

I have an alignment issue that is driving me crazy. For whatever reason, the text that I have in a <span> field is dropping too far down for the last line. Here is a screenshot of the relevant text:

Yada yada

For whatever reason I can't keep the final "Yada" from dropping farther down. It is in the following <td> field:

Code:

<td style="height: 200px; width: 150px; vertical-align: top; padding-top: 10px">

And the class for the span has the following characteristics:

Code:

.announcement_body
{
color: black;
font-size: x-small;
}

I can't see what would cause this. I've already tried adjusting the height of the <td> field without any luck. I did get consistent spacing when I added the characteristics "vertical-align: middle", but that made the distance between every line too large.

Any idea what I'm missing here?

Stephen

Hey,

Here is an example of code for one of my links where I attempted to align the link "Entry Form" to the middle of the image, what am I doing wrong?

Code:

<p class="NavigationOption" id="Nav_Entry" line-height=32px text-align=middle><img src="../links/entryform.jpg" border=0></img>&nbsp;&nbsp;
	<a class="NavigationLink" id="NavLink_Entry" href="<?= ptpr; ?>members/index.php"><font color= #555555>Entry Form</a></p>

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

I want display a paragraph of which all the lines are indented except for the first line.

I tried the following CSS:
Code:

.myclass:first-line {
	text-indent: 0;
}
.myclass {
	text-indent: 6em;
}

This achieves the reverse, only the first-line is indented.

Can someone help?

Hi. I'm reasonably new to tableless-design, and i've run into the common problem of aligning one bit of text to the left of a line and another to the right. I have searched the web and have found several means of achieving this, but in my case there is an image combined with a inline list (horizontal menu) that needs to be aligned left, and another combination of text and images to the right.

| [image] text .... right-side text |

This might seem rather simple, but it becomes more complicated: the entire block needs to be padded on the top in order for the text not to appear cramped up at the top, and the left-margin and right-margin of the image is then set to the corresponding negative values in order for it to still be displayed precisely in the top left corner. I have found this to be the only cross-browser compatible method.

All the methods I have experimented with to align the two sides on left and right have either resulted in the image and text to be incorrectly (vertically) aligned or be displayed in different lines, even when the image is not used as part of the alignment-method.

Any help or suggestions will be greatly appreciated.
Thanx

I am having two problems with a theme I have for PHPBB3. One problem is the text that you type into textboxes when making a new post, updating your profile, or a few other spots is white on a very light grey background; therefore, hardly showing up.

The second problem is that the page display a white line at the bottom of a few pages (but not others) and the line goes away if you resize the IE window smaller, but reappears again if you full screen it.

I know the first problem has to exist in the stylesheet.css file; however, I am not sure where to make these changes as I am not familiar with PHPBB stylesheets. If anyone could help it would be greatly appreciated. Thanks!

Forums: Click Here

Stylesheet: Click Here

Pictures of my problems:
Text problem-


Line Problem -

Hi,

I just can't seem to get my head around this one. I have a website title which appears on every page. The whole title is a link to the index page of the website. I want the second part of the title to be a h1 header with smaller font in a different colour. I also want the whole title to be on one line.

I can only seem to get either all the words in the same font, or I can get the two parts to display their different fonts correctly, but they then appear on two lines, one under the other!



My page code:

<div id="garden-designer-title"><a href="(*website address*)" title="home">Joe Blogs</a><h1 style="display: inline'"><a href="(*website address*)" title="home">Garden Design</a></h1>
</div>



My stylesheet code:

#garden-designer-title {
position:relative;
left:0px;
top:0px;
padding: 0;
margin: 0;
width:526px;
height:51px;
z-index:7;
}

#garden-designer-title a {
position:relative;
font-size: 46px;
font-family: verdana, arial, helvetica, sans-serif;
color: #009999;
font-weight: normal;
text-decoration: none;
}

#garden-designer-title h1 a {
display: inline;
font-size: 29px;
font-family: verdana, arial, helvetica, sans-serif;
color: #9482A4;
font-weight: normal;
text-decoration: none;
}

Does anyone know what I'm doing wrong?!

Many thanks!

If I have a couple of paragraphs of text and would like to adjust the space when you press return to start a new paragraph, how would I add it to my styles code below. Right now, a hard and soft return is too big and I would like the spacing to be about half the font size of the text.

How would I add it to my stylesheet code in this example: Code:

.bodytext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
	text-align:right;
	font-weight: none;
	background-color: #ffffff;
        line-height:1.5;
        letter-spacing:-0.02em;
}

Is it possible to adjust the line spacing in text using CSS because pressing return in text, the spacing is either too big or too small. I want control of line spacing so that I can have text and paragraph control like I do with Word documents.
eg.
A
B
I want the distance from A to B to be either greater or smaller.

Can you also control the space between letters?
eg.
AB
I want the spacing between A to B further or closer.

Is this all possible on a HTML page without having to use images for text or using tables to seperate each text line on a table to create different line spacing.