Jump to content

dbrimlow

Members
  • Posts

    712
  • Joined

  • Last visited

    Never

Everything posted by dbrimlow

  1. Just a little advice, if you use FF and have the Developer toolbar installed, disable images. Then in "options" disable java script. Your whole page layout is based on graphics and javascript whereas the same look can be done with text, css and minimal graphics. Because of this, your design markup has a bad case of "DIVitus". It will not do well in natural SEO ranking and people with visual disabilities.
  2. You can't insert php into a css document. Think about it. PHP only works with a .php extension. Once you convert a .css file to a .php file, it is no longer a .css file. A solution similar to Rhyboo's solution is best ... generate your entire inline php on the fly in the head tag. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>php in head</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <?php echo" <style type=\"text/css\"> body { color: #000; background-color:#fff; font-size: small; margin:0; } etc., etc., <style>"; ?> <head> <body>
  3. It is a combination of invalid markup, non-valid doctype, improperly written css and a LOT of "tag soup". Sorry I couldn't be more helpful, but there is too much wrong in too many areas. Nested tables with fixed widths for layout is the problem. Non-semantic markup is the second problem (it lets the browsers decide default block level dimensions). There isn't a semantic tag in the whole thing. Learn to use headers, paragraphs and lists for your text instead of dumping them naked into table cells. This is an IE only friendly quirks mode page. Take a look at the validator and fix the errors: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.dumptrumpet.com%2F
  4. Just to clarify, ayok, you "should" have text inside the <h2> tags. Like TM said, if you are using an image instead of text, that's poor markup - and if you do that anyway, you may as well just use the <img src="" /> instead of the image as background. At least that way people with visual disabilities will know there is an image there. Using blank header <h2> tags removes any benefit of using headers in the first place.
  5. Eventually this will be adopted by all developers ... unfortunately, it is still way too early. We all only just stopped targeting IE 5 within the past year or so. IE6 still has legs for AT LEAST another 2 years. We are all looking forward to seeing how honest and committed MS is about their intent of making IE8 100% CSS2 Spec compliant (leave it to MS to say instead of just being standards compliant they are going to try to be one of the first modern browsers to be literally CSS2 spec compliant ... I'll believe it when I see it). Should IE8 live up to its promise, you will see developers dropping IE6 sooner rather than later.
  6. We can't help you unless you either post a link to the pages in question, or posting both the css and html. Floats will work but need to be properly "cleared". Width, margins, paddings and content also affect floats. Again, we would ne to see the code.
  7. What is it you are asking? Your basic concept about the image command is right. It all depends on the image - designate height and width of the container at a minimum of the size of the image. If the image is 40 x 80 pixels, than that is the minimum height and width for the container. Most common way to set a "logo" is to contain it within a header: #header { float:left; margin:1em .5em; padding:.5em; width:100%; } /* always self-clear parent container floats with the :after pseudo element */ #header:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* add the logo */ #logo { float:left: margin:.5em 1em; padding:0; height:40px; width:80px; background:#fff url (../images/screen2.jpg) no-repeat 0 50%; } Change the background color to whatever the container background is (if other than parent or body), then add the url and image path, then repeat or no-repeat, then 0 50% (meaning to the left and middle of any elements to its right such as text h1 */ <html> <head> <link rel="stylesheet" href="stylesheets/lowther.css" type="text/css"> </head> <body> <div id="header"> <div id="logo"><div> <h1>site name</h1> <div> </body> </html>
  8. You have quite a few mark-up html issues (closing p tag AFTER closing table tag!!) But here's your main layout problem: position:absolute; left:200px; width:auto; Why are you using position:absolute? First, this takes the div out of the flow of html and it is not a "wrapper". Width:auto means nothing. designating "top", "left", etc in an element that doesn't also specify "position:absolute" means nothing ... like these: table.logged_in { top:; } table.left_bar { border:#00FF00 groove; background-color:#000000; top:120px; } Your layout is never going to work using this, and it is simply too wrong to even advise you how to fix it. Get a book on css basics instead of trying to guess; it will save you months of frustration.
  9. First, list styles are intended for list elements - ul, ol, dl, li - not paragraphs and headers. Second, A:visited must follow a:link, a:hover must follow a:visited, a:active must follow a;hover. (LVHA, aka "LoVeHAte"): A { COLOR: #4f032e; FONT-FAMILY: arial,helvetica,sans-serif; TEXT-DECORATION: underline } A:link { COLOR: #0033ff } A:visited { COLOR: #0033ff } A:hover { COLOR: #000099 } A:active { COLOR: #000099 } What you are attempting to accomplish can be done using nested lists. I personally like using "definition lists" (dl) for this because of the "definition title (dt)" tag. <dl> <dt>title or header</dt> <dd>data or content <dl><!-- begins nested dl --> <dt>sub-title or sub-header</dt> <dd>sub-data or sub-content</dd> </dl><!-- ends nested dl --> </dd><!-- closes original dd data item --> <dd>continues parent list</dd> </dl> I also combine real headers with lists to create the same effect but have the h1, h2 tags for SEO purposes. The following link is a page where I used header tags, nested lists (ul) and a specific "class" for certain list items to look different than others to create the header/sub-header look: sitemap header/sub-header effect
  10. Like haku says, it is not a good idea for SEO. But, more important, it is BAD semantic markup. The point of css is to remove unnecessary code from the page markup, not create more. "Layers" are a DreamWeaver concept. What they are in the real world is the css layout element "position:absolute" with javascript as a dynamic on/off control. Ever look at the jscript dreamweaver creates? Avoid it whenever possible. It sound to me like you should look into coding using AJAX.
  11. Absolutely. This markup is semantically well done (well 85% or so) ... so why just slap html at the top and serve it as a quirks mode IE buddy? Seems a shame. Use a doctype and put it into a semblance of standards mode. Since the tags have an xhtml closing slash, replace <html> with: <!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"> I don't usually advocate using xhtml at all (when served as text/html), and never advocate using a transitional doctype, but since you are working with existing code that uses old, deprecated HTML 3.0 code, it is easier to just use the xhtml 1.0 transitional doctype. A large part of the problem is the javascript. It is not a very elegant effect and is a contributing factor to the positioning issues.
  12. The display:inline; hack is to fix a bug in IE with "floats", it can't help with "position:absolute" (which is a problematic way to layout a page). position:absolute takes an element outside of the flow of the rest of the page and other elements that are around it. It makes the element either relative to the browser window or a parent element that uses position:relative (as you do with #layout). Since it is outside the flow of html, positioning it where you want it relative to other elements in your page is very, very involved and not for the faint of heart ... it is avoided entirely by most who are proficient using css. IE is not position:absolute friendly because of "HaveLayout". BUT, I assume (hope) that the "div nesting" structure (aka "markup") you showed was actually just for discussion purposes and that you actually use the proper "id=" syntax: <div id="layout"> <div id="statictopbar"></div> <div id="listing"></div> <div id="phpcalender"></div> <div id="bottom"></div> </div> Now, that said, the wire-frame layout is affected by how you enter content in your divs. Divs are ONLY html placeholders and are not meant to contain unstructured ("untagged") text content. You populate "divs" with headers, paragraphs, lists, etc. These affect how your paddings and margins are applied. If you DON'T put text in proper tags, then you are basically leaving the browser to assume the text should be in a paragraph and apply its own default paragraph margins/paddings. The last thing anyone in the world would want is to leave IE 6 to apply defaults. Are you using a proper doctype? If not, you are in "quirks mode" and once again telling browsers to guess and apply their own defaults. I recommend that you create your "wire-frame" layout using floated and un-floated elements. Generally for a 2 column layout it is: 1. non-floated - header (top), footer (bottom). 2. float:left - left column, content-column your html would still be: <div id="layout"> <div id="statictopbar"></div> <div id="listing"></div> <div id="phpcalender"></div> <div id="bottom"></div> </div>
  13. Also, this is in the wrong order (which is REQUIRED) : a:link {color: 0099FF; text-decoration: underline; } /* Link settings */ a:active {color: 0099FF; text-decoration: underline; } /* Active link settings */ a:visited {color: C0C0C0; text-decoration: underline; } /* Visited settings */ a:hover { color: FF0000; text-decoration: none; } a:hover must ALWAYS follows a, a:link and a:visited. :active always follows a:hover. The order is Link, Visited< hover, Active (L.V.H.A., aka "LoVeHatE"). Change your order to: a:link {color: 0099FF; text-decoration: underline; } /* Link settings */ a:visited {color: C0C0C0; text-decoration: underline; } /* Visited settings */ a:hover {color: FF0000;text-decoration: none;} a:active {color: 0099FF; text-decoration: underline; } /* Active link settings */ Now, that said ... please ... spring for a book or two on css and avoid a lot of headaches. I recommend starting with, Eric Meyer on CSS. You need to learn the simplest basics first - your css showed absolutely no knowledge of the basic css elements and commands. Start building up a good group of links related to css, starting with, but not limited to: http://css.maxdesign.com.au/ (for beginners) http://www.positioniseverything.net/ (for those who foolishly use IE) http://www.htmldog.com/ (for beginners) http://www.alistapart.com/topics/code/css/ (all levels) CSS is powerful and takes time to master, but you have to start from the beginning.
  14. I use the same technique for a site I have and it works in ALL IEs (including 5.2x for Mac). The key is how it is used with the other css elements. Here is the same site with simply 2 different graduated background gifs (I am revising the site to be "elastic"). original style rounded corner version beta revised style rounded corner version The rounded corner css is: /* styles for red and blue top and bottom rounded corners */ b.rtop, b.rbottom{display:block;background: #fff} b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #800000} b.r1{margin: 0 5px} b.r2{margin: 0 3px} b.r3{margin: 0 2px} b.rtop b.r4, b.rbottom b.r4{margin:0 1px;height: 2px} b.ntop, b.nbottom{display:block;background: #fff} b.ntop b, b.nbottom b{display:block; height: 1px; overflow: hidden; background: #336699; border:none} b.n1{margin: 0 5px} b.n2{margin: 0 3px} b.n3{margin: 0 2px} b.ntop b.n4, b.nbottom b.n4 {margin:0 1px; height: 2px;} It is a very cool effect and uses only tiny 2px wide x 30 to 60px high gifs made with photoshop. They take practically no bandwidth to download and once the css is loaded the first time the graphic is cached.
  15. TheFilmGod comes off a little too harsh, but his advice is sound and he's right ... your layout is a cross-browser mess. In IE6 it almost works; in Modern browsers, however, it is totally broken. I recommend finding some working templates for css and reverse engineering them to learn how they work. It would take too long to explain what is wrong with your layout. But don't get discouraged. CSS takes time to master and can be frustrating, but it is an amazing tool. Must read books: 1. Eric Meyer on CSS: Mastering the Language of Web Design 2. Dan Cederholm - Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS And a book EVERY person who creates websites MUST have and read: 1. Steve Krug - Don't Make Me Think: A Common Sense Approach to Web Usability (this is not about CSS, but about avoiding the usability mistakes that makes a website hard to navigate)
  16. Simply designate "text-align: center" on the ul element. #navi ul { margin:5px; padding:0; list-style: none; text-align: center } There is so much you can do with lists. Here is one of the best css aids ever created online for beginners - maxdesign/listutorial. I pointed the link to the tutorial on lists, but everything on this is site is great - listomatic, floatutorial and the most important css learing aid that explains what css rules are all about ... selectutorial. Some of the content is a little old-in-the-tooth (particularly in the floatutorial), but it all still holds up as, in my opinion, as the finest way to show beginners the true magic of lists with css and the rules of selects.
  17. You can't "nest" paragraphs. This is contributing to that gap. <h1 id="cont"><!-- InstanceBeginEditable name="title" -->Welcome<!-- InstanceEndEditable --></h1> <p class="cont"><!-- InstanceBeginEditable name="content" --> <p class="cont"> Welcome to the new LS12Style website. Please Register. </p><!-- InstanceEndEditable --></p></div> This causes the page to be invalid which will create cross-browser issues. Also, you are listing your (pseudo) links in the wrong order. When you list all four a:link states they MUST be listing in the following order: "a:link, a:visited, a:hover, a:active" (L.V.H.A. aka/"LoVeHAte"). a:hover must ALWAYS be listed AFTER a:link and, when designated, a:visited. You don't need the following in the css context of your page for ANY of your elements - remove them as they have no effect: 1. position:relative 2. vertical-align:middle 3. float:none 4. if you want font-family:Arial, Helvetica, sans-serif and font-size:12px as your page default, just put it in the body tag of your css. This way you don't have to repeat it everywhere else constantly, as you do. You would only designate family and size for any element that you want DIFFERENT than the page default. Also, why are you using a table for your navigation? It defeats the purpose of clean, semantic markup and css. It is unnecessary, just adds more code to your page and makes it not very "accessible". You can accomplish the same thing using a list by designating it as "display:inline". In your case, as follows (a quick no frills example): <div id="navi"> <ul> <li><a href="index.php">Home</a> | </li> <li class="nolink">About Us | </li> <li><a href="gallery.php">Pictures</a> | </li> <li><a href="videos.php">Videos</a> | </li> <li><a href="contact.php">Contact Us</a></li> </ul> </div> Here is the css: #navi ul { margin:5px; padding:0; list-style: none } #navi li { margin:0; padding:0; display:inline } #navi li a:link, #navi li a:visited { color:#000 } #navi li a:hover, #navi li a:active { color:#666 } #navi li .nolink { color:#000 } Good luck.
  18. That, of course, is the best "CSS" solution. But,as you asked: I pointed you to the non-css solution.
  19. No debating going on. He said what he wants "hover over a link". He simply wants a "greater than" symbol (which also looks like an arrow) to appear "OnHover" over a link.
  20. Okay, let me rephrase that: The pseudo elements before and after are something I would neither have suggested nor ever mentioned to someone as being viable "dynamic content" input. Mostly, but not limited to, because NO IE supports it. The same way I never recommend anyone use XHTML - because of browser mime-type issues. What you want CAN be done with javascript (I personally steer clear of javascript, so you should try the javascript threads - next thread down from CSS).
  21. What you are looking for isn't done with css. All css can do is change the "STYLE" of a hover to be different from the non-hover state's style (background image/color, borders size/color, font size/color/family/weight/italics/underline/etc). CSS cannot add new html or new text to the markup. CSS isn't a coding "language", it is merely the way to style elements without doing it in the body markup (as recommended in the html 4.01 spec).
  22. Now? I feel foolish at LEAST 4 or 5 times a day!
  23. I style form buttons all the time. However, they WILL not be 100% consistent across browser/platform-version because form elements have defaults set from both the OS skin and the browser skin. Try adding text-align:center and tweak padding from there. Your issue could also be from something else that is over-riding the padding command. Padding should work. I styled four slightly different form buttons on this page and it holds up on the various browser/platforms I've tested so far: deanluxere.com This is the css for them: .webid1 {background-color:#FFFFFF; color:#333333; border:1px inset #999999; padding: 2px} .webid2 {background-color:#FFFFFF; color:#CB0708; border:1px outset #999; padding: 1px} .submit {font:1em Arial, Helvetica, sans-serif;color:#004F75;font-weight:bold; margin:1em 1em 25px 32%; background-color:#CCCCCC; border-right: 1px solid #555;border-bottom: 1px solid #555} .submit2 {font:1em Arial, Helvetica, sans-serif;color:#004F75;font-weight:bold; margin:1em 0; background-color:#CCCCCC; border-right: 1px solid #555;border-bottom: 1px solid #555}
  24. TM, it isn't a bug. If it looks and acts like float clearing issues ... it is. If you float it ... clear it. You "form labels are floated but not clearing. This causes the frameset line to ride up in a classic case of non-cleared floated elements. I noticed that your IE7 float clears are not complete; you left out what makes it work ... the :first-child pseudo element. Using *+html is not enough and doesn't do anything. You need to change it to: * :first-child + html. You also need to add floated form fields to your clearing scheme. /*Clearing for IE7 only*/ *+html div#mediaactions {min-height:1px;} /*Clearing for IE7 only*/ *+html #ajaxapp {min-height:1px;}
  25. Actually, I forgot the most important aspect of why TMs document is failing doctype validation in all browsers. XHTML 1.1 needs an xml declaration if the charset is other than the default of UTF-8 or UTF-16: <?xml version="1.0" encoding="UTF-8" ?> (version 1.0 is used here even in xhtml 1.1) From the w3c: TM can try changing his charset to UTF-8 to see if that validates, but then it isn't an xml parsed document, so it may not.
×
×
  • 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.