Hi, I created three classes within the ID#Content that will each hold an image but they are not showing up?
<div class="symbol_visual">
<div class="symbol_create"></div>
<div class="watch"></div>
</div>
.symbol_visual {
width:250px;
height:250px;
color:gray;
border: 1px;
z-index:1;
}
There is presently only a style for one of the classes.
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.
There is some JavaScript on that page setting it to display: none. If you turn off JS, you’ll see that everything shows up.
The JS is needed, can you give any tips on how to solve?
It’s not really my area, I’m afraid, but I’ve move this to the JS forum, as this is a a script issue. 
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.
$("#content").children().hide();
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 ?
You can add this to the JavaScript after everything else…
$('.symbol_visual').show();
[B]OR
[/B]You can change your CSS selector to
.symbol_visual {
display: block !important;
}
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.
Can you please clarify, as fully as possible, what you are trying to achieve with the symbols div or indeed the intro div (within which it sits).
Is it suppose to appear when you use a menu option?
Is it something that should be there all the time?
SgtLegend told you how to make it appear.
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.
I’m not wanting to be rude but …
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}.
border: 1px green solid;
color: gray;
height: 250px;
position: relative;
width: 100px;
width: 100px;
You no longer need display:block!important and only need the z-index if you wish it to overlap the #gears div.
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
Float it left, and give it some top margin to prevent it obstructing your menu.
.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 ?
Many happy returns of the day to this project
Sorry but this sentence doesn’t make sense to me.
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.