[RESOLVED] page display formatting

[robertjm]

I realize this isn't specifically about PHP. However, it's regarding text on a .php page, displaying a couple pieces of data from php variables, so I'm hoping it's OK for the General Help format.

I have three lines of text that I want to use <H1> sizing on. Additionally, I want both the username and database name variables to display in green, while the remaining text will be displayed in black.

USERNAME
has successfully logged into the
DATABASE_NAME database

[/SIZE]

Unfortunately, by default, <H1> tags add a linefeed at the end of the element, so the desired three lines actually become six.

While searching the web I came across the "display:inline" CSS element. This removes the extra lines of white space, and it puts both the database name, and static text on one line, as I want. HOWEVER, when you use that style element, it ignores any text-align CSS that is also used within the element, so it's all shoved over to the left side.

[INDENT][INDENT][INDENT][INDENT][INDENT][INDENT][INDENT]USERNAME
has successfully logged into the
DATABASE_NAME database
[/INDENT][/INDENT][/INDENT][/INDENT][/INDENT][/INDENT][/INDENT]

Is there a way of accomplishing what I want?

Current code using to format text:

<style type="text/css">

h1.green	{color:green;
		 text-align:center;
		 font-style: italic;
		 display:inline;
	         }

h1.black 	{color:black;
                 text-align:center;
                 display:inline;
		}
</style>

<table width="675">
<tr>
<td>
<h1 class="green"><?php print $_SESSION['username'] ?></h1>
</td>
</tr>
<tr>
<td>
<h1 class="black">has successfully logged into the</td>
</tr>
<tr>
<td>
<h1 class="green"><?PHP print $_SESSION['database_name'] ?></h1><h1 class="black"> database!!</h1>
</td>
</tr>
</table>

[bradgrafelman]

That text isn't a heading, so don't use a heading entity (e.g. <h1>). Why not just use a <div> element instead and style it however you like (e.g. centered, large font size, bold, ...)?

EDIT: Also, thread moved to ClientSide Technologies forum.

[Weedpacket]

Text-alignment only makes sense in block display elements, and you're explicitly saying that h1 is not block display (add a rule like "h1 { background-color:yellow;}" and see the difference that display:inline makes).

A lot of the hassle comes from trying to mix CSS with old table-based layouts (to force linebreaks?!): your <h1> (it's not exactly a major heading) elements have padding, and there are spacing rules attached to <td> and <tr> elements as well.

div.message
{
    width:675px;
    margin:0 auto;
    text-align:center;
    font-size:200%;
    font-weight:bold;
}
div.message span.name
{
    font-style:italic;
    color:green;
}


<div class="message">
<span class="name"><?php print $_SESSION['username'] ?></span><br>
<span>has succesfully logged into the</span><br>
<span class="name"><?PHP print $_SESSION['database_name'] ?></span> database!!<br>
</div>

[robertjm]

Thanks for the quick response.

I guess I learned to use H1, H2, etc. to differentiate the size of text way back in HTML 3.x, so I'm used to doing stuff that way. Maybe it wasn't the correct way, but that's what I was taught somewhere along the way.

I'll go back and come at it from a DIV standpoint to see if that's more to what I'm trying to accomplish.

Robert

bradgrafelman;11000161 wrote:

That text isn't a heading, so don't use a heading entity (e.g. <h1>). Why not just use a <div> element instead and style it however you like...

[robertjm]

Just what the doctor ordered!!

One thing though. That font-size attribute nests, so the green text actually displayed as 400% because I'd added it to the span class as well as the div class!! Once I created a black span class with the font-size set, and then yanked it out of the div, it displayed just fine. Though, now I see you didn't have it in the original span class, so I could've just as easily yanked the one I added to accomplish the samething. Also had to get rid of the auto entry, as it was displaying in the middle of my browser width, rather than the middle of the 675px div.

Robert

Weedpacket;11000163 wrote:

...

div.message
{
    width:675px;
    margin:0 auto;
    text-align:center;
    font-size:200%;
    font-weight:bold;
}
div.message span.name
{
    font-style:italic;
    color:green;
}


<div class="message">
<span class="name"><?php print $_SESSION['username'] ?></span><br>
<span>has succesfully logged into the</span><br>
<span class="name"><?PHP print $_SESSION['database_name'] ?></span> database!!<br>
</div>