Jump to content

dbrimlow

Members
 View Profile  See their activity

  • Posts

    712

  • Joined

  • Last visited

    Never

 Content Type 

Everything posted by dbrimlow

  1. dbrimlow
    First, your css file should have NOTHING in it but css elements. Second, to help "clean" or "organize" your css, start learning shorthand for background, margin, padding - and only use "background-image", "padding-top" or "margin-left" when changing the shorthand default. And remember shorthand positions for margins and paddings are:top, right, bottom, left aka (TRiBaL) , eg: margin:5px 0 5px 0; = margin-top:5px and margin-bottom:5px (0px right and 0px left) eg: margin:5px 0; same as above. Image positioning is vertical, then horizontal (by default top left, or 0% 0%) body {background:#FFF url('image1.jpg') no-repeat fixed} Always assume you messed up, first. One typo can seriously ruin your css file. Why are you bothering with position:relative? Do you plan to contain position:absolute elements? ... if so ... don't. Position:absolute should be avoided except by those who know EXACTLY what they are doing and how it SHOULD be used. It is not an efficient or effective layout tool at all in any browser. Learn and use floats for layout. That said, try this: #imagetest { background: url(images/image2.gif) no-repeat 0 50%; margin:0; padding: 455px 0 0 0; opacity:0.8; filter: alpha(opacity=80); } It is possible (probable) that the position:relative top and z-index were throwing the element off.
  2. dbrimlow
    Okay, at present you are using the worst doctype you can - a frameset. This is helping you to have over 80 errors at the moment. Since your markup is already using self-closing tags, in your case I would recommend using xhtml strict: <!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"> <head> <title>C4Bikes.com.ar</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Why "strict"? Because no one is ever going to learn proper html using "transitional". All transitional is is a way to keep using bad or deprecated html tags. Once you change the doctype, you will have to validate the page and debug the errors. Yours will not be too bad, just old junk like markup level styling "border="0", "vspace=1" and "hspace=1" - these are done in the style sheet: img {border:0; padding:1px; margin;1px} You suffer from a bad case of "DIV-itus". You have "DIVS" all over the place, and use them for to contain raw text instead of proper text containing block level tags like - heading 1- 6, paragraph. You DO use list tags, at least. Using line breaks instead of paragraphs, lists or headers is so archaic. I mean, we did that back in '94. It is easy to convert your divitus into proper semantic markup. Search engines LOVE seeing headers and paragraphs - it shows them a hierarchical structure to check for keywords. "divs" should only be used as html layout "place holders". They contain the actual html tags in the context of the layout. Your markup is nice and clean but is just screaming for proper "semantic" markup. Yours is to fix. For the most part any current class that contains text should be changed from div to either p, h1, - h6 or ul, ol, dl. Any line break used to simulate margins or paddings should be removed, unless it is properly embedded WITHIN a p, h1 - h6 or <li> tag where you want to force a line break in the middle of text - not to create space. For example: this: <div class="post_container"> <div class="post_title">Simpel Session 2009 Posiciones<br></div> <div class="post_autor">Posteado por <a href="?go=home&t=4&s=Peta">Peta</a> el 18/1/2009 a las 12:28:30</div> <div class="post_entrada">Recien salida del horno, la tabla de posiciones del Simple Session 2009 Estonia,<br /> <br /> <img src="/admin/images/post/garret.bmp"><br /> <br /> 1 - Garret Reynolds - 371 - USA<br /> 2 - Gary Young - 358 - USA<br /> 3 - Dennis Enarson - 355 - USA<br /> 4 - Rob Darden - 346 - USA<br /> 5 - Ben Hennon - 345 - UK<br /> 6 - Bruno Hoffman - 342 - GER<br /> 7 - Bjorn Mager - 333 - GER<br /> 8 - Morgan Wade - 331 - USA<br /> 9 - Michael Beran - 330 - CZE<br /> <br /> <a href="http://bmx.transworld.net/2009/01/18/2009-simpel-session-qualifying-highlights-video/">Video de Eliminatorias</a></div><br> Should be this: <div class="post_container"> <h3 class="post_title">Simpel Session 2009 Posiciones</h3> <p class="post_autor"> Posteado por <a href="?go=home&t=4&s=Peta">Peta</a> el 18/1/2009 a las 12:28:30</div><div class="post_entrada">Recien salida del horno, la tabla de posiciones del Simple Session 2009 Estonia,</p> <p><img src="/admin/images/post/garret.bmp"></p> <ol> <li> Garret Reynolds - 371 - USA</li> <li> Gary Young - 358 - USA</li> <li> Dennis Enarson - 355 - USA</li> <li> Rob Darden - 346 - USA</li> <li> Ben Hennon - 345 - UK</li> <li> Bruno Hoffman - 342 - GER</li> <li> Bjorn Mager - 333 - GER</li> <li> Morgan Wade - 331 - USA</li> <li> Michael Beran - 330 - CZE</li> </ul> <p><a href="http://bmx.transworld.net/2009/01/18/2009-simpel-session-qualifying-highlights-video/">Video de Eliminatorias</a></p> </div> You are so close to being really semantic and valid while using SEO text and having a true table-less layout. Once you fix these little things, cross-browser, CSS positioned layout will be MUCH easier. Never consider it working just by looking at your screen, browser and PC. Check it on public computers, friends, parents, etc. - and don't just settle for how it looks in a browser. The code is just as important as what it displays - for many reasons, but chiefly for SEO. Search Engine bots "naturally" rank semantic markup better. Dave
  3. dbrimlow
    This is a BIG RED FLAG to us right here! <font color="#f4e21f"> <?php $content->load(); ?> </font> CSS is all about removing old markup level style tags. If you still use font tags, then you are a beginner to css; do you use a valid DOCTYPE? We need to see either a link to a beta page or your html page structure (complete from the doctype and html open and closing tags), AND your css. If your page has no doctype and charset, is full of improper/deprecated tags, and doesn't follow proper markup rules (full of validation errors), then there is no point in trying to make the layout work. Giving advice on layout and/or trying to debug code without seeing the html is basically assuming that you have zero errors and are using 100% valid html.
  4. dbrimlow
    You just need to use a modified "sliding doors technique" effect doug bowman's sliding doors image effect. This technique lets you use one graphic to accommodate an auto expanding box "width or height". CSS is about making things easier and code leaner - not harder and more cluttered. This is a mess known as "Divitus": <div class='info_top-left'> </div><div class='info_top'> </div><div class='info_top-right'> </div> <div class='info_left'> </div><div class='info_content'>$row[name]</div><div class='info_right'> </div> <div class='info_bot-left'> </div><div class='info_bot'> </div><div class='info_bot-right'> </div> One div can do the same thing with a sliding door.
  5. dbrimlow
    TheFilmGod is right. AND, once you get rid of all the code bloat (table tags, too many div tags, etc) you will almost immediately notice better natural search engine ranking. SEO is all about making it easy for the bot to spider your pages. Semantic content shows the bot what is important.
  6. dbrimlow
    We would need to see your actual html in order to even begin to debug why a form doesn't work. CSS has nothing to do with actual html tags or elements, but html does - particularly if it is wysiwyg editor generated, improperly hand coded, has html tag errors, no doctype or mistakes in tag rules. Judging by your CSS itself, you're relatively new at css. We've all been there. You may be new at using standards and/or a Doctype, as well. Another reason we need to see the actual html. Only Dreamweaver calls "position:absolute" elements "layers"; few experienced coders use position:absolute at all anymore. It looks like you are using Dreamweaver and letting it create your css file; your CSS seems "editor or wysiwyg software coded" because it repeats unnecessary, duplicate declaration blocks and leaves out the most basic css short-hand, and some important things css coders first learn. By default, font-style, line-height, etc. ARE already "normal" ... you ONLY ever need to actually designate "normal" when you are embedded in a parent element, or spanning text, that is set to anything other than default (normal), like font-weight:bold. Why repeat "font-family: Verdana, Arial, Helvetica, sans-serif;" in every element? The beauty of CSS is to set it once somewhere (as your own default) and only actually designate it in any element where you want to change it. It is recommended, for design and browser consistency, that you set a default font-size in your body; in your case obviously font-size:12px - so you never have to designate it in any other element - like all those "layers", because it is your default size. If you do not designate a default size in your body, the browser will use its own default whenever it encounters an element with no font-size designated ... and almost every browser uses a different size - which can cause havoc with your design. Think about "scalability". You may only have a few select elements in your CSS file now, but as it grows it can become a monster to handle. Post the html and we can help you fix your form. For CSS, everyone should have this link bookmarked - one of the best resources on the rules of CSS ever put out there. It's been around for a while, but still shows, in a few examples, the most important and basic css rules better than any book on CSS I ever read (with maybe Eric Myers as the only exception). Max Design Selectutorial The listutorial and floatutorials (along with listomatics) are well worth looking over AFTER you go over the "Selectutorial".
  7. dbrimlow
    It is quite simple. A parent containing element using position:absolute ignores any and all html around it. BY DEFAULT it positions itself at the top-left of the browser window. It will not move, stretch wrap, etc in relation to what any other elements within the html markup does. You use "left, right, top, bottom to set the distance from the browser window - so, "left:150px; top:200px" means it positions itself absolutely 150px from the left and 200px from the top of the browser window. Now, position:relative keeps a containing element within the flow of the html - and just like any other container it reacts to all html elements around it within the markup. However, if you place a containing element that has position:absolute within it, it becomes the parent container and the position:absolute container is "relative" to itsparent and NO LONGER to the browser window. So, left, top, bottom and right positioning dimensions also become "relative" to the new parent container and not the browser.
  8. dbrimlow
    Cool, see, it wasn't as daunting as you thought it would be, was it? And I can begin to show you the css technique to having a few "columns" of photos and text side by side .... but ... while I make a test version of the page with the technique ... LOL, change your doctype to either html 4.01 or xhtml 1 strict (again, it isn't as scary as it sounds); BUT, it doesn't permit poor coding (like all those blank alt tags, deprecated inline table styling tags, etc.) Transitional doctypes were intended exactly for what they say - transitioning from old, deprecated code to proper code specifications. It wasn't really meant to stay around and continue to validate old, poor code forever. html and xhtml transitional doctypes basically validate to pre-html 4 specifications. (x)html strict doctypes validate to html 4.01 coding specifications. I recommend you test how valid your code is by simply changing the doctype to: <!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"> Look at the errors, now. Most of them are really the same ... just repeated. No big deal. Every time I validated a page and started fixing the errors, I learned more and more what NOT to do. This taught me proper html more than any book because it was specific to my pages. I'll have the test version tomorrow.
  9. dbrimlow
    I know, it's tough when asking for help on a specific item only to get replies telling you about everything BUT that one issue. However, I was not fooling when I said each html error potentially impacts on other html elements. No one will debug a layout item in the midst of so much wrong html. Because errors cause different display problems across different browsers. Fix the html. Just go to the validation tool [urll=http://validator.w3.org/check?uri=http%3A%2F%2Fxpg.us%2Frules%2Fmodel.php&charset=%28detect+automatically%29&doctype=Inline&group=1&verbose=1&user-agent=W3C_Validator%2F1.606]your validation page[/url] and start fixing the errors one by one. Take the time to do it right so it can work how you want it to.
  10. dbrimlow
    1. position:absolute is dangerous. It takes that block of code completely OUTSIDE of the flow of the html all around it. In other words, it has nothing to do with the rest of the page so far as layout is concerned. It stays where you tell it to in the browser window regardless of what the rest of the page is doing. That said, let me point out that there is valid use of position absolute and it can be controlled if put in a container that is position:relative. This makes the position:absolute container "relative" to that parent container, instead of the browser window. HOWEVER, it should ONLY be used by those who are advanced in css and fully understand alternatives and when and how it can be used. Actually, the better way to always ask this question is - "is it cross-browser compatible". Occasionally you may get a "yes" answer. It is always safe to automatically assume that IE 6.0 and below WILL always have a problem with any css box item, positioned or floated item and/or dimensions (margin/padding); and if it doesn't be pleased and consider yourself lucky. This is why most professionals first test, and tweak, their beta page designs in modern browsers (Firefox and Safari being the top two used) before even opening in IE6 and IE7. It is far, far easier to create a separate "ie-only.css" page, then to try to tweak one css file to work with all browsers (via hacks that require knowledge of how all browsers actually work). Margins relate to THE SPACE all around (or outside of) an element or container - like how much space should be before and after a paragraph, or how much a list item should be indented on the left or right. Think of it like how far from the walls of a closet a box is on each side. Padding relates to the space all around "THE CONTENTS" INSIDE OF the element or container. Think of a box with blue borders on all four sides. You want to have space between the inside of the borders and the text/image within the box ... that's padding. The shortcut is ALWAYS Top, Right, Bottom, Left (padding or margin) - when first learning css, as a mnemonic, I thought of this as "TRIBAL" Top, Right, Bottom And Left. Examples: "margin: 10px 0 5px 20px" is 10pixels on top, nothing on the right, 5 pixels on the bottom and 20pixels on the left. This shortcut - "padding: 10px 0" - is 10pixels on top and bottom and no pixels on right and left. This shortcut - "margin: 10px" - is 10pixels on all sides.
  11. dbrimlow
    Before even beginning to help you with one issue, namely your improper floating technique which is causing the perceived problem, you have to fix so many other issues that in one way or another (and one browser or another) may contribute to, or impact upon, the problem. I was going to recommend using "distribution lists" for your floated avatars, but seeing your code, I realized there was just too much to do. A page that doesn't validate to its doctype can cause problems when attempting to debug certain elements because all things on a page impact each other in some way ... YOU HAD - 2963 ERRORS!! I believe that is a new php freaks css thread world record. This just can't be left alone. You MUST fix this and learn how to code proper html once and for all. While your concept and design looks very nice, your code is a mess. I hope you can take critique, because I'm about to get a little brutal on you. Here is what is technically at issue: 1. ignoring ALL of the rules of XHTML. Stop using it and start using html 4.01 2. using ancient html 3 coding techniques and deprecated html 4 techniques in XHTML Until you learn proper valid html 4.01 strict code you are not ready to use XHTML. Use alt tags for images, use html special chars (like "&" instead of ampersands "&" or "&quot" instead of quotes "), use css only styling, leave anything 3, extremely bloated code full of unnecessary and redundant code and "divitus". Use your style sheet for css. Avoid div and span when a simple p class=, or ul id=, on elements that don't require parent containers. The whole point of css is to reduce the amount of code in your markup. Your markup in particular is way too unnecessarily bloated. You use deprecated tags, improper tags, span, div and inline style tags all over the place. The first thing you should do is change you doctype to html 4.01 strict - you are SO not ready to use an XHTML doctype. This will be a big help in debugging while attempting to validate the code. More than anything, this will begin to teach the proper use of html (and why yours is wrong). You must use a proper charset (I recommend you don't use unicode "utf-8" because you would then have to change all of your ampersands - incl php code -, echoed quotes and other characters to "html characters" and you are not ready for that yet). You started off okay with the style command, but went downhill fast afterwards ...the following is just wrong: <body style="background: url('/newnav/sidebar_fill.jpg') repeat-y; background-color: #000000" text='white' link='#3399FF' vlink='#3399FF' alink='#FFFFFF'> ..."text='white' link='#3399FF' vlink='#3399FF' alink='#FFFFFF'"... ???? this is bad enough in html transitional, but has no business in any xhtml whatsoever.. Out of anything, put the body tag styles in your css first, followed by your default link tag styles - here is the css that should be in the style sheet: body { font: normal 70% Verdana, sans-serif; color: #000; background: #fff url('/newnav/sidebar_fill.jpg') repeat-y; } a:link, a:visited {#3399FF; text-decoration:none} a:hover, a:active {#FFF; text-decoration:none} 2. Never EVER use old font tags like <font size="-2">, 3. Avoid using br tags for positioning text - br tags are meant to break a line within a single paragraph not to replace and embed multiple paragraph tags within one paragraph, 4. "<span>" should only be used to change the style of a short portion (or "span") of text, within an existing paragraph, heading, list block of text. The following has all three of the previous (2, 3 and 4) mistakes: <p><span style="color:#9ba9c5;">Below are the names of all of XPG's moderators, you can mouse over them to trigger a popup which will explain to you who they are and what their duties are. You can click on their names to e-mail any questions, comments or concerns you might have directly to them.</span><br/> <font size="-2"> <a href="/profile.php?id=2322" onmouseover="popup('CASSADAY: Newsletter Editor/Wrangler')" onClick="/profile.php?id=2322" onMouseOut="popout()"> CASSADAY</a><font color=#172434> | </font> <a href="/profile.php?id=2287" onmouseover="popup('CLAREMONT: Site Mentor/Wrangler')" onClick="/profile.php?id=2287" onMouseOut="popout()"> CLAREMONT</a><font color=#172434> | </font> <a href="/profile.php?id=2288" onmouseover="popup('HEINBERG: Site Storyteller/Reviewer')" onClick="/profile.php?id=2288" onMouseOut="popout()"> HEINBERG</a><font color=#172434> | </font> <a href="/profile.php?id=2259" onmouseover="popup('KIRBY: Site Admin/Mentor/Wrangler')" onClick="/profile.php?id=2259" onMouseOut="popout()"> KIRBY</a><font color=#172434> | </font> <a href="/profile.php?id=2375" onmouseover="popup('LEE: Site Reviewer/Wrangler')" onclick="/profile.php?id=2375" onmouseout="popout()"> LEE</a><span style='color:#172434;'> | </span> <a href="/profile.php?id=338" onmouseover="popup('SIMONSON: Site Reviewer/Wrangler')" onClick="/profile.php?id=338" onMouseOut="popout()"> SIMONSON</a><font color=#172434> | </font> <a href="/profile.php?id=2306" onmouseover="popup('SILVESTRI: Site Developer/Wrangler')" onClick="/profile.php?id=2306" onMouseOut="popout()"> SILVESTRI</a><font color=#172434> </font> </span> <br/> <br/> </p> Create a css for this like so: .moderators p {color:#9ba9c5} .moderators ul li {margin:.5em; padding:.25em; color:#172434; display:inline} Then replace your code above with this: <p class="moderators">Below are the names of all of XPG's moderators, you can mouse over them to trigger a popup which will explain to you who they are and what their duties are. You can click on their names to e-mail any questions, comments or concerns you might have directly to them.</p> <ul class="moderators"> <li><a href="/profile.php?id=2322" onmouseover="popup('CASSADAY: Newsletter Editor/Wrangler')" onClick="/profile.php?id=2322" onMouseOut="popout()"> CASSADAY</a> | </li> <li><a href="/profile.php?id=2287" onmouseover="popup('CLAREMONT: Site Mentor/Wrangler')" onClick="/profile.php?id=2287" onMouseOut="popout()"> CLAREMONT</a> | </li> <li><a href="/profile.php?id=2288" onmouseover="popup('HEINBERG: Site Storyteller/Reviewer')" onClick="/profile.php?id=2288" onMouseOut="popout()"> HEINBERG</a> | </li> <li><a href="/profile.php?id=2259" onmouseover="popup('KIRBY: Site Admin/Mentor/Wrangler')" onClick="/profile.php?id=2259" onMouseOut="popout()"> KIRBY</a> | </li> <li><a href="/profile.php?id=2375" onmouseover="popup('LEE: Site Reviewer/Wrangler')" onclick="/profile.php?id=2375" onmouseout="popout()"> LEE</a> | </li> <li><a href="/profile.php?id=338" onmouseover="popup('SIMONSON: Site Reviewer/Wrangler')" onClick="/profile.php?id=338" onMouseOut="popout()"> SIMONSON</a> | </li> <li><a href="/profile.php?id=2306" onmouseover="popup('SILVESTRI: Site Developer/Wrangler')" onClick="/profile.php?id=2306" onMouseOut="popout()"> SILVESTRI</a></li> </ul> Stop using span when you could easily use a class on the paragraph: this: <p><span class="fineprint"><i>Henry Ian Cusick <br /> >> <a href="/cerebra/display.php?id=1441">SAURON</a></i></span></p> can be : <p class="fineprint">Henry Ian Cusick <br /> >> <a href="/cerebra/display.php?id=1441">SAURON</a></p> Why repeat this a dozen or more times: <div style='position: relative; display: block; left:25px; width: 150px;'><div style='position: absolute; display: block; left:-35px'> Simply create a class item in the css once. You can use a list for each thread link item. Find ways to eliminate as much code as possible. Remove all of the inline style="" tags and create a class to replace it. You have a good concept; you know php; learn the basics of valid html.
  12. dbrimlow

    css problem

    dbrimlow replied to justinh's topic in CSS Help

    First - KingPhilip was right ... you want to use floats. Second - avoid "divitus". Divs are just html block place holders, not replacement for tags meant to contain text .... use proper html tags to contain text (paragraph, headings, lists) instead of dropping so many divs? Use divs to contain "sections or blocks of html tags in an orderly logical way to provide the general layout for those sections/blocks. Third - be careful, if you want to use the xhtml doctype ... LEARN THE STRICT RULES! Otherwise use html 4.01 instead. In xhtml you "self close" your img tags by simply adding a closing slash at the end of the tag itself, instead of adding </img> - eg: <img src="load.png" class="upload" /> Also in xhtml you MUST add an "alt tag" - alt="image alternative". The alt tag is meant to perform the same function as when the image is either turned off, the visitor is using a text browser, the image src path is wrong or the image is not available. Don't just describe the image (eg: alt="graphic of floppy disk"), describe it's purpose (upload file). Imagine the image gone and what text needs to show to guide the visitor - if a link show the path, if a photo of someone alt="picture of Joe Brown", etc. Keep your code simple. Note how I replaced the <div id="link1"> and <div id="link2"> tags with <p id="link1"> and <p id="link2">; and how I self closed your image tags. Also, remove the inline styles I used "style="margin:.25em 0 0 0;float:left" - and add "margin:.25em 0 0 0;float:left" to .upload class. Copy and paste this into notepad, and save in your folder as test.html (in order to use the same css and graphics). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>South Texas Business System's - Upload Manager</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="index_files/style4.css"> </head> <body> <div id="container"> <img src="index_files/logo2.jpg" /> <div id="rowset1"> <p id="link1" style="float:left"><img src="load.png" class="upload" style="margin:.25em 0 0 0; float:left" />testing</p> <p id="link2" style="float:left"><img src="profile.png" class="upload" style="margin:.25em 0 0 0;float:left" />testing</p> </div> </div> </body> </html>
  13. dbrimlow

    Clearfix

    dbrimlow replied to TheFilmGod's topic in CSS Help

    Because it is ADDING empty unnecessary code to your markup (the goal is to reduce code bloat and automate tasks). The clearfix is easy and automatic .... once you get it down ... and only need be set in the css once. Haku, chances are you have either not looked at your page on various monitors with varied screen resolutions, and/or you've been lucky and have not over-extended your floated containers. Once someone views the page at 800 x 600 (or less), or increases the browser text size once or twice, the scrollbars will showup. Also, Think of an element that is absolute positioned, its height is set to 300px, width is set to 500px, overflow:auto and visibility:hidden. In the good old days (and in Macromedia apps Dreamweaver/flash) this was called a "Layer". When used in html, it will only create a visible box 500px wide and 300px high - regardless of the content. If the content within exceeds 300px, the html auto-generates a vertical scroll-bar, if the width exceeds 500px it auto-generates a horizontal scroll-bar. This is what "overflow:auto" DOES, creates scrollbars to allow the overflow content to be viewed.
  14. dbrimlow

    css forms

    dbrimlow replied to justinh's topic in CSS Help

    [*]This following helped me the most: http://www.alistapart.com/articles/prettyaccessibleforms The crucial part was properly using semantic markup (which of course can be styled easily). You will have to copy it and reverse engineer it to see how various changes affect the form for your design, but once you have it right it works. [*]This is the best series of 4 online articles that explains (and shows screenshots of) why forms cannot be styled to look the same cross-browser/platform: http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/ Matter of fact, I use the first one as a beginning reference point for a few of my sites' forms: [*]The first three pages on this site: http://www.deanluxere.com/apartmentS.html. [*]And here's a "liquid" version on a few of the pages in this site - http://www.nycrealbroker.com/
  15. dbrimlow

    Clearfix

    dbrimlow replied to TheFilmGod's topic in CSS Help

    I concur! I've found this to be the best method that is the easiest to implement. overflow:auto indeed works, but of course the problem with it is that it adds horizontal scrollbars depending upon the screen res, window size or float's content - particularly when using an elastic layout - and by now everyone should at least not be using fixed font-sizes and container heights. There are three recommended clear methods: 1. Use a float to fix a float (floats will contain embedded floats - of course you still have the parent float to clear) 2. clear fix method (most often recommended by professionals because it works without artifacts) 3. overflow:auto (can result in on-page scrollbars), overflow:hidden works the same way, with no scrollbars, but can clip images, forms, graphics, etc. I don't know why people shy away from the clearfix. It is easy to remember (once you are used to it) and can be used once to apply to all floats needed to be cleared. The damn IE hacks are annoying with most of us today using separate hack management IE only css pages. Apparently you can just eliminate the IE6 and IE7 hacks by simply designating "zoom 1" for the select in your IE-only css (I haven't tried it yet but I know people who use it): remove this from your main css page: <!-- making this work in IE6 --> * html .navbar, * html #content, * html .clearfix {height:1%} <!-- making this work in IE7 --> *:first-child+html .navbar, *:first-child+html #content, *:first-child+html .clearfix {min-height:1px} Put this in your IE only css sheet(s): .navbar, #content, .clearfix {zoom: 1}
  16. dbrimlow

    Clearfix

    dbrimlow replied to TheFilmGod's topic in CSS Help

    Not at all. I initially showed you the "auto clear" method. That assigns the clear to a wireframe select or container class or id. It will auto clear a floated element if used within a floated container or non-floated tag next to a floated container. It depends on what is floated. No ... that's what makes it is auto clearing. But, you need to set the class on the block or tag that is floated. This way it Are we talking about two floated elements side-by-side? This is where it gets tricky and actually works right in IE and NOT in Firefox and needs tweaking. Here is a link to an example of this that I did a while ago - it is three left floated paragraphs followed by a header3. Without adding a parent div with margins and paddings, the header3 wants to visually tuck up under the first paragraph. It is cleared on left and right properly, but it simply needs tweaking of the h3 element to get it to work - too lazy to tweak this old site, I simply added a parent to contain the three paragraphs and set bottom margin and padding to push the header3 down a bit ... I would do it differently now, but the idea is the same - MARKET TRENDS is the header3 and the three managers are the left floated paragraphs . float and cleared
  17. dbrimlow

    Clearfix

    dbrimlow replied to TheFilmGod's topic in CSS Help

    You need to include your id or class along with ".clearfix:after". Remember, ":after" is just a pseudo element. All it does is put the commands you designate "after" the named select(s). For example, say you have a class ".navbar" and an id "#content" that you also want to auto-clear ... simply include them once as follows and every instance of using the select will auto clear: .navbar:after, #content:after, .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } <!-- making this work in IE6 --> * html .navbar, * html #content, * html .clearfix {height:1%} <!-- making this work in IE7 --> *:first-child+html .navbar, *:first-child+html #content, *:first-child+html .clearfix {min-height:1px} In the html the paragraphs below will now auto clear without additional markup: <div class="navbar">lorem Upsem blah, blah</div> <p>lorem Upsem blah, blah</p> <div id="content">lorem Upsem blah, blah</div> <p>lorem Upsem blah, blah</p> The IE hacks are necessary. IE6 does not support the :after pseudo element and floats are unstable (may not contain the floated box contents, auto stretch the dimensions, etc) because "hasLayout is set to false by default on floats. So you need to "trigger hasLayout" using the star hack and designating a height of 1% to allow the float to contain and conform to its stated dimensions, not permit content to auto-stretch the container and clear either side. So for IE6 the star hack is: * html .navbar, * html #content, * html .clearfix {height:1%}. Now IE7 fixed the bug that allowed the star hack to work (of course not fixing the reason it was necessary in the first place). So this hack will not work. And IE7 DOES support the :after pseudo element, but once again "hasLayout" still needs to be triggered. Yet, since the star hack won't work, someone realized they can use another pseudo element (":firstchild") to force IE7 to trigger hasLayout. IE7 also uses min/max so the height to trigger hasLayout can be set to min-height:1px: *:first-child+html .navbar, *:first-child+html #content, *:first-child+html .clearfix {min-height:1px} Without the two hacks you are taking a chance of IE blowing up or not on floats.
  18. dbrimlow
    Thanks, that helps a lot. We can see how everything impacts everything else. And you have some massive structure and standard html coding issues - which will result in cross-browser issues and strange display or eventual page blowup. I am going to be a little hard on you here, so please don't take it personally - it is meant to help avoid frustration in the future. You have so MANY basic problems that will need to be fixed before you can begin layout and display issues. You are even better off totally ignoring how the page displays by commenting out the css entirely until the code is fixed. First, here is the link to the validation - 114 errors at the moment: your validation page You are using xhtml 1 strict. Brave ... and foolhardy; ... of the 114 validation errors, most of are due to ignoring the rules of XHTML altogether. Deprecated font/styling elements or improperly coded and non-closed html tags are the first thing we learn for XHTML - for example, no one who knows xhtml would ever even consider putting old html 3 font tags in the markup, or embedding a table within a font tag, or the golden rule of not only closing paired tags <ul></ul>, <li></li>, etc. OR self-closing single tags like <input type="hidden" name="sublogin" value="1" />, </ br>. XHTML 1 strict should only be used when you are already proficient at html 4.01 strict or/and are actually using it to display/parse XML. My advice to beginners of css is to always use the html 4.01 strict doctype and avoid xhtml altogether. You can still use the rules of xhtml (except for the single element self-cosing tags), but you have a little more flexibility. Without getting into the whole html vs. xhtml rant, the simple fact is until you have your basic html coding skills down (which is more forgiving than xhtml), use should use an html 4.01 strict doctype - because while debugging your invalid html markup - you begin learning proper html coding and avoid beginner errors like all of those in your markup. Until your html is valid and relatively error free, trying to debug layout and css elements can/may be futile. While you may end up fixing the particular element you are working on, other invalid errors may suddenly rear their ugly heads. The way I approach any web page is to first concentrate on the html and semantic structure, then the layout and styling afterwards. This is invalid code in xhtml and bad deprecated code in html 4.01: <!-- ################## LOGIN ################## --><font color="#000000" face="Verdana"></font> </div> <font color="#000000" face="Verdana"> <!-- /col50 --> </font> <span title=" .noscreen" class="webdeveloper-display-id-class-details"> .noscreen</span> <hr class="noscreen"><font color="#000000" face="Verdana"><!-- Right column --></font> <span title=" .col50 f-right" class="webdeveloper-display-id-class-details"> .col50 f-right</span> <div class="col50 f-right"> <span title="div .col50 f-right 320x239" class="webdeveloper-display-block-size" style="left: 639px; position: absolute; top: 570px;">div .col50 f-right 320x239</span> <font color="#000000" face="Verdana"></font> <h3><font color="#000000" face="Verdana">Unknown.</font></h3> <font color="#000000" face="Verdana"></font><span title=" .ul-style01" class="webdeveloper-display-id-class-details"> .ul-style01</span><ul class="ul-style01"> <font color="#000000" face="Verdana">Not sure what to put here yet, maybe a comment system of some sort ?</font></ul> <font color="#000000" face="Verdana"> <span title=" .table-style01" class="webdeveloper-display-id-class-details"> .table-style01</span> <table class="table-style01"> <span title="table .table-style01 291x84" class="webdeveloper-display-block-size" style="left: 639px; position: absolute; top: 726px;">table .table-style01 291x84</span> <tbody> <tr> <th>................ Advertisement ................</th> </tr> <tr> <td>Add Google ads here, maybe 120 x 120</td> </tr> </tbody> </table> </font></div> <font color="#000000" face="Verdana"> <!-- /col50 --> </font></div><font color="#000000" face="Verdana"> <!-- /box --> </font> </div> And THIS is a particular example of getting the html wrong (it is spectacularly wrong). This would be okay in html 4.01 transitional doctype, but then it would not act the way you want it to because transitional allows html 3 tags and styling. If you want your css to work as intended, the css should be the ONLY styling done on the page - besides being invalid xhtml because they are not closed, using <br> is instead of <li></li> tags is outright made-up html - and we can't make up our own html: # <ul class='nav'> # <br><br><br> # these adverts wont show when<br> # you login a navigation tree<br> # will show instead.. make sure<br> # it works before publishing.<br> # <br><br> # I might also implement<br> # a system here were admin<br> # can leave comments, to let<br> # unregisterd users new whats<br> # hot or not etc.. # <br><br> # This navigation tree<br> # will show things that are<br> # only available to registerd<br> # users, such as - PM system,<br> # forum, friends system,<br> # edit profile leave comments<br> # on the comment system<br> # And so much <b>more</b><br> # so sign up today to enjoy<br> # everything we have to offer<br><br> # # # <!-- ################## Left Side navi & menu ################## --> # # # </div> <!-- /cols --> Part of the html structure is the "head" element, don't ignore your title tags, charset and meta tags. It is better to leave them out of the head altogether than to have blank or incomplete elements. This is particularly nasty: <meta name="robots" content="all,follow" /> <meta name="author" lang="en" content="All: Your website name [ADD LINK HERE]; e-mail: info@ADD EMAIL.com" /> <meta name="copyright" lang="en" content="webdesign: [ADD LINK HERE]; e-mail: hello@ADD EMAIL" /> <meta name="description" content="..." /> <meta name="keywords" content="..." /> I know, I know .... this is a beta page and not live. BUT, these aren't "little details", this is the actual structure of your html code! Go to the validator and clean up your html errors. Remove the XHTML 1 Strict doctype and replace it with <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> What you will most likely discover is that once the code is all fixed and the page validates, the display will no longer look the same as it does now and you will have to tweak the css code all over again ... BUT ... it will no longer be unstable in all browsers and any cross-browser issues can be confidently addressed. We'll all be glad to help with any layout issues, then, as well. Good luck, Dave
  19. dbrimlow
    There is so much wrong, here. First, you are not using a doctype or charset at all .... pure 100% "Quirks" mode! 1. NEVER start a page with just the <html> tag - that's '90s html and old browser technology. 2. ALWAYS use both a real doctype (start with using a "strict" doctype now to get out of bad old html coding habits): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd"> 3. ALWAYS designate the charset - you are asking for trouble when you make the browser guess what characters should be displayed, "unicode", western latin, etc? Unicode <meta http-equiv="content-type" content="text/html;charset=utf-8"> or Western latin: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> Second, you are floating uncontained elements (images), and not clearing them properly. You cannot float uncontained elements willy nilly and expect the page to look the same in IE AND modern browsers ... particularly in quirks mode. They need to be properly contained and cleared. You can contain them in paragraphs (text and images) or divs (for images, not text). Then make certain the element is cleared where necessary.
  20. dbrimlow
    We would first need to see your "browser side" html code. Right off the bat the fact that you are combining "position:absolute" with floats, gets me nervous (unless really done right position:absolute is a nightmare and will eventually blow up a layout). The fact that your problem involves the #search selector leads me to believe that your issue involves the position:absolute element. But without seeing the html, it is impossible to know for sure. Also, are you using "divs" as text containers and ignoring proper semantic html (paragraphs, headings, lists)? Divs are simply html placeholder blocks and are not meant to replace correct logical html text containers. Are you using a proper doctype? Are you validating to that doctype? is it strict or transitional? Are you using ... GAK ... frames? Without seeing the html, along with the CSS, there is no way to debug anything because so many factors impact upon a web page and we have no reference points to go on. Either post the "browserside" html code (no php, just the source code from the browser) - or provide a link to the hosted test page.
  21. dbrimlow

    Layout Problems

    dbrimlow replied to Clinton's topic in CSS Help

    position: absolute!! Why are you surprised that it stays where you tell it to? position: absolute is NOT meant to be used for a flexible wire-frame layout. By its very definition it is positioned ABSOLUTELY where you tell it to be (regardless of any html within it or around it. You need to use "floats" for your columns. Also, setting your body font size at 1em does not give you a relative baseline different than the browser default size (IE @16pixels, Safari @ 13 pixels, firefox @14pixels) Using 1em in the body font-size is the same as using 100% - it says use the default as a baseline (which is differewnt in each browser). I personally prefer using "small" which is somewhat more relative across browsers (although still a little large in general @14px across the board). I adjust it by creating a page wrap using .9em - which means 1em is thereafter equal to .9em of small (@12px) No one has figured out the perfect relative ratio yet - although some have come close (until you get beyond two levels deep). using 62.7% for the body is similar to 10px. That means you can use an em size based on the actual base 10 "relative" font size you want: 1em = 10px 1.2em = 12px 1.4em = 14px 2.0em = 20px etc. This is genius ... until you get two levels embedded into a box and change the font size. If you are in a box with a font size of 1.2em (12px) and embed a new box with a size of 1em, 1em is no longer based on 10, it is based on a percentage larger - which means 1em now becomes based on 1.2em and not a clean base 10. Used carefully the 62.7% body size works like magic. But once you lose the base 10 the confusion is worse than this explanation!
  22. dbrimlow
    What haku said. However, ALL of your links are in the wrong order. When listing all four hyperlink pseudo-classes: "a:hover" MUST come after "a:link" and "a:visited" in the CSS definition order, "a:active" MUST come after "a:hover". The nemonic to remember this is LoVe HAte - Link, Visited, Hover, Active. Examples of shorthand for link: a:link, a:visited, a:hover, a:active {color:#555} or a:link {color:#555} a:visited {color:#666} a:hover, a:active {color:#000; text-decoration:underline} or a:link, a:visited {color:#666} a:hover, a:active {color:#000; text-decoration:underline} You need to change the order of ALL your links to make certain that a:active omes AFTER a:hover, as follows: td#nav1 a:link, td#nav1 a:visited { padding: 10px 9px 10px 9px; height: 30px; color: #999999; background: #202020; font: bold 11px Century Gothic, Georgia, Times New Roman, Times, serif; text-decoration: none; letter-spacing: 3px; text-transform: uppercase; border-right: 1px solid #333333; } td#nav1 a:hover, td#nav1 a:active, { color: #CCCCCC; background: #000000; } td#nav2 a:link, td#nav2 a:visited { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25); -moz-opacity: 0.25; padding-right: 5px; } td#nav2 a:hover, td#nav2 a:active { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity: 1; } #side ul{margin:0px;padding:0px 0px 0px 0px;list-style-type:none;font:11px Arial, Helvetica, sans-serif;text-align:center;} #side li {margin:0px 0px 2px;} #side a {display:block;height:13px;border:1px solid #666666;background:#333333;text-decoration:none;padding:2px 5px 2px 5px;width:145;} #side a:link, #side a:visited{color:#666666; border:1px solid #666666;background:#202020;text-align:center;letter-spacing:4px;text-transform:none;} #side a:hover, #side a:active {color:#FDE8BF;border:1px solid #999999;background:#333333;} a:link, a:visited { color: #999999; text-decoration: none; } a:hover, a:active{ color: #FDE8BF; } It is also a good idea to list more than one font family - generally of the same relative type (serif or san-serif) in case the visitor's computer does not have the single font. For example, Century Gothic is not a default installed Windows font - in other words, the text looks different on your computer than it does on someone else's (unless they have Century Gothic installed). So you give the font-family style various "serif" style options, like - font: bold 11px Century Gothic, Georgia, Times New Roman, Times, serif; 1. Georgia - a "free" Windows font 2. Times New Roman - a default Windows font 3. Times - a default Mac font similar to Times New Roman 4. Serif - the overall default basic for the font type you are using here (san-serif would be the default for Arial, Helvetica, etc)
  23. dbrimlow
    You cannot get auto, equal height boxes in css (there are tricks to do it in modern browsers but, of course, NOT in any IE). The columns will only stretch to accommodate the content within. Using empty paragraphs will not work for all browsers, monitors and resolutions ... the columns will eventually blow up in one or another. You need to use a brilliant technique by Dan Cederholm (author of Bullet Proof Web Design) called "faux columns". Here is the link to the original article and examples of how to use it (follow it, learn it and bookmark it until you have it down ... it is a must for any css based wire layout): http://www.alistapart.com/articles/fauxcolumns/
  24. dbrimlow
    You can't "embed" non list elements within a list - like fieldset or paragraph. Once you start using li tags, you are committed to using them to contain all data until the closing ul or ol tag. There is no tag "center" in valid xhtml or html 4.1. That was old html 3 stuff. Use a class in the css like: css - .center {text-align:center} html - <p class="center"> or an inline style like <p style="text-align:center">
  25. dbrimlow
    You are right ... it is your css that is a problem. It will not work with position:absolute. You must use floats. You also need to have a liquid box and a graphic that auto resizes accordingly - the trick being creating two pieces of the same graphic and making them much larger than will actually display. Here is Doug Bowman's brilliant , Sliding Doors technique which nearly every css pro uses in one way or another. But, you also have two other problems that you need to overcome; the sliding doors example will also help you with: 1. "DIV-itus" - WAY too many divs 2. Naked text all alone in a div - text not placed in a proper text level tag (paragraph, heading, list). Divs are not meant to hold text without proper tags, nor do they replace table cells - and they should not be approached that way. Here is your example html: <body> <div class="topLeftBorder"> <div class="topCenterRightBorder">"Title" <div class="leftBorder"> <div class="containerContent">Testing 1,2,3... <div class="rightBorder"> <div class="bottomLeftBorder"> <div class="bottomCenterRightBorder"> </div></div></div></div></div></div></div> </body> Whoa. Apart from being hard to read, bloated code, using absolute position on this block of divs does nothing ... nesting "position:absolute" divs also does nothing. Unless contained in a "position:relative" block, "position:absolute" elements have no relation to the html code ... they are outside the html and are relative only to the (left, right, top, bottom) of the browser window. Here is the simple html of a menu that uses the sliding doors technique (here is the actual example sliding door example - increase your browser's text size and you see the tab graphics resize proportionately with the text): <body> <div id="header"> <ul> <li><a href="#">Home</a></li> <li id="current"><a href="#">News</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </body> While they both use extensive css to display and position graphics, yours is div heavy, while Doug's is clean SEO and vision impaired reader friendly. Try to start with proper semantic html code always before designing how it looks using css. Good luck
×
×
  • 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.