|
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;
}
modified 1-Aug-19 21:02pm.
|
|
|
|
|
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
modified 1-Aug-19 21:02pm.
|
|
|
|
|
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.
|
|
|
|
|
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;
z-index: 2;
background-color: #efffff;
}
ul.MenuBarVertical
{
width: 250px;
text-align: left;
border: 1px solid #CCC;
}
|
|
|
|
|
Thanks, that's a good tip! 
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.
|
|
|
|
|
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 ul elements using display:none and show them on the li:hover pseudo selector.
Hopefully this is enough to get you started.
Oh and stay away from dreamweaver. It's yucky. 
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! 
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!
"they're coming to take me away, ha ha, hee hee, ho ho..."
Will Rogers never met me.
modified 30-Mar-12 0:24am.
|
|
|
|
|
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.
|
|
|
|
|
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.
|
|
|
|
|
Hi there,
The problem wasn't with the menu. It was actually with the content block. Removing the position:relative property 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 .clearfloat class 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 right back into web development again. It really is an exciting time for it.
Your tweaked files.
https://skydrive.live.com/redir.aspx?cid=46b6ee8fd7feac15&resid=46B6EE8FD7FEAC15!254&parid=46B6EE8FD7FEAC15!136[^]
Cheers
James
ps. Yeah jsfiddle is awesome. It's a really neat way to experiment and show people samples whenever you need help.
JimBob SquarePants
*******************************************************************
"He took everything personally, including our royalties!"
David St.Hubbins, Spinal Tap about Ian Faith, their ex-manager
*******************************************************************
|
|
|
|
|
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 the position: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.
modified 1-Aug-19 21:02pm.
|
|
|
|
|
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.
|
|
|
|
|
Hi!
I've given the source code for a web site. I've to host it to localhost(in XAMPP) and test the site. I've installed XAMPP and copied whole source code to htdocs folder of XAMPP installation. Now I've to run the website from localhost. For this I need to know which file I've to call from the browser. Where will it be embedded? Sorry if this is a silly question. I don't know anything about web programming.
|
|
|
|
|
If you have a file default.html in \xampp\htdocs you should be able to view it in a browser using http://localhost/default.html
When I was a coder, we worked on algorithms. Today, we memorize APIs for countless libraries — those libraries have the algorithms - Eric Allman
|
|
|
|
|
Wayne Gaylard wrote:
If you have a file default.html in \xampp\htdocs you should be able to view it in a browser using http://localhost/default.html
In my case, I've many files and folders as source. I want to know what should I put inplace of default.html
|
|
|
|
|
You need to put all your files and folders into that folder. All web sites must have a default or home page, and this is the file you should use to access the site initially.
When I was a coder, we worked on algorithms. Today, we memorize APIs for countless libraries — those libraries have the algorithms - Eric Allman
|
|
|
|
|
start with this
http://localhost/
If your http server found the starting page it will reply to your browser. If it does not it will give you a list. As far I can recall in XAMP directory listing are default settings.
By the way. If there is no index.php or index.htm or index.html or whatever it is defined in http.conf then this website will fail in public because user from outside dont would not seek for any file they will just enter the address
|
|
|
|
|
I want to integrate Facebook chat system in my php based website. I have searched developers.facebok.com for data, but it says very little about jabber XMPP and I dont know how to use it. If you could post some step by step tutorial for integration of facebook chat or any link for that tutorial that would be so nice of you.
I just want to add Facebook chat as I need to to do add some on action events for this chat. So I want code tutorial for this I'm not in search for any direct code embedding.
|
|
|
|
|
|
QUESTION
Hello all,
I have some extra folders in which I have some special php files...
In all the normal folders that are used for the web everything works as expected, but in the case of some of those folders the following code won't work as the result is wrong...
include($_SERVER['DOCUMENT_ROOT'].'/XXX.php');
What can be happening here?
As far as I know the $_SERVER variable depends on the server and folders should not affect it...
Thank you in advance! 
SOLUTION
See my answer to Peter_in_2780 below...
Thank you for reading!
modified 23-Mar-12 4:55am.
|
|
|
|
|
Hi Joan,
I can't see what is going on from this distance, but one thing I have found very useful is to write a tiny page that calls phpinfo(). Then you can do a side-by-side comparison of what each site offers in the way of versions, configuration options, server variables, etc. Of course, the directory structure BELOW document_root must be identical.
Cheers,
Peter
Software rusts. Simon Stephenson, ca 1994.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
