PDA

View Full Version : Positioning nightmare


mouski
06-16-2009, 04:13 PM
Hi, I am fairly new to DW, I am designing a super simple site but I am having trouble centering my texts to the navigation bar so that it looks consistent whether you view it in IE, or Safari or whatever.Check it at
www.rayank.co.uk (http://www.rayank.co.uk)
Look at the about me section, the text is off-center...

Any help would gr8

thanks

domedia
06-16-2009, 05:34 PM
Just follow the same approach you did with all the other elements on the website. This is the only element on the website you have not centered.

ravm
06-16-2009, 05:36 PM
I looked at your site and it looks good in both IE and FF on a PC. I don't have access to my Mac right now, so I can't comment there. Small discrepancies in your website between different browsers is probably okay, since people generally will never know the difference between two browsers.

However, if you're a perfectionist like me, I'm sure you'll want to play around with the code a bit, to um, get it perfect. So...

Looking at the source code of your site, it looks like you're using two things for the alignment of your images. The first is a div tag with align=center. The second is hspace and vspace. Although widely supported, these are generally considered deprecated. So I would suggest using CSS for the alignment, if you want to go there. It looks like you have a style sheet now, so what you would do is remove the align=center from your div and give your div an id. Then add some style to your style sheet. As an example, you could use the following code.

<div id="mainimg">Then put the following in your style sheet:
#mainimg {margin-right:auto;margin-left:auto;width:800px;}You would need to change the width to whatever the width of your page is. That's really just a start; you may need to make additional changes to customize it for your website.

Best of luck,
<link removed>

ravm
06-16-2009, 05:53 PM
Sorry, now that I read domedia's reply, I see you were referring to the text alignment of the about page. You don't necessarily need to center it. If you open your style sheet, you'll see the area with the text has a div id=main. So look for #main in your CSS. Change your left margin. Right now it is 300px. It looked like 600px would center it better. But you can experiment. DISCLAIMER: I am not a CSS expert, so there may be better ways to approach this...

This is the code you're looking for:
#main #navigationBar #about {
padding-top: 30px;
width: 450px;
text-align: center;
margin-left: 300px;
}Change it to:
#main #navigationBar #about {
padding-top: 30px;
width: 450px;
text-align: center;
margin-left: 600px;
}OR...you could play around with the padding. This is an alternate to the solution above. In this code, I removed the width, which was 450px, and changed padding-top to padding.

#main #navigationBar #about {
padding: 30px 300px 30px 300px;
text-align: center;
}The way I play with this is using the developer's tools extension for FF (https://addons.mozilla.org/en-US/firefox/addon/60). If you don't have it, I would suggest using it.

Have fun,
<link removed>

domedia
06-16-2009, 07:53 PM
Excellent advice;

ot: ravm, make sure you keep your posts clean. http://www.dreamweaverclub.com/forum/faq.php?faq=vb_board_usage#faq_promote

mouski
06-17-2009, 06:57 AM
thanks, I'll try that. In reply to you domedia, it's very strange but the "about me" section IS a copy of the "contact" page which works on the contact page, and that's why I just couldn't understand!

I'll get right on it ravm...

cheers

mouski
06-17-2009, 10:30 AM
Yes it works, one thing though, why is it that on my DW workspace the text is completely off center and that on IE and Safari it's fine?

Thanks again