SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Class not appearing

    Hi, I created three classes within the ID#Content that will each hold an image but they are not showing up?

    Code HTML4Strict:
    <div class="symbol_visual">
    <div class="symbol_create"></div>
    <div class="watch"></div>
    </div>

    Code CSS:
    .symbol_visual {
    	width:250px;
    	height:250px;
    	color:gray;
    	border: 1px;
    	z-index:1;
     
    }
    There is presently only a style for one of the classes.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    There is some JavaScript on that page setting it to display: none. If you turn off JS, you'll see that everything shows up.

  3. #3
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The JS is needed, can you give any tips on how to solve?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

    Code JavaScript:
    $("#content").children().hide();

  6. #6
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ?

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You can add this to the JavaScript after everything else...

    Code JavaScript:
    $('.symbol_visual').show();

    OR

    You can change your CSS selector to

    Code CSS:
    .symbol_visual {
       display: block !important;
    }

  8. #8
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  13. #13
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code CSS:
    <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.

  14. #14
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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}.
    Code CSS:
    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.

  15. #15
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  16. #16
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Float it left, and give it some top margin to prevent it obstructing your menu.

  17. #17
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .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 !?!?

  18. #18
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  19. #19
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ?

  20. #20
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Many happy returns of the day to this project
    Quote Originally Posted by SiberianHuskey View Post
    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.
    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.

  21. #21
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you want the three divs with the class .symbol to be side by side and align with the top of the #intro div?
    Yes.
    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.
    Shortly, is it almost on target.

  22. #22
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it The ID#Symbol doesn't move the classes as it should.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •