SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru Michel32's Avatar
    Join Date
    Nov 2004
    Posts
    644
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need to remove right box on inner page only!

    Hi guys,

    I need to remove on my inner page the right box, code:

    <div id="right">
    <div class="box">

    </div>
    </div>

    This will be only on one specific page, since I want to display here an Iframe whichis covering most part from left to right.

    When I remove the divs on this page, the layout/design disappears and shows only a white page with the Iframe.

    How can I simply remove my right box on this page only and still keep the layout intact?


    Many thanks!

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Assuming you simply just DONT CODE it into that specific page, CSS allows you to not display the box ( it will still be there... visible if you turn CSS off or use view source.... just so you know).


    Anyway, the easy technique for this to ad a class to your body tag or page wrapper.

    example:

    <body class="targetPage"> ... </body>

    now you can hide the content using :

    body.targetPage #right {display:none;}


    Hope that helps .

  3. #3
    SitePoint Guru Michel32's Avatar
    Join Date
    Nov 2004
    Posts
    644
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where do I place exactly within my code :

    body.targetPage #right {display:none;}


    And do I need to remove the exiting rightbox div tags as well?

  4. #4
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this should do the trick:
    div#right
    {
    visibility:hidden;
    }

    This will hide the contents of the DIV while maintaining layout

  5. #5
    SitePoint Guru Michel32's Avatar
    Join Date
    Nov 2004
    Posts
    644
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried to make the changes as mentioned above, but my right side bar still shows.

    I need exact guidelines where to add the code, which changes I need to make, etc. since I don't have much CSS knowledge.


    Many thanks!

  6. #6
    SitePoint Guru Michel32's Avatar
    Join Date
    Nov 2004
    Posts
    644
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Assuming you simply just DONT CODE it into that specific page, CSS allows you to not display the box ( it will still be there... visible if you turn CSS off or use view source.... just so you know).


    Anyway, the easy technique for this to ad a class to your body tag or page wrapper.

    example:

    <body class="targetPage"> ... </body>

    now you can hide the content using :

    body.targetPage #right {display:none;}


    Hope that helps .
    Hi,

    1. I added class "targetPage" to my body tag on my particular inner page.
    2. I added between my head tags on my particular inner page:

    <style type="text/css">
    body.targetPage #right {display:none;}


    Now it does show the layout, but no text or content whatsoever on the whole page!

    What did I do wrong?


    Many thanks!

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    you don't have to put the code in the individual page, thats the beauty of this method. you can put it in your general style sheet.


    As far as ALL the content disappearing... was all your content contained within #right? or perhaps you forgot to close a div tag...

  8. #8
    SitePoint Guru Michel32's Avatar
    Join Date
    Nov 2004
    Posts
    644
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So... I placed inside my particular page <body class="targetPage"></body>

    Where do I place within my CSS file body.targetPage #right {display:none;} ?

    I placed it now here, but still shows me only layout no content (when I change it back to my original coding, everything is ok):


    /**** Sidebar ***/


    #right {
    width: 315px;
    float: right;
    display:block;
    margin-top: 10px;
    }

    #right .box {
    width: 280px;
    background: #F6F9FB;
    border: 1px solid #E1E1E1;
    padding:10px 10px 15px 10px;
    float: right;
    body.targetPage #right {display:none;}
    }

    #right .box h2 {
    font-size: 1.1em;
    margin: 0px 0 0px 0;
    padding:0px 0 5px 0;
    }

    #right .box a {
    margin: 10px 0 10px 0;
    color: #56677C;
    font-size: 10px;
    }

    #right .box p {
    margin: 5px 0 10px 0;
    line-height: 15px;
    }

    #right .box ul {
    padding: 0 0 7px 20px;
    margin:10px 0 10px 0;
    }

    #right .box li {
    margin-top:5px;
    }


    /**** Clear Div ***/


    #clear {
    display: block;
    clear: both;
    width: 100%;
    height:1px;
    overflow:hidden;
    }

  9. #9
    SitePoint Guru Michel32's Avatar
    Join Date
    Nov 2004
    Posts
    644
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dresden Phoenix,

    It's working now. Thanks!


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
  •