Jump to content


  • Posts

  • Joined

  • Last visited


Everything posted by dbrimlow

  1. Here is the link to the faux columns technique ... it is the only way. http://www.alistapart.com/articles/fauxcolumns/ You CAN do it with liquid percentage witdhs as well (just need to do a little math to figure out the px placement of the graphic's sections).
  2. Does #nav have any content in it? If it has no height attribute, and no content to create height, then the div will not auto size to a background element.
  3. wrong thread - post it in PHP Help.
  4. position:absolute is exactly that - no more no less - YOU tell it where to go regardless of the window ... it does not adjust with the rest of the page because position:absolute is OUTSIDE of the flow of your code markup flow.. Lose position:absolute. It is not a good layout tool. Don't float or use "position", just give the div a width less than its container and use "margin: 0 auto"
  5. Some points were brought up here that need to be reiterated. 1. If you use "divs" for your wire-frame layout, remember that Divs should not hold untagged text. Text should be placed in the proper block level tags (h1 - h6, p, ul/ol/dl,li, dt and dd). 2. TM is correct in that one should use all the tricks in the arsenal, HOWEVER, absolute positioning should NEVER be used for wire-framing your css. You can use them occasionally within a properly floated container, but only if you know how the pros and cons may affect your page. 3. One of the easiest, yet most important, things is to make your text and containers "elastic" at the least. By this I mean don't use pixels for dimensions. Use percentages and ems. Why? Two reasons. a.) widescreen laptops and widescreen high resolution LCD monitors ... almost all new purchases of laptops or LCD monitors are high res widescreen. Ever look at a pixel sized website on a high resolution LCD or laptop monitor? You'll need thick glasses. Percentage and em based layouts/text auto adjust for the monitor and browser window. I can actually work on my newer websites using my widescreen laptop. b.) Because people with visual disabilities and many elderly will increase their browsers text size - even if still using 15" CRT monitors at 800 x 600. So, if you designate pixels for text, IE 6 doesn't adjust them. This will just piss off a sizable percentage of your visitors - at a minimum those with old equipment and those with new. Try it yourself. go to your favorite websites and in your browser click, "view/text size/" and adjust the size up or down. 1 of 2 things will happen in modern browsers, either the text gets bigger and destroys the layout, the text gets bigger and the layout adjusts for it. 1 of 3 things will happen in IE6, most often nothing happens - 90% of the web pages out there are rude and onlyt care about the larger percentage of visitors. I found the best way is to start with body {font-size:small} which translates to approximately 12px in IE 6 and 7, and most modern browsers. So, 1em is thereafter @ 12px. .9em is @ 10px, etc. For containers, use widths in percentage and avoid designating heights. This way when the text gets bigger, it doesn't spill out of the container - which is fixed in height. Here are some examples that I am working on. Try to break them with resizing the text. nycrealbroker.com manapts.com/welcomehome As with anything else it takes practice and trial and error, but since you are starting from scratch with css anyway, you may as well not start with the bad habits and baggage all of us old timers have ... AVOID fixed pixel layout and text. A great book to get that helps with all of this is "Bulletproof web design" by Dan Cederholm - if you order it through his "simplebits.com website Amazon gives a huge discount ($39.95 in stores, $24.95 through the site)
  6. I think 99% of us were guilty of this when we first started using css. I look at my older websites and want to rewrite them all! ALL NEWBIES to CSS BEWARE of falling into this trap! I). A good way to get into the habit of proper semantic coding (with a perfect descending flow) is to initially create your web page without ANY styling or graphics whatsoever. Just use the most basic html. No DIVS, IDs or CLASSES: 1. h1 tag for your main site title 2. ul and li tags for navigation 3. h2 - h6 for topic headings 4. p tags for text 5. p tags or ul and li tags for form items This will also get you used to NOT using graphics for elements that should be text, along with the added benefits of having your pages viewable on small screen devices (PDAs & Cell phones) and navigable by those who use screen readers. II). Once you have created the base page using proper semantic markup and simple html tags ... VALIDATE IT. You never want to start the css process with invalid html markup because you only want to debug your css when something isn't working. I can't tell you how much time I've wasted trying to debug CSS only to discover it was a typo or other simple html tag that was wrong and causing the problem. I can now practically ignore the markup code itself entirely whenever I need to make a style change - simply adding or removing any classes to the tags. III). Now you can to apply the css link in the head tag and add the layout wire-frame DIVs to the existing markup. It is a good idea to always use the same ID names and general layout structure for your wire-frame. This will help you get used to creating a new wire-frame for other sites easily. For Layout use one time IDs. I always have at least: a. *container b. *header c. *topnav or *leftnav d. *content e. *rightnav f. *footer DON'T REPLACE ANY OF THE MARKUP TAGS WITH DIVS! You will style/position your paragraphs, lists, headers with classes. IV). Apply the class to any markup tags that you need to style or position (eg: p class="something") Here is an example of a before and after page I created to show clients how to submit text to me, and how it will look when I apply a stylesheet - this more than anything: before - view code after - view code They are basically the same page. The after page simply applies a stylesheet and a total of only eight divs to create the wire-frame containers for the 2 column layout.
  7. Well, if he uses php then it isn't Windows, either. There are dozens of web servers that php works with. If he has access to the config.php file he can add something like: if (isset($_SERVER['HTTPS']) && $_SERVER['HTTP'] == "on") { header("Status: 301 Moved Permanently", false, 301); header("location: https://www.hiswebsite.com/index.html"); } else { header("Status: 301 Moved Permanently", false, 301); header("location: http://www.hiswebsite.com/index.html"); } Although that's bulky for individual pages. I'm sure there is an easier way. I suppose he needs a regex
  8. 90% of the people asking for css help make the same mistake over and over. Text should NOT be put in a "DIV" without first being put in a proper block level tag meant for text - Headers, Paragraphs, lists. Most of the beginners to css who were used to tables think a DIV is like a table-cell where text is dropped in and the text is formated by the css for that class or ID. This is WRONG! Example of what I mean - I see this over and over: <div id="header">Why don't I have proper tags?</div> <div id="leftnav"> <a href="home.php">home</a> | <a href="about.php">about us</a> | <a href="guides.html">guides</a> | <a href="contactus.php">contact us</a> | </div> <div id="content"> <div class="sometext">I'm text sitting here naked because people think a "div" is a catchall holder for text, links or graphics</div> <div class="andmoretext">and another bunch of text slapped within a div and expected to emulate a paragraph</div> </div> <div id="footer"> mysite.com © 2008 - 113 S. Main Street, 7th Floor some city, NY 12345 this site is valid html 4 transitional, and valid CSS </div> Aside from not having proper block level text containment tags, it is also common "DIVtus". All those divs are not necessary. THIS is how the above should be properly coded: <h1 id="header">Why don't I have proper tags?</h1> <div id="leftnav"> <ul> <li><a href="home.php">home</a></li> <li><a href="about.php">about us</a></li> <li><a href="guides.html">guides</a></li> <li><a href="contactus.php">contact us</a></li> </div> <div id="content"> <p class="sometext">I'm text sitting here naked because people think a "div" is a catchall holder for text, links or graphics</p> <p class="sometext">and another bunch of text slapped within a div and expected to emulate a paragraph</p> </div> <div id="footer"> <p>mysite.com © 2008 - 113 S. Main Street, 7th Floor some city, NY 12345 this site is valid html 4 transitional, and valid CSS</p> </div> Notice that DIVS are only used for the page's "wire-frame" layout. They will be positioned via css where the coder wants them on the page. It seems like a small thing, but it makes all the difference in the world. Then headers, paragraphs, lists will be properly tagged and placed within them. classes will be designated to style them accordingly. This is called - SEMANTIC MARKUP. The goal of a good css coder is to reduce as much code as possible and do all styling of tags IN THE CSS, not the markup.
  9. What server are they using? What do they want to redirect? URL, old page to new page? Are on windows server 2008? Windows 2003 IIS? .net? Do they use .asp pages? Here are a few solutions depending upon the type: IIS Redirect * In internet services manager, right click on the file or folder you wish to redirect * Select the radio titled "a redirection to a URL". * Enter the redirection page * Check "The exact url entered above" and the "A permanent redirection for this resource" * Click on 'Apply' ColdFusion Redirect <.cfheader statuscode="301" statustext="Moved permanently"> <.cfheader name="Location" value="http://www.new-url.com"> ASP Redirect <%@ Language=VBScript %> <% Response.Status="301 Moved Permanently" Response.AddHeader "Location","http://www.new-url.com/" %> ASP .NET Redirect <script runat="server"> private void Page_Load(object sender, System.EventArgs e) { Response.Status = "301 Moved Permanently"; Response.AddHeader("Location","http://www.new-url.com"); } </script>
  10. The easiest way is to put them in your htaccess file as follows: Redirect 301 /myoldpage.php http://www.mydomain.com/index.php Redirect 301 /anotherpage.html http://www.mydomain.com/index.php Redirect 301 /the oldestpage.php http://www.mydomain.com/index.php It really is as easy as that. Just remember that it is absolutely crucial to save your .htaccess and FTP it as ASCI and not binary.
  11. First change this <script type="text/css"> to this <style type="text/css">. Second, it is doing exactly what you are telling it to do. If the whole container is 800px and the artistpage is 400px floated right, The footer is doing exactly what you told it to ... be to the right of artistpage. You have a few issues wrong. Fist. DIVS are not containers meant to hold text ... they are elements to contain other html elements. Text must be contained in proper html tags that are meant to present text (paragraphs, headers, lists). Dumping text naked into DIVS is extremely poor code. Next, position:absolute should be avoided until you understand what it does (and even then, used once in a blue moon). You should layout your page's wire frame using floats. Here is the link to Floatutorial. This will tell you what you need to understand floats. While you are there, look at the other topics, including the most important, Selectutorial.
  12. The overflow:auto technique is cross-browser buggy and has a few different bugs in Safari, Opera and Mozilla. It also produces horizontal scrollbars when content exceeds the dimensions (as in a flexible layout or embedded element like graphics or form elements). It is not good for use in the wire frame page layout. It is supposedly a good technique for individual situations, such as where you have an image floated in a paragraph and followed by a non-floated paragraph or other tag element. However, since I don't use it for the wireframe (and already have a cleafix setup, I just add any other necessary floated element to the clearfix).
  13. TFG, the whole point is to not litter your markup with empty DIVS. I have css files where there are at least 6 or 7 selects in the clearfix element (including nested floated elements. The last thing I would want to do is place empty divs in the mark up. I have some older websites where I did that and realize now how much MORE work it cost me. I suppose when showing beginners something we can tend to want to show them the quick and easy. But once they start doing the quick and easy and come up against a situation where that no longer applies, they will get frustrated. I'm just as guilty in not wanting to mention IE css management with conditional comments. But the clearfix is a concept to be shown with as little distraction as possible. It doesn't make sense to beginners until they get comfortable using it.
  14. BM, this would have been too much information to someone just learning floats and trying to get their heads around the clearfix (yes, my bad. She used a blank div for spacing in her original example ... NOT as a float clear) USE the hacks! Until you can learn conditional comments.
  15. First, you can't fix the height issue when using absolute positioning. If you set the footer to "bottom:0; left:0", when the screen is minimized the footer will still ride up over the content before it because it will ALWAYS be sitting at the bottom left of the window. The content before it means nothing because it is OUTSIDE the flow of html. Now, about floating. You will need to learn two crucial things: 1. What floats are, do and how they behave, 2. How to cross-browser clear floats. A good start for beginners is max design's "floatutorial": Float basics The link takes you to the entire float concepts and process from the most basic information, through to a Liquid three column layout. It behooves you to take the time and run through it all. Floats can be frustrating if you don't understand the concepts. Granted, this is an older tutorial and while it covers all of the concepts well, it doesn't handle float clearing well. And proper clearing is the most important cross-browser technique related to floats. To get started with clearing, copy and paste thfollowing into notepad (or other simple text editor) and save it on your computer as "clearfix.txt" ... it is known as the "clearfix" technique (although it is a modification of the original version): #my-ID:after, .my-Class:after { /* self-clear floats */ content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* hack for IE6 */ * html #my-ID, # html .my-Class {height:1%} /* hack for IE7 */ * :first-child + html #my-ID, * :first-child + html .my-Class {min-height:1px} Don't panic! This will make sense. Here is the link to the original clearfix method: clearfix (ignore the note at the top dated march 2008 with a link to an "easier" techinque. The other technique has issues and nasty surprises). The difference between the original and the revised method is that the original uses an empty DIV in the markup for each clear. The revised method goes into your css and you just replace #my-ID or .my-Class with the actual IDs and Classes that you want to clear. For example, in a site of mine I have a navbar that I want to clear the floats above and below it, and a class element that contains a floated image within it (which needs to clear top and bottom non-floated elements), they are in the css as: #topNav {float:left;width:100%;background:#000000 url(../images/roundlinksblu.jpg) repeat-x; font-size:.9em } .newsItem {margin-bottom:0;padding:2px 0px;font-size:.85em; border: 1px solid #666; background-color:#fff;text-align:center } In order to clear them, I simply add their names to the clearfix by tacking on the :after "pseudo" element in the clearfix selects: #topNav, .newsItem:after { /* self-clear floats */ content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* hack for IE6 */ * html #topNav, # html , .newsItem {height:1%} /* hack for IE7 */ * :first-child + html #topNav, * :first-child + html , .newsItem {min-height:1px} The clearfix can contain as many elements as need to be cleared simply by separating them with a comma. A lot to process now. But once you have it down you will be amazed at the layout control power you will wield - you will actually also forget how to use tables for layout. Good luck.
  16. Ahhh, understood. I live with that every day!
  17. LOL! Actually, you're right. I am currently re-writing ALL of my sites, even the ones I "fixed" a few months ago.
  18. Haku is 100% right. It isn't worth the headaches once you start seeing how the mess up minimized screens or user browser side increased text sizing. Use floats to "wire-frame" your layout.
  19. Haku, the main problem with using the overflow (overflow:auto or overflow:hidden works equally) technique for clearing - particularly "overflow:auto" - is that you can get scrollbars on the cleared element. I no longer use fixed (pixel) dimensions, and this technique is particularly a nasty issue in IE6 because it doesn't support min-width. Most Pros still use a clearfix for cross-browser stability.
  20. [quote]but I have had numourase occasions where some on the group takes pride in telling me how crap the code is even though it is not part of the problem[/quote] No one takes "pride" in telling another person they have bad code. When helping others we help ourselves because we see things wrong that we either may have done ourselves and fixed, or we see something that we haven't come across before. When we see someone who has multiple mistakes, we tell them so they will fix it because bad code can be the root of 99% of the problems (and THEN we will be able to HELP). [code] .lastupdated { text-align:right; font-family:times new roman; font-size: em; font-weight: bold; font-style:italic; z-index:1; } /* Side Menu Tabs */ .navigation { position:absolute; left:0em; top:15em; width:5em; background-image: url(../images/screen2.gif); padding-top:1em; text-decoration: none; } Remember I said search for typos? There is no value: "font-size: em;". Remove the "width:5em;" width from navigation and see if it still does it. You're still failing to see the forest for the trees. You are focusing in on an issue that is inconsequential while ignoring the issues that are. But. Sometimes there is just no helping people. This is NOT about ego. So don't get yours hurt and defensive when people point out your errors in code. I've been doing this for 12 years and: a.) still make mistakes and typos, b.) learn something new every day, c.) cringe whenever I look at code I wrote just 2 years ago.[/code]
  21. Why are you using position:absolute and relative? Combined with floats, this is not the way to lay out a web page for cross-browser compatibility. Try removing position:absolute from the bottom and replace it with float:left. You can't clear floats just by using "clear:both" in the css. You need to use one of three techniques - 1. create a float to clear a float, 2. overflow:hidden method 3. the clearfix method At this point, most professionals use the clearfix method. If you don't know it and want to, I can explain it.
  22. This is one of the biggest problems for beginners. It's good that you asked. These are two extremely advanced techniques that most professional developers stay away from. position:absolute - this takes the element completely outside of the linear flow of the html. It makes the element "relative" to the browser window and not where it is placed within the html. Example. If I put a block of five paragraphs in a DIV that has the following css: .whereamI { position:absolute; top:0; left:0; width: 300px; height:200px; visibility:visible; overflow:auto; background:#fff } Even if the paragraphs are in the middle of the html, surrounded by other paragraphs, lists, graphics, they will display exactly at the top left area of the browser window and be "on top" of anything in the html that is before it or after it for 300px wide and 200px high. DreamWeaver calls this a "layer", because it layers the block on top of (or behind if you use visibility:hidden) elements before or after. Now, IF the paragraphs are more than 200px high, the window will auto-generate a scrollbar to scroll up and down because we specified that ONLY 200px should be visible at any time. position:relative - This makes the element "relative" to the flow of html before and after. So why would you need to tell an element to be relative to the html? After all, all elements are relative to the html before or after, right? Well, not really. If you create a position:relative block then place a position:absolute block within it, the position:absolute block NOW becomes relative to the position:relative block instead of the browser window. It may still be considered outside the flow of html, but it is contained by the parent block. So, you could create layouts using position:relative blocks to contain position:absolute blocks that were exactly so many px to the top, bottom, right or left of the parent block. But this causes problems if the content of one block exceeds the height of the content of another block because they are told to be exactly Xpx wide, high, from the top or left. For today's layouts using well crafted (and properly cleared) floats are the preferred method. Position layout came in handy back in the old fixed pixel design layout days, where elements were exactly so many pixels wide and high. We all tried to keep our designs to fit within a screen resolution of 800px by 600px (CRT monitors of 14 to 15 inch ) - which meant a design max/min viewable of 775px by 550px. We would designate absolute positioning exactly so many px from the and left, and so many px visible, so people wouldn't have to scroll the entire page to view the content. The layout design remained fixed and the text "content" within it would scroll.
  23. The reason it happens is because whenever you "highlight" text, "HIGHLIGHTING" is exactly what it does; it highlights the text by reversing the background and foreground colors. THIS IS NORMAL BEHAVIOR AND DOES NOT REQUIRE ANY "SOLUTION". You can actually cause a similar effect in FF by highlighting your nav text starting from the top non-link word - "Lowther" - down to the last word "party bookings". Since we are dealing with FF vs. IE, you now see how each handles text blocks differently (which is why it IS crucial to declare the "logical block level" html tags to control text - such as paragraphs, lists, headers). Well, as this is normal behavior, I'm afraid there is no "solution". When it comes to crafting web pages, the first solution to debugging a problem is to check if the markup code is properly written, uses valid html and has no typos or un-closed non-optional elements or selects (in the case of html 4.01). The second solution is to check the syntax of the css. If all of these are properly constructed, then the issue is not the code but the coder ... by this I mean the code is doing exactly what the coder is telling it to do, however unintentional the results. Excuses are therefore the author's responsibility. Learn the basics of web page construction. There are enough issues that need to be dealt with at all levels of proficiency to go around than to worry about things that are NOT an issue..
  24. First, you have an extra div tag at the end of your markup. Next, you have a bunch of blank divs and with the exception of .navigation, the one div your do have text in is not using any semantic block level tag (paragraph, header, list, etc.) A "DIV" is just a placeholder in html - it is NOT a place to just dump text into. It does not take the place of paragraphs, lists, headers, rather it is the container to hold them in the position you want. If you don't use proper markup block level html tags, then you can't be certain how your layout will look from browser to browser. Your issue is of the background disappearing when you "highlight" the text is irrelevant because people in general don't go around highlighting blocks of text, and if they do, then they don't care about what happens to the background. Also, using "position:absolute" is a poor way to lay out a web page. Use floats instead. Here's a good link for you. It will teach you not only about floats, but about lists and the rules of selects http://css.maxdesign.com.au/floatutorial/index.htm.
  • 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.