CSS Image Positioning

CliffyBiro

CliffyBiro

CliffyBiro

Caporegime
Joined
1 Mar 2008
Posts
26,303
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.
 
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)
 
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)
Click to expand...

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. :p


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

Thanks very much. :)
 
Last edited:
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
 
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
Click to expand...

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/
 
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!
 
Last edited:
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!
Click to expand...

Ah, OK. :)

Thanks for that. Will get that sorted ASAP.
 
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!
 
Edward01's idea 'might' work - as IE6 will be thrown into quirks mode without doctype, however it'll still revert to this whenever it stumbles across non-strict interpretation of your doctype - so you may find your site keeps going back to aligning funny (also won't work with any older browsers, so I'd always include the fix listed above just for broad compatibility)

You can read more here, it's a pretty common error:
http://codeassembly.com/How-to-center-a-page-layout/

On another note, it's also worth building a standard 'browser reset' css file that irons out all these issues and include that as a starting point for any design - this'll mean you avoid hitting the same issues again and again!
 
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??
Click to expand...

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


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!
Click to expand...

You are just too much help. :D

Thanks muchly! :)
 
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: 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
	font-size: 62.5%;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

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 :)
 
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 :)
Click to expand...

Thanks. :D

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

http://sherbertcreatif.com/up/files/1/hardlightmedia.jpg
Click to expand...

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.
 
You must log in or register to reply here.
Back
Top Bottom