Hi there! I'm learning XHTML, and it actually seems not too bad, however - I was wondering 2 things. Firstly I understand W3c desires for unified/verified code, and streamlining... but I was wondering:
I am recreating a web site in XHTML, and I have managed to get my 3 columns, however, the positioning is absolute. My main site is: link removed* (the old version google seems to hate)
My new attempt (still ratty) is here for my home page
link removed*
How can I use .css to get a 640 pixel wide 3 columns site that floats in the middle. I don't need anyone to recode the whole thing, just need a basic explanation of what technique to utilize.
Editor: nice site, easy on the eyes!
Edit by Skaarjj: *all links in this post were removed at the request of the author
Well, to answer the question in the thread title, there are various reasons that a lot of sites are justified left. Often it is because the designer doesn't know any better (for example, they build a fixed-width design and then simply let it fall where it may--which is on the left by default).
As for how to build a 3-column site 640 pixels wide that floats in the middle:
The easiest way to get the 640px width is to slap the whole thing in a "container" div with width: 640px. Then you can center that div and the three columns will be centered.
There are tons of sites and techniques dealing with both the centering issue and three column layouts. Everyone has their favorites, but I would recommend starting with Google and working your way through the resources to get an idea of how it's done: CSS centering and CSS 3 column layout.
Give it a shot and then post back here if you have any questions. Good luck!
I'm getting a bit closer to what I'm after, messed around with a bit. If i create a document/site that is XHTML 1.1 validated, how big of an audience am I cutting off? Would it be better to leave it in tables and make it 4.1 Transitional? It's a realty site so the odd person might be on a version 5 browser (at oldest I think?)
I'm not so sure you'd really be "cutting anyone off" - my website is done with CSS and HTML 4.1 transitional, has basically the same layout you're looking for, validates and - best of all - does not use tables
click the guitar to have a look and feel free to check out the css (/black.css)
Some people say I'm a dreamer, but I'm not the only one (John Lennon)
I agree with I X I. You will definitely not be cutting anyone off. There is no longer any reason to use tables for layout. I would definitely recommend you go with valid CSS/XHTML layout.
Now, whether you go with transitional or strict is up to you. My site validates as strict because I happen to be stickler for those sorts of things, but transitional is perfectly acceptable if you are just learning the ropes.
As far as cutting anyone off goes - you're more likely to have problems if your site is coded with tabled layouts and semantically poor, poorly formed code than you will using properly standardized code that is semantically correct.
At worst, you hide your stylesheet from older (v.4x) browsers, and they get a fully functional, though not as pretty. version of the site. IE 5 might have the occasional margin anomaly...
I would have to agree that, personally, I feel that there is no reason not to go strict. But I also think that transitional is there for a reason... to be a transition from non-compliant to strict. As long as that's the attitude taken toward transitional, I think that's OK. I do not think it's OK to look at transitional as a permanent solution, because ultimately you will be training yourself to use deprecated techniques, etc. Transitional is a midway point in weaning yourself off of non-compliant code, not an endpoint.
If you feel confident enough to go straight to strict (and, honestly, it's not really that hard), then I would recommend it.
I cam close to getting the site in strict, but I ran into some problems. I managed to upgrade to XHTML 1.0 Transitional, and get validated though, so at least now I've upgraded.
See, got my Button!
link removed*
I started a strict version, but I ran into some troubles getting the layout. I managed to figure out a 3 column layout, but couldn't confine it to 700 pixel width. what im trying to do here is have a centered, 700 pixel wide site. I want the top row to be 700x23, a second element that is 700x87 (a total header of 110 px height).
I was hoping the top little strip would be "background" and could have text over it. The second panel could just house the image.
Images:
image removed*
image removed*
For the content I was hoping for three regions, leftmost being at left 0, right most edge ending at 700.
I tried the below code but got some very gross results. I'm looking for this sort of thing:
image removed*
This is what I tried: (with no luck... link removed* )
Any help would be appreciated! thanks in advance.
I must say this stuff IS cool!
#content {
position: absolute;
top: 112px;
height: 1600px;
padding-left: 160px; /* 20px to play with */
padding-right: 130px; /* 20px to play with */
background-color: #000000;
border: 0px;
}
unfortunately this code does not center in IE < 5.5 (I think...) but it does work in the newer versions of IE and I know it works best in FF b/c that's what I test in. This is coming pretty much straight from my stylesheet, so you will need to fix the div IDs and widths.
code:
//this is where you will put the whole page width (700px in your case)
//the margin: auto; is what centers the page
#frame {
width: 640px;
margin: auto;
text-align: left;
background-color: #000000;
border: 2px solid;
}
<body>
<div id="frame">
<div id="banner">
...the rest of your divs, floated or positioned as you'd like
</div>
</div>
</body>
if you need some 1-on-1 I can be contacted via the AIM SN: IXIfx
I might not be the best, but I'm really working on it and I can try to explain it to you as best I can.
hope this helps,
Of all the things I've lost, I miss my mind the most (Ozzy Osbourne)
[edit]fixing ubb[/edit]
I applied some of your logic. It seems certain things render better in IE6, and other aspects better in netscape navigator. hmm Now I see why nobody goes strict LOL its time hasn't come, cause theres no consistency, maybe.
Heres the page so far:
link removed*
It's actually best viewed in IE6, things are pretty darn close. I like how NN7 doesnt allocate any extra sizing for my modified <h1> (for SEO), where as IE^ leaves an ugly strip through my banner. Opera butchers it in it's own unique way as well! How lovely. I'm not going to even bother looking at it with Firefox - i think the Boss is a lil tired of me trying to be a trendsetter here. It seems the web ain't ready for Strict, that much has become apparent. That is, unless everyone wants to go back to school book page looking reports - or companies don't mind their sites looking like Sh*! to some peoples browsers - yea right. Optimization for search engines is crucial for our site, and Tables rule for that. Nested or not, they can be manipulated to push your main content to the top (as viewed by Lynx for example) - where as with this CSS, I don't get the same results. I wonder if it matters at all which elements you declare, first, and if that would help.
Short and long of it is though, good 'ol HTML with tables does a sweeter job, hands down I guess its Transitional for now, with TABLES until the standards level out.
Now I see why nobody goes strict LOL its time hasn't come, cause theres no
consistency, maybe.
Who exactly is nobody? I only code in strict, and I know DL only codes in strict. Most people here probably code in strict. It may be difficult to get a handle on it at first, and I will admit that you wil need to employ a few hacks if you want to do certain things, but pure CSS is the way to go.
quote:kelownarealtor said:
Short and long of it is though, good 'ol HTML with tables does a sweeter job,
hands down
It would be more accurate to say that you are more comfortable with table-based layout at the moment, and thus you can make it look better with table than with pure CSS. As far as the actual tools go, though, pure CSS is the better than tables in every respect. Think of it as the difference between a hacksaw and a radial table saw. If you do not know how to operate the radial table saw, you are liable to cut off your arm or launch a piece of wood through your chest. Naturally, you will feel more comfortable using a simple hacksaw, and at that point in time the hacksaw will do a better job than the radial table saw in your hands. This does not mean you should scrap the radial table saw and use a hacksaw for the rest of your life, though. Once you learn how to use the radial table saw, you will be able to accomplish tasks far more efficiently than with the hacksaw.
Right now, you're still a bit gun shy around the radial table saw because it has sliced your beautiful design into ugly pieces. I will not lie to you and tell you that standards compliance is perfect in all browsers--it's not. But the best and brightest minds in the business are well aware that the radial table saw--CSS--is the way to go, and there are many resources out there to deal with most (if not all of) the snags you will run into.
You've managed to put together a valid transitional page, and that is something to be proud of. As I said above, though, transitional is not an end point, it is a mid-way point. That is why they call it "transitional"--because it represents a checkpoint on the road from non-compliant design to compliant design. It would be a shame if you stopped here.
quote:kelownarealtor said:
I guess its Transitional for now, with TABLES until the standards level out.
You're going to have to wait quite a while for the "standards to level out." In fact, given what we've seen so far in browser development, I doubt we will ever have a fully compliant browser. Standards will always be advancing and the browsers will always be one step behind. But that doesn't mean the bulk of the standards are not supported. The problem you are having right now is not due to lack of support for standards, but to your lack of experience with CSS. It is natural to be frustrated. But to attempt to shirk responsibility and place the blame on "standards" is irresponsible.
There is no need to be disheartened. I would encourage you to continue to work toward a strict solution even as you implement your transitional solution. Take it one step at a time and familiarize yourself with the techniques and invariable workarounds. What you want to do can be accomplished in strict, and one of the CSS wizards here could probably create a mock-up for you, but the best way to learn is by getting your hands dirty. I don't have the time to really dig through your code at the moment (having spent far too long writing this post), but I will give it a look later on and see if I can't make some suggestions. In the meantime, keep moving forward. Don't stop now--you're only halfway there.
posted 01-08-2005 21:23
layout and color
)