CSS Image Positioning

CliffyBiro · 6 May 2009 at 12:34

Lo guys

Pretty much as new to CSS as you can get and attempting to design my website in Dreamweaver.

The problem I have at the moment is the splash page and trying to have the images centered in the middle of the browser at all resolutions.

Here is how it look at my current res of 1400x900:

Any help at all is much appreciated.

Thanks.

CliffyBiro · 6 May 2009 at 13:38

gord said:
A) Your not using the design view right?
B) Your using an external stylesheet right?
C) If you answered yes to both A and B you can use this code to centralise an element on your page:

.element {
width: #px;
margin-left: auto;
margin-right: auto;
}

That should work. Obviously you need to input your element name and your element width.

(If your super new, you need to put the image in an element (such as a div) with the class name associated to this bit of CSS)

Just tried this but it puts the image in the bottom right corner with most of it out of view. Forgive me, I'm not great at this.

EDIT: Scratch that. I must have had a conflicting piece of code somewhere. It's now working.

Thanks very much.

CliffyBiro · 6 May 2009 at 15:50

tsinc80697 said:
Please don't have a page that just says "ENTER". It is a pointless page and puts a lot of people off, it looks very unprofessional unless its leading/pre-loading a flash website or giving an option of flash/html site.

When people visit your site they want to instantly see who you are, what you can do and what work you've done in the past if its going to be a portfolio based website.
Basic simple style is : Logo/Navigation, quick blurb about who/what you do then featured project/latest works etc

Point noted and action taken.

It's not finished yet. There are a few things I need to change and others that still need to be implemented but here's the site now live:

http://www.hardlightmedia.net/

CliffyBiro · 6 May 2009 at 16:13

tsinc80697 said:
Quick note, I'd make the site width 960px. Its the standard used these days so that a very high majority of users can view the entire site without scrolling sideways.

A lot of people are moving to higher resolution monitors and there is a constant debate on whether side widths should be increased, but you've got to think of your target audience. As a designer a lot of potential clients will be viewing the site in IE6 on low res monitors, its naff but its what we generally have to deal with!

Make sure you've tested the site in IE6 and like I said, I'd downsize the site to 960px wide

edit: your twitter post URL is wrong, need a / in there!

edit 2: my bad, your site has dynamic width, if you're doing this then don't have the header repeating as it looks a bit funny! % based width sites are ok but by stretching the site out its prone to having big spaces between elements or cause really long lines of text across a monitor which puts people off reading things!

Ah, OK.

Thanks for that. Will get that sorted ASAP.

CliffyBiro · 6 May 2009 at 16:15

tsinc80697 said:
Just incase you don't have IE6 :

Hmm... not quite sure why it isn't centred...

CliffyBiro · 6 May 2009 at 17:24

Edward01 said:
took me a while but I found the fault. Doesn't centre in IE6 cause you have no doctype decalred. For example you need to put something like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

at the very top of your .html page.

More info

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Do I win an internet cookie??

Sod an internet cookie. I'll post a Maryland Choc Chip in the morning.

katie279 said:
Hi Skippi90,

Welcome to the world of IE6's dodgy CSS interpretation!

The reason that's happening is IE6 doesn't interpret the margin:auto command correctly, instead text-align:center is used to centre block elements (even though they're not text, stupid I know!)

The problem with this is that it'll align your text to the centre too, so you'll need to set it back again, so you'll need markup like this to work in all browsers:

body{
text-align:center;
}

.yourmainpagediv{
text-align:left;
width:960px; //or percentage depending on site
margin: 0 auto;
}

Hope this helps!

You are just too much help.

Thanks muchly!

CliffyBiro · 6 May 2009 at 18:42

tsinc80697 said:
Personally I'd use what Edward has said and you shouldn't need to use te text align trick, its just more markup that can be avoided.

As for a reset.css I use this and it works perfectly

Code:

Codey codey code.....code.

Try to use EM instead of PX for font-size's as well! Using this reset makes 1em = 10px, 1.2em = 12px and so on so its not confusing, just better for scalability

Thanks.

SherberT* said:
Your header is wierd on my 24".

http://sherbertcreatif.com/up/files/1/hardlightmedia.jpg

Yep, I know. Will sort it when I get home from footie later tonight and probably limit the width as well cause that big gap isn't great looking.