I want to convert THIS site

I want to convert this site http://www.cabinetglass.com (can't do live links yet) into a css design. ok, from a beginners perspective how hard is it to do this? and is it possible that most browsers will be able to view it?

currently it is all tables and php, i want to get rid of tables and go to css style sheet, so i can lessen the code to content ratio.

thanks,
Phil

 

If it were me, I would just start from scratch. From my experience there is no easy way to convert a table site to a tableless site.

There are a couple of things to keep in mind when you are recoding the site.

1-Divs and tables work differently. You don't need a div everywhere you have a table, tr, th, or td tag.
2-Learn CSS best practices if you are not familiar with CSS yet.

Unfortunately, I must get going, so I don't have time to elaborate on some best practices. However, poking around these forums will get you some really good information.

 

Starting over from scratch is indeed the correct approach - I would first just figure out what's actually content on the page, then mark it up using the semantically correct tags. With the 'correct' tags you need to not worry about the appearance anywhere near as much in the markup - that is after all what CSS is for.

For example it's a fixed width site so the whole thing gets a containing DIV to which width and centering would be applied.

<div id="container">

<!-- #container --></div>

Code (markup):

at the very top is the site name, but you also have welcome text... I would actually put BOTH inside the H1 in this case with a unified background for the whole top... by wrapping the more important welcome text in strong tags, we can use that to do our positioning of that text, while an empty span can be used to 'overwrite' the text at the top with our header image.

<h1>
	Cabinet Glass.com<br />
	<strong>Welcome To CabinetGlass.com</strong>
	<span></span>
</h1>

Code (markup):

Then the menus - these are obviously image replacements, so once again I'd use empty spans inside the anchors so that images off the menus still work... lookup 'glider-levin image replacement' for a simple explanation of what I'm doing. Both menus get marked up as simple lists. Because each one needs a unique image, which gets assigned via the CSS (though my version in fact would use just ONE image for all the states) each one needs a distinct class or ID - I prefer classes for this so I can use the same name, but inherit off the parent ID, though others would use ID's here.

<ul id="mainMenu">
	<li class="home"><a href="#">Home<span></span></a></li>
	<li class="contact"><a href="#">Contact Us<span></span></a></li>
	<li class="testimonials"><a href="#">Testimonials<span></span></a></li>
	<li class="measuring"><a href="#">Measuring<span></span></a></li>
	<li class="installation"><a href="#">Installation<span></span></a></li>
	<li class="links"><a href="#">Links<span></span></a></li>
	<li class="faq"><a href="#">FAQ<span></span></a></li>
</ul>

<ul id="subMenu">
	<li class="traditional"><a href="#">Traditional Designs<span></span></a></li>
	<li class="artGlass"><a href="#">Art Glass<span></span></a></li>
	<li class="etchedGlass"><a href="#">Etched Glass<span></span></a></li>
	<li class="customerPhotos"><a href="#">Our Customers Brands<span></span></a></li>
</ul>

Code (markup):

Your content area naturally gets it's own DIV, #content - the header inside it is an H2...

<div id="#container">
	<h2>Your online source for Cabinet Glass Door Inserts</h2>
	<p>
		CabinetGlass.com is the undisputed leader with the most 
		complete selection of decorative glass cabinet inserts 
		offered in the industry today. Be sure to check back 
		often for updates.
	</p>

Code (markup):

The four images with categories is easy - just put each inside a classed div. I would wrap all of them in another container just to group them together so you don't have to worry about clearing the floats.

<div id="designs">

	<div class="quarterImage">
		Traditional Designs
		<img src="whatever1.png" alt="" />
	</div>
	
	<div class="quarterImage">
		Art Glass Designs
		<img src="whatever2.png" alt="" />
	</div>
	
	<div class="quarterImage">
		Etched Glass Designs
		<img src="whatever3.png" alt="" />
	</div>
	
	<div class="quarterImage">
		Our Customers' Photos
		<img src="whatever3.png" alt="" />
	</div>

<!-- #designs --></div>

Code (markup):

The next section has the problem of inconsistancy... switching font sizes and styles in an inconsistant manner makes the 'One of our specialties', 'a beautiful design' and 'another design' text look... kind of just slapped in there. I'd make the first a paragraph with a special class, putting the latter two inside div's with the images and applying the same styling to both... the text in the latter two not being enough to qualify as an actual paragraph (heck, they're barely sentance fragments). The first one I'd be tempted to make an H3 out of - but it's just too long on wordcount.

so...

<p class="featuredDescription">
	One of our specialties is working several cabinet glass inserts 
	into a unique and original kitchen cabinet glass door design 
	just for you.
</p>

<div class="featuredImage">
	<img src="featured1.jpg" alt="A beautiful cabinet face with flowers and leaves" />
	A beautiful design featuring fushcia flowers and leaves.
</div>

<div class="featuredImage">
	<img src="featured2.jpg" alt="Another cabinet face with flowers and a border" />
	Another design with flowers and a border to create a personal design.
</div>

Code (markup):

The next bit is all simple paragraphs... though the last one I'd slap a class on it called 'standout' and a couple extra carriage returns around it to make it clear it's 'different' from the rest of the body text.

<p>
	Through the use of its many advanced processes of 
	manufacturing, CabinetGlass.com can offer virtually
	unlimited designs. We also create the safest and 
	most durable kitchen cabinet glass door inserts on
	the market today. We offer leaded and beveled glass
	inserts, carved and etched glass inserts as well as
	many unique art glass inserts.
</p><p>
	All of panels are are shipped to your home, company
	office or work site, fully insured against damage.
</p><p>
	Browse through our extensive online catalogue and
	be sure to check back often as we are always 
	updating our collection with new designs. We are
	sure you will find something just right for you.
</p><p>
	If you cannot find what you are looking for, or
	maybe you have something else in mind, just request
	a quotation using your original idea. Feel free to
	send us photos or links to other designs.
</p><p>
	If you have several cabinet doors that you would
	like to have inserts for. Please remember that we
	can create a truly custom design that would 
	"travel" across you cabinet doors for a stunning
	effect.
</p><p>
	If you have any questions or concerns at all,
	please don't hesitate to e-mail us.
</p>

<p class="standOut">
	Due to the nature of different computer monitors
	as well as difference in dye lots of colors, all 
	color and textured glass samples shown may be 
	subject to slight changes. To learn more about
	the Color Accuracy of monitors and the Glass 
	samples shown on this site, 
	<a href="#">please click here.</a>
</p>

Code (markup):

Which is where #content gets closed, and we open up #footer. You've got a copyright line which would be a decent DIV, two lines of links, I'd make that two back to back lists, and that oddball side link... The 'bottom' of the rounded box I'd apply as a div, but I'd also throw in two div's to which the shaded bottoms of that border could be applied. We could theoretically do it as one, but if you have links in the way the depth sorting on that could end up kind of tricky, so just slap the dummy containers in. A 'trick' I'd use there would be to use a DIV and a SPAN nested inside the div for that bottom border to not waste time on classes for nothing. You also have a gradient at the bottom of the page, so #footer goes OUTSIDE #container so we can make it full screen width... oh, and the word copyright at the same time as the symbol is redundant... and the year the site was launched through this year should be on the legal. That final 'link' to 'designed by' the image is presentational, it has text inside it because it's being used instead of text - as such I'd make the link text and use the same span image replacement as the main menu.

<div id="footer">
	<div id="borderBottom"><div></div><span></span></div>
	<div id="copyNotics">
		&copy; 2008 Cabinet Glass. 
		<a href="www.cabinetglass.com">
			www.cabinetglass.com
		</a>
	</div>
	<ul>
		<li class="first"><a href="#">Traditional Glass</a></li>
		<li><a href="#">Art Glass</a></li>
		<li><a href="#">Etched Glass</a></li>
		<li><a href="#">Customers' Photos</a></li>
	</ul><ul>
		<li class="first"><a href="#">Home</a></li>
		<li><a href="#">Contact Us</a></li>
		<li><a href="#">Testimonials</a></li>
		<li><a href="#">Measuring</a></li>
		<li><a href="#">Installation</a></li>
		<li><a href="#">Links</a></li>
		<li><a href="#">FAQ</a></li>
		<li><a href="#">Site Map</a></li>
	</ul>
	<div id="designBy">
		<a href="http://www.webacom.com">
			Site Design By <strong>WEBACOM</strong>
			<span></span>
		</a>
	</div>
<!-- #footer --></div>

Code (markup):

Which if you put it all together with a valid doctype, standard headers and so forth looks a little something like this:

<!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" 
	lang="en" 
	xml:lang="en"
><head>

<meta 
	http-equiv="Content-Type"
	content="text/html; charset=iso-8859-1" 
/>

<link 
	type="text/css" 
	rel="stylesheet" 
	href="screen.css" 
	media="screen,projection" 
/>

<title>
	Cabinet Glass - Decorative glass inserts for cabinets
</title>

</head><body>

<div id="container">

	<h1>
		Cabinet Glass.com<br />
		<strong>Welcome To CabinetGlass.com</strong>
		<span></span>
	</h1>

	<ul id="mainMenu">
		<li class="home"><a href="#">Home<span></span></a></li>
		<li class="contact"><a href="#">Contact Us<span></span></a></li>
		<li class="testimonials"><a href="#">Testimonials<span></span></a></li>
		<li class="measuring"><a href="#">Measuring<span></span></a></li>
		<li class="installation"><a href="#">Installation<span></span></a></li>
		<li class="links"><a href="#">Links<span></span></a></li>
		<li class="faq"><a href="#">FAQ<span></span></a></li>
	</ul>

	<ul id="subMenu">
		<li class="traditional"><a href="#">Traditional Designs<span></span></a></li>
		<li class="artGlass"><a href="#">Art Glass<span></span></a></li>
		<li class="etchedGlass"><a href="#">Etched Glass<span></span></a></li>
		<li class="customerPhotos"><a href="#">Our Customers Brands<span></span></a></li>
	</ul>

	<div id="content">
		<h2>Your online source for Cabinet Glass Door Inserts</h2>
		<p>
			CabinetGlass.com is the undisputed leader with the most 
			complete selection of decorative glass cabinet inserts 
			offered in the industry today. Be sure to check back 
			often for updates.
		</p>

		<div id="designs">
		
			<div class="quarterImage">
				Traditional Designs
				<img src="whatever1.png" alt="" />
			</div>
			
			<div class="quarterImage">
				Art Glass Designs
				<img src="whatever2.png" alt="" />
			</div>
			
			<div class="quarterImage">
				Etched Glass Designs
				<img src="whatever3.png" alt="" />
			</div>
			
			<div class="quarterImage">
				Our Customers' Photos
				<img src="whatever3.png" alt="" />
			</div>
		
		<!-- #designs --></div>

		<p class="featuredDescription">
			One of our specialties is working several cabinet glass inserts 
			into a unique and original kitchen cabinet glass door design 
			just for you.
		</p>
		
		<div class="featuredImage">
			<img src="featured1.jpg" alt="A beautiful cabinet face with flowers and leaves" />
			A beautiful design featuring fushcia flowers and leaves.
		</div>
		
		<div class="featuredImage">
			<img src="featured2.jpg" alt="Another cabinet face with flowers and a border" />
			Another design with flowers and a border to create a personal design.
		</div>

		<p>
			Through the use of its many advanced processes of 
			manufacturing, CabinetGlass.com can offer virtually
			unlimited designs. We also create the safest and 
			most durable kitchen cabinet glass door inserts on
			the market today. We offer leaded and beveled glass
			inserts, carved and etched glass inserts as well as
			many unique art glass inserts.
		</p><p>
			All of panels are are shipped to your home, company
			office or work site, fully insured against damage.
		</p><p>
			Browse through our extensive online catalogue and
			be sure to check back often as we are always 
			updating our collection with new designs. We are
			sure you will find something just right for you.
		</p><p>
			If you cannot find what you are looking for, or
			maybe you have something else in mind, just request
			a quotation using your original idea. Feel free to
			send us photos or links to other designs.
		</p><p>
			If you have several cabinet doors that you would
			like to have inserts for. Please remember that we
			can create a truly custom design that would 
			"travel" across you cabinet doors for a stunning
			effect.
		</p><p>
			If you have any questions or concerns at all,
			please don't hesitate to e-mail us.
		</p>
		
		<p class="standout">
			Due to the nature of different computer monitors
			as well as difference in dye lots of colors, all 
			color and textured glass samples shown may be 
			subject to slight changes. To learn more about
			the Color Accuracy of monitors and the Glass 
			samples shown on this site, 
			<a href="#">please click here.</a>
		</p>
	
	<!-- #content --></div>

<!-- #container --></div>

<div id="footer">
	<div id="borderBottom"><div></div><span></span></div>
	<div id="copyNotics">
		&copy; 2008 Cabinet Glass. 
		<a href="www.cabinetglass.com">
			www.cabinetglass.com
		</a>
	</div>
	<ul>
		<li class="first"><a href="#">Traditional Glass</a></li>
		<li><a href="#">Art Glass</a></li>
		<li><a href="#">Etched Glass</a></li>
		<li><a href="#">Customers' Photos</a></li>
	</ul><ul>
		<li class="first"><a href="#">Home</a></li>
		<li><a href="#">Contact Us</a></li>
		<li><a href="#">Testimonials</a></li>
		<li><a href="#">Measuring</a></li>
		<li><a href="#">Installation</a></li>
		<li><a href="#">Links</a></li>
		<li><a href="#">FAQ</a></li>
		<li><a href="#">Site Map</a></li>
	</ul>
	<div id="designBy">
		<a href="http://www.webacom.com">
			Site Design By <strong>WEBACOM</strong>
			<span></span>
		</a>
	</div>
<!-- #footer --></div>

</body></html>

Code (markup):

Which is really ALL the html the home page of that site should need. No, I'm not kidding, that's it. MAYBE one extra div for a visual element I might have missed, but really that's all it needs. EVERYTHING else would be applied via CSS. We just chopped the 28k page down to 5.4k - and I'd be AMAZED if that site layout needed more than 6-7k of css to function for the main page, maybe 16k for the whole site.

Oh, btw - you might notice the styling - that's me following the style guide I've been using and revising for years... It just got a revision last MONTH.
http://battletech.hopto.org/html_tutorials/styleGuide.txt

I know my indenting style drives AT&T style and C++ style coders nuts - **** em, I'm a follower of Wirth... But with meaningful classes and ID's, proper indenting, it's easier to maintain, easier to follow - and if you develop your own 'guide' to coding habits, or adopt an existing one you'll find a lot of 'issues' other coders have just dissapear - case in point I didn't even run this past a validator yet have little doubt there would be anything preventing it from passing XHTML 1.0 strict.

Would you like to know more? This is what I and several others mean when we say Minimalist Semantic Markup - Though there is some debate on the proper use of an H1 - in this instance I used a compromise.

Mind you, this is just the markup which is the fastest part of development for me - It took me longer to write this post than it did to code the above... the CSS - that's a two hour or so job for just the first page.

 

that's some cracking advice there ds

.. there is no need to code to XHTML strict, in fact there are very good reasons not to for most web authors:
Sending XHTML as text/html Considered Harmful

- I too grew up in the generation that was encouraged to use it for no other reason than to encourage good coding practice, always closing elements, use small case etc.. that's been good practice for creating valid code especially as we all know CSS works best with valid HTML, but that was when we thought XHTML was to be the future of HTML, in reality there is no need to use it whatsoever unless you're using XML, XHTML includes all the HTML most webmasters need to author a page - anyway if you do use XML and want to use an XHTML Doctype you should then really be sending the page with a different mime-type (which IE doesn't support anyway). If you were to use that different mime-type then your page would likely break (regardless of what the validator may be telling you) unless script and style blocks are properly commented as #PCDATA.. anyway that doesn't matter for the average web page, the average web page simply requires HTML4 - oh and HTML4 is not a "step down" form XHTML, it's simply the right tool for the right job - do take of a read of that document if you get time it's an eye opener

oh and btw in your own good practices guide there is one thing that is a glaring violation of XHTML and should be discouraged whichever Doctype you choose:

NO! in XHTML it's very clear that Element and attribute names must be in lower case - in HTML it's not so clear, some attributes are case sensitive some aren't, id and class happen to be 2 that are. - anyway the best lesson that can be taken from learning the XHTML way is that to avoid any confusion going forward it's probably best to get into the practice of using lowercase or at least if you want to to use camelCase don't recommend it as a 'best' practice - case sensitivity of attribute names is just another error to check for if CSS is not working and one a validator won't pick up on not what newcomers to CSS really need is it

anyway just thought you might like some reading for the weekend ..

 

Ok, I'm answering backwards - but hey...

"Elements and Attributes" means Elements and attributes - NOT their contents. Classnames are values, not attributes, and are exempt from that rule which is why they pass validation that way. There are also NO such restrictions upon CSS in any incarnation... AND I am using the same style as recommended for Javascript/ECMAscript. You realize following that logic that:

<input type="text" value="A properly formatted sentence about Suzy" />

Code (markup):

would be invalid markup with what you just said? or how about:

<meta name="description" content="My Site - Description of the Current Page" />

Code (markup):

Those are values, not elements OR attributes... just like <div class="containerWrapper">... and let's not forget the DOCTYPE itself (which violates a whole BUNCH of rules, as does the XML prolog).

as to sending XHTML as text/html - NOT that stupid rubbish arguement again... especially the 'harmful' part. It is in the XHTML 1.0 SPECIFICATION that it can be sent as either or, and so long as you keep the rules for both in mind NONE of the arguements against it hold water. It's the same as the bull about it not being XML - just because the mime-type is off doesn't change the formatting of the content or the ability of user agents to handle 1.0 - YES, almost everything in those types of articles can be said about 1.1 and the 2.0 proposal - SO DON'T USE THOSE. There is NOTHING wrong with 1.0, sending it as 1.0, and if either mime-type screws up, you probably wrote the damn thing wrong, which using MINIMALIST markup and learning the difference between inline and block level elements can prevent from being an issue in the first place. (though with the validator now pointing those out - end of problem) I've NEVER seen this alleged issue with markup that stays within the norms - it's only when people try "stupid XML code tricks" that the problems arise. (which would make an interesting segment on Letterman)

Of course most of the 'issue' stems from people thinking that because XHTML is (supposed to be) valid XML, they can use all XML features like custom encodings and so forth which is incorrect. It's a bit like the old phrase... hmm, how to put this without the racial slurs... a ball-peen is always a hammer, but a hammer isn't always a ball-peen?

But then, I consider 1.1 and 2.0 trash because few user agents handle them right if at all, they bring NOTHING to the table that cannot already be done another way with LESS HEADACHES, LESS CODE and FASTER by other means, and in general all the 'features' just move us away from even bothering to have a standard.

Not that I have kind words for the train wreck that is HTML 5 either.

Of course, when the biggest advocate and contributor to XML, and the company most responsable for it's widespread acceptance today, DOESN'T EVEN SUPPORT APP/X+X IN THEIR OWN BROWSER - I think says a LOT about the viability application/xhtml+xml... It is also why I would NEVER EVER deploy a server that EVER sent ANYTHING as application/xhtml+xml - because 70% or so of the user agents out there HAVE NO CLUE WHAT THAT IS - hell, it's not even on the IE8 'must have' list.

That said - XHTML 1.0 or HTML 4 - personal choice. I prefer the structure even when I disagree with it on a few elements because frankly, HTML lets you slip stuff past the validator that is just sloppy sleazy code... Either way there is NO EXCUSE not to use a strict doctype for developing the template - though I rarely DEPLOY a site in strict just because you never know what yahoo is going to be touching the code next.

Though I'm one of those 'nutjobs' who thinks the biggest screwup in teh histary of dat intarweb tingy was having user agents try to make broken code render silently instead of just not bothering to render it and throwing an error and saying "You ****ed up" in the first place. I'd LOVE to see the mad scramble if suddenly all browsers did that.... Again, a Wirth fan attitude - as the old joke about shooting yourself in the foot with programming languages goes, Pascal and Modula won't let you shoot yourself in the foot.

 

I started with XHTML becuase it was in Ian Lloyd's book. But now, I just flip a coin. If I do XHTML, the only difference I do is bother to only use the 4 character entities with & allowed, and keep the rest as the ascii-unicode versions. XHTML is harmful to those who think it does anything better. If you know what the differences are (I've read that page too Suzy, and the links to it, and think I've prolly covered my ass), it doesn't matter which you use.

But maybe it's good to start newbies off with HTML4.01 Strict since there's a lot of BS going around out there saying HTML4 is dead. Some people even think the XML stuff like RSS needs XHTML to work-- so sticking RSS on an HTML4 site is also a good idea to show it can be done fine.

 

I didn't say you couldn't use camelCase for the attribute values (just perhaps wasn't too clear, hehe pardon my terminology) I just think the case sensitivity issue is confusing enough and that in order to remember to use lower case for elements and attributes (the lesson of XHTML) if XHTML is how you want to write AND more importantly as this is the CSS forum, to avoid CSS not applying because of using attribute value selectors in the wrong case I would if asked simply advise keeping id's and classnames in lower, simple typos are easily made and debugging errors caused by them in CSS is not so easy .. it is a preference that I use lower but my reaction was because I definitely don't like seeing one or the other being recommended as the way it "should be done" - as in your guide.. I've debugged enough case typos that this advice is based on more than just trying to be contrary!

p {color: black;}
.thisCase {color: blue;}

<p class="thiscase"> this will be black</p>
<p class="thisCase"> this will be blue</p>

Code (markup):

I know you know that, but imagine someone not so well versed trying to find that 'missing' Capital "C" in sometimes very busy source code, I understand that other scripting languages use that notation, and that might be why you prefer it.. but CSS is not a scripting language and not all CSS'ers are web language aware.

as for not deploying in XHTML strict, probably wise - wrt to using different doctypes for developing/deploying this difference doesn't often come across in forums very well - people use copy/paste fixes and subsequently go on to use strict doctypes (wrongly?) and then preen/gloat because simply because they've got one at the top of their page - without understanding that if the UA's were to get stricter in their parsing pages could break. (likely that will never happen but still)

.. anyway I'm not having a go at you or your opinions as to what's trash or not, the main reason I posted what I did is to help show others that there is a "balance" - and as for what you think is a "stupid rubbish argument" that is your opinion, and you're entitled to it, however it does say does say "most" authors shouldn't use it - I too am aware of when, how, if etc.. but "most" aren't and therefore probably shouldn't use it as it's likely unnecessary when an HTML Strict doctype will do the same thing (and possibly even let them off with more )

- personally if using any XHTML Doctype (my preferred cms produces XHTML and I can't be bothered to recode a perfectly fine application) my preference would be to use a "transitional" one because, feelings about app/x+x aside, to me using an XHTML doctype for regular pages was always ever just a transition between HTML and XML, an opportunity to learn best coding practices until XHTML matured. Now as it turns out XHTML is not the direction HTML is headed after all and we are getting HTML5. We've always relied on the UA's to parse the "tag soup" that the XHTML transition created, it's a transition so it gets that Doctype, from me anyways. However we're all lucky enough that pages generally work OK with any of the given Doctypes as long as you're at least aware to have one!

anyway as nice as it is to have this discussion, probably shouldn't be walking on this topic, my apologies to OP

 

sorry didn't mean to ignore you stomme just didn't see you'd replied until after, yea that's about it.. it doesn't matter but most times I see people, in CSS forums especially, pushing XHTML strict as if it and CSS working go hand in hand, it doesn't work that way ..

what matters is that you have one, and make sure it's the right one to go with your HTML level which as far as newbies to web page building would be concerned these days that advice should probably be HTML4 so the transition to 5 is easier in the future - whereas we've all learned during the time XHTML was being encouraged as the way forward.

 

The thing is, HTML5 is going to include a variation where XHTML style openings and closings are permitted - so that's a wash... though frankly with the new tags and other rubbish that's thrown HTML5 off it's original purpose, we'll be lucky if it's a decade before you can use ANY of it in the wild. Why do I say a decade? it's been a decade and both Trident and Gecko STILL don't even support the full HTML4/CSS2 specifications properly if at all - we only JUST reached 'deployable' two years ago and you still cannot deploy without compensating for IE6's shortcomings.

... and sorry if I went off a bit, but the moment someone mentions app/x+x I kneejerk into 'rip them a new ******' mode because it causes more problems than it's alleged functionality improvements are worth, and the 'it's not XML' arguement means jack shit in a practical deployable real-world setting where you cannot dictate what your viewers use for a browser. The arguement comes up again and again and it's just total rubbish.

In any case I personally would NOT recommend HTML 4 just because of the lack of structure - it leads to sloppy programming habits.

 

It seems like your page consists of just one column and multiple rows (not sure though I just took quick glance at it)... so here is basic css layout you can use for it (isn't done by me cause I'm busy right now... I googled it but I quickly tested it and it seems to work).

It's just blank page but you can easily modify it for your page:

style.css

index.html

NOTE: height of "push" div must be at least equal to bottom margin of "wrapper" div - or else footer won't work correctly.

 

hi,

i think httrack will auto do this for you. i know its a good site ripper. i haven't used it in a while. see if you can get a free copy. if your on a shared account be prepared for your host to think you are hacking the site even though no exploit code is being executed.

kevin

 

Does it lack structure if it's Scrict? I'd say anything (XHTML or HTML) that's in Transitional leads to sloppy habits. Although I know there are things getting through these validators that are still sloppy... I'm going to post a thread about a strange case I saw (with XHTML Strict) where THIS was allowed:
<a name="message" />
WTH?

I really can't think how it matters whether it's XHTML Strict or HTML4.01 Strict... they're both strict, how can one be that much sloppier, unless you're under the assumption that someone learning XHTML is also being taught what an XML parser will allow (and no, you really gotta learn that yourself in the wilds of Teh Internetz cause I haven't seen a book or anything out there yet which says how to make XHTML as XML-parser friendly as possible and still be renderable by everyone...)

 

wow ... WOW!, I am always impresssd by the support and help that this forum gives but this time it went above and beyond. um, i just hope that this css n00b can keep up.

thanks everyone for all of the help, i'm getting right on this (hopefully i will finish within the month, lol deathshadow - 2 hours, yeah for someone who know what there doing.)

A big thanks to you deathshadow

later days
phil.

a quick question - wheres a good site to learn design based CSS, most of the tutorial site give simple designs and focuses more on the styles, and divs, which is easy to understand but hard for me to implement into visual design.

 

I got my start from a book, and then learned further from the Crusties here on teh forumz. The book was HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer. While it may be geared towards people who built in tables, I never had and still found it great for getting my feet under me. They start with XHTML code, and a .psd or something of how the design is requested. They then go step by step on how to make that same look, in various ways and forms (an example shows a column using absolute positioning, and then the problems you can get from that, and then with floats, and the problems with those, etc... great).

There are some positioning sites... I've heard LayoutGala a lot but actually have never been there. Position Is Everything is a site with some nice tips about positioning, IE (esp 6) problems, and some clearing methods (for floats). There are alot of sites with articles about specific things, which later also become very useful like A List Apart, HTMLdog, 456bereastreet, maybe I Love Jack Daniels (tho I haven't been there since I first started with this stuff).

Since you're using dreambeaver I dunno how steady your HTML is, so if that's a bit iffy you could also check out Ian Lloyd's book, Build Your Own Web SIte the Right Way Using HTML and CSS. It has a really basic start with CSS for both styling and positioning, but doesn't get huge into the positioning.

Both books are old enough to be in a good library, but if you check them out, be sure to check the errata websites listed in the books... mistakes have gotten apst printing and you'll be pulling your hair out trying to figure something out when it's just a typo.

To tell the truth I've also learned quite a bit of CSS from watching different browsers treat things differently. Like, I never knew that floats without a set width (I had simply been told once that they should just always be given a width, but then this one time I wanted to have min-max width, which apparently doesn't count as width) are supposed to shrink-wrap their contents. Guess who showed that correctly? Opera and Safari. Guess who didn't? FireFox and the IE's. Jeez. One time I had a form with a bunch of stuff floated around it including a fake CSS image map and everything was hunky dory and then I look in Safari one last time and my form is total teh crapz. Safari was right in this case too-- I had a mistake that had gotten added sometime after the page had been validated. Everyone else showed the page just fine.

 

I haven't read single book. I guess most of what I know I've learned on internet... mainly on tutorial sites like good-tutorials.com and such

 

freakin' IE, ARRG!.

ok so heres whats happening, I'm doing the layout, i desided to go with 5 background images.
top, header,content, color transition, and footer.
so my problem is that the content has a repeating 1px image that i can put text ontop of, it works fine in Dreamweaver but as soon as i display it in IE
teh content section disappears, i think it's no repeating.

check it out here, http://typh.ca/pstemp/cssindex.html

this is my style.css

.layout {
}

body {
	background-color: #F8F7F3;
}

#pagetop {
position:relative;
top:0px;
height:78px;
background-color: #F8F7F3;
background-image: url("images/cabinetglass_01.png");
background-repeat: no-repeat;
background-attachment: locked;

}
#header{
position:relative;

height:180px;
background-color: #F8F7F3;
background-image: url("images/cabinetglass_02.png");
background-repeat: no-repeat;
background-attachment: locked;
}
#content{
position:relative;

background-color: #F8F7F3;
background-image: url("images/cabinetglass_03.png");
background-repeat:repeat-y;
background-attachment: locked;
padding-left:15px;
padding-right: 15px;
}

#colorfade{
position:relative;
height:85px;
background-color: #F8F7F3;
background-image: url("images/cabinetglass_04.png");
background-repeat:no-repeat;
background-attachment: locked;
}

#footer{
position:relative;
height:134px;
background-color: #F8F7F3;
background-image: url("images/cabinetglass_06.png");
background-repeat:no-repeat;
background-attachment: locked;
}
/* <img src="images/cabinetglass_02.png" width="761" height="180" alt=""> 
images/cabinetglass_03.png">
<img src="images/cabinetglass_04.png" width="761" height="85" alt="">
<img src="images/cabinetglass_06.png" width="761" height="134" alt="">
*/

Code (markup):

and this is my cssinsert.html (temp name by the way)

<html>
<head>
<title>cabinetglass</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="pagetop"></div>
<div id="header"></div>


<div id="content">
  <p><br>
      <br>
      <br>
    <br>
  </p>
</div>


<div id="colorfade"></div>
<div id="footer"></div>
</body>
</html>

HTML:

ok so any help would be apreciated.

also thanks for the book sudgestion and good-tutorials.com

thanks
phil.

 

Here are a couple of things I noticed right off the bat.

1-You need to declare a doctype. If you are using 4.01 strict, put this at the top of your HTML file on every page.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

Code (markup):

2-remove all of the attributes from the body tag. That should be taken care of in the CSS. For your purposes, you will probably be best off with a simple body tag like this:

<body>

Code (markup):

3-Never use Dreamweaver's WYSIWYG to see if a page is rendering correctly. It is always best to install all browsers, and test directly on them. I usually test everything on IE6, IE7, Firefox, and Opera. I never test in Safari because I am a crappy person.

4-If you want this centered like the old design, I would put everything that is inside the body tag inside a <div> give the div a fixed width, and then give it a left and right margin of "auto".

As far as the 1px image problem, I'm not sure that I understand. Could you clarify?

 

thanks for the advice on the body and that.

well I want to have a repeating background in my content div. it's a 761 x 1 px image that i want to have repeating on the y axis (up and down if i got that wrong) but when I preview in IE and firefox there are blank areas above and below the content div. where as the rest of the site is lining up properly. http://typh.ca/pstemp/cssindex.html you can see it here (in IE there is only one break) the boarders on the edges stop then continue on.

I hope i explained it a little better this time

thanks for trying to help

phil

 

Need to reset the padding, margin to 0 for some element. I did the universal reset at the top of the page.

* {
margin:0;
padding: 0;
}
and it worked properly. Interesting part was I set it for the div's in question, header,footer,container and those didn't reset so maybe its on the Ps? Just changed it to p { margin:0;padding:0; } and it worked in FF.

 

Sweet, thanks!

yeah i set the margin to 0px and the padding for top and bottom to 0px in content div. this fixed it thanks alot.

later days,
phil.