35 replies [Last post]
prk72
Offline
Regular
Last seen: 13 years 1 week ago
Timezone: GMT+5
Joined: 2007-08-01
Posts: 13
Points: 0

I'm very new to css and have this question...how do I incorporate the center tag into my css?

div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}

W3Schools.com

"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)

Free Web Building Tutorials

At W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.

W3Schools - The Largest Web Developers Site On The Net!

Razer
Razer's picture
Offline
Enthusiast
Thamel
Last seen: 10 years 12 weeks ago
Thamel
Timezone: GMT+5.75
Joined: 2007-07-01
Posts: 94
Points: 5

Center Template

margin:0 auto;

Try this code

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Don't forget a doctype!

Don't forget a doctype!

Verschwindende wrote:
  • CSS doesn't make pies

prk72
Offline
Regular
Last seen: 13 years 1 week ago
Timezone: GMT+5
Joined: 2007-08-01
Posts: 13
Points: 0

thepineapplehead wrote:Don't

thepineapplehead wrote:
Don't forget a doctype!

Just to prove how new I am to this I need to ask what is a doctype?

Thanks.

prk72
Offline
Regular
Last seen: 13 years 1 week ago
Timezone: GMT+5
Joined: 2007-08-01
Posts: 13
Points: 0

Razer wrote:margin:0

Razer wrote:
margin:0 auto;

Try this code

I tried it in the div.container and it doesn't look like anything changed when viewed in my browser.

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 2 years 45 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Oops

Shhhhhh shhhhh...

prk72 didn't say anything, prk72 knows what a DocType is!

*Whispers in prk72s ear* Sneak off to read this page then come back, DocTypes are very important around here. *Tiptoes off, checking both ways*

http://www.divitodesign.com/blog/2007/05/what%E2%80%99s-a-doctype-and-what-does-it-do/

edit P.S. That was just the first article I found in google, but there will be much better ones out there. I only just read it myself and found it a little lacking!

Have YOU said Hello yet?
The CSSCreator Hello Thread

prk72
Offline
Regular
Last seen: 13 years 1 week ago
Timezone: GMT+5
Joined: 2007-08-01
Posts: 13
Points: 0

burlster wrote:Shhhhhh

burlster wrote:
Shhhhhh shhhhh...

prk72 didn't say anything, prk72 knows what a DocType is!

*Whispers in prk72s ear* Sneak off to read this page then come back, DocTypes are very important around here. *Tiptoes off, checking both ways*

http://www.divitodesign.com/blog/2007/05/what%E2%80%99s-a-doctype-and-what-does-it-do/

edit P.S. That was just the first article I found in google, but there will be much better ones out there. I only just read it myself and found it a little lacking!

Thanks.

prk72
Offline
Regular
Last seen: 13 years 1 week ago
Timezone: GMT+5
Joined: 2007-08-01
Posts: 13
Points: 0

thepineapplehead wrote:Don't

thepineapplehead wrote:
Don't forget a doctype!

My DOCTYPE is XHTML 1.0 Transitional. I hope this helps.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

.container is 100% wide

.container is 100% wide therefore it won't be possible to center if it takes up 100% of the viewport width, it will need to be less than 100% or another width value but one that is less than it's parent width

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

prk72
Offline
Regular
Last seen: 13 years 1 week ago
Timezone: GMT+5
Joined: 2007-08-01
Posts: 13
Points: 0

Hugo wrote:.container is

Hugo wrote:
.container is 100% wide therefore it won't be possible to center if it takes up 100% of the viewport width, it will need to be less than 100% or another width value but one that is less than it's parent width

I would love to be able to say "Great, that makes sense I'll make those changes now" but in truth about the only thing I understood was if the value is set to 100% then it would take up what ever screen is visable, what I don't understand is what changes I can make to have it centered on what ever screen is visable.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Sorry thought it was clear

Sorry thought it was clear Sad the changes you will need to make is to reduce the width of .container so that it is less than it's parent width which is body/html and which takes up ALL available viewport(the bit of the browser that renders the page i.e not the bit that is taken by the sidebar history etc) width; with it narrower you can now apply auto margins to center it within the viewport.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

what are you actually trying

what are you actually trying to center? at the moment you have a two column fluid full width layout so what isn't centered?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

prk72
Offline
Regular
Last seen: 13 years 1 week ago
Timezone: GMT+5
Joined: 2007-08-01
Posts: 13
Points: 0

Hugo wrote:Sorry thought it

Hugo wrote:
Sorry thought it was clear Sad the changes you will need to make is to reduce the width of .container so that it is less than it's parent width which is body/html and which takes up ALL available viewport(the bit of the browser that renders the page i.e not the bit that is taken by the sidebar history etc) width; with it narrower you can now apply auto margins to center it within the viewport.

Thanks, I'm beginning to understand. Would it be too much trouble to show me an example?

Thank you again.

prk72
Offline
Regular
Last seen: 13 years 1 week ago
Timezone: GMT+5
Joined: 2007-08-01
Posts: 13
Points: 0

Hugo wrote:what are you

Hugo wrote:
what are you actually trying to center? at the moment you have a two column fluid full width layout so what isn't centered?

If I add the html center tag after the body tag and at the end before the closing body tag I get what I want. Please see the attached. I'm trying to accomplish this without with using my stylesheet and not the html center tag. Thanks.

AttachmentSize
Picture1.jpg 59.32 KB
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You don't get what you have

You don't get what you have pictured in the screen capture, so you must have something else going on can you now post ALL the code that you have that is giving you this result so that we can see what is going on.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

prk72
Offline
Regular
Last seen: 13 years 1 week ago
Timezone: GMT+5
Joined: 2007-08-01
Posts: 13
Points: 0

Hugo wrote:You don't get

Hugo wrote:
You don't get what you have pictured in the screen capture, so you must have something else going on can you now post ALL the code that you have that is giving you this result so that we can see what is going on.

Okay, but before I do I just want to make sure I do it properly. If I understand correctly I need to place <.code.> (ignore the .) before and after my code and use & l t ; instead of < inside my code. Is this correct or did I interpret it wrong.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You just need to place all

You just need to place all code within
<code>

</code>

tags

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

prk72
Offline
Regular
Last seen: 13 years 1 week ago
Timezone: GMT+5
Joined: 2007-08-01
Posts: 13
Points: 0

Hugo wrote:You don't get

Hugo wrote:
You don't get what you have pictured in the screen capture, so you must have something else going on can you now post ALL the code that you have that is giving you this result so that we can see what is going on.

This is my style sheet.

div.container
{

width:50%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}

And this is my aspx page.

<%@ Page Language="VB" %>

Untitled Page

W3Schools.com

"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)

Free Web Building Tutorials

At W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.

W3Schools - The Largest Web Developers Site On The Net!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yes well you have now

Yes well you have now reduced the width of that element but haven't observed what was said earlier about margins!

centering with CSS is achieved using margins set to auto.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

prk72
Offline
Regular
Last seen: 13 years 1 week ago
Timezone: GMT+5
Joined: 2007-08-01
Posts: 13
Points: 0

Hugo wrote:Yes well you have

Hugo wrote:
Yes well you have now reduced the width of that element but haven't observed what was said earlier about margins!

centering with CSS is achieved using margins set to auto.

If you read above I already tried that and nothing changed, perhaps I didn't do it correctly.

prk72 wrote:
Razer wrote:
margin:0 auto;

Try this code

I tried it in the div.container and it doesn't look like anything changed when viewed in my browser.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Read that series of comments

Read that series of comments and the order , did you try the auto margins before placing the DTD in the page?

What browser are you using?

Have you tried the auto margins again? rather than just say it didn't work before.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

prk72
Offline
Regular
Last seen: 13 years 1 week ago
Timezone: GMT+5
Joined: 2007-08-01
Posts: 13
Points: 0

Hugo wrote:Read that series

Hugo wrote:
Read that series of comments and the order , did you try the auto margins before placing the DTD in the page?

What browser are you using?

Have you tried the auto margins again? rather than just say it didn't work before.

I know I did everything in order and I said from the beginning that I am very new, I don't know what DTD means and I agree with another post where you are of no help and only frustrate those that don't have a clue. If you really want to help show an example so we can actually see what we need to do. I try elsewhere.

prk72
Offline
Regular
Last seen: 13 years 1 week ago
Timezone: GMT+5
Joined: 2007-08-01
Posts: 13
Points: 0

I came back because I just

I came back because I just need to tell you that I asked the same question on forums.asp.net and got a straight answer that worked in a matter of a few minutes. You can see for youself and should learn from it.

http://forums.asp.net/p/1141112/1835982.aspx#1835982

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

being very new is not an

being very new is not an excuse but seems to held up as one all too often.

I asked pertinent questions and believe it or not they were without rancour, the info was there in the posts I was hoping that you could - to some extent - work through things yourself , with guidence.

It is not a job of a forum to spoon feed answers, although we do all too often, this beliefe that the answers are simply to be had for the asking is wrong and somewhat distructive to the good nature of forums.

I do not appreciate your comments regarding another post and your aggrement with the poster that I was no help and that I frustrate people those that don't have a clue what post? link me to it please. who on earth are you that you should talk to me like that? have a think about how many people I have helped and for what? I wonder sometimes, some of us have learn't the hard way our craft I have invested a lot of my time in learning, and without recource to ever seeking help, yet I am happy to help others as I believe it's important to do so, but posts such as yours make me wonder at times whether it's worth it.

That you sought help elswhere says it all really, good luck with learning and I hope it goes well for you.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

prk72 wrote:I came back

prk72 wrote:
I came back because I just need to tell you that I asked the same question on forums.asp.net and got a straight answer that worked in a matter of a few minutes. You can see for youself and should learn from it.

http://forums.asp.net/p/1141112/1835982.aspx#1835982

Well all well that ends well then isn't it; just a shame you couldn't have worked out the simple answer that was already within this thread :shrug:

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 3 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

The funny thing is,

The funny thing is, Hugo.
You have the exact same answer to the OP in a previous post.
Just too dense to understand and comprehend things for themselves I guess.

Whaaa? You want me to learn things on my own? BAH!

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Triumph (not verified)
Anonymous's picture
Guru

prk72 wrote:I came back

prk72 wrote:
I came back because I just need to tell you that I asked the same question on forums.asp.net and got a straight answer that worked in a matter of a few minutes. You can see for youself and should learn from it.

http://forums.asp.net/p/1141112/1835982.aspx#1835982

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 2 years 45 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Just outright silly!

Its a shame when people like that turn. Almost makes me feel stupid for trying to help.

There was a thread recently where I actually stood up for the OP because the response was unneccessarily aggressive, but Hugo doesn't deserve that! He has neither been patronising or impatient which is commendable given he helps so many beginners with the same questions day in, day out.

"You can see for youself and should learn from it." - Did you? Or were you just given some Copy and Paste code so will be back to ask the same question in no time at all?

This is getting silly, and has put me in a grump before my day has even begun. I'm going to have a look for a happier thread to throw my two pennies in on Smile

Have YOU said Hello yet?
The CSSCreator Hello Thread

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I re-read my replies and

I re-read my replies and they were to the point, in actual fact I was neither loosing patience or irritated by the responses just slightly bemused that confusion was being found in something that was in essence fairly simple and actually a solution had been provided as long as the OP just spent two seconds extrapolating the information, but instead they sought to find confusion and in fact wanted the cut and paste example without any hassle!

It is an entirely unacceptable stance to take and I find it abhorrent that these types of posters regard forums as a type of automated service where an answer is supplied as if from a stored FAQ database.

Duece was right I had been answering something remarkably similar moments earlier so that also tells us that the poster couldn't be ar*ed to do a quick search/trawl through the posts.

It did actually irritate me and after a day of trying to get to grips with something that meant hours spent reading guides , testing, reading again, rewriting it, testing again, but that's what I'm being paid for , not to trot of to a forum and ask someone to do it for me!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 2 years 45 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

:)

Not to worry Hugo,

On the whole your skills, help and patience is very much appreciated on this forum. How many other members of this forum can claim to have a thread entitled something similar to "HAPPY BIRTHDAY HUGO!!!" with 62 responses!!

Impressive... so once again Thanks, and don't get de-motivated by pointless posters (ooh, that has a ring to it, dontcha think)...

John

Have YOU said Hello yet?
The CSSCreator Hello Thread

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

nah not de-motivated, just

Smile

nah not de-motivated, just frigging irritated when accusations are levelled at me for being unhelpful on threads, or that I am in some way unsympathetic towards beginners as nothing could be further from the truth.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 2 years 45 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

The Solution

We all know that H, don't let it get to you!

Have a beer Smile

Not even 9.30am? So what! I would...

Have YOU said Hello yet?
The CSSCreator Hello Thread

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

(No subject)

Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 2 years 45 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

SuperStar

No wonder you have over 10'000 posts Wink

When do I get my next star? Is it 500?

J

Have YOU said Hello yet?
The CSSCreator Hello Thread

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

500 is your next

Smile

500 is your next milestone..or is that millstone :?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 2 years 45 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Mari-Oh!

Milestone, but it's a long way off. I'm not even half way there Sad

Why couldn't the forum be like an old computer game. Whack it in the 'Game Genie' then play around with codes until it loads up with a considerably larger amount of posts under your name.

I remember the Nintendo Entertainment System's Game Genie. You would literally whack it in with the game in it, then type in random codes. I did it with Super Mario Brothers (the original) for days. Then you load it up, check the difference (eg. ooooh, Mario has turned blue and luigi had turned straight), and write down your findings.

This was one of those 'should have been with an inside voice' type comments wasn't it Shock

Have YOU said Hello yet?
The CSSCreator Hello Thread