...

View Full Version : How do I get my text to align with the rest of the page?



newcodersipher
11-21-2008, 04:19 PM
Hi everyone

Let me first say how awesome it is for the web to have a place like this where other html coders can relate. I'm new to the scene and enjoying it.

So onto my question..
I'm an assistant on a web design project and I'm having trouble aligning text on a website. I used divs on a WYSIWYG editor to place the text and when I opened the page everything looked fine, of course that was because it was done on this computers resolution specs.

Now if you look you will see that when you are either:
A) On a different resolution on another computer the text look ambiguous and doesn't align propery
B) Minimizing the window or changing its shape the text also doesn't align.

So my question is, how do I resolve this matter.
Any html pro's or programmers in whatever arena would be truly appreciated in taking a look at this issue for me.

Oh and about styles..I don't know much about css as I'm still a beginner and I'm thinking I can't even use styles since I already have that <style> code in there already, but it's not a css one. So I've written that off.

Here is the website so you can see the issue (assuming you're not on 1280 for your width in resolution and not in full screen).

URL - http://blendsphere.com/mailconnect/

Once at the site you can pull up the html code to see it too.
I'll paste the code down below too if you don't want to go there.

Again thanks for any support or solutions on this.
I am relatively new to the web design world so if you do have any solutions if you could make it brief that would be fantatstic.

Ok thanks again. Please enlighten this noob, so far I've been enjoying html and hope to do so for much longer.

Alright then.

-- CODE BELOW THIS LINE --

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Untitled</title>
<script>
window.resizeTo(1280, 1024);
</script>

<style>
.txt{font-family:Tahoma; font-size:11px; color:#C2D7E9; padding-left:15px; padding-right:15px;}
.href{font-family:Tahoma; font-size:11px; color:#C3AD31; text-decoration:none;}
.tab1{font-family:Tahoma; font-size:11px; color:#003466; font-weight:bold;}
.tab2{font-family:Tahoma; font-size:11px; color:#C2D7E9; }
</style>
</head>

<body topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0">
<table width="100%" align="center">

<tr>
<td rowspan="10" width="50%" height="100%" background="images/bg1222.jpg" style="BACKGROUND-POSITION: right top; BACKGROUND-REPEAT: repeat-y"></td>
<td rowspan="10" width="1" bgcolor="#c2d7e9"></td>
<td colspan="2">
<object style="WIDTH: 944px; HEIGHT: 46px;" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0">
<param name="movie" value="images/blendconnect/header.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#C2D7E9">
<embed style="WIDTH: 944px; HEIGHT: 46px;" src="images/blendconnect/header.swf" quality="high" bgcolor="#C2D7E9" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</embed>
</object>
</td>
<td rowspan="10" width="1" bgcolor="#c2d7e9"></td>
<td rowspan="10" width="50%" height="100%" background="images/bg1223.jpg" style="BACKGROUND-POSITION: left top; BACKGROUND-REPEAT: repeat-y"></td>
</tr>

<tr>
<td colspan="2" width="944" height="54" background="images/blendconnect/blendconnectdiv.jpg" align="middle" valign="top">
</td>
</tr>

<tr>
<td colspan="2" width="944" height="756" background="images/blendconnect/blendconnectback.jpg" align="middle" td="">
<div class="centerdiv"><div style="Z-INDEX: 100; LEFT: 169px; WIDTH: 600px; POSITION: absolute; TOP: 138px; HEIGHT: 44px">
<p align="left"><font face="Arial" color="#0d446d" size="2"><strong>Stay connected
with other Multiracial &amp; Multicultural
enthusiasts</strong></font></p></div>
<div style="Z-INDEX: 100; LEFT: 173px; POSITION: absolute; TOP: 240px"><font face="Arial" size="1">Please enter your name and e-mail address above</font></div>
<div style="Z-INDEX: 100; LEFT: 172px; POSITION: absolute; TOP: 287px">
<p align="left"><font face="Arial" size="2"><strong>Other benefits
include:<br></strong>- Ability for immediate networking with other
Multiracial &amp; Multicultural enthusiasts<br>- Invitations to online
conferences<br>- Free access to group meetups around the
country<br>- Frequent news snippets on the latest pertaining to
the community at large<br>- Immediate notices*for the latest updates
on BlendSphere and its sister sites</font></p></div>
<div style="Z-INDEX: 100; LEFT: 172px; WIDTH: 602px; POSITION: absolute; TOP: 165px; HEIGHT: 44px">
<p align="left"><font face="Arial" size="2">
Join our mailing list and get immediate access
to live e-mail conversations and exchanges online, delivered right to your inbox.<br><form action="http://blendsphere.com/blendconnect/blendconnect.php" method="post"><input type="hidden" name="recipient" value="blendconnect@blendsphere.com"><input type="hidden" name="subject" value="Form Response"><input type="hidden" name="required" value="e_mail"><input name="e_mail"><input type="submit" value="Submit"></form></p></div></font></td>

<tr>
<td colspan="2" width="944" height="33" background="images/blendconnect/trademarkblendconnect.jpg" align="middle" valign="top">
</td>
</tr></table>

</body>
</html>

effpeetee
11-21-2008, 04:25 PM
Welcome to the forum.

I thought that I would show you this site (http://www.hotdesign.com/seybold/)as someone else will if I do not.

Best wishes.

Frank

jcdevelopment
11-21-2008, 04:25 PM
hey newcoder-

the very first problem you have is this bad boy right here


<div style="z-index: 100; left: 169px; width: 600px; position: absolute; top: 138px; height: 44px;">

That absolute position is not necessary here. If you are aligning text or a div onto a table or background image always use padding or margins. There is no reason to use positioning here.

try this instead, you will need to play with this for a bit to get it right though.


<div style="z-index: 100; padding-left:20px; width: 600px; position: absolute; padding-top: 45px; height: 44px;">
<p align="left">
<font size="2" face="Arial" color="#0d446d">
<strong> Stay connected with other enthusiasts</strong>
</font>
</p>
</div>

look into using link sheets for CSS when you learn more about the language instead of in-line CSS. Let us know if you have questions.

newcodersipher
11-21-2008, 05:19 PM
Hey thanks jc for that

I think that may have solved it.
Ok and when you said "play with it a bit" you mean in regards to the padding-left and padding-top variables right? So that it is placed correctly..such that whenever someone changes their window size or views the page in another resolution it will come up correctly right?

Also one last thing I noticed it moves with the background only for "Stay connected with other enthusiasts" but when it comes to the text below and the form and stuff they don't move too. How may I resolve this?

Thank you so much jc

Also thank you effpeetee I browsed that page, I'm gonna have a more in depth look later on that today.

Ok

hey newcoder-

the very first problem you have is this bad boy right here


<div style="z-index: 100; left: 169px; width: 600px; position: absolute; top: 138px; height: 44px;">

That absolute position is not necessary here. If you are aligning text or a div onto a table or background image always use padding or margins. There is no reason to use positioning here.

try this instead, you will need to play with this for a bit to get it right though.


<div style="z-index: 100; padding-left:20px; width: 600px; position: absolute; padding-top: 45px; height: 44px;">
<p align="left">
<font size="2" face="Arial" color="#0d446d">
<strong> Stay connected with other enthusiasts</strong>
</font>
</p>
</div>

look into using link sheets for CSS when you learn more about the language instead of in-line CSS. Let us know if you have questions.

newcodersipher
11-21-2008, 05:25 PM
Well I tried it jc and it still doesn't work properly.
No matter how far to the left I want it to go (because Stay connected ends up being in the middle of the screen) it won't go anymore to the left. Any thoughts?

jcdevelopment
11-21-2008, 06:01 PM
your major problem is that you, or the WYSIWYG, are using position absolute. That is not necessary. use padding's and margins. The real and only reason, IMO, to use absolute is for a pop up CSS window. Use padding and margins and if you need extra help PM me and we can try and figure this out if need be.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum