PDA

View Full Version : text not lining up


marcia
04-03-2009, 10:40 PM
I've done this at least 100 times and can't get it right. Not sure if it's the program, my computer or me. I have followed Janine Warner's instructions to a T and yet the left and right text doesn't line up. The only way I can get it to line up is to set both the top margins to 0. I've piggy backed the problem to a web site (with an old unused banner) I did:

www.teliorestaurant.com/untitled-9.html (http://www.teliorestaurant.com/untitled-9.html)

Where is my code wrong?

mangofreak
04-04-2009, 12:49 AM
Try this out:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #009FFF;
}
#container {
background: #FF00FF;
width: 894px;
margin-right: auto;
margin-left: auto;
position:relative;}
#banner {
margin: 3px;
}
#rite {
width: 350px;
margin-top: 15px;
margin-right:20px; float:right;}
#left {
float: left;
width: 350px;
margin-top: 15px;
margin-left: 20px;
}
-->
</style>
</head>

<body>
<div id="container">
<div id="banner"><img src="http://www.teliorestaurant.com/outdoor3sak-2figsheaderorg7.jpg" width="888" height="170" alt="iuh" /></div>

<div id="left">Content for id "left" Goes Here</div><div id="rite">Content for id "rite" Goes Here</div>


</div>
</body>
</html>

marcia
04-04-2009, 07:50 PM
Yes, that puts the text on the same line, but then other things happen. 1. the rite column is not 390px from the left 2. When I type in additional text, the right column moves to the left and will extend beyond the 350px column width out of the div tag. ?????????

mangofreak
04-04-2009, 10:25 PM
Why do you need the rite col to have 390px of left margin?
Check it out. The top one is your code the bottom is mine:

http://jcacreative1.com/testalign.php

Try this out. I created similar layout as you did, changed the ames in case the ones you used are cursed ;)and added few extra css properties:

<div id="shell" style="width: 894px;margin-right: auto;margin-left: auto;background: #FF00FF; clear:both;">
<div id="header" style="margin:3px;"><img src="http://www.teliorestaurant.com/outdoor3sak-2figsheaderorg7.jpg" width="888" height="170" alt="iuh" /></div>

<div id="cols_wrap" style=" width:100%; position:relative">

<div id="leftcol" style="float: left; width: 350px;margin-top: 15px;margin-left: 20px; position:relative" >left column</div>
<div id="rightcol" style="width: 350px; margin-top: 15px;float:right; position:relative">right column</div>
<div id="footer" style="clear:both;"></div>
</div>
</div>


Now the bottom sample looks the same in FF, IE, Safari

marcia
04-05-2009, 05:39 PM
"Why do you need the rite col to have 390px of left margin?"

just to let you know, that question has set me to thinking. Actually the 2 columns together are supposed to add up to 894px with 20 px as the left and rite margin, and 20px in the center. I used the 390 as I was frustrated with my own numbers and that is what JW suggested for a container of 790px.

The code you sent is fine but not exactly what I intended, so I am going back to the correct numbers using 894 as a starting point. There is just a 15px top row that I can't get to match. On my DW pg if I set the left top margin to 0 is looks ok, but when I bring it into a browser it still doesn't allign. I need to work more to understand her directions, as I can't understand why she would give directions in an online course and not be correct. She used a 790px container - sorry if I mis-led you.

I'll be back on this asap, as I have to go out now.

mangofreak
04-06-2009, 12:59 AM
Some tutorials do their best to provide help but they are not always right. I would suggest to take the best of it and test your own way.

Back to your reply. 894/2 = 447-40(20 for each side) = 407

so your column width should be 407px.

;)

marcia
04-06-2009, 01:22 AM
hi,

Maybe I'm too trusting, but I need to see this out. It's late now and I'm tired, and I have a very hectic week ahead..

Anyway, I think that the columns need to be 417 as there would be 3 20px (left, center, rite)

"Grandpa: "I'm a slow learner and I forget fast" what does this mean? Are you a grandpa? Your ativar photo doesn't look it...

mangofreak
04-06-2009, 01:39 AM
:) I know. What can I say. Young at heart. That's me.

Goon night.

marcia
04-06-2009, 11:36 PM
Hi Mango,

Great to be young at heart!

Good news. Your questioning me on the px set me to re-evaluate the situation. I added 40px to the rite div, margin-left, and made it 457. It still looks weird on the DW screen, but I looked at it in the IE and Firefox browsers, and the columns were aligned.

Thank you so much for your diligence and helping me to 'dig deeper' and find the problem. (Of course I still need to put it on the web to see how THAT looks.) I'll let you know when I post it.

Your alternate ideas will help me in the future. I especially liked the last php that you sent. You must be a real pro, knowing php!