Jump to content

dbrimlow

Members
 View Profile  See their activity

  • Posts

    712

  • Joined

  • Last visited

    Never

 Content Type 

Everything posted by dbrimlow

  1. dbrimlow
    Whoops, bronzemonkey, little typo, you put the close head tag too soon. I actually prefer floating all left. I put borders and margins and stuff to show how you can play with this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Blah</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> body {width:100%; margin:0; #color:#555555; background-color:#555555} a:link, a:visited {color:#EEEEEE} a:hover, a:active {color:#99FFCC} #header {margin: 10px; background-color:#800000; color:#FFFFFF; text-align:center;border:2px #333333 solid;} #container {margin:0 auto; width:80%} #column-center {float:left;width:50%; border: 1px #333333 solid;background-color:#999999;padding:5px; margin:5px} #column-left {float:left;width:20%;border:1px #006699 solid;color:#FFFFFF;background-color:#333333;padding:5px;margin:5px} #column-right {float:left;width:20%;border:1px #555555 solid;color:#FFFFFF;background-color:#333333;padding:5px;margin:5px} #footer {display:block; width:100%; color:#000000; background-color:#FFFFFF; height:2em} #footer a:link, #footer a:visited {color:#006699} #footer a:hover, #footer a:active {color:#99CCFF} #footer li {display:inline; margin:5px 80px; padding 5px} div.clearboth {clear:both;} </style> </head> <body> <div id="container"> <div id="header"><h3>;oijv [oij f[oij f[oijuf[ozx;klcvj</h3></div> <div id="column-left"> <ul> <li><a href="#">ukhfovhb</a></li> <li><a href="#">ukhfovhb</a></li> <li><a href="#">ukhfovhb</a></li> <li><a href="#">ukhfovhb</a></li> </ul> </div> <div id="column-center"> <p>ukhfovhb</p> <p>ukhfovhb</p> <p>ukhfovhb</p> </div> <div id="column-right"> <p>ukhfovhb</p> <p>ukhfovhb</p> <p>ukhfovhb</p> </div> <div class="clearboth"></div> <div id="footer"> <ul> <li><a href="#">ukhfovhb</a></li> <li><a href="#">ukhfovhb</a></li> <li><a href="#">ukhfovhb</a></li> </ul> </div> </div> </body> </html>
  2. dbrimlow
    Rommeo, what you are asking about is, indeed, extremely important for you to be clear on right from the start. Above, bronzemonkey mentioned a word you should fully understand ... "selectors". This is what css is all about. When you said "tag", you actually meant "element". SELECTORS actually "select" the ELEMENT in the html that you are trying to style (either a tag, a class or an ID). So h2 {} or p{} is a "tag" element, #content{} is an ID element and .clear {} is a class element. Just so you know the proper "jargon". Now, what you are trying to determine what is called "specificity" - which is the "Cascading" in Cascading Style Sheet" - SPECIFICITY determines the order of importance for selectors - or "which selector will over-rule in the event of duplicate selectors?" More specific selectors will override more general ones. So "#content h2{}" and or ".content h2{}" will over-rule "h2{}" - because an ID or CLASS element selector is more "SPECIFIC" than a tag element selector. This link is to a tutorial on this issue that is actually very easy to follow and understand: Selectutorial
  3. dbrimlow
    The no script tag goes after the body tag - just remember that it is actual html markup code, which belongs in the body, so you will always know where to place it. I include a plain html version of a no script tag of my complete nav header right after the body tag for those who turn off jscript: <noscript> <h1>Apartments Inc</h1> <ul class="noscript"> <li><a href="../index.html">home </a> | </li> <li><a href="../rentals/index.php">apt for rent </a> |</li> <li><a href="../sales/index.php">apt for sale </a> |</li> <li><a href="../services/index.html">move-in services </a> |</li> <li><a href="../who/history.html">about us </a> |</li> <li><a href="../who/contact.html">contact us </a></li> </ul> </noscript> Your nav bar could be done the same. And, for what it's worth, I personally think you have a good eye for design. Keep it up. Don't get discouraged and particularly don't let the "jerks" get to you. Dave
  4. dbrimlow
    For a true beginner with standards, it is tough. You will have a lot of questions and a LOT of frustration ... we've all been there ... and that's why many of us here try to help as much as possible. First, let me point you to, in my opinion, "the #1 newbies must have link for understanding css" ... Max Design's "Selectutorial" . This will easily and very simply explain the crucial rules of css. Once you know the rules, the other links everyone here will point you to will be easier to understand. Bookmark Max Design. Because when done with selectutorial, you will move on to the "ONLY online resource for newbies to understand the power and beauty of lists" the venerable, we all know and love it, "Listomatic" (which includes Listomatic, Listomatic 2 and Listutorial)! And THEN, you can move on to the real fun with "Floatutorial". Good luck. Dave
  5. dbrimlow
    To expand further on this, aside from overall sound structure of importance, it is also generally a good idea to only use h1 once on each page for Search Engine Optimization - I always make it my site name (whatever.com) and use it in my header. But, after that, think of using h2 through h6s the same way you would in a word processing document. Create your html markup, and don't even apply any CSS or layout to it yet. Just let it flow linearly from top to bottom using just headers, paragraphs and lists - as if you were actually making a web page from a Word document -- because this is how a search engine bot will see it anyway (once it strips all tags, styles and images) in order of importance. eg: <body> <h1>Site name</h1> <ul> <li><a href="#">Nav item 1</a></li> <li><a href="#">Nav item 2</a></li> <li><a href="#">Nav item 3</a></li> </ul> <h2>page title</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. </p> <h3>1st major header</h3> <h4>1st minor header</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy . </p> <h3>2nd major header</h3> <h4>2nd minor header</h4> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod </p> <h5>caption header</h4> <p> text of caption </p> <p> << Previous page Next page>> </p> <ul> <li><a href="#">Footer item 1</a></li> <li><a href="#">Footer item 2</a></li> <li><a href="#">Footer item 3</a></li> <li><a href="#">Copyright © sitename</a></li> </ul> </body> Make the header font sizes descending relative to the body font-size (higher than to lower than). That's why the format is generally h1 largest, h2 next, h3 and so on with h5 being equal to body font-size and h6 being actually smaller than the body size. For example, if you specify a body font-size of 95% (for a "flexible" layout) then the header font sizes would be as follows (I specified generic margin and padding for h2-h6 to provide a basepoint, if necessary, when using a header for a specific ID or Class): h1 { margin: 0; color: #FFFFFF; padding: .3em 0 .3em .5em; font-size: 1.8em; font-weight: normal; } h2, h3, h4, h5, h6 {margin: 0; padding-top: 1em; } #content h2 {font-size: 1.6em; color: #800000;} #content h3 {font-size: 1.4em; color: #555555; padding: .25em;} #content h4 {font-size: 1.2em;} #content h5 {font-size: 1em;} #content h6 {font-size: .9em; padding: .2em; font-weight: bold;} #footer h6 {font-size: .85em; color:#FFFFFF; padding: .25em; font-weight: bold;} I generally structure my headers as follows: H1 is the main "site name", h2 is "page title", h3 for ALL major headings, h4 for sub-headings, h5 for caption or flyout ("minor") headings and h6 would be used smallest major heading in a class or ID (like a footer) where the font is traditionally and significantly smaller than the body).
  6. dbrimlow
    LOL. Absolutely. BUT! If you do see 300 errors ... @ 150 of them will be the same mistake done 150 times. So don't punk out. Actually, I learned more about valid markup thanks to those massive error pages and the subsequent debugging.
  7. dbrimlow
    You have no DOCTYPE. This page was therefore designed for IE only.
  8. dbrimlow
    You know what? When in this situation - and it is a "must do" - go ahead and use a table ( anyone see Toonmariner?). I can't believe I'm going to say this, but, until css and IE eventually see eye to eye, sometimes a table is the only solution. There. I said it.
  9. dbrimlow
    The first question I would ask is are you using a DOCTYPE or are you just starting your page with <html> Not using a DOCTYPE is basically designing a page for IE only. Also, 1px is not nearly enough padding to make any noticeable difference. I usually use 4px to 5px padding for photos. What I have learned is to FIRST test the page in Firefox and get it working as you want it to. Then, create an IE only css file "IE-only.css" and modify ONLY those specific elements that need to force IE to behave. You then call the IE-only.css file using an "IE conditional comment", like so: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Whatever</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="realbrowser.css" rel="stylesheet" type="text/css"> <!--[if lt ie 7]><link rel="stylesheet" type="text/css" media="screen" href="IE-only.css"><![endif]--> <head> <body> The conditional comment will apply to any version of IE up to 7.0. And only IE will use it - while the rest of the browsers use the "realbrowser.css" file. However, you don't need to re-list every Class or ID element that's on the realbrowser.css file in the IE-only.css file ... just those Class or ID elements that need tweaking in IE, and just the PORTIONS of the class or ID element that needs to change to work in IE. For example, if .img_frame{padding: 1px; border: 1px solid #99999} works in FF but not IE, then (my guess being width and height are causing the problem). in the IE-only.css file, I would simply add in the width and height as follows: .img_frame {width:1px; height:1px} IE will still use all the elements in the other css file that it likes, but it will also now apply the width and height elements. What I like about this is that I can create a valid, standards compliant css file for all browsers. Then only modify the four or five elements to make IE work as well. Usually IE only needs sizing and positioning modifying - heights widths, margin, padding - while the other css elements are fine..
  10. dbrimlow
    This is the old "equal height box" problem. This is really a toughie at present because the solution is not cross-browser compatible. What you are seeking is "min-height" and "max-height". This works in real browsers but is, of course, not supported by IE. There are some very creative hacks to make IE somewhat mimic the min/max commands, but they are very wonkey. In real browsers you would specify the following: .boxes { max-height:320px; min-height:250px } In IE you would use an "expression" within an "IE conditional comment", but I don't know how the syntax to specify the heights is presented for your particular example.
  11. dbrimlow
    You really are an ass, aren't you? Go figure out your own solutions since you obviously can't get over your own brilliance. Here's a clue for free ... it wasn't the DIV that was stupid.
  12. dbrimlow
    It validated fine and works in Firefox and IE. I'll check out Safari, Opera and Konquerer. Frankly, the only browsers I could see it potentially not working in would be old IE 5 win and Mac and Old Netscape. And at this point, most designers have stopped trying to accommodate those dinos anyway - it's too easy to update IE to at least 6 and anyone using Netscape 4 has no idea what the web looks like anyway. As for text-based browsers ... well ... they wouldn't see the graphic either. HOWEVER, I don't know if the technique will work on an image (which I now realize is what chiprivers asked).
  13. dbrimlow
    Because you only need to float the containing elements. You need to understand how floats work. Nothing can eff up a layout more than using floats without understanding them. Here is the perfect tutorial: http://css.maxdesign.com.au/floatutorial/index.htm Also, you can, and should, echo html, that's part of the beauty of php, but not until your layout, markup, doctype and css are perfect first. Strict what? If it was XHTML 1.0 Strict, served with a media type of text/html, but using that incorrect mime type charset of content="application/xhtml+xml;charset=iso-8859-1" would mess up your design anyway when you added php ... because it was expecting XML. media type and mime type are interconnected within xhtml. It is unforgiving if you get it wrong. Again, XHTML should ONLY be used if you are parsing XML. What is happening to you is EXACTLY why the whole XHTML vs. HTML debate got started ... people began to see the flaw in using XHTML as text/html. People are stubborn and prone to defend something that may seem right or may happen to work for them ... until it doesn't. XHTML should never have been permitted to be served as text/html ... and it certainly should never have been branded the html replacement. Because it is wrong. XHTML served as text/html simply converts the document to HTML anyway!!
  14. dbrimlow
    I forgot to mention ... #puddle should float:left, and you need to add "a:active" after ALL of your "a:hover", like so: a:hover, a:active{} CSS rules require that all four a elements be declared and in the proper order - a:link, a:visited and a:hover, a:active. This goes for every time you use an a element. If you don't, then all kinds of strange things happen to links across browsers.
  15. dbrimlow
    Although you may think you are providing enough information to allow us to help you debug this, you haven't. And that's why bronzemonkey has been trying to get to the bottom of this (with a hell of a lot of patience, I might add). But on the face of it, your whole problem stems from your DOCTYPE. XHTML 1.1 is an extremely precise DTD with no room for error and is SPECIFICALLY NOT to be served as text/html - which you are doing. You are also using mime type - content="application/xhtml+xml;charset=iso-8859-1". But you are serving the page as text/html. This causes a conflict with user agents and forces them to assume a default mime type of utf-8 and creates conflict with the characters in your code. XHTML 1.1 is NOT and cannot be used to serve the "text/html" media type. IF you are actually parsing XML, then you must use an xml declaration and charset header of utf-8 or 16: <?xml version="1.0" encoding="UTF-8"?> AND there is a major issue with cross-browser support for XHTML 1.1 served with the proper media type and mime type ... IE doesn't support it, and mangles it into text/html. Furthermore, "well-formedness is crucial with XHTML 1.1 and without it CSS will not properly render. Your php is echoing html code. Lose the xhtml 1.1 doctype. This is exactly why people should STOP using XHTML unless they are specifically parsing xml and are serving the media type as application/xhtml+xml. Use the html 4.1 strict DTD if you want to have truely valid code. XHTML should never be used as a text/html media type; it is an application media type intended to parse XML ... not serve html. XHTML 1.0 served as text/html simply gets converted to HTML XHTML 1.1 served as text/html is simply wrong.
  16. dbrimlow
    Now that's pretty cool ... and it's OLD if the author is concerned about the evil Netscape 4! It works fine in FF and IE6. Here is the test run code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> .box { float: left; width: 100px; height: 100px; } #boxContent { border: none; background: #9FC; } #boxContent { position: relative; left: -2px; top: -2px; } #boxContainer { position: relative; background: #666; margin: 4px; } </style> </head> <body> <div class="box" id="boxContainer"> <div class="box" id="boxContent"> A drop shadow around a box </div> </div> </body> </html>
  17. dbrimlow
    Absolutely! Ignore what the tutorial said about css never having been meant to be used as a dynamic content replacement ... sure, but that was before jscript became so potentially dangerous. Also, forget the cross-browser issue, too. Today there are so many great techniques to make IE behave ... and cssplay.co.uk shows the best of them.
  18. dbrimlow
    Okay, I found a great article by Roger Johannson that explains the issue of XHTML properly using the application/xhtml+xml MIME type. It also explains why in the early days everyone didn't know abouit the problem because they had servers automatically using text/html. This is great for beginners and Pros alike to get what I've been talking about. LOL, note how Roger walks on eggshells and specifically states he is steering clear of the html/xhtml debate ... I wonder why? http://www.456bereastreet.com/archive/200501/the_perils_of_using_xhtml_properly/
  19. dbrimlow
    Absolutely. I make it a point to answer any questions the way I always wanted my questions answered. This thread was, to me, important to both beginners and pros. I am always striving to learn, and every day is an adventure in discovering new concepts and techniques. And if I'm shown that a position I took a stand on was incorrect, I accept that I was mistaken and adopt the correct position. Conversely, I would defend against all comers a position that I KNOW is proven to be correct. I've been programming since punch cards and IBM 370 mainframes the size of a mini-vans ... I've learned that inflexibility just leads to massive debugging down the line.
  20. dbrimlow
    Okay, good point. It is hard enough for beginners to css and standards. But, that doesn't change the importance of people realizing the great error that was caused by the whole xhtml as text/html issue. In other words ... we were duped. We were told that xhtml was the next HTML. And that was simply wrong right from the start. Here's the fact: XHTML was not created to be served as text/html (it was "permitted" to be so). The rules of structure were to force conformity with xml rules of structure in order to be served as application-xml. XHTML that IS served as text/html is basically rendered by browsers as HTML (with strange end tags). Period. There is no denying this basic fact. Here's opinion: HTML 4.01 Strict doctype is the only true valid html 4.01 doctype because it does NOT allow the use of any tags, syntax or markup that is not part of the current version of HTML 4.01. Using HTML 4.01 Transitional Doctype is cheating because it does NOT adhere to only those tags, syntax or markup permitted exclusively by the current version of HTML 4.01. It allows deprecated elements from previous html versions. Hence, in no way is it valid HTML 4.01. XHTML 1.1 strict or transitional that is served as text/html is interpreted by browsers as a strange form of HTML ... it is not valid HTML 4.01. And for beginners to be taught to use it is irresponsible. Conclusion: If you are using xhtml 1.1 as an html replacement (served as text/html), you are not coding any current valid html version or using xhtml correctly ... even though it "validates" as xhtml (this just means that you have no errors in your xhtml - in case you happen to be properly serving it as application/xhml+xml). So, beginners should (in my opinion) use html 4.01 strict doctype to ensure that they are coding the most current version of proper HTML and not using old deprecated tags from previous versions. It does not affect the css in any event.
  21. dbrimlow
    This is how we got to the sorry state we are in now, actually. And more specifically, how we got stuck with so much Microsoft proprietary crap. ALL of their office files can be "saved as a web page". Ever see the horror MS uses as code for these pages? And since IE loves a crap code, ALL of the online "build your own web pages" also decided to code crap specifically for IE. And with the exception of a few CMS programs out there, THEY ALL CODE CRAP! So, what we need is to get rid of all the 3rd party programs that CODE CRAP (ever see the code view of mypage???!!!) for the masses ... not give them more.
  22. dbrimlow
    There are so many ways to align images with css. I recently came up with a fun way using the old "pagination" trick. Pagination is when you have a "previous" and "next" link on a page. p.pagination { margin: 0 auto; background-color: #000000; text-align:center; } .prev { float: left;padding-left: 10px} .next {float:right;padding-right: 10px} Then create a paragraph and put your photos within using either class="prev" to float left or class="next" to float right. Here is an example of it in action from my website http://www.bluesmandeluxe.com/lpdeluxe.html : the images on the bottom are all using just a paragraph for each set. <p class="pagination">< img src="LP/perspective_a1.jpg" alt="perspective a" class="next" height="300" width="173" /> <img src="LP/body.jpg" alt="body" height="293" width="179" /> <img src="LP/lpdh2.jpg" alt="perspective a" class="prev" height="300" width="134" /> <img src="LP/lpdh4jpg.jpg" alt="lpdh4" class="next" height="300" width="137" /> </p>
  23. dbrimlow
    bronzemonkey is right on all points, of course. But one point he flew over at 90mph was crucial (if you are dynamically generating your page). Always start with a barebones, no style at all, blank paper first, THEN create a well formatted html page with simple markup tags in order (without styles). Once that's done, start your css page to style the layout and colors. Check to make sure it is valid and has no typos. NOW, you can create your php echos and includes. Remember, if you are idoing an includes, it should only be the snippet of code for residing within the body of the document ... it does NOT need to be, nor should it ever be, a stand-alone complete html page. What I do is leave the doctype and head tags static. Then code my php exactly where in the document I want to echo dynamic content. I try never to re-echo any html markup that can be static - just place my php around the static content.
  24. dbrimlow
    The key to making css behave is to make sure you are following the rules and have no errors or typos in your markup. Your site has some major issues (one of which is "embed" is extremely hard to work around). It is not validating as proper html of any type (even though you are using a transitional doctype). Here is a link to the w3c html validation tool for your site. It shows 18 errors that makes your site invalid: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fsrh.com%2Ftaxgirl%2F No matter how much you tweak, and what advice we give you based on proper rules and technique, until you are error free there is no telling what can happen. Fix the 18 errors first; then debug the css.
  25. dbrimlow
    Here is why the first try didn't work: "bground" is not a valid tag - make it an id "#bground"or class ".bground". Possible solution to 2nd attempt (I used css shorthand for the entire "background" instead of listing each separately) - make div.body an id selector instead of class (you only use it once per page) set the positioning of both backgrounds to "top left". Designate the 100% width of the body tag and designate the width and height of compass.gif as the width and height of the #body. Last and most important, set #body margin-top to 1px more than the height of the head.png height. What you want is for the #body to have a margin from the top of the window that equals slightly more than the height of head.png: body{ background: url('Images/head.png') top left repeat-x; width:100%; margin:0; } #body{ background: url('Images/background_compass.gif') top left no-repeat; width:whatever background_compass.gif is.px; height:whatever background_compass.gif is.px; margin-top:whatever head.png height is plus 1px } And, while you are using css, lose the old markup level body links color tags! Designate the link colors with css - add a hover color change so visiters know they are selecting the right link (always designate links in the following order - a:link, a:visited then a:hover, a:active: a:link, a:visited {color:#000000} a:hover, a:active {color:#800000} But! CSS relies heavily on proper html structure and tag usage. You can have the perfect CSS that would otherwise work like a charm, but if you don't use a correct DOCTYPE, and you have errors or typos for ANY element within your body tags, the CSS will not work as intended. Are you using a DOCTYPE? Or does your page begin with just an "html" tag?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.