|
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.
|
|
|
|
|
the problem is with menu height and contenidorpags div height.
both of them are set to auto. what you can do is use height. go to your css and add height parameter with 450px, you might make it look good
|
|
|
|
|
I would prefer not to do that...
ContenidorPags is a div that it is the container for all the pages in the web...
The menues depend on a database and grow from time to time and texts in the right pane also are variable...
This makes me to avoid a predefined height...
I've got some floats in between and till now it has helped me to use
<div style="clear: both;"></div>
But now it seems this is not working... 
Anyway thank you for your help!
How have you been able to see which is the div that is not working as expected?
Thank you again!
|
|
|
|
|
chrome inspection, click right button on the desired object and then click the "inspect element" menu
|
|
|
|
|
Thank you! I've been working with IE without any plugin and then I started to use firebug in Firefox, but I've not been able to see that, I've also installed other browsers to see the way the web works in them but I've not look in deep at chrome... I'll do it...
Thanks!
|
|
|
|
|
|
May I caution you that not all browsers know about css3 tags such as your use of :after
modified 1-Aug-19 21:02pm.
|
|
|
|
|
Ooops it seems that complete happiness is not possible with browsers...
Do you know of any valid and compatible replacement given the problem and what has solved it?
Thank you in advance Richard!
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
