/    Sign up×
Community /Pin to ProfileBookmark

Centering Div

Copy linkTweet thisAlerts:
Mar 01.2008

Hi,

A friend of mine made this design for me in photoshop and i have been working on it as he is unfortunately unable to anymore. [url]http://srobinson.net/Black&White%20Hosting/[/url]

Couple of things id like some help with ?

1) Centering the whole of the site dynamically. Not sure how to go about that
2) Making the gooey div show the background image. The reaosn for doing this is so that i am able to write directly over the top of the image. The same code was used here but unfortunatly it didnt quite work the same way [url]http://www.artofbentomlin.com/ucas/[/url] (Bottom section of the white content area)

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@petewilliamsMar 01.2008 — To center the page you need to enclose it in a container div of fixed width and then center that, e.g.:

HTML:

<div id="container">

<h1>Hey, this page is centered!</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</div>

CSS:

#container {

width: 800px;

margin: 0 auto;

}

EDIT: Just looked at your code, you can just apply this to the content div directly and forget the container.

Not sure I understand the second problem fully, can't you just use:

background-image: url('bg.jpg') ?

Hope that helps a bit,

Pete
Copy linkTweet thisAlerts:
@felgallMar 01.2008 — To center the content of a tag you just apply [b]margin:0 auto[/b] in the stylesheet along with the required width.
Copy linkTweet thisAlerts:
@CentauriMar 02.2008 — The big problem here is all the absolute positioning - that lifts all the elements out of the document flow so that no element can affect the size or position of any others. Your #gooey div has no height due to having no contents within the document flow - no height means no background image can display. The auto side margin method of centering mentioned above also will not work with absolute positioning. Best to keep absolute positioning to a minimum, for special effects where you specifically want something to overlap.
Copy linkTweet thisAlerts:
@scottyrobauthorMar 04.2008 — Hi,

Thanks very much for all your replys.

Centauri: How do you recommend going about this? Wouldnt know where to start if i was to not use absolute positioning..

Regards,

Scott
Copy linkTweet thisAlerts:
@ray326Mar 04.2008 — The short answer is you use floats instead.
×

Success!

Help @scottyrob spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...