The .symbols div is inside the #intro div, and as #intro is hidden unless the “Main {Portfolio}” menu item is clicked, .symbols will be hidden too.
If you want the .symbols div to be visible no matter which section of the page is currently visible then you should remove it from #intro and make it an immediate child of Content. i.e.
<div id="content">
<div class="symbols"></div>
Having done this, for .symbols to be visible on the page you will need to either add content to it or else give it a background.
The only thing i see that would hide the element is the following which occurs 2 times in your source. Simply comment out the first occurrence and the child elements should appear again.
Commenting it out breaks some of the tags. This has become a non-CSS related issue, but is there not something that could be added to the JS so those classes show up? So this issue can become a CSS issue again ?
It shows but it’s lost near the bottom of the page. I’ve rearranged the order of the HTML a few times and I want the blocks to appear ontop of #Intro. I don’t know why I have create a block and colored it orange for #intro it’s not needed, I’ll have to remove and set the text in the middle and put a background on #intro and keep the #intro img style then put three blocks of the color gray above the #intro p.
I want the symbols div to appear there all the time. There main purpose will be to only hold three images with a hover. I applied the code that SGTLegend suggested but the divs are not showing up ontop of the #Intro div. I may remove the orange block that is present but I want the symbols div to continue to appear.
This application is a mess. You are putting far to much functionality on a single page and trying to handle its interaction with the user by javascript. This is not good practice. If nothing else search engines will have difficulty and people that locate your site will have problems getting the information they are after.
I know you have been working on this for sometime but I believe the complexity is stopping it reached a finished state.
Quite some time it has been. The javascript works exactly how I want it to work, if cleaning it up will improve it just as long as it doesn’t break it how it works. What can be done?
Edit:
The JS at the beginning of the page controls each of IDs without it, it won’t hide the other ID which is the main function of the site. The second part of the JS which you are familiar with controls the form and verifies the user has given valid information. There is a strong possibility that something is breaking any new divs whether it’s a ID or class contained within the #Intro div to display by the JS but since everything is working, I can’t see it.
Another possibility is that you plan to have a .symbols div in each of the sections. In this case, the reason the .symbols div is not visible is that there is no content in it and the border value is incomplete. If you change it to the following then a border will be shown around it, when viewing Main {Portfolio}.
Victor - I tried the first method and it works except it pushes all the main ID down (ie, main, illustrations etc) down how can I prevent this?
Edit: I removed the display:block which reverted the page back to how it was, without the .symbols class.
This class symbols won’t need to override the Gears DIV it will reside below the navigation but above #Intro p
.symbols is not showing up. If I put .symbols below Content ID it pushes the other ID down. If I remove display:block and add the styles you mentioned, I don’t see nothing !?!?
It’s working, can from post #13 be moved to the CSS part of the forum ? I’d like to continue on with a few CSS questions regarding the page since it resumes as a CSS issue.
I placed the classes of symbols into a div called #symbol to move the div around moves the classes which are placed below the div #Intro.
I want to have the symbol classes are aligned near the top of the #Intro ID ?
I want control of the #intro img tag as I’ve lost control of it and I want to position it down from the top of the page ?
And I want control over #intro p style which I loose control over that style when something else get positioned, my guess is because it’s a child ?
I want to have the symbol classes are aligned near the top of the #Intro ID ?
Do you want the three divs with the class .symbol to be side by side and align with the top of the #intro div?
I want control of the #intro img tag as I’ve lost control of it and I want to position it down from the top of the page ?
The img element in the #intro div is targeted by the existing CSS rule for #intro img. To move the img down reduce the negative margin-top value.
And I want control over #intro p style which I loose control over that style when something else get positioned, my guess is because it’s a child ?
I suggest you provide a graphic showing where all the elements in the page are supposed to be. Then someone can suggest how they can be positioned most effectively.