|
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.
|
|
|
|
|
Thank you Peter_in_2780, I did not know about that function, it helped me to see that everything was exactly equal...
probably again I've been hit by the differences of a production Linux server and a virtual environment like easyphp...
I had a call to header and that call was exactly the same on both computers (same code) and it only was dependant on the path... given by the $SERVER... that made me think that server/easyphp were giving different results, but it seems that header (what I'm using to redirect) can't have anything related to HTML before being called and even given that condition it works in easyphp but not in Linux...
solved... thank you for your answer.
|
|
|
|
|
There's one more thing that might be relevant here, and is worth remembering anyway. If you use the PHP header() function to output an HTTP header in the response, then it may fail if:
1. there is anything previously output (even a single space before <?php will do it!)
and
2. Apache is configured *without* output buffering.
If Apache is set up for output buffering (and you typically can't tell from phpinfo()) then you might get away with 1.
Quote from PHP Manual - header(): Remember that header() must be called before any actual output is sent, either by normal HTML tags, blank lines in a file, or from PHP. It is a very common error to read code with include(), or require(), functions, or another file access function, and have spaces or empty lines that are output before header() is called. The same problem exists when using a single PHP/HTML file.
Cheers,
Peter
Software rusts. Simon Stephenson, ca 1994.
|
|
|
|
|
Thank you!
|
|
|
|
|
ORIGINAL POST
I've been working on a web site... one of the last problems that I've detected the site has is that in pages in which the layout has a menu on the left and the contents on the right side, then a black stripe appears just before the footer...
I've been searching the Internet in order to find the reason of that, but even with firebug I'm not capable to understand the problem...
It works in IE and it fails with Firefox, chrome, safari and opera... 
If any of you could take a look at it and suggest which would be the possible reason of that black stripe it would be great...
I simply don't understand why it is here... if I understand that, probably I will be able to find a solution out there.
The web site is the one on my sig, if you would like to see the black stripe you could just follow the link and press company (just under the flash (top/left)).
Thank you in advance!
SOLUTION
As johny10151981 suggested that it was a specific div the one that was failing, I've searched the Internet in order thow to clear divs with floating and auto height... it seems that this CSS class helps a lot on that if it is applied to the parent div:
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Thank you all for reading and help.
modified 22-Mar-12 10:28am.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
