PDA

View Full Version : Building my first website


Designer
11-14-2009, 09:21 AM
Hi, I am Ralph, a designer from London. I have a lot of experience as a designer for print and recently I have designed a few websites that were built by other people. I have decided to bite the bullet and learn to build the sites myself. I am using CS3 on a Mac and have nearly finished my first site which is a real job for one of my clients. However, the most complicated page (meet the team) is looking great in all non IE browsers but has one specific problem in IE.
The name and job title sits about 40 px to the right of where they should be. I have put all relevant padding and margins to zero and can't think what else to try. I am drawing a blank with my techy friends so I was hoping someone from this forum might be able to cast their over it - any suggestions will be gratefully received.
http://www.ralphbeckforddesign.co.uk/etmstest/core_team_test.html
Anyone looking at this will see that the code is a mess but it does work apart from the above problem
Someone please help this poor old designer
Regards
Ralph

Corrosive
11-14-2009, 10:03 AM
I can't, for the life of me, see what is causing that.

Designer
11-14-2009, 10:46 AM
Hi Corrosive

Thanks for prompt reply, could you see if any of your esteemed colleagues have any clues?

Regards

Designer

gentleone
11-14-2009, 12:26 PM
It is always good to use a reset.css stylesheet and link this one at first in the <HEAD>

Just try it, because I know that IE is bad with refreshing a page and there might be still a cached padding or margin from another website.

Here is a link to a reset.css file which will reset everything. Just let us know if this helped you out or not and the we can investigate further.

http://meyerweb.com/eric/tools/css/reset/

DWcourse
11-14-2009, 01:23 PM
I can't see why either but that table is very complex and I'd be for some reason one or more cells is being stretched in IE. I can only say from experience that you'll probably go through hell trying to find exactly what's causing it.

Designer
11-14-2009, 01:42 PM
thanks Guys - Gentleone, pardon my ignorance but where should I paste that reset code? Designer

Corrosive
11-14-2009, 01:49 PM
Put it at the start of your stylesheet.

If you'd like a suggestion of a different approach then I reckon you should look at 3 div tags floated left so they line up next to each other. An ID for each that tells it to display the individual photos as a background. Then a class for each that states the overall width of the div and uses padding left and top to place the text exactly where you want it. One div and some styles sure beats the hell out of a load of unpredictable tables ;)

Designer
11-14-2009, 03:58 PM
Hi Guys

I tried the reset code but no cigar - thinking about rebuilding it with divs as suggested by Corrosive - back to the drawing board...Arhhh!
thanks very much for your efforts, if you have any more ideas, please put them down the line as it will take me a long time to remake the page - I've only been doing this for a month or so

gentleone
11-14-2009, 05:34 PM
Here is a good and well explained tutorial about the very basics of CSS.

Mastering CSS (http://www.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/)

Designer
11-15-2009, 12:38 PM
thanks for above tutorial, Just rebuilt page with divs all seems fine but for some reason my wrapper does not wrap around my content and unless I give it a specified hight all the content spills out the bottom of the page - I know this must be very basic stuff for you guys but could someone tell me where I went wrong?
http://www.ralphbeckforddesign.co.uk/etmstest/core_team_div.html

Corrosive
11-15-2009, 12:58 PM
You've probably used some absolute positioning somewhere. Try and use relative for your layout.

domedia
11-15-2009, 05:52 PM
you need to 'clear' those floated elements inside your wrapper div. Adding these two CSS rules will do it:
height: 1%;
overflow: hidden;

Designer
12-09-2009, 12:28 PM
Hi guys and gals. am currently wrestling with the last hurdle in finishing my site I have used images for the top menu and this is fine apart from the fact that 2 of them need drop down menus. I was told by a colleague that you cant do that in dream weaver but it's easy in Fireworks. Ive downloaded a trial version and created the dropdown on the png as per web tutorial, however...Below is the url to what the menu buttons should look like. This is with everything working apart from the dropdown menus I need on 2 of the buttons

http://www.ralphbeckforddesign.co.uk/etmstest/core_team.html

Below is the url to the same page having introduced the png after building dropdown menu stuff into it with Fireworks.

http://www.ralphbeckforddesign.co.uk/etmstest/core_team_ttt.html

You will note that the menu works fine but it wants to sit underneath as opposed to in the row. I have tried everything I can think of but to no avail - any ideas?
surely it shouldn't be this difficult - all help gratefully received
designer

gentleone
12-09-2009, 12:42 PM
I'd recommend to setup the navigation with <ul> and <li>. Check www.cssplay.co.uk for examples and their source code. What you're doing now with javascript (rollover effect and dropdown) can all be done with CSS only.

Corrosive
12-09-2009, 02:39 PM
On a totally aesthetic note. Love the lorries :)

Designer
12-09-2009, 02:49 PM
thank you lorry lover - as you can probably see I am from a design for print background and so am an old dog desperately trying to learn new tricks

Designer
01-22-2010, 07:35 PM
Hi, just to let you guys know that I found someone who wrote some code for me and my menus now work
thanks for all your efforts
Designer