By cbd1012 on

Greetings ALL
i am working onmy first DRUPAL site and pretty much new to everything . I am trying to position my login form perfectly into the layout i designed for it in photoshop. I am having issues positioning the layout properly into the space. I have been playing around with the margins of the login form elements to get the items to move but it has not been that successful. Please check out the pictures from safari and firefox

THANKS IN ADVANCE FOR YOUR HELP

http://www.clientfit.net/Picture8.png

http://www.clientfit.net/Picture9.png

thanks

⋅ Categories: Drupal 5.x

Comments

dman’s picture

dman commented

Can't really tell where you've been going wrong without a live URL to look at the code for.
So you should get the firefox web developer toolbar and firebug extensions to help you tune your styles on the fly.

If you are just trying to overlay a web page onto a photoshop image ... that will be a strange job....

.dan.
if you are asking a question you think should be documented, please provide a link to the handbook where you think the answer should be found.
| http://www.coders.co.nz/ |

.dan. is the New Zealand Drupal Developer working on Government Web Standards

cbd1012’s picture

cbd1012 commented

i think my css just sucks

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Thanks for posting the screenshots. It's clear that you have some problems with the css positioning, but it would really help if we can see the actual site. Can you put it online and post a link, together with an image of the desired layout?

cbd1012’s picture

cbd1012 commented

www.clientfit.net/BHLA

here is a link to the login form layout
http://www.clientfit.net/BHLA/themes/zen/images/login.gif

THANKS AGAIN I REALLY APPRECIATE IT

tflmike’s picture

tflmike commented

Here's what I would suggest:

1. In your template file: add a class to your outter-most <div>. Change it to something like: <div class="loginWrap">
2. In your css file: set the width and margins to position the elements correctly. Here's an example of what you could do:

.loginWrap {
   width: 225px;
   margin-top: 30px;
}

The user login form has a lot of elements that each have some sort of css styling. Use Firefox's Firebug to check them all out.

One thing that's been a huge help to me is using a CSS wysiwyg editor. I'm on a mac so I use CSSedit (http://macrabbit.com/cssedit/) but if you're on a PC you can find one too. Just search for "wysiwyg CSS editor PC" on Google and I'm sure you can find something for free.

Hope that helps!