A Favor, Please, From Any CSS Gurus Out There
-
I think the background-position should be right, forces image to the right. I suspect that ie is using 50%, and not 95%. Might try a width to expand the a tag (hyperlink) all the way across the ul tag. I could be wrong on this. I can't test it. I think I remember that IE only renders A tags to the width of the text, so you have to add more css programming to the tags css to make it match in all browsers.
ul.MenuBarVertical a.MenuBarItemSubmenu
{
width: 100%;
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: right; // Problem with arrow is here
z-index: 2;
background-color: #efffff;
}
ul.MenuBarVertical
{
width: 250px;
text-align: left;
border: 1px solid #CCC;
}Thanks, that's a good tip! :-D I think I recall reading that one trick to make an element retain its background color for the full length of the div containing it is to add a border to it, even if the border is the same color as the background. I'm going to play a bit...
Will Rogers never met me.
-
With javascript switched off, your vertical menu no longer works - this you should already know. That menu looks to be important to your site. Thus you should only use CSS. Use Firebug (on Firefox) or Google Developer Tools on Google Chrome to investigate how CodeProject do their menu system, from the HTML markup, it just uses CSS to style the content. Then look at where the "Discussions" menuitem drops down to enable fly-outs, for example, the "Application Life Cycle" flyout, again using CSS. Your vertical menu could work similar to the "Application Life Cycle" flyouts. [added] If you are not certain about the use of Google Developer Tools, look at CP's Dave Auld's article. Beginner Guide to Page and Script Debugging with Chrome[^] If you have got the time, you can have a look at this video series from NetTuts on HTML and CSS. http://learncss.tutsplus.com/[^]
Richard, I've spent some time today investigating the CodeProject system, and just like Spry Widgets, it uses javascript to modify the class of the element based on mouse interactions. For instance, in the Spry MenubarVertical widget, the initial position element of a submenu is -1000 em. On hover, the script modifies this by changing the class of the submenu element to a new one with the position value of 0. I was rather hoping not to have to learn javascript for this task, but it appears to be unavoidable. That in itself is a curiosity, as 12 years ago or so, when I was actively learning Java (and the language was still developing) it was interaction with the CodeProject community that convinced me to drop it. The site itself was coded in VBS then; go figure... :-D
Will Rogers never met me.
-
Richard, I've spent some time today investigating the CodeProject system, and just like Spry Widgets, it uses javascript to modify the class of the element based on mouse interactions. For instance, in the Spry MenubarVertical widget, the initial position element of a submenu is -1000 em. On hover, the script modifies this by changing the class of the submenu element to a new one with the position value of 0. I was rather hoping not to have to learn javascript for this task, but it appears to be unavoidable. That in itself is a curiosity, as 12 years ago or so, when I was actively learning Java (and the language was still developing) it was interaction with the CodeProject community that convinced me to drop it. The site itself was coded in VBS then; go figure... :-D
Will Rogers never met me.
Roger, if you download the page you are looking at (WebDev) complete from CP and unminify the CSS file, and search for #nav and then all references to the word fly you will see how CodeProject has created the hierarchy of their CSS. All elements for the word I gave are inherited from #nav which is the CSS for the navigation at the top of the webpages. (fly includes flyout but just search for fly should do) Yes, CP does use javascript (for example, Google analytic) but not in its #nav and #nav descendants navigation. And with javascript switched off, the navigation of CP works without problem The unminified Example of what you are looking for includes ...
#nav li li a {
display: block;
float: none;
height: 19px;
line-height: 19px;
font-size: 9pt;
padding: 0 5px 0 5px;
font-weight: normal;
letter-spacing: 0;
}
#nav li li a.fly {
white-space: nowrap;
}
a.fly.highlight {
border: 1px solid Yellow;
margin: 5px 0!important;
padding: 3px!important;
} -
Thanks for the links; I'll check them out! I'd love to do something as clever as CodeProject, but time is limited. I have an intern available, and plan to have her do most of the work. But schools teach only the fundamentals of HTML, and anything functional - like menus - takes more skill than they have at this stage of their careers. I would have done a far nicer menu in about 4 hours using .Net, but she has only Dreamweaver experience, so I'm having to rough out the functionality in a tool I've never used, with a language I've never used, in as little time as possible. I want to hand her a working template, and stack of content (text and pictures), and set her loose so I can get back to my real work. Since Adobe does everything using javascript, that was the default choice. The Spry widgets Adobe supplies are all script-based, and they're ugly, but it's what I've got for now. :) But wait for v2.0 - that will happen once I've had a chance to absorb the material in the links you've provided! :-D
Will Rogers never met me.
Dreamweaver is a nice product, an expensive nice product. I used to use the MX version quite some years ago. Excluding Microsoft Visual Web Developer, which as you know is free, you can also use the Microsoft Office Sharepoint Designer 2007, as a nice alternative, and that is also free. As a gift for your intern's continued education, you could download both and let him/her play with them. And regarding my posting below, this Sharepoint Designer will also unminify the CSS for you via "reformat CSS".
-
Dreamweaver is a nice product, an expensive nice product. I used to use the MX version quite some years ago. Excluding Microsoft Visual Web Developer, which as you know is free, you can also use the Microsoft Office Sharepoint Designer 2007, as a nice alternative, and that is also free. As a gift for your intern's continued education, you could download both and let him/her play with them. And regarding my posting below, this Sharepoint Designer will also unminify the CSS for you via "reformat CSS".
I've been toying with the idea of giving her my copy of VS2008 Pro, but I'm not sure whether she really wants to pursue this part of her education. Her degree is in CIS, but it's an AS (two-year) degree, and only covered MS Office products, along with some of Adobe's stuff. This is just a degree requirement, something to get out of the way, and I really doubt that she'll pursue it after graduation. I was quite surprised, in fact, that though the degree originally required a programming class, last year the school removed that requirement. I'd think, as an employer, that a graduate would have at least some exposure to programming, even if it's only VB or some scripting language. But then, in our market there are no programming jobs, and the focus of community colleges tends to be on practical training for employment. A pity...
Will Rogers never met me.
-
I've been toying with the idea of giving her my copy of VS2008 Pro, but I'm not sure whether she really wants to pursue this part of her education. Her degree is in CIS, but it's an AS (two-year) degree, and only covered MS Office products, along with some of Adobe's stuff. This is just a degree requirement, something to get out of the way, and I really doubt that she'll pursue it after graduation. I was quite surprised, in fact, that though the degree originally required a programming class, last year the school removed that requirement. I'd think, as an employer, that a graduate would have at least some exposure to programming, even if it's only VB or some scripting language. But then, in our market there are no programming jobs, and the focus of community colleges tends to be on practical training for employment. A pity...
Will Rogers never met me.
Maybe the school changed its course requirements because they changed to a new examining board whose criteria excludes programming. That said, having a little understanding of programming techniques would do her no harm at all. And if web design is where she wishes to develop a future with, then, frankly she can't get away from JavaScript. Consequently, point her in this direction ... http://yuiblog.com/crockford/[^].
-
Thanks, that's a good tip! :-D I think I recall reading that one trick to make an element retain its background color for the full length of the div containing it is to add a border to it, even if the border is the same color as the background. I'm going to play a bit...
Will Rogers never met me.
no that's not true. background color will paint the whole tag. Borders will expand the tag width and make it wider, so when you size a tag, and add a border, if you want an exact div at 600px with a border of 2px, the width is now 598px with a border of 2px.
-
Roger, if you download the page you are looking at (WebDev) complete from CP and unminify the CSS file, and search for #nav and then all references to the word fly you will see how CodeProject has created the hierarchy of their CSS. All elements for the word I gave are inherited from #nav which is the CSS for the navigation at the top of the webpages. (fly includes flyout but just search for fly should do) Yes, CP does use javascript (for example, Google analytic) but not in its #nav and #nav descendants navigation. And with javascript switched off, the navigation of CP works without problem The unminified Example of what you are looking for includes ...
#nav li li a {
display: block;
float: none;
height: 19px;
line-height: 19px;
font-size: 9pt;
padding: 0 5px 0 5px;
font-weight: normal;
letter-spacing: 0;
}
#nav li li a.fly {
white-space: nowrap;
}
a.fly.highlight {
border: 1px solid Yellow;
margin: 5px 0!important;
padding: 3px!important;
}Alright, now you've got me started on a mission. I haven't figured out a way to download the CodeProject CSS files yet, but I did order two books for my Kindle - CS5.5 - The Missing Manual and Dreamweaver CS5.5 - The Missing Manual. Damn Microsoft - they started the trend toward eliminating manuals shipped with software, not to mention the practice of shipping software that doesn't work. Shame on all of us, for allowing it to continue...
Will Rogers never met me.
-
Alright, now you've got me started on a mission. I haven't figured out a way to download the CodeProject CSS files yet, but I did order two books for my Kindle - CS5.5 - The Missing Manual and Dreamweaver CS5.5 - The Missing Manual. Damn Microsoft - they started the trend toward eliminating manuals shipped with software, not to mention the practice of shipping software that doesn't work. Shame on all of us, for allowing it to continue...
Will Rogers never met me.
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
-
I'm building, at long last, a website for the company which my company acquired 3 years ago, and I'm not a website developer. In fact, I'm not much of a developer at all, unless you count black and white film. I'm pretty good at that, though it's been a while. Working with Dreamweaver and the Spry MenubarVertical widget, I've got a menu working nicely in my browser of choice, Chrome. But in any version of IE, it sucks. I would appreciate it greatly if someone possessed of more wisdom than I would take a peek at www.rawright.net/fmtua/index.html[^] using a variety of browsers, but most importantly Internet Explorer, and post a few suggestions about making this thing behave and look more like it does in Chrome. Actually, it behaves just fine in IE, but the appearance just won't do. I've spent about 100 hours elephanting around with this, and I'm just driving myself nuts at this point. Thank you in advance for any wisdom you have to impart to me...
Will Rogers never met me.
This should get you started http://jsfiddle.net/N7aB6/[^] The whole thing is css driven rather than javascript as I always think that is wiser. You'll notice the font is different but that is just because your menu will be inheriting the font style from the page. I've simplified the css a lot compared to the original code but there's a chance I might have missed something as I've only spent about 5 minutes in all working on it. The premise is pretty simple. hide the child
ulelements usingdisplay:noneand show them on theli:hoverpseudo selector. Hopefully this is enough to get you started. Oh and stay away from dreamweaver. It's yucky. X|JimBob SquarePants ******************************************************************* "He took everything personally, including our royalties!" David St.Hubbins, Spinal Tap about Ian Faith, their ex-manager *******************************************************************
-
I'm building, at long last, a website for the company which my company acquired 3 years ago, and I'm not a website developer. In fact, I'm not much of a developer at all, unless you count black and white film. I'm pretty good at that, though it's been a while. Working with Dreamweaver and the Spry MenubarVertical widget, I've got a menu working nicely in my browser of choice, Chrome. But in any version of IE, it sucks. I would appreciate it greatly if someone possessed of more wisdom than I would take a peek at www.rawright.net/fmtua/index.html[^] using a variety of browsers, but most importantly Internet Explorer, and post a few suggestions about making this thing behave and look more like it does in Chrome. Actually, it behaves just fine in IE, but the appearance just won't do. I've spent about 100 hours elephanting around with this, and I'm just driving myself nuts at this point. Thank you in advance for any wisdom you have to impart to me...
Will Rogers never met me.
The first thing I would try is to add width: 100%; to the MenuBarItemSubmenu class in the style sheet. You may need to add a conditional statement in the HTML to include a IE only style sheet that will override or add to the existing styles for fixing IE layouts.
-
This should get you started http://jsfiddle.net/N7aB6/[^] The whole thing is css driven rather than javascript as I always think that is wiser. You'll notice the font is different but that is just because your menu will be inheriting the font style from the page. I've simplified the css a lot compared to the original code but there's a chance I might have missed something as I've only spent about 5 minutes in all working on it. The premise is pretty simple. hide the child
ulelements usingdisplay:noneand show them on theli:hoverpseudo selector. Hopefully this is enough to get you started. Oh and stay away from dreamweaver. It's yucky. X|JimBob SquarePants ******************************************************************* "He took everything personally, including our royalties!" David St.Hubbins, Spinal Tap about Ian Faith, their ex-manager *******************************************************************
It certainly works nicely - Thanks! I bought a couple of books last night - on CSS and Dreamweaver. It's been at least 10 years since I've put together a web page. There's been a few improvements! :-O And though I agree that Dreamweaver is yucky, since it would have taken 10 minutes to put together this site in VS2010, the intern lady has Dreamweaver, and whoever gets stuck with maintaining the site will probably use it, too, so I figured I'd better learn it myself. It does have some nice features, just quite different from what I've been used to for a decade or more. What the heck is jsfiddle.net, anyway? It looks extremely nice, and useful to boot. Hmmm... After several hours of playing with it, adjusting links and such to be relative to the site root, I find that the menu is hidden behind the content section of the page. The flyouts work great, but are hidden behind this block. I've fiddled with opacity, added z-index values - to no avail. Back to the books! :-D "they're coming to take me away, ha ha, hee hee, ho ho..."
Will Rogers never met me.
-
It certainly works nicely - Thanks! I bought a couple of books last night - on CSS and Dreamweaver. It's been at least 10 years since I've put together a web page. There's been a few improvements! :-O And though I agree that Dreamweaver is yucky, since it would have taken 10 minutes to put together this site in VS2010, the intern lady has Dreamweaver, and whoever gets stuck with maintaining the site will probably use it, too, so I figured I'd better learn it myself. It does have some nice features, just quite different from what I've been used to for a decade or more. What the heck is jsfiddle.net, anyway? It looks extremely nice, and useful to boot. Hmmm... After several hours of playing with it, adjusting links and such to be relative to the site root, I find that the menu is hidden behind the content section of the page. The flyouts work great, but are hidden behind this block. I've fiddled with opacity, added z-index values - to no avail. Back to the books! :-D "they're coming to take me away, ha ha, hee hee, ho ho..."
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.
-
It certainly works nicely - Thanks! I bought a couple of books last night - on CSS and Dreamweaver. It's been at least 10 years since I've put together a web page. There's been a few improvements! :-O And though I agree that Dreamweaver is yucky, since it would have taken 10 minutes to put together this site in VS2010, the intern lady has Dreamweaver, and whoever gets stuck with maintaining the site will probably use it, too, so I figured I'd better learn it myself. It does have some nice features, just quite different from what I've been used to for a decade or more. What the heck is jsfiddle.net, anyway? It looks extremely nice, and useful to boot. Hmmm... After several hours of playing with it, adjusting links and such to be relative to the site root, I find that the menu is hidden behind the content section of the page. The flyouts work great, but are hidden behind this block. I've fiddled with opacity, added z-index values - to no avail. Back to the books! :-D "they're coming to take me away, ha ha, hee hee, ho ho..."
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 ri -
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.