Can anybody help with a CSS problem?

Chat about just about anything else
Post Reply
User avatar
Losgann
Level 3
Level 3
Posts: 122
Joined: Mon Aug 25, 2008 9:34 pm
Location: Connecticut, USA

Can anybody help with a CSS problem?

Post by Losgann »

Hello everyone,

I haven't been in the forums for a while, as Real Life™ leaves precious little time for hanging out on the interwebs these days. Still using Mint, though, just upgraded the desktop to Maya with Cinnamon.

I'm trying to get back up to speed with HTML and CSS after being out of the web design field for several years (also trying to get to grips with the whole CMS thing, since I'm an old fogey who used to hand-code static pages!) but I'm having trouble figuring out why something isn't working in CSS and I was hoping maybe somebody here could help me. I'm trying to create a fluid layout which will expand and contract with the browser window, but I'm also trying to set it so that the containing DIV does not expand past a certain point, so that you won't get one long line of text instead of an easily readable paragraph if the browser window is maximized on a 16:9 monitor, for example. I tried to do this using the max-width property, which should work according to my CSS books, but it's not, as evidenced by the screenshot below, and I don't know what I'm doing wrong.

Here's my code:

Code: Select all

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Title</title>
		<style type="text/css" media="screen">
      		body {
    			margin: 0;
    			padding: 0;
				background-color: #00f;
				max-width 1000px;	
			}
			#wrapper {
				margin: 0 auto;
				background-color: #fff;
				border-left: 5px solid #000;
				border-right: 5px solid #000;
				}
                </style>
	</head>
        <body>
	        <div id="wrapper">
			<header>
				<h1>Page Title</h1>
			</header>		
			<div id="main">
				<h1>Welcome</h1>
				<p>Text here</p>	
			</div>
			<footer>
				<p>Copyright notice</p>
			</footer>
		</div>
	</body>
</html>
This code produces the following output:
Image
I am trying to get the white area containing the text no more than 1000 pixels across and centered, with the blue background on either side, and I just can't figure out what I'm doing wrong (this is not the actual page design, of course, just using background color on the DIVs to sort out the layout and see what's where). If anyone is able to point out where my mistake is, I would be very grateful!

User avatar
/dev/urandom
Level 5
Level 5
Posts: 589
Joined: Sun Jul 17, 2011 8:02 pm

Re: Can anybody help with a CSS problem?

Post by /dev/urandom »

Why on earth do you define new HTML elements ("header") instead of just giving them a wrapper like <div class="header">?
Linux is not the only answer! :: eD2k/Kad mirrors for Linux Mint and LMDE.
Users who misspell "Windows" as "Windoze" intentionally will be considered stupid.

Image

User avatar
xenopeek
Level 24
Level 24
Posts: 24324
Joined: Wed Jul 06, 2011 3:58 am
Location: The Netherlands

Re: Can anybody help with a CSS problem?

Post by xenopeek »

The problem is you missed the colon (:) on this line after the property name:

Code: Select all

				max-width 1000px;
So the line should instead read:

Code: Select all

				max-width: 1000px;
As you have put the max-width on the body element, it tucks the content flush with the left edge of the window. If you want it in the middle of the window, move your max-width property to the #wrapper element.
Image

User avatar
Losgann
Level 3
Level 3
Posts: 122
Joined: Mon Aug 25, 2008 9:34 pm
Location: Connecticut, USA

Re: Can anybody help with a CSS problem?

Post by Losgann »

/dev/urandom wrote:Why on earth do you define new HTML elements ("header") instead of just giving them a wrapper like <div class="header">?
Er... that's what one of my books says is the shiny new HTML5 way to do it.
Vincent Vermeulen wrote:The problem is you missed the colon (:) on this line after the property name:
OMG, I feel like such an idiot. I was pulling my hair out ( figuratively speaking) for half the night over a missing colon that I couldn't spot. Thank you for seeing that, and I shall crawl back into my cave of "I suck at the internet" shame now.

User avatar
/dev/urandom
Level 5
Level 5
Posts: 589
Joined: Sun Jul 17, 2011 8:02 pm

Re: Can anybody help with a CSS problem?

Post by /dev/urandom »

Actually it is the XHTML way. The not really recommended one. :)
Linux is not the only answer! :: eD2k/Kad mirrors for Linux Mint and LMDE.
Users who misspell "Windows" as "Windoze" intentionally will be considered stupid.

Image

User avatar
dogsolitude_uk
Level 2
Level 2
Posts: 59
Joined: Sat May 26, 2012 7:34 am

Re: Can anybody help with a CSS problem?

Post by dogsolitude_uk »

Crunnluath wrote:
/dev/urandom wrote:Why on earth do you define new HTML elements ("header") instead of just giving them a wrapper like <div class="header">?
Er... that's what one of my books says is the shiny new HTML5 way to do it.
Vincent Vermeulen wrote:The problem is you missed the colon (:) on this line after the property name:
OMG, I feel like such an idiot. I was pulling my hair out ( figuratively speaking) for half the night over a missing colon that I couldn't spot. Thank you for seeing that, and I shall crawl back into my cave of "I suck at the internet" shame now.
If it's any consolation, exactly the same thing happened to me yesterday... It's very easily done!

Post Reply

Return to “Open chat”