New to CSS

**noeaw** · Nov 1, 2002 09:18

I am working a site and would like to use CSS. I have up to this time always use table and trying to learn how not to. I am however having a hard time turning this design into a working page with CSS: http://216.26.140.216. I have been able to do it with the page being left aligned, but have been unable to make it work centered in the page. Any comments or advice would be so great.

Thanks

**ken_11223** · Nov 1, 2002 09:25

hi, i saw your page are center in the page.. so what was your question indeed, i am willing to help you out!

**noeaw** · Nov 1, 2002 13:10

Thanks for the offer. Here is what I have so far. http://faithrightnow.org/home.htm. It is looking good in IE, but then in NN4,7 and Opera 6, it looks terrible. What am I doing wrong?

**slider** · Nov 2, 2002 16:15

One thing I've learned in my short time trying to learn CSS page layout is that there's many different ways to do one thing. And about half work in IE and don't work in NN/Mozilla, and the other half work in NN/Mozilla and not in IE. You have to find the one way that works in both, and the only way I've found to do that so far (haven't been at this long) is to try it from different angles.

I know that's not much help, but keep at it and you'll get it looking good in both.

**DougBTX** · Nov 3, 2002 10:17

Originally posted by slider
One thing I've learned in my short time trying to learn CSS page layout is that there's many different ways to do one thing. And about half work in IE and don't work in NN/Mozilla, and the other half work in NN/Mozilla and not in IE. You have to find the one way that works in both, and the only way I've found to do that so far (haven't been at this long) is to try it from different angles.

I know that's not much help, but keep at it and you'll get it looking good in both.

I'm really just posting in responce to this: because what I have found is that if you do things to the standards thing will work very well accross browsers which support standards.

In this case, NN4 doesn't support standards, so my reccomendation is to dump it

The main problem I see, is the way that you are going about getting the whole page centered. It shouldn't work (and in Mozilla it doesn't)

Fix: do it by the standards.

Try:

Code:

#main {
	height: 550px;
	width: 751px;
	position: absolute;
	margin-left: -376px;
	left: 50%;
	top: 0px;
}

It won't work in NN4, but hopefully you're not trying to this far down the page

Why does it work?

Well, as its "position: absolute;" instead of "position: relative;" it means that all the divs inside it which are also "position: absolute;" will line up with it, instead of with the browser window itself.

----------

Really, you sould be working to XHTML too, your doctype is "HTML 4.01 Transitional". Replace this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

with this:

Code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Then go to: http://validator.w3.org/ and try and get it to pass... then you're much closer to getting it to work

hth,
Douglas

**sabernethy** · Nov 3, 2002 12:01

I'm in the middle of completing my first table-less design as well and I know it can be frustrating at times.
The previous poster is right though, if you stick to the standards you won't have any cross-browser problems.

The way I was able to get my site centered was to use a <div align="center"> tag around the whole site. Keep in mind that when you do that all your text inside will be centered to, so you will have to use "text-align: left;" within their respective div tags.

If you want to see how I did it, you can see the home page for the site here: http://mysitedesigns.com/AMA/
- just the home page is working here.

If you want, go to http://www.alistapart.com for some great articles on table-less design. This site owner is a big advocate for table-less design and writes a lot about it.

Hope this helps,
Sabrina

**slider** · Nov 3, 2002 17:46

Originally posted by DougBTX
...if you do things to the standards thing will work very well across browsers which support standards.
...
Fix: do it by the standards.
...

Originally posted by sabernethy
The previous poster is right though, if you stick to the standards you won't have any cross-browser problems.

The problem I'm having with this is that these standards are very poorly published. And methods of implementing these standards are not standards. Doug, you lay out that centering solution (very nice method BTW) like it's a standard you can go over to w3.org and find, which you can't (I just spent 15 minutes searching for it, at least). w3schools.com has some very valuable information about CSS positioning, but it also has no mention of this method. I did find it at bluerobot.com, which to my knowledge is not part of the official standards-setting body, nor did they publish the method as "taken from the standards documentation...."

Don't take that the wrong way, cause I'm very new to CSS (night-time work for about three weeks now trying to put a personal project together to help me learn this stuff) and really want to ask you a question. Where does somebody new to this stuff get their hands on the cold hard "right way to do things". I'm familiar with ALA and other similar sites, and I consider their methods and recommendations very good, sometimes (often) more valuable than going to the source (w3.org, w3schools.com).

Maybe you could take a look at this cross-browser problem I'm trying to figure out and let me know what you think and why you think that:

Code:

<style>
div#main {
	position: absolute;
	left: 190px;
	right: 30px;
	top: 15px;
	font-size: 11px;
	border: solid #D8D8D8 2px;
	padding: 3px;
}
#header {
	width: 100%;
	height: 25px;
	background-color: #EEEEEE;
	padding-top: 5px;
	text-align: center;
	font-size: 11px;
	color: #643232;
	font-weight: bold;
	border: solid 1px #D8D8D8;
}
</style>

<body>
<div id="main">
    <div id="header">
      Header
    </div>
  Main
</div>
</body>

Mozilla (current version) doesn't handle the border around the header div right cause I had to use a padding-top in the header div to get the text to center vertically. CSS doesn't handle vertical centering (can post an example of my best attempt at that...) so you have to use padding to get the text to sit in the bar right.

I'm actually using a 25px high repeat-x image in my header bar to give it a round steel look, and when you use just the background-color as in the code I listed above it doesn't make the problem as apparent. Mozilla expands the color of the bar the extra 5px that would be white space if you were using a 25px high image in there. You can still tell Mozilla expands the height of the header compared to IE though, and this is due to the padding as mentioned. It also crowds it over to the right side of its parent element, which ruins the symmetrical effect I'm trying to get.

Sorry for the length of the post.

**sabernethy** · Nov 3, 2002 18:51

I'm not sure if this completey solves your problem, since I can't see an actual example of what you want to accomplish.

I thought by your example that you were trying to do a variable width (liquid design). So instead of setting the left and right properties in .main, set the width to a percentage (85%) and set the left property to about half of the remaining percentage (8%).

I removed the width: 100%; from .header as that was causing the problem in Moz.

Last, I separated the .header into two styles - one for actual style and the other for text. It's good practice to separate your stylesheets into one for style and one for text. To get the text in the .header centered vertically I just used the "top" property instead of padding-top.

I tested and it displays properly in IE6, Moz 1.1 and Opera 6.

Code:

<style>
div.main {
	position: absolute;
	left: 8%;
	width: 85%;
	padding: 3px;
	top: 15px;
	font-size: 11px;
	border: solid #D8D8D8 2px;
}

.header {
	height: 25px;
	background-color: #EEEEEE;
	text-align: center;
	border: solid 1px #D8D8D8;
}

.headerText {
	position: relative;
	font-size: 11px;
	color: #643232;
	font-weight: bold;
	top: 5px;
}

</style>

</head>
<body>
<div class="main">
    <div class="header">
      <span class="headerText">Header</span>
    </div>
  Main
</div>
</body>

Let me know is this helped at all - I may have completely misread your problem and might be way off base. If I did, could you direct me to a working example so I could check it out?

Thanks,
Sabrina

**DougBTX** · Nov 4, 2002 13:07

Originally posted by slider
that centering solution (very nice method BTW)

That one I actually got from this forum

Its a good example of the problem: There is no such thing as a standard way to do something, but there are standard technologies to do so. Really, that is the way it has to be, because there are just so many ways of going about making a webpage.

Personally, I take it from the philisophical angle to start with: in XHTML 1.1 Strict, style goes in style sheets, and hypertext goes in html files.

That's my ground rule. Anything else, as long as it validates (in the broadest sence, it must conform to technical standards, accessability standards, and be better than the standards that people I am making sites for expect), is fair play.

I've just had a look round, but I can't find the site I was looking for... anyway, here's some resources for you, may help:

http://www.webstandards.org/learn/st...tml/index.html

Back to the thread: this stuck out like a sore thumb to me:

<div align="center">

!!!!!!!!!!!!!!!!!!

"style goes in style sheets, and hypertext goes in html files."

align="center" is style, which is why it doesn't validate (OK, it validates to transitional... but I tend to be a bit of a purist and would much rather that my code validates to Strict, because then it has more meaning)

OK, slider, I also don't really understand what you are trying to do, but this is what I think you might be after:

Code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>redmelon.net</title>

<style>

body {
	padding: 0px;
	margin: 0px;
	background-color: #fff;
	color: #000;
}

h1 {
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	
	padding-top: 7px;
	padding-bottom: 7px;
	margin: 0em;
	
	background-color: #EEEEEE;
	color: #643232;
	border: solid 1px #D8D8D8;
}

p {
	font-size: 11px;
	height: 15px;
}

#main {
	margin-left: 190px;
	margin-right: 30px;
	margin-top: 15px;
	
	border: solid #D8D8D8 2px;
	padding: 3px;
}

</style>
</head>

<body>

<div id="main">
 <h1>Header</h1>
 <p>Main</p>
</div>

</body>
</html>

I'm hoping what you posted was an extract, but either way, that is the full html document I made

The first thing I have to say, it that that code is not good. Why? Because the style sheet and the html are in the same file. The stile sheet sould be linked in with:

Code:

<style type="text/css">@import "style.css";</style>

Beyond that, the HTML has more meaning (which is very important) because it uses <h1> tags for headers, and <p> tags for text. It means that the contents acctualy means something, rather than just looking like it means something.

Key differences then:
- there are no width or height attributes (they are implied, so you avoid bugs in IE5/win)
- the content is "in the flow", aka no absolute positioning (makes life easier)
- short clean HTML (for meaning)

hth,
Douglas

**slider** · Nov 4, 2002 14:19

I have effectively hijacked this thread. Thanks for taking the time to answer my questions.

The problem the code I posted above has is not apparent unless you use an actual image in the header bar. If you just tell it to use a background-color then Mozilla expands the color to fill the bar when it expands it beyond the dimensions I'm trying to dictate to it. I've attached a screenshot (with the window really scrunched up so you can see both sides of this bar) so you can take a look at it. Either way, the fix that both of you posted gets past that problem. I was actually thinking of something along the lines of what sabernethy posted, only I was going to make a new div just to do the border.

I like sabernethy's solution better and I'll tell you why. I'm making a PHP application that allows users to log in and track information about certain things that belong to their account. The application allows users to look at other people's user profile and their objects. I'm going for functionlity very similar to message boards (vBulletin, phpBB, etc.) for a lot of that. In particular, this screen I'm working on right now is the View User Profile screen. But this is the first of about ten screens that will use basically the same layout in the main display area of my pages. In that sense reusability is good, but I've already got two previous sections already worked out, and if I'd tried to follow the "<h1> tags for headers, and <p> tags for text" thing I'd have conflict between the different areas of my page, so I've just avoided that altogether. I'm just learning this stuff so maybe I'll go back and redo my stuff to follow that convention if I can get it to make more sense in my mind. Unfortunately there's a #2 problem with it, and that is that I don't like the white space created by the <p>. I supposed I could just adjust the margins of the <p> tag in my style definitions?

How would you stick to your <h1> + <p> convention if you have different areas of your pages (standard throughout all the pages) that are going to be laid out differently? IE I have a small 150x200 box that sits in the upper left-hand window that either shows a login form, or a welcome message once you're logged in. I have this laid out with very small text to save page space (big enough to read, but small enough to save space since it isn't "content" just status information...). I then have a dynamic navigation area down the left side that will change based on what area of the site they're in and it will need styles, etc. I don't have a public website yet so can't direct you to my project to check it out yet.

BTW, I'm using external style sheet(s), I just posted same-file style definitions so you could easily copy and paste my code into a html document to quickly see what I was talking about. Or did you mean my code was bad in other ways?

**slider** · Nov 4, 2002 14:20

Forgot to attach the image. And as I mentioned, your above solutions fix this problem.

**DougBTX** · Nov 4, 2002 17:10

I'm in a bit of a rush at the moment, so this will be a bit quick...(and your screen shot isn't up yet either)

Basically, you have to ask yourself: "Does this page make sence without the style sheet?"

If yes, then no problem, if no, then you need to use headers.

Remember that you have six types of header to use straight off (<h1>, <h2>, <h3>.....) which should be enough for most cases. Best to sue the same level of <h> tag for the samle level of meaning. Remember, you can allways give them classes <h1 class="login"> if you want/need to.

You have to keep all the structure in the .htm file, and the style in the .css file. <div class="header"> does not give the html any structure! It is meaningless!

Also remember: with CSS, you have control! Want less white space on you <p>s? then "p {margin:0px; padding:0px; }"

Easy!

Later,
Douglas

User Tag List

Thread: New to CSS

Thread Tools

Display

New to CSS

re: new to css

CSS problem in Mozilla

Bookmarks

Bookmarks

Posting Permissions