A Favor, Please, From Any CSS Gurus Out There
-
Kindle - I understand that they are not good at rendering PDF file type, but, by separate email to you (via the email link below your message), I shall send you links for HTML5 and CSS3 literature. Some as web pages that you might be able to convert into a format that Kindle understands and some PDF's. If my understanding of Kindle's PDF abilities are wrong, do say. Google browser - click the wrench icon (far right) then click "save as" and save as web page complete. Firefox - click the File menuitem, then "Save Page As ..." and save as web page complete. All the accompanying files for the webpage will be located in your download location in a folder of the same name as the webpage you saved. [added] Check your in-box
Hehehe... I won't waste my time on a Kindle, but the free reader for the PC is useful. I'm getting too old to read anything on a tiny screen, but having it on the wide PC monitor is really handy. I can buy the book for $20, read it wherever I go, and if I really like it, I can buy the real thing later. O'Reilly has a sweet deal going - if you buy the Kindle version, for $5 they'll send a link to a pdf version that's printable.
Will Rogers never met me.
-
It's the "position:relative" in the "content" class in the css that's making your flyouts go underneath the content. Just delete that line from the css and the flyouts will go just like you want them to. I just gave it a quick test on my computer, and it appears to work. Of course, I am assuming that what I'm looking at in the link you posted before is still what you are working on, and not some much older version. And don't worry about Z-index -- I think they invented that just to discourage beginners from learning CSS. It's much easier to position things using divs within divs, padding, and margins.
Excellent! How the heck did you figure that one out? It makes no sense at all...
Will Rogers never met me.
-
Hi there, The problem wasn't with the menu. It was actually with the content block. Removing the
position:relativeproperty from that solved the issue. I had a closer look at the page and created a slightly tweaked copy that I've posted online for you. That fixes the menu problem as well as the moving logo problem. (That had to have been a bug right?) I also introduced a new.clearfloatclass which is added to any parent elements surrounding floating elements and correctly clears them. There has been a lot of changes to the way css is used in the last few years and a lot of very clever and hard working people are doing the research and writing the code to make our lives as developers easier. I highly recommend looking up the following http://html5boilerplate.com[^] project. That is the culmination of hundreds of hours combined work by a whole community of experts and really saves you some effort. Most of the stuff you won't need but I would certainly check out their normalise and helper css code as they are simply awesome. Check out this too http://csslint.net/[^]. It'll gently chide you and point you in the direction of best practise css. On that note I would highly recommend looking up the concept of object orientated css. There are a lot of blogs out there that talk about it. This woman here http://www.stubbornella.org/content/[^] Is one of the foremost speakers on the subject. Don't believe it when you read she invented the concept though. I was certainly experimenting with it well before she made it popular. I don't have a shiny blog though. I would certainly look into html5 too http://html5doctor.com/[^]. These guys here are really good. The markup you produce is cleaner, more semantically driven and can be supported for the most part using Modernizr http://www.modernizr.com/[^] to shiv in support for the new elements in ie8 and below. Hopefully this will be enough to get you riThanks, James! There being no sensible reason for the position attribute to affect the display that way, I would never have figured that one out. It even works in IE!
Will Rogers never met me.
-
Thanks, James! There being no sensible reason for the position attribute to affect the display that way, I would never have figured that one out. It even works in IE!
Will Rogers never met me.
The
position:absolute;and theposition:relative;confuses many. Just consider what the position element is referencing and how it fits within the page hierarchy. The basic HTML video series I mentioned in a message above tries to make the issue of position a tad clearer. -
Excellent! How the heck did you figure that one out? It makes no sense at all...
Will Rogers never met me.
How did I figure it out? In my experience, position and Z-index are both only used when you're trying to do something fancy, like make a floating box with a bigger version of a picture appear when you hover over its thumbnail. You weren't trying to do anything fancy like that, so I figured those lines were what was giving you the issue. A lot of people are suggesting you study manuals and such, but that's not how I learned. Instead, I learned by searching on the internet for whatever I wanted to do -- flyout navigation, equally-sized columns, image placement, etc. I then copy and pasted whatever CSS code I found into a test page. Then -- this is the important part -- I commented out individual lines, or I changed individual values, until I was able to understand why the thing I had copy-and-pasted actually worked. After doing that with enough pieces of code, I began to grasp the basic principles and was able to start designing my own CSS from scratch. This is how I've taught myself several different programming languages.