The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Header banner centre div, Trying to make the main header banner of my site central
aBhorsen
post Feb 28 2012, 01:52 PM
Post #1





Group: Members
Posts: 6
Joined: 28-February 12
Member No.: 16,594



Basically I want my site centre aligned so that no matter the browser the inherent properties are that the header is central and the content divs are central.

I appreciate that the banner will be too big at 750px for some browsers but assuming the user has a browser that fits the page in it's entirety, how do I have the banner and site central?

That feels like a poor explanation.

My css for my header currently looks like:

#header {
width:750px;
height:154px;
background-position:center;
color:white;
background-image:url(../images/header.jpg)
}

As it stands, the background-position is doing nothing.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 28 2012, 01:57 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE
As it stands, the background-position is doing nothing.
Technically, it is centering the background image within the #header element. But my guess is that the header element size (specified by the width and height properties) is the same as the image size. Centering a 750px image within a 750px div isn't going to look very different from left-aligning (or right-aligning) a 750px image within a 750px div.

To center the div elements (both for your header and for your content), see:
http://www.w3.org/Style/Examples/007/center.html
http://dorward.me.uk/www/centre/

Since this is about CSS rather than markup, I'm moving it to the CSS forum.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
aBhorsen
post Feb 28 2012, 01:59 PM
Post #3





Group: Members
Posts: 6
Joined: 28-February 12
Member No.: 16,594



QUOTE(Darin McGrew @ Feb 28 2012, 06:57 PM) *

QUOTE
As it stands, the background-position is doing nothing.
Technically, it is centering the background image within the #header element. But my guess is that the header element size (specified by the width and height properties) is the same as the image size. Centering a 750px image within a 750px div isn't going to look very different from left-aligning (or right-aligning) a 750px image within a 750px div.

To center the div elements (both for your header and for your content), see:
http://www.w3.org/Style/Examples/007/center.html
http://dorward.me.uk/www/centre/

Since this is about CSS rather than markup, I'm moving it to the CSS forum.


Magic,

Thank you Darin. That gives me a good place to start. Cheers for the links.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th April 2024 - 03:57 PM