dbrimlow
-
Posts
712 -
Joined
-
Last visited
Never
Everything posted by dbrimlow
-
Jscript certainly has its place ... but not here. In the CSS forum we tend toward recommending CSS techniques. The faux columns and sliding doors techniques are elegant "design" based, not "code" based solutions, that anyone working with CSS should have learned or should learn.
-
Lazy people!!! Shame on all of you. Jscript ... tables. Come on. The whole point is to reduce the markup code, make it easy to edit, cross-browser compatible, make it relatively accessible, AND make it "Flexible" (scalable not "fixed"). First, what you are asking for can't be done with css ... HOWEVER, that said, it CAN easily be made to look as if it were done. This requires the classic "faux column" techinque. It is a trick that uses a scalable background image to emulate multiple equal height columns - regardless of content. I'm going to give you the link because once you actually know the technique you will use it forever (take a few hours playing around with it - it is well worth the time). As a matter of fact, everyone who works with css should be required to learn the following two old (IE5/pre-2005) css "design" trick techniques: 1. Faux Columns - by Dan Cederholm, 2004 2. Sliding doors - Doug Brown, 2003
-
This stuff is actually basic wireframe layout 101. The search box is not moving, good. But you designated a relative value - "background-position: 0 30% 0 20%;" - for the background img. That is why the logo will not stay to the left ... you are specifically telling it not to. You don't need min_width because you are NOT using a flexible (liquid or elastic) layout in the first place ... YOU ARE DESIGNATING THE WRAP TO BE 800PX! That's called a "fixed" size for a reason. It is NOT going to re-size itself based on the browser size or monitor resolution - it will always stay 800px wide. Where your logic is going wrong is that you are expecting a "background image" to act upon "markup content" ... not going to happen ... that's why it is a "background" image; it is NOT part of the flow of the html. You need to revise how you created the page's wireframe layout. And this is where the basics come into play. A standard, basic, run-of-the-mill, simple css layout has a "header", "column(s)", "footer". That's it. Every css layout - of any complexity - is all variations upon that initial concept. What you are missing is your "header". In your case it consists of three containers - #header, #logo and #search. I recommend using IDs for wireframe elements because they are always part of your page layout and therefore only used once per page. Widths for the header is 100%, the others are determined by the logo width itself - avoid using paddings or margins and make the widths relative to the logo graphic (if it is 275px wide, make the logo box something like 360px and the search 420px). The idea is to have the logo box create the look of padding by being wider than the logo. Then adjust the width of the search box to fit side by side with the logo box - leave a 20px difference to account for cross-browser box sizing adjustments (play with these yourself and check it in FF and IE6 & 7). body { margin: 0; width:100%; padding: 0; background: #29281c url('images/backgroundimage.gif') 0 no-repeat; font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 10px; color: #000000; } #wrap { width: 800px; background: #d9d8d0 url('images/logo.gif') 0 no-repeat; background-color: #d9d8d0; } #header {display:block;width:100%; margin:0; padding:0} #logo {float:left; width:380px;background: #d9d8d0 url('images/logo.gif') 0 no-repeat;} #search {float:right; background:#d9d8d0 ;width:410px} <body> <div id="wrap"> <div id="header> <div id="logo></div> <div id="search"></div> <div> /* all other divs and content */ </div> </body>
-
There is no such thing as "align:center", for text you can use "text-align:center". For boxes you need to first designate a width (in px or %), then use "margin: 0 auto" to have it auto center.
-
First, lose any "position:absolute" elements, they will not help you in the least. Next, you must specify a width in px or percentage or it doesn't work. For centering it is usually just "margin:0 auto". But you want 50px top margin so (I use 500px for example): <style> #menuBar { width: 500px; margin:50px auto 0 auto; } </style> <body> <div id="menuBar">Your content here</div>
-
I agree with haku - it is best that anyone starting to learn css never even be shown position:absolute. I agree with jcombs - an advanced css coder should consider any tool available for a task in which it may be suited. I will say this, however ... "position:absolute" should never be used to create a page layout wireframe. Any html document you create that does not use a "doctype", is called "quirks mode" and it is not web standards compliant. The doctype is the first thing on your page (not <html>). It tells the browser what markup language it is written in - html 4.01, XHTML 1.0, and what specification to display it as - strict, transitional or frameset. Php freaks uses a transitional version of xhtml 1.0 - Here is the doctype for this page: <!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 prefer using a strict version of html 4.01: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> If you leave off the doctype, your site will look different in every browser because in "quirks mode" you are letting the browser determine the default version to use. For the most part, only IE likes no doctype. So your page will look how you designed it in IE only but blow up in other browsers. By using a doctype, you ALMOST force IE to play by thesame rules as other browsers ... almost. <html>
-
Similar to what Zanus did, but to avoid a new list item, you should "embed" the sub list within the parent li tag. So, <ul class="s-bar"> <li id="s-email"><a href="#">Mail</a> <ul id="s-profile-sub"> <li><a href="#">Compose Mail</a></li> <li><a href="#">View Inbox</a></li> <li><a href="#">Track Messages</a></li> <li><a href="#">Edit Folders</a></li> </ul> </li> <li id="s-profile"><a href="#">Profile</a> <ul id="s-profile-sub"> <li><a href="#">View Profile</a></li> <li><a href="#">Edit Profile</a></li> <li><a href="#">Edit Photos</a></li> <li><a href="#">Edit Settings</a></li> <li><a href="#">Profile Privacy</a></li> </ul> </li> <li id="s-blog"><a href="#">Blog</a></li> <li id="s-stats"><a href="#">My Statistics</a></li> </ul> put this in the css: ul ul { margin:0px; padding:0px;}
-
It is a matter of starting properly and not getting into bad habits early. XHTML is basically a stricter version of HTML 4.01 (only tags must be lower case and all the end tags are not optional and self-closing tags are requires for single tags like br, img, meta) Since you are young, you may as well learn the proper way to markup HTML code. Using HTML vs XHTML is Less important than using a "strict" dtd instead of "transitional". You can get a head start on coding the right way instead of having to break yourself of bad habits later (like most of us who have been doing this since the '90s). I personally use and validate to html 4.01 strict, but I use the rules of xhtml. By that I mean I code in all lower-case, and if you took my html 4.01 page and simply added the closing slash to self-closing tags it would be xhtml 1 strict. The funny thing is that job recruiters have absolutely no clue, either, and think that XHTML is some cutting edge proof of skill and is what professionals use. Actually the opposite is true. Amateurs use xhtml much more than pros - only they mess it all up and don't follow the rules. I have kept one or two of my sites in xhtml simply for clueless job recruiters or potential employers. Learn VALID strict markup - html 4.01 or xhtml1. People who actually know better will be most impressed if you use html 4.01, though, instead of xhtml.
-
Seems like you've never been to the garden. Here is a link to the site that showed us all years ago what can be done using CSS: CSS Zen Garden
-
Where are all the newbies to CSS being told to use position:absolute?!? It is getting epidemic. Simpli, what doctype are you using (looks like xhtml judging from the </br>?)
-
Absolute positioning is not "flexible" and should never be considered for the wire-frame page layout. Using floats is by no means your "only" option ... it is, however, the absolute best option. You are doing the right thing by using "semantic" markup. It will be a rough transition at first, but once you get comfortable and go through the trials and tribulations of learning the css tricks, you life will be so much easier. And your site will naturally begin doing much better in search engines once the bots can spider and index your site easily (NEVER ANNOY THE BOTS WITH TAG SOUP!) Don't ignore the <title> and description meta tags and make sure they are never duplicated in another page (if using php, toss a variable in the title that will make it unique for each generated page).
-
Add display: block; to your li a:hover. Also, declare an "li a" select, as well, so the block is consistent looking when transitioned on the hover. And remember that "a" should always goes before a:hover for the same select: Your layout is breaking in IE 6 - I would recommend adding an IE-only.css file and calling it via a conditional comment (You would then only need to tweak widths, margins, paddings etc to make IE behave). #sidebar ul li a { display: block; color:#CCC; background:#FFF; } #sidebar ul li a:hover{ display: block; color:#FFF; background:#ececec; }
-
I took over a few 3rd party servers in January and one has stopped sending a regular data feed via ftp .netrc. The .netrc file is being generated daily just fine. The problem is the path to the file it needs to ftp is incorrect. It is generating this in root: machine ftp.remotesite.net login remoteuser password remotepword macdef init cd listings ascii put dailyfile_03112009.out 299.txt quit But the file "dailyfile_03112009.out" is not in root, it is in a folder: "/usr/folder/dailyfile_03112009.out". This doesn't seem to be doing anything at all other than being created. Is there any way to find out how the file was generated? Is there something similar to "-l crontab" to show all cron jobs? Any help would be appreciated.
-
That site used "position:fixed". IE doesn't support position:fixed (but there are ways to get it to look similar in IE).
-
That was my argument, too, initially. So I understand. It was pointed out to me 2 years ago that basically, due to HTML 4.01's "optional" nature, I could have my markup use the same exact clean all lowercase tags as XHML, anyway. To illustrate how xhtml is really, in essence, html, I simply opened my XHTML pages in Dreamweaver (code view only of course), and ran a find/replace for all closing slash tags " />" to ">". I then changed the doctype to html 4.01 strict and it worked like a charm - the only difference had been the closing slash. HOWEVER! It was by coding using the XHTML doctype in the first place that got me used to using clean, lowercase markup. So I DO recommend it for beginners if for nothing else but that. The REAL doctype key issue is to use strict and avoid transitional. Transitional was a bad idea right from the start because it gave coders the option of picking and choosing what they wanted to follow or not, as opposed to using the actual version spec. Most of those who use both html 4.01 and xhtml 1.0 "valid" transitional doctypes will be amazed at how poorly their code now validates to the real spec html 4.01 strict (I was). It was embarrassing how out of touch with the spec I was. HTML 4.01 Transitional is really a horrible mishmash of permitting old HTML 3.2 and html 4.0 spec. The fact that it can actually "validate" as HTML 4.01 "Transitional" is ridiculous. The spec for HTML 4.01 is what it is! Strict. Using fonts and inline stying is "deprecated", old table styling tags no longer exist like "height", "align", "valign" etc. The whole transitional concept was well intentioned, to allow coders to take advantage of any new features in the spec, while giving them time to re-code their website to remove elements no longer in the spec at all. But, as usual, it just confused everybody who thought it simply meant that "transitional" was its own valid doctype (because it validates on the validation tool, doesn't it?). It actually promotes ignorance, tag soup and poor coding practice from beginners. Using it while in the progress of actually transitioning a site is necessary for those of us with large static html web pages - I still have @ 70 or so static and 30 or so dynamic pages that use transitional (these formerly used NO doctype, quirks mode). But I have no professional respect whatsoever for anyone who uses transitional doctypes today for new web page/site coding.
-
What Haku should have said is that it takes years to UNLEARN the garbage code we used before CSS. Here is a condensed example of the hard-learned, years of trial and error, yet SIMPLE things I recommend to anyone started css. A table-less "wireframe" layout is quite simple. It's only when you start to jam in a bunch of divs with their own dimensions that things go horrifically awry. Do NOT confuse "divs" with table cells. Do NOT try to emulate table cells with CSS. A "div" is only a place-holder for proper html tags, not a replacement. Learn to use headings, paragraphs and list items and keep them in a logical flow in the markup from top to bottom! This is called using semantic markup. Beat that into your head before anything else. Do NOT EVER leave text alone in a "div", "span" or neither. Text should ALWAYS go into a logical block level container (heading, paragraph, list). Whenever possible toss a class or ID select into a heading, paragraph or ul/ol/dl tags rather than use a "div" - eg: This is what most beginners do: <div id="box"> <div class="clean1"> heading </div>, <div class="clean2"> A whole mess of text </div>, <div class="clean3"> <ul> <li>this is much</li> <li>better than</li> <li> having "divitus"</li> <li>and code bloat</li> </ul> </div> </div> This is what beginners who "get" the semantic markup bit, but "miss" the divitus bit: <div id="box"> <div class="clean1"> <h2>heading</h2> </div>, <div class="clean2"> <p>A whole mess of text</p> </div>, <div class="clean3"> <ul> <li>this is much</li> <li>better than</li> <li> having "divitus"</li> <li>and code bloat</li> </ul> </div> </div> This is what it took years of unlearning and relearning to finally make life easy - we don't need all the divs: <div id="box"> <h2 class="clean1">heading</h2>, <p class="clean2">A whole mess of text</p>, <ul class="clean3"> <li>this is much</li> <li>better than</li> <li> having "divitus"</li> <li>and code bloat</li> </ul> </div> Remember the whole point of CSS is to use LESS code in the markup, not replace all the table bloat with divs. Learn proper HTML and use html 4.01 strict doctype to force you to code html properly. The ONLY reason to EVER use an XHTML doctype of any kind is ONLY to force teach you to use lowercase tags and end tags. Since you can do that in html 4.01 anyway (html 4.01 is flexible and things required in xhtml are optional in html), xhtml is unnecessary. Essentially, xhtml 1 and xhtml 2 as used by 99.999% of the world is basically html 4.01 (only with funny closing tags on self closing elements) - if your charset shows a mime type "text/html", you are "serving" html 4.01. The other .0001% who use xhtml CORRECTLY, as an application to parse XML, serving it in the mime type "application/xhtml+xml" are strange, brooding, secretive individuals who intentionally don't want IE of any kind displaying their web pages, thank you very much.
-
Check your css to make sure you are using the proper a:link order (LoVeHAte aka LVHA aka a:link, a:visited, a:hover, a:active). What you describe is the same symptom that could result when you put a pseudo link in the wrong order of the css. :link and :visited must be before :hover. :hover must be before :active.
-
shadiadiph, There are so many reasons why what you describe is happening, that it is impossible to guess without seeing both your CSS and complete html markup. Always FIRST assume that a problem is something you did wrong in the markup - typo, improper nesting, wrong doctype, no charset, etc. Then assume you did something wrong in the CSS - typos, semi-colons instead semi-colons (like you did a few times in the posting here), improper a:link, a:active, a:hover order, etc. The last things to blame are the CSS element and/or the browser. 9 times out of 10 you will find it was something YOU did wrong. Even if your page validates, you could still have done something in your markup or css that causes the page to display differently than you intended (even though it is perfectly good and valid code). ***** digression rant alert *********** Remember this about IE, Microsoft designed it to use quirks mode, garbage code. They never intended for it to be W3C compliant because it is integrated with the shell of Windows. IE6 was their first attempt to make it render CSS properly (remember the lies that if you use valid XHTML Strict code it will render using CSS standards ?) IE7 was their first attempt to get back the marketshare they were losing to FF and Safari ... and while it did indeed support more CSS 1 & 2 elements than IE6, it still had the same old bugs that past IE versions had (box model rendering, HasLayout, etc). HOWEVER! MS pissed off the whole development community when it fixed the IE bugs that allowed the old IE "hacks", but did NOT fix the bugs that REQUIRED them! And even while they were working on the IE8 beta to be 100% CSS 1 and 2 compliant, they changed core HTML parsing and rendering engine of the biggest DOG in their entire history, Office 2007, to no longer rely on IE to render Office Application html, but to have Word 2007 render HTML!!!! Anyone who sent bulk html email (to clients who subscribe to a mailing list) had to re-write the entire markup code of their e-mailer template to use 100% quirks mode garbage, table based, inline styling, HTML 3. Outlook no longer displays CSS floats, clear, background-image, overflow, position and more. As a matter of fact, MS posted a a special "validation tool" for the HTML that Outlook 2007 supports. Here is the MSDN library item about this. Scroll toward the bottom to see the CSS that is no longer supported in Office/Outlook: http://msdn.microsoft.com/en-us/library/aa338201.aspx Okay, this matters, how? It shows where MS is heading - which ultimately may be a good thing. 1. MS suffered a HUGE loss (relatively) in marketshare in IE in general (FF and Safari chipped away at IE's old 90% share in 2004 to @35 to 40% at present). They didn't like this. 2. they need to "quickly" overcome the fiasco that was Vista - strong arming the public to attempt forcing them to Stop using XP has resulted in the beginnings of life-long Windows users heading to Mac or Linux. And while they still retain a significant marketshare of consumer OS, because of what happened to IE, they realize that they are NOT invincible. "ME" was a failure, "Vista" is a failure ... they NEED the next OS to be as strong as XP was. 3. MS needed to get Office applications away from relying on IE to render its HTML - because while it is working to make IE standards compliant, it would be a nightmare to revise Office apps to both generate and use anything other than its usual garbage, beyond quirks mode html code. MS in essence jumped from the frying pan to the fire for Office's html rendering, using the CSS 1 and IE6 proprietary subsets that Word 2007 uses. They will eventually need to address this and revise Office in the future to go back to using the IE shell. But for now, they are nothing with the control of the OS market - they do NOT want another Vista on their hands. They want to stop people from jumping ship to Apple or Linux. They want to stop people from simply loading XP after buying a new PC/laptop. In essence, they want and need another "XP" success. And IE8 is an important pre0cursor to show that they can actually make one of their products better, instead of meeting it all up like they did in Office 2007 and Vista.
-
Permission is 777, I removed enctype. The problem is that the testFile.txt is not being re-written to, submit is not sending textfield data - the page simply shows the same file on submit. I thought the problem would stand out as embarrassingly elementary. <?php if (isset($_POST['SaveEmail'])) { $open = fopen('testFile.txt','w+'); $text = $_POST['EditList']; fwrite($open, $text); fclose($open); echo "Gig list updated."; } ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>test create a file</title> </head> <body> <form action="<? $_SERVER['PHP_SELF']; ?>" method="post"> <p> <textarea id="FormsMultiLine3" name="EditList" rows="27" cols="79" style="width: 645px; white-space: pre;"> <?php $filename = "testFile.txt"; $fh = fopen($filename, "r+"); $data = fread($fh, filesize($filename)); fclose($fh); echo $data; ?> </textarea> </p> <p> <input type="submit" id="FormsButton1" name="SaveEmail" value="Save" style="height: 24px; width: 57px;"> </p> </form> </body> </html>
-
Whoa, sorry. I asked this question like a noob to posting! I have an email distribution list in a text file - call it testFile.txt - that simply lists 2500 emails. We use it to send html email flyers about apartments available. In the flyer is a link "to be removed from our list" that sends us an email. At present someone either downloads and opens the txt file in notepad, searches and removes the email, then uploads it back to the server, OR an admin edits the raw file on the server itself. I want a management form that reads testFile.txt into a form "textarea", allows manual editing, then on submit, saves the revised testFile.txt. The code I posted, opens the file, allows editing, but doesn't save the edited file on submit - it just reloads the original file.
-
Not true. IE6 is still a large enough marketshare to be taken seriously ... coders only stopped worrying about IE 5x last year. Our office has over 150 desks all with IE6. I still keep it as my IE browser on my home PC and laptop - because it IS broken and I need to develop for it. It's actually called a conditional comment and is indeed a good practice to get into - whenever you actually need to code specifically for IE. But in your case, your CSS is fine, just clear your floats properly..
-
Actually it looks fine in IE6 to me, FF 2 has a problem with category footer not clearing the float elements near it. Try a simple clear:both, first: #categories_footer { clear:both; margin-bottom: 0px; width: 150px; height: 29px; overflow: hidden; background-image:url(images/images/menu_03.jpg); background-repeat:no-repeat;
-
After a long PHP layoff, I need to get back and start from scratch. I have a text file with hundreds of emails (2500 actually). I need to create a management form for the client to search and remove email when requested they be removed from the list. I could go Database, but I wanted to do this first. But it is not working. This should be elementary for most of you I'm sure. I think the problem has something to do with calling the form action. It doesn't write the txt file on submit <!-- sets the action for submit --> <?php if(isset($_POST['SaveEmail'])) { $open = fopen("testFile.txt","w+"); $text = $_POST['EditList']; fwrite($open, $text); fclose($open); echo "email list updated."; } ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>test create a file</title> </head> <body> <!-- opens the text file in a form text area --> <form method="post" enctype="text/plain"> <textarea id="FormsMultiLine3" name="EditList" rows="200" cols="79" style="width: 645px; white-space: pre;"> <?php $filename = "testFile.txt"; $fh = fopen($filename, "r+"); $data = fread($fh, filesize($filename)); fclose($fh); echo $data; ?> </textarea> <input type="submit" id="Button1" name="SaveEmail" value="SaveEmail" style="height: 24px; width: 57px;"> </form> </body> </html>
-
Very impressive ... very professional. I think it looks great as is and that you may be too close to it and can citicize till the cows come home. Don't overthink. A trick I use when I think something is missing is I change the text area contrasts around. Try using a "sheet of paper" look by having the main text in black, font "times new roman, times, serif", background white - even put a faux column backgroud drop-shadow effect to make the paper look raised (tricky to do, but extremely effective: "What is Combs Court Reporting? Combs Court Reporting is a full-service court reporting agency with offices in Macon and Milledgeville, Georgia. We are dedicated ..."