Wed, 2008-09-24 05:38
I did it last night before I changed just the background and other non essentials. Now its whacked. I'm been working on it for 5 hours. I'm blind.
Help, please. The text box needs to be aligned top between the photos.
http://hipnoticinc.com/alpha/alpha.reptile.bearded-dragons.for-sale.html
Yet, somehow I got it to work last night here. But I can't duplicate it with just a color block above and a different bg.
http://hipnoticinc.com/alpha/alpha.reptile.chameleon.for-sale.html
Here's the page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/alpha template.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- InstanceBeginEditable name="doctitle" --> <title>Alpha Reptile Bearded Dragons for Sale</title> <!-- InstanceEndEditable --><link href="alpha.css" rel="stylesheet" title="alpha.css" type="text/css" /> <style type="text/css" ></style> <script type="text/javascript" src="p7pm/p7popmenu.js"></script> <style type="text/css" media="screen"> <!-- @import url(p7pm/p7pmh0.css); --> </style> <!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable --> </head> <body onload="P7_initPM(1,7,1,-20,10)"> <div id="wrapper"> <div><a href="index.html" target="_self"> <div id="header"></div></a></div> <div id="navbar"> <ul id="p7PMnav"> <li><a href="#" class="p7PMtrg">Breeders</a> <ul> <li><a href="alpha.reptile.chameleon.breeders.html">Chameleons</a></li> <li><a href="alpha.reptile.bearded-dragon.breeders.html">Bearded Dragons</a></li> <li><a href="alpha.reptile.snakes.breeders.html">Snakes</a></li> </ul> </li> <li><a href="#" class="p7PMtrg">Available</a> <ul> <li><a href="alpha.reptile.chameleon.for-sale.html">Chameleons</a></li> <li><a href="alpha.reptile.bearded-dragons.for-sale.html">Bearded Dragons</a></li> <li><a href="alpha.reptile.snakes.for-sale.html">Snakes</a></li> <li><a href="#">More</a></li> </ul> </li> <li><a href="alphareptile.reptile.parties.html">Reptile Parties</a></li> <li><a href="alphareptile.care.sheets.html">Care Sheets</a></li> <li><a href="alphareptile.testimonials.html">Testimonials</a></li> <li><a href="alphareptile.shipping.terms.html">Shipping/Terms</a></li> <li><a href="alphareptile.contact.html">Contact</a></li> <!--[if lte IE 6]><style>#p7PMnav a{height:1em;}#p7PMnav li{height:1em;}#p7PMnav ul li{float:left;clear:both;width:100%}</style><![endif]--> <!--[if IE 6]><style>#p7PMnav ul li{clear:none;}</style><![endif]--> <!--[if IE 7]><style>#p7PMnav a{zoom:100%;}#p7PMnav ul li{float:left;clear:both;width:100%;}</style><![endif]--> </ul> </div> <!-- InstanceBeginEditable name="Alphabody" --> <div id="beardbnavbg"> <div id= "beardbleftnav"> <p id="sidebarphoto1"><img src="images/sidebar-photo.jpg" width="80" height="60" /> </p> <p class="sidebartext"><a href="index.html">Chameleons</a></p> <p id="sidebarphoto2"><img src="images/sidebar-photo.jpg" width="80" height="60" /> </p> <p class="sidebartext"><a href="index.html">Bearded Dragons</a></p> <p id="sidebarphoto3"><img src="images/sidebar-photo.jpg" width="80" height="60" /> </p> <p class="sidebartext"><a href="index.html">Snakes </a></p> </div></div> <div id="beardbbody"> <p id="beardbhead">Alpha Reptile Bearded Dragons for Sale</p> <!---------------PHOTO/TEXT BLOCKS START--------------> <div id= "beardbphoto1"><a href="images/kid_in_tub.jpg"><img src="images/kid_in_tub.jpg" width="160" height="120" /></a></div> <div id= "beardbphoto2"><a href="images/Karma_color.jpg"><img src="images/Karma_color.jpg" width="160" height="120" /></a></div> <div id="photoblock"> <p id= "beardedtitle1">Ambilobe jljaslk alskjdljk 9dajks asldjla0k </p> <br /> <p id= "beasdedtext1">djldoiu jdlkjasdlkjuasd jlaksd jljkas lasj lkjasdljlasdjlkjads ojue ldsjljasd lkjasoiuwel aslkjladskj owelkjasldkjlask o9e pa jgjhgwj kjhaskjh ask jhsak jhsakj haskjha skjhas kjhas jhdskjh khjd k kshd sdk hkds khsd k </p> <p class="beasdedstatustext">Babies Available</p></div> <!---------------PHOTO/TEXT BLOCKS ENDS--------------> </div> <!-- InstanceEndEditable --> <div id="footer"> <p id="footertext"><strong > <span class="tealtext">We offer a wide range of reptiles: </span><span class="footerblue"><a href="alpha.reptile.chameleon.for-sale.html">Chameleons</a>, <a href="alpha.reptile.bearded-dragons.for-sale.html">Bearded Dragons</a>, <a href="alpha.reptile.snakes.for-sale.html">Snakes</a> & <a href="index.html">More</a></span></strong> <strong><br /> <span class="tealtext">Why buy from us?</span></strong> pojewpojew pewj ewpojew jds pjd pewjp ewpj ewpj ewpojpew pj ewpjewp ewpjo ewpjew pewpj ewpjewpewpjpew jpewjpew jpjewpj ewpjewpjo ewpj epwjpewj pjewpoj ewpjewpojewpoj ewpjoewpojewpojewpojewpojew ;kds ;ds ;kds ;k d; sd;k sd;s dk; s;k d;s ;dk;s kd ;kds; ;k sd;k ;sd;ksd ;ksd; k;sdlk popkdpokds;lksd </p> </div> </body> <!-- InstanceEnd --></html></div> Here is the corresponding CSS: p#beardbhead { float:left; display:block; height:50px; width:690px; background-color: #021642; text-align: center; font-size: 14px; color:#03feef; font-weight: bold; margin:0px 0 40px 0; letter-spacing: 6px; line-height: 50px; clear:both; } #beardbphoto1 { background-image:url(images/photo-frame-blue-tall.png); float:left; margin: 0px 0px 0 20px; /*padding: 15px 0px 0px 15px;*/ width: 178px; height: 139px; } #beardbphoto2 { background-image:url(images/photo-frame-blue-tall.png); float:right; margin: 0px 10px 0 0px; /*padding: 15px 0px 0px 15px;*/ width: 178px; height: 139px; } #photoblock { display:block; float:left; padding: 0; width: 270px; height: 137px; /*background-color:#5c6c86;*/ background-image:url(images/bearded-text-bg.png); margin: 0 0px 0px 220px; clear: both; } #beardbphoto1 a { width: 160px; height: 120px; display: block; border: 6px solid #fff; } #photoblock { display:block; float:left; padding: 0; width: 270px; height: 137px; /*background-color:#5c6c86;*/ background-image:url(images/bearded-text-bg.png); margin: 0 0px 0px 220px; clear: both; } p#beardedtitle1 { float:left; display:block; background-color: #57699f; font-size: 11px; color: #cadafe; font-weight: bold; padding-left: 3px; width:268px; height:16px; margin: 0px 80px 0px 0px; } p#beasdedtext1 { float:left; font-size: 11px; padding: 0px 0 0 5px; margin: 0 80px 0 0px; width: 257px; line-height: 20px; color: #CCCCCC; } .beasdedstatustext { font-size: 10px; color: #03feef; font-style: italic; text-align: left; font-weight: bold; /*line-height: 20px;*/ text-align:right; width: 257px; /*margin-left:200px;*/ }
mod edit/ code tags added, please use in future
Wed, 2008-09-24 05:46
#1
Hours? I've been stumped
Hours? I've been stumped for days at a time. Hours is nothing.
A couple of suggestions:
Use a STRICT document type, not transitional.
Get your html valid. You have too many html errors and there is no CSS standard on invalid html.
Wed, 2008-09-24 05:51
#2
This is my first attempt at
This is my first attempt at a full CSS site after months of studying. I'm not sure the HTML code errors since the code there is very little. Most all the code was generated by PVII for the nav. I just did simple body and footer.
I'm new. Be gentle. I appreciate it. Just trying to learn and improve my skillset in order to get more work.
Wed, 2008-09-24 07:53
#3
Your css is a bit jumbled up
Your css is a bit jumbled up and has many redundant attributes. Copy all of the css/html below (scroll down the page a bit) paste it in your html editor (Dreamweaver) and study it.
If you have repeating css styles for different containers then group them by using a comma between the selectors like:
#containerLeft, #containerRight {
width: 200px;
border: 1px solid #000;
}
COPY HTML/CSS from here on down:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <style type="text/css"> body { font-family: verdana, arial, helvetica, san-serif; } .photoBlockWrapper { width: 654px; } #beardbPhoto1, #beardbPhoto2 { background-image:url(images/photo-frame-blue-tall.png); float:left; width: 172px; height: 139px; } #photoBlock { float:left; width: 270px; margin: 0 20px; background-image:url(images/bearded-text-bg.png); } #beardbPhoto1 a, #beardbPhoto2 a { width: 160px; height: 120px; display: block; border: 6px solid #fff; } a img { border: none; } #photoBlock h1 { background-color: #57699f; font-size: 11px; color: #cadafe; font-weight: bold; padding: 3px; margin: 0 0 3px 0; } #photoBlock p { font-size: 11px; padding: 0px 0 0 5px; margin: 0; line-height: 20px; color: #CCCCCC; } .beasdedstatustext { font-size: 10px; color: #03feef; font-style: italic; text-align: left; font-weight: bold; text-align:right; } </style> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> </head> <body> <div class="photoBlockWrapper"> <div id= "beardbPhoto1"><a href="images/kid_in_tub.jpg"><img src="images/kid_in_tub.jpg" width="160" height="120" /></a></div> <div id="photoBlock"> <h1>Ambilobe jljaslk alskjdljk 9dajks asldjla0k</h1> <p>djldoiu jdlkjasdlkjuasd jlaksd jljkas lasj lkjasdljlasdjlkjads ojue ldsjljasd lkjasoiuwel aslkjladskj owelkjasldkjlask o9e pa jgjhgwj kjhaskjh ask jhsak jhsakj haskjha skjhas kjhas jhdskjh khjd k kshd sdk hkds khsd k </p> <p class="beasdedstatustext">Babies Available</p> </div><!-- end photoBlock --> <div id= "beardbPhoto2"><a href="images/kid_in_tub.jpg"><img src="images/kid_in_tub.jpg" width="160" height="120" /></a></div> </div><!-- end photoBlockWrapper --> </body> </html>
mod edit/ code tags added, please use in future
Wed, 2008-09-24 07:58
#4
Theres NO correlation in a
Theres NO correlation in a page being valid and a page displaying correctly, NONE what so ever.
The key is to know your code inside out. It doesn't matter if it validates or not as long as YOURE in charge, not the code.
I've seen many posters here,there and everywhere who say. 'My page validates but doesn't display correctly'
Wed, 2008-09-24 13:26
#5
osgood, meet Seedhouse.
osgood, meet Seedhouse. Seedhouse, osgood.
/sits back/
this should be good...
Wed, 2008-09-24 16:21
#6
Thanks Osgood. You've really
Thanks Osgood. You've really helped me in the Adobe forum as well. The page is working now. I have to keep learning and learning and correcting my mistakes. Right now the site is working on all the browsers I tried. I'm sure there's mistakes which I work on correcting. I let DW scan and correct and it took down the whole site. Pages lost all their headers etc....
Guess its knowing more than letting a program tell you which I guess is your point.
Wed, 2008-09-24 16:46
#7
Bring it on......
Bring it on......
Wed, 2008-09-24 17:02
#8
osgood wrote:Theres NO
Theres NO correlation in a page being valid and a page displaying correctly, NONE what so ever.
It is a fact, not an opinion, that the CSS specs are written for valid html/xhtml, and that there is no standard of error correction. Browsers are expected to error correct, but the standard does not specify how they are to error correct. That makes sense since there are so many ways to write invalid html and only one way to write valid html.
I have personally seen many sites with layout problems that are fixed by validation - heck I've written sites with problems that are corrected with validation.
Every time you submit invalid code to a browser, even if that browser claims to follow the standards, the standard for that bit goes out the window. If it does not render according to your expectations then you have no complaint.
Correlation is a word that has a specific technical meaning, but you appear to be using it very sloppily. One would not expect any "correlation" between invalid code and incorrect rendering, since there is no incorrect rendering for invalid code. Anything is correct.
The specifications assume valid code, both markup and CSS. If you do not supply valid code then the specification does not apply. If you want a browser to comply with some standard then you must supply it with code that follows the standard.
We are dealing with computers here. They cannot do what you want, they can only do what you tell them to do.
Wed, 2008-09-24 17:21
#9
Its also a factor, not an
Its also a factor, not an opinion, that validation is worthless beyond pointing out code errors. Errors that MAY or MAY NOT attribute to the page rendering incorrectly or correctly.
I say again there is absolutely no exclusivity between a page that validates and one that renders correctly in a browser.
The validator is simply a helpful tool for novice html/css code writers. Once experienced at both the validator becomes meaningless.
There is also no correct rendering just because the page validates. But because the page validates developers, both new and more advanced, seem to believe their page should show according to their expectations....and they dont always....so whats the point in validation. None.
Unfortunately you know as well as I do that the validator cannot see many attributes that might be causing a page design to fail in a browser, yet it passes it as valid and misleads the blinkered into thinking validation is the key to making a webpage show correctly in a browsers.
The validator can only be of limited help, the rest lies in the hands of a competent operator.
Wed, 2008-09-24 17:54
#10
Well of couse valid markup
Well of couse valid markup does not guarantee a good page. A proper foundation does not guarantee that the rest of the house is well built, either. So are foundations irrelevant to good house design?
Modern browsers make validation easy and quick. Failing to validate shows a sloppy approach that speaks badly about the designer, showing an unprofessional attitude.
And of course the very folks who define the standards recommend that your code be validated, and they went to some expense to make that easy and free, presumably for a reason.
So whom are we to believe, you and I, some guys out of nowhere, or the folks who made the standard in the first place?
Wed, 2008-09-24 18:02
#11
You can if you wish refer to
You can if you wish refer to failing to validate a page as being sloppy or unprofessional, its your opinion of course.
I'm just presenting the flip side to all those that say 'make your page validate and everything will be great'. It won't necessarily be the case.
The bottom line, in my opinion, is you NEED to know your code, don't place to much emphasis on validation.
Wed, 2008-09-24 18:09
#12
And your qualifications to
And your qualifications to give this opinion are? As opposed to the opinion of the very people who designed html, what makes you qualified to disagree?
Do you publish web pages that aren't spell checked too?
Wed, 2008-09-24 18:08
#13
I just rant the validator. I
I just rant the validator. I was very confused by the 11 errors as some things have to be there. Speaking as a novice.
Line 17 bothers me. This is just a wrapper I placed around the whole site. Its a common wrapper code offered up time and time again on the Adobe forums. Its highlighted in yellow in the CSS doc and the validator said this:
Line 17, Column 0: start tag was here.
Wed, 2008-09-24 18:11
#14
Just run it through html
Just run it through html tidy to fix up the unclosed tags. Then cut and paste the result over your old code. Takes about a minute. If you don't already have the html validator extension to Firefox it will take about five minutes to get that.
Wed, 2008-09-24 18:23
#15
Is the program called HTML
Is the program called HTML tidy? I think I have that in Firefox. I'll check now.
I just ran CSS validator in Firefox and it came back with 1 small dumb error. Then I got:
Congratulations! No Error Found.
Cool.
Now I have to figure out the html errors. I'll search for HTML tidy. Just found it. I'm on a Mac which isn't listed as operating system. Although BeOS is. Wow. It that still around? I remember an incredible demo they gave about 10 years ago.
Wed, 2008-09-24 18:39
#16
It's the "HTML Validator"
It's the "HTML Validator" add on for Firefox that I use locally - version 0.8.5.2. The url for the extension's home page is http://users.skynet.be/mgueury/mozilla/
Wed, 2008-09-24 18:47
#17
Thanks!
Thanks!
Wed, 2008-09-24 18:53
#18
You're welcome - visiting
You're welcome - visiting the site prompted me to upgrade my own system to the latest version.
Wed, 2008-09-24 18:57
#19
It gave me a .xpi file. I
Ignore my comments. I flailed around enough that I got it installed. My brain hurts. 
Thu, 2008-09-25 08:47
#20
I don't need any
I don't need any qualification to give opinions, just like you don't. Who cares about the people who designed html. You obvious hang on their every word. Fortunately I don't live in that kind of narrow minded, blinkered world.
Thu, 2008-09-25 14:42
#21
osgood wrote:I don't need
I don't need any qualification to give opinions, just like you don't. Who cares about the people who designed html. You obvious hang on their every word. Fortunately I don't live in that kind of narrow minded, blinkered world.
I don't think I'll comment on that except to say that it appears to me to be self refuting. Dream on!
Thu, 2008-09-25 14:55
#22
Its you who is in dreamland.
Its you who is in dreamland.
Thu, 2008-09-25 15:31
#23
Um guys. I respect you both
Um guys. I respect you both as both have helped me and I have .1% of the knowledge either of you have.
Everything is working well but Line 17 still bothers me. This is just a wrapper I placed around the whole site. Its a common wrapper code offered up time and time again on the Adobe forums. Its highlighted in yellow in the CSS doc and the validator said this:
Line 17, Column 0: start tag was here.
Any ideas? I closed it at the end of the doc.
Thu, 2008-09-25 16:28
#24
Hi max71, If we are
Hi max71,
If we are discussing the link below your code is completely shot away. There's many errors in it.
http://hipnoticinc.com/alpha/alpha.reptile.bearded-dragons.for-sale.html
I'm not an advocate of bad code at all as my replies may imply. Before you can assess any code you need to know how to write it cleanly and correctly in the first instance. Thats not always possible for some one who is new and can take many years to acquire the skill necessary to do so.
I'm afraid that your code is far from what I would call 'acceptable' to work with. If you are going to rely on the validator and are at an early stage of your coding development then you really need to check at every stage of the operation, not wait until the end.
That way you can learn and correct each error as it comes up. Its not by any means the optimum method but the only one available if you do not have the abilities to write cleanly and precisely at this stage.
Thu, 2008-09-25 17:05
#25
Agreed. I was actually
Agreed. I was actually referring to this page:
But I see there are 408 errors on the page you referred to which are actually 2 errors repeated over and over. No "alt"
I'm going to have to change the div id for each photo to a class ID or make them individual IDs. Do you have an opinion? I'd like to spare all the time to make what would be 100 unique IDs for the photos. I'm hoping changing it to a class is easier.
The other is my commenting which I didn't realize. Both are easy fixes.
Ok, 2 errors aside form why it hates the "wrapper" problem.
Thu, 2008-09-25 17:10
#26
Wow the original pages have
*edit, pls excuse the word diarrhea, it's something I suffer from regularly and I try to take pills for it but nothing seems to work : ) Maybe some broken fingers. Anyway, I missed a good number of responses while typing this so ignore stuff that was already pointed out like the 408 errors thing.*
Wow the original pages have 408 errors! The good thing about fixing errors is that if you start with the first one, they often vanish in chunks because one error can cascade to a bunch more.
If you wrote the code that's in the alpha link thingie with the wrapper error, then you should see it pretty easily.
An HTML document begins with a Doctype and then the HTML tag. It ends with the closing HTML tag. So, nothing may come after that closing HTML tag. You have
Something is after the End Of The Document, so remove it. If it's really closing a new tag you've added, then you may still have to add in a closing div tag, but you do it where it makes sense (in this case, before the closing body and html tags).
HTML works like this:
Whenever a tag is opened, it gets closed in the opposite order it was opened (if it wasn't an "empty" tag to begin with). Anything that is opened inside that tag needs to be closed itself before the containing tag can be closed. So this:
is valid while this:
is not.
The a was opened in the div, so it needs to close before the div can close.
I will respectfully but strongly disagree with osgood on the validator thing. It's true that once you get a handle on HTML you'll use the validator more for catching typos than anything else, however I am STILL learning things from it. Just not real often : )
It was through the validator that I learned that with HTML4 Strict a legend is expected with a fieldset, while with XHTML it's completely optional (try it).
It was through the validator that I learned that forms need blocks as direct children (so none of this):
Some other things in general:
Go ahead and LEARN HTML. Learn its rules and where it came from (SGML). In case you're ever tempted to use XHTML, learn what it actually is and does and requires.
Reading the specs isn't fun but it's useful though I myself find it easier to use it as a reference for the chunk of code I'm working on.
There's almost NO excuse for using a turd doctype like loose/transitional. Start with Strict so the validator can help you learn your way to better code. I guess you could use Transitional out of stubbornness, and rarely you may need to use it to use a deprecated "something" because your situation gives you a super good reason...
It's hard to read the validator's complaints at first. After you figure them out (or if we help explain them to you) they will become more useful.
Osgood is correct that you can have completely valid code and it can still look like total gar-baage (say it like it's French to get the full effect) on any particular web browser. This is usually due to either of two things:
1. "Valid" code does not mean GOOD code. Your local municipality may have laws against full public nudity. So an obese elderly woman wearing the skimpiest bathing suit that fits her is perfectly LEGAL to walk around in the streets. Legal only means you followed the minimum of rules, and that's not always enough to be a Good Thing
2. Browsers don't always follow the rules. We usually call these BUGZ but sometimes it's just those developers being stubborn (like where every browser does one thing and a single browser decides to be the Rebel and not-- when the specs are undertermined). Yesh Firefox, I'm looking at you.
For instance, this is VALID (HTML4) code.
<div id='masthead'> <div id="outerheader"> <div id='innerHeader'> <p><img class="logo" src="logo.jpg" alt="logo"></p></div> <div class="companyHeader">& nbsp;</div> <div class="menu"><div id="menu"> <a class="menu_item" href="blah.com">blah.com</a><span>& nbsp;</span><a class="menu_item" href="blah2.com">Blah2.com</a><span>& nbsp;</span><a class="menu_item" href="blah3.com">Blah3.com</a><span>& nbsp;</span><a class="menu_item" href="blah4.com">Blah4.com</a><span>& nbsp;</span> <p>& nbsp;</p> <p>& nbsp;</p> <p>& nbsp;</p></div></div></div> <br> <br> <br> <br> <br> <br> </div>
Seriously, that's 100% legal (unless I made a typo?) though I have a space in the non-breaking spaces so they didn't vanish on me here at the forumz. And it should BURN your EYES. You should cry to the sweet mother of the baby Buddha when you see that. VALID != GOOD. Good, however, is pretty much always valid.
So, as you learn your way through HTML, you'll learn a combination of (hopefully) good semantics (using the tags that properly represent the content you're wrapping it with), validity (of course, that goes without saying), accessibility/usability (whole can of worms there but just as important as anything!), and preferably Minimal Markup. As one Crusty Old Guy Who Knows Stuff likes to say, the more code there is, the more code there is to break, so keep it simple. Use the fewest tags necessary to do the job (but still do the job right).
I'm still learning after more than a year how to do it right, so it's a long process. The validator is just one help. Forums and books and articles are others. Some Crusties stepping out of the inky shadows to point you the way with a rant or two about how in the old days they had to walk uphill through snow drifts BOTH WAYS just to make a webpage are a huge help.
Keep building pages, as you find stuff out often only by running into it. I still remember, more than a year ago, my husband writing a page and we were both getting frustrated as hell over this validator error, " not closed" or some such thing, and we could see it right there, . Turns out the tags aren't valid if they don't have a in them. Not that you'd ever know from the way the validator pointed it out. Sheesh.
Thu, 2008-09-25 17:29
#27
Thanks Stomme. Let me get to
Thanks Stomme. Let me get to work on the fixes. A lot of great information. This is my first attempt at hand coding and very first at CSS. I used to just have DW do all the code. Need to improve my skillset.
Thu, 2008-09-25 17:32
#28
Referring to the link
Referring to the link below:
It wont validate with the
outside of the tag (see below). Not sure what that closing
belongs to, possibly nothing. Remove it and see if you get a gold star from the validator.
That should be at least one page sorted.
As for youe other page that has numerous issues as pointed out by Stomme.
Once you have written a page I would expect no more that maybe a handful of errors thrown back by the validator. At that stage you should be able to form an opinion of whether they are worth correcting or not.
Thu, 2008-09-25 17:38
#29
Osgood. I fixed that. It was
Osgood. I fixed that. It was the closing tag for the "wropper" of the whole site. Dumb mistake I won't make again.
As I'm fixing everything any thought about best approach for all the text blocks as I asked in the above question? Appreciate it. I would like to do it right and not have to revisit it later.
OK, now down to 92 errors.
Same two - no alt tags and what to do about defining each photo.
Thu, 2008-09-25 17:44
#30
Quote:Once you have written
Once you have written a page I would expect no more that maybe a handful of errors thrown back by the validator. At that stage you should be able to form an opinion of whether they are worth correcting or not.
It took me more than one page to know which errors would affect my layouts and which are just "Eat your vegetables dear." The missing alt tags on images belong in that group. They're important to have but they will (almost) never affect page layout.
(yeah I can think of a page where the alt text affected the page layout : ) but special case)
*edit (geez you guys are fast!)
Max, it looks like you are using the names to make them do things, and you are repeating everything (pretty much) over and over again. The trick to doing this is learning to make fewer containers, naming them (prolly still with classes) and styling the child elements via the parent.
I'll show you what I mean in a minute. I'll take a screenshot of your page and draw on it and post it here : )
Thu, 2008-09-25 17:45
#31
No you're not understading
No you're not understading me. ONCE you can write cleanly and precisely, which takes many months, years even, I would then expect the validator to throw back no more than a few very minor errors. Usually those errors won't have any adverse effect on a page rendering correctly.
Thu, 2008-09-25 17:52
#32
Hi max71 As I think I
Hi max71
As I think I mentioned in another forum you can only have one instance per page of an 'id' but as many instances as you like for 'classes'.
I would change your ids for the repeating blocks and the repeating paragraph into classes.
Thu, 2008-09-25 17:55
#33
You did. Murray gave a
You did. Murray gave a warning so I wanted to be sure. Thanks again. And again. And well - thanks :thumbsup:
Thu, 2008-09-25 18:07
#34
wolfcry911 wrote:osgood,
osgood, meet Seedhouse. Seedhouse, osgood.
/sits back/
this should be good...
rofl
Thu, 2008-09-25 18:15
#35
I apologise in advance for
I apologise in advance for both the crappy resolution of this image AND the ginormous filesize... I couldn't have it both ways : (
http://stommepoes.nl/reptiles.jpg
If you give a class to the box (I just pulled "reptiles" out of my butt, name it whatever that box is supposed to hold or be about), then you don't need to give a class to the paragraphs and headers and things, though possible the images since you have two of them.
Also, this is very debatable, but I don't personally stick images in paragraphs cause an image is something very different from a paragraph (Chinese proverbs aside).
An example (CSS may not be all that correct because I'm building out of mah butt and not on a real page):
<div class="reptiles"> <img src="tehbabies" width="" height="" alt="teh babies" /> <img class="oppo" src="tehlizardz" width="" height="" alt="teh lizardz" /> <h3> Header text being the name for the whole box, the paragraph you called "title"</h3> <p>here's the jiggetty jiggetty textitty text text text block. <span>We sell babies.</span></p> </div>
The general rule of thumb with classes is, you only need to have a class on something if there are other things which are the same element that you need to style differently from the default. So, there are prolly other divs on that page who you don't want styled like "reptiles" is, and inside reptiles you see there are two images and you don't want them acting the same (well, you could, depending on how you CSS'd it).
So, the CSS would be something like this (this is outta mah BUTT so don't try it thinking it'll work, the widths and things are all made up):
div.reptiles { width: something wide enough to fit everything; any other special attributes? overflow: hidden; (cause it wraps floats the easy way) clear: both; (optionally, you could float all .reptile divs instead) } .reptiles img { float: left; padding: whatever border: whatever anything else special you want; } .reptiles h3 { you only need to style to taste here, including font-size if it's too big; } .reptiles p { same here; } .reptiles .oppo { float: right; }
So, most things don't even need a class, and that would help you reduce your extra id's.
So for another example, instead of doing this:
<div id="menu"> <ul> <li class="menu_item"><a href="blah"></a></li> <li class="menu_item"><a href="blah"></a></li> <li class="menu_item"><a href="blah"></a></li> <li class="menu_item"><a href="blah"></a></li> <li class="menu_item"><a href="blah"></a></li> </ul> </div> #menu .menu_item { styles; }
which you'll see a lot of out there, you can do this:
<ul id="menu"> <li><a href="blah"></a></li> <li><a href="blah"></a></li> <li><a href="blah"></a></li> <li><a href="blah"></a></li> <li><a href="blah"></a></li> <li><a href="blah"></a></li> </ul> #menu li { styles; }
Which is really really nice. Lots of programmers start out adding classes to everything cause they think everything that's styled needs a class. Instead, give classes to those who are special:
<ul id="menu"> <li><a href="blah"></a></li> <li><a href="blah"></a></li> <li class="foo"><a href="blah"></a></li> <li><a href="blah"></a></li> <li><a href="blah"></a></li> <li class="foo"><a href="blah"></a></li> </ul> #menu li { color: red; } #menu li.foo { color: blue; }
Something like that.
Thu, 2008-09-25 18:36
#36
Wow, thanks Stomme! I'm
Wow, thanks Stomme! I'm struggling with it now. That helps. Let me study what you did.
Thu, 2008-09-25 22:48
#37
ok, I successfully changed
ok, I successfully changed the divs to classes without any layout issues.
When I've been trying to duplicate Stomme's code suggestions the layout changes. I worked on it knowing there's issues now with float and margins due to a new div but I can't get it to correct.
Here's a sample link. The first photo text block is what I wrote changing to classes.
The second block is with Stomme's suggestions which I missed something. The background image isn't appearing under the photo.
http://hipnoticinc.com/alpha/alpha.reptile.chameleon.breeders1.html
Here's the new CSS
div.breederphoto {
background-image:url(images/photo-frame-blue-tall.png);
float:left;
margin: 0px 0px 0 100px;
width: 178px;
height: 139px;
clear:both;
}
div.photoblock {
display:block;
float:left;
padding-top: 0;
width: 270px;
height: 137px;
/*background-color:#5c6c86;*/
background-image:url(images/bearded-text-bg.png);
margin: 0 0px 40px 0px;
clear:none;
}
.breedertitle {
float:left;
display:block;
background-color: #57699f;
font-size: 11px;
color: #cadafe;
font-weight: bold;
padding-left: 3px;
width:268px;
height:16px;
margin: 0px 190px 0px 0px;
}
p.breedertext {
float:left;
font-size: 11px;
padding: 0px 0 0 5px;
margin: 0 190px 0 0px;
width: 257px;
line-height: 20px;
color: #CCCCCC;
}
div.breederphoto a {
width: 160px;
height: 120px;
display: block;
border: 6px solid #fff;
}
div.breederphoto a:hover {
border: 6px solid #999;
}
a img {
border: none;
}
Fri, 2008-09-26 06:38
#38
What's with this,
What's with this, "height:2500px;"?
It is almost never a Good Thing® to fix the height of major elements, especially not those that contain text.
There is a lot of print paradigm nonsense that does not apply to the web. The web page is not a piece of paper with arbitrary dimensions. You will save yourself a pot-load of grief if you realize early on that a web element is just as short or as long as it needs to be.
cheers,
gary
Fri, 2008-09-26 06:41
#39
So if I don't declare a
So if I don't declare a height it will contract or expand as content is added?
Fri, 2008-09-26 06:57
#40
Hi max71 Yes, declaring no
Hi max71
Yes, declaring no height will allow the content to expand and contract to its 'natural depth, which could be totally different on each end users computer, so its the correct way to go. Let the content find its own height.
So for instance, if you fix a box at 200px high and it has a red background but the content in it, the text, expands to beyond 200px high in someone elses browser because they have a different sized text setting to the one your using, the text will just spill out of the red box which will always be 200px high.
The only time you would need to set a height on a container is in a situation where an image was in it, or you want to use and iframe to restrict text to a given height, or you want a fixed height for some other reason BUT know that fixing the height will not restrict the end-users ability to see the site correctly according to their browser set up
Fri, 2008-09-26 07:13
#41
Very cool - thanks!
Very cool - thanks!
I think you'd be proud. I'm only getting around 3-6 errors and half are alts and the other is it doesn't like the
--endtemplate-- comment from the edit template field.
I worked hard on this my first css site. No way in the world I could've done without people like you Osgood and other on this and the Adobe board. My humble gratitude! :thumbsup:
Oops. I guess there's a design flaw. If I want the left hand nav bar to follow the depth of the body to the right of it I can't do it without content pushing it down. Hmmm.
Fri, 2008-09-26 07:07
#42
Right. And if you do find
Right. And if you do find yourself in such a situation where you need at least x-amount of height because of a background image, you can often get away with min-height for smarter browsers and height for IE6.
Min height means that: minimum height no matter how small the content is, but if content grows, the box can auto-expand beyond your minimum. Which is what IE6 does anyway, which is wrong but oh well, it doesn't understand min-height anyway.
So like, if you had a bg image that's 400px high and your content on your machine only gets it to 200px high...
#box {
min-height: 400px;
background: url(somepic.gif) 0 0 no-repeat;
}
* html #box {height: 400px;}/*cause IE6 is a tard*/
That would do the job.
If you are using something like overflow: hidden to make your container wrap your floats, and also set height for some reason, the text wouldn't spill like it's supposed to, because you've set a height and overlfow: hidden will... hide the overflow : ) As it should.
Uh, sorry, which bg image isn't showing? I'm missing it ('s ok, I often miss things right in front of me).
Fri, 2008-09-26 07:12
#43
I make a note about
I make a note about comments. IE has a nasty, nasty bug re comments, esp in between floats. I've gotten into the habit of doing deathshadow-style comments because of it.
Let's say you have two floated boxes, and a comment after the first one.
stuff...
other stuff...
IE thinks that comment is some sort of content on the page. Not every time, but often, this can result in the Duplicate Content bug. Actually, ANYTHING which is not shown on the page which sits in between floats can set this off. Thanks to Gary for helping me through the last time I ran into this.
When it's just comments, you can save hair by sticking them inside the float instead of in between them.
stuff...
other stuff...
This includes any funky template text that appears on the page.
Fri, 2008-09-26 07:16
#44
You rock Stomme! I printed
You rock Stomme! I printed out your earlier suggestions and jpg to put in my reference book. I have to study what you said in order to fix the left nave issue.
Fri, 2008-09-26 07:18
#45
Uh, careful. Remember I was
Uh, careful. Remember I was typing that wildly into a forum. I didn't build it or test it. There might be a big nasty buggy-bug in there or I may have left something out of the example that you aren't aware of or whatever.
Fri, 2008-09-26 07:32
#46
Only 3-6 errors thats less
Only 3-6 errors thats less than what I usually let go (depending on what they are of course
Well its good to see you addressing some of the issues. I'm sure you've improved a million times in the last few days in regards to coding.
Fri, 2008-09-26 07:39
#47
I swear after I had enough
I swear after I had enough understanding from a book to know what teh Crusties were talking about, I learned more on forums than anywhere else! Even when Crusties are arguing with each other, you learn. It's great.
Fri, 2008-09-26 07:53
#48
Yeah, I spent over a month
Yeah, I spent over a month watching every CSS and HTML video on Lynda.com Printed out a big book of notes as well as pages written in long hand.
Then I started from scratch and the began flipping out. They tell you enough just to get you in trouble. :rolleyes:
I learned more in that last couple days with help from a world wide circle of kind people that in months of studying.
Fri, 2008-09-26 13:37
#49
You may not be a book
You may not be a book person, but I swear the book that helped me get my feet under me was
Build Your Own Web Site the Right Way Using HTML and CSS by Ian Lloyd. You learn by doing, building the site www.bubbleunder.com and seriously what's great is that he tells you what you're doing and WHY which I think is pretty damn important.
My only problem with it now is that he starts people off with XHTML, which is badass-looking with that fat X in there but is not worth it and does nothing for you but give the illusion of awesomeness or some kind of extra extensibility to HTML that actually doesn't exist as long as you're sending it as "text/html" (which you have to if you want the most popular browser in the universe to render your page at all). Bah, just a rant. HTML4Strict FTW.
Fri, 2008-09-26 15:53
#50
Thanks Stomme. I'll check it
Thanks Stomme. I'll check it out. PVII has a book they recommended. Quite expensive at $100US