PDA

View Full Version : Aligning Text

pbjorge12
04-06-2005, 07:34 PM
I have a table I made with 3 columns and all the CSS is working well but I can't figure out how to do this...

[ Login ]
[ Input ]
[Blah ^]

What I want is the blah text to be centered and then the caret to be right aligned. The text that needs to be right aligned will always stay the same - The test that needs to be centered will usually be different. If anyone knows a workaround using CSS it'd be appreciated! Thanks!

The reason for the caret is an arrow to collapse the center content...Does anyone know how to do that?

Here is the code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Admin</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>

<body>
<table width="303" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div class="box">» Admin Login «</div></td>
</tr>
<tr class="middlebox">
<td cellspacing class="middlebox"><form action="process.php" method="post">
<div align="center"><br>Username:
<input type="text" name="username" size="20">
<br><br>
Password:
<input type="password" name="pw" size="20">
<br><br>
<input type="submit" value="Login">
</div>
</form></td>
</tr>
<tr>
<td class="box">Powered By Phillysfun CMS^</td>
</tr>
</table>
</body>
</html>
zro@rtv
04-06-2005, 07:51 PM
using tables for design is bad..... im sure one of the elite members will scold you for that....

does the character have to be a character? or can it be a bg image and padding?

your could try floating it or absolutly positioning it to take it out of the flow.


EDIT//

i didnt see the code...
which line is it?
<td class="box">Powered By Phillysfun CMS^</td>
??

and u want the carrot on the right side of the box and the "powered by" centered or left?


...like this?

<td class="box"><span style="float:left;">Powered By Phillysfun CMS</span><span style="float:right;"> ^</span><br style="height:0; clear:both"/></td>
pbjorge12
04-06-2005, 07:59 PM
using tables for design is bad..... im sure one of the elite members will scold you for that....

does the character have to be a character? or can it be a bg image and padding?

your could try floating it or absolutly positioning it to take it out of the flow.


EDIT//

i didnt see the code...
which line is it?
<td class="box">Powered By Phillysfun CMS^</td>
??

and u want the carrot on the right side of the box and the "powered by" centered or left?


...like this?

<td class="box"><span style="float:left;">Powered By Phillysfun CMS</span><span style="float:right;"> ^</span><br style="height:0; clear:both"/></td>

What should I use instead of tables? Divs or what? I am using Dreamweaver and am a novice dreamweaver user and have just recently stopped using iframes so any help will be appreciated. You are looking at the right line and I want the caret to the right and powered by centered. Thanks!
zro@rtv
04-06-2005, 08:18 PM
What should I use instead of tables? Divs or what?

Yeah.... well hard to say.... not seeing the entire layout.... or is this the whole page.... just a login... You should write your markup semantically and style those elements w/ css...
css drive :: tableless forms (http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/)
pbjorge12
04-06-2005, 08:23 PM
It is the whole page -It's just a login to an admin section...But I want to make a page with a layout similar to this - http://wiredphp.net - And this is just a basic design/color scheme that I plan to use w/ my wholse site. What should I use? And is it safe to store my username/password in a MySQL database unencrypted?
zro@rtv
04-06-2005, 08:29 PM
prolly shouldn't do this.. you should do it yr self... and learn....
heres a VERY ruff mockup just as an example....
not very elegant.... just tableless.... CHECK THAT CSS DRIVE LINK (above)



<style type="text/css">
<!--
#panel {
width:300px;
}

label {
float:left;
margin-left:0.5em;
margin-right:0.5em;
}

.box {
display:block;
margin:0.5em;
}

form {
text-align:center;
padding-top:1em;
padding-bottom:1em;
}

.pwrd {
text-align:center;
}

.rght{
float:right;
display:block;
}

-->
</style>
</head>

<body>

<div id="panel">
<h1>&raquo; admin login &laquo;</h1>

<form class="box" action="process.php" method="post">
<div class="box">
<label for="username">username:</label>
<input type="text"name="username" size="20">
</div>
<div class="box">
<label for="pw">password:</label>
<input type="password" name="pw" size="20">
</div>
<input class="box" type="submit" value="Login">
</form>
<div class="box"><span class="rght">^</span><span class="pwrd">powerd bi</span> </div>
</div>



as far as that site.... well.... you can look at their css...
http://wiredphp.net/styles.css

...but they are using tables (yuck)....
if u just want 3 column layout (http://www.google.com/search?q=3+column+css&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:en-US:official) ... google is your friend :)
pbjorge12
04-06-2005, 08:56 PM
prolly shouldn't do this.. you should do it yr self... and learn....
heres a VERY ruff mockup just as an example....
not very elegant.... just tableless.... CHECK THAT CSS DRIVE LINK (above)



<style type="text/css">
<!--
#panel {
width:300px;
}

label {
float:left;
margin-left:0.5em;
margin-right:0.5em;
}

.box {
display:block;
margin:0.5em;
}

form {
text-align:center;
padding-top:1em;
padding-bottom:1em;
}

.pwrd {
text-align:center;
}

.rght{
float:right;
display:block;
}

-->
</style>
</head>

<body>

<div id="panel">
<h1>&raquo; admin login &laquo;</h1>

<form class="box" action="process.php" method="post">
<div class="box">
<label for="username">username:</label>
<input type="text"name="username" size="20">
</div>
<div class="box">
<label for="pw">password:</label>
<input type="password" name="pw" size="20">
</div>
<input class="box" type="submit" value="Login">
</form>
<div class="box"><span class="rght">^</span><span class="pwrd">powerd bi</span> </div>
</div>



as far as that site.... well.... you can look at their css...
http://wiredphp.net/styles.css

...but they are using tables (yuck)....
if u just want 3 column layout (http://www.google.com/search?q=3+column+css&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:en-US:official) ... google is your friend :)


Thanks for all your help! I have one more question...What is so bad about tables?
zro@rtv
04-06-2005, 09:01 PM
google is your friend (http://www.google.com/search?q=tables+vs+css&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:en-US:official)

tables are for tabular data... like multiplication tables.
css is for design and layout.
nested tables dont make any sense, semantically.... decreases accessability and search engine ranks...
also inabilty to creat truly fluid action (float is yr friend)

really, i guess only nerds care.... but truly it is "correct".

theres more on that i guess.... but im sure you'll figure it out.
search search search
pbjorge12
04-06-2005, 09:12 PM
google is your friend (http://www.google.com/search?q=tables+vs+css&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:en-US:official)

tables are for tabular data... like multiplication tables.
css is for design and layout.
nested tables dont make any sense, semantically.... decreases accessability and search engine ranks...
also inabilty to creat truly fluid action (float is yr friend)

really, i guess only nerds care.... but truly it is "correct".

theres more on that i guess.... but im sure you'll figure it out.
search search search

I'll be sure to search next time...Thanks!