Grow your CSS skills. Land your dream job.

Need to open new page from iframe – how can I make it work?

  • # January 23, 2010 at 12:27 am

    Hello,

    Here is the website:

    http://tolonopresbyterian.org.

    If you click on the tab "Current Sermon Series" you get a pic of a cross. You click on this and it goes to this page http://www.tolonopresbyterian.org/ministries/index.html, BUT it only opens to the size of the window. I want it to open or "pop up" a new page.

    How do I do this?

    Thanks!
    Kendra

    # January 23, 2010 at 12:55 am

    By adding target="_blank" to the anchor, it will open it in a new tab.

    By adding target="_parent" to the anchor, it will open it up in the same window like a normal link.

    Also, your link on your webpage has a typo so it’s not linking to the page. it ends in ../index2.html which doesn’t exist. The link you posted in your question ends in ../index.html

    iframes always open new links within themselves because that’s what they are made for so you have to indicate if you want it to link in another way. Tell me how it goes

    # January 24, 2010 at 5:40 am

    Thanks! I’m still trying to figure out how to get that tab to open a new window. Here is the css for the tabs and the html for tab2. Any help appreciated.

    Kendra

    CSS

    * Collapse All
    * Expand All

    Code:
    /* this page formats the three tabs on the home page*/

    body {
    margin: 0;
    padding: 0;
    }

    /* @group 3TAB BOX */

    #threetabBox {
    margin-top: 42px;
    }

    #threetabBox #tabBoxbody {
    background-color: white;
    width: 568px;
    height: 244px;
    border-left: 1px solid #c8c6ba;
    border-bottom: 1px solid #c8c6ba;
    border-right: 1px solid #c8c6ba;
    padding-top: 2px;
    }

    #threetabBox #tabBoxbody #tab1Table {
    padding-top: 4px;
    padding-left: 4px;
    }

    #threetabBox #tabBoxbody #tab1Table #cell1{
    height: 231px;
    width: 367px;
    margin: 0;
    padding: 0 5px 0 0;
    }

    #threetabBox #tabBoxbody #tab1Table #cell2{
    background: url(../img/main/tabPix/tab1TextBak.jpg) no-repeat 0 0;
    width: 181px;
    vertical-align: top;
    color: #e4d0ad;
    }

    #threetabBox #tabBoxbody #tab1Table #cell2 p {
    padding-left: 12px;
    padding-right: 8px;
    font-size: 13px;
    }

    #threetabBox #tabBoxbody #tab1Table #cell2 .hedr3 {
    color: #efd29c;
    font: 18px Georgia, “Times New Roman”, Times, serif;
    padding-left: 12px;
    padding-top: 12px;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabRow {
    }

    #threetabBox #tabRow #tabTable {
    height: 25px;

    font: 12px “Lucida Grande”, Lucida, Verdana, sans-serif;
    }

    #tabRow #tabRightside {
    width: 9px;
    background: url(../img/shared_assets/tab-rightside.png) no-repeat 0 0;
    }

    #tabRow #tabLeftside {
    width: 9px;
    background: url(../img/shared_assets/tab-leftside.png) no-repeat 0 0;
    }

    #tabRow #tabRightside-idle {
    width: 9px;
    background: url(../img/shared_assets/tab-rightside_idle.png) no-repeat 0 0;
    }

    #tabRow #tabLeftside-idle {
    width: 9px;
    background: url(../img/shared_assets/tab-leftside_idle.png) no-repeat 0 0;
    }

    #tabRow #tabTable .active {
    vertical-align: top;
    padding-top: 5px;
    padding-right: 6px;
    padding-left: 6px;
    margin: 0;
    background-color: white;
    border-top: 1px solid #c8c6ba;
    }

    #tabRow #tabTable .idle {
    vertical-align: top;
    padding-top: 6px;
    padding-right: 6px;
    padding-left: 6px;
    margin: 0;
    color: #817c7b;
    background-image: url(../img/shared_assets/tabbak_idle.png);
    }

    #tabRow #tabTable .idle a:link {
    color: #817c7b;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    background: url(../img/shared_assets/tab-arrow_side.png) no-repeat 2px 2px;
    padding-left: 19px;
    }

    #tabRow #tabTable .idle a:visited {
    color: #817c7b;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    background: url(../img/shared_assets/tab-arrow_side.png) no-repeat 2px 2px;
    padding-left: 19px;
    }

    #tabRow #tabTable .idle a:hover {
    color: #c75a23;
    }

    #tabRow #home{
    display: inline-block;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
    color: #726155;
    background: white url(../img/shared_assets/tab-arrow_down.png) no-repeat 0 3px;
    padding-left: 19px;
    margin: 0;
    font: 12px “Lucida Grande”, Lucida, Verdana, sans-serif;
    }

    /* @end */

    the html for tab2:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


      Welcome to Tolono Presbyterian     Current Sermon Series
     

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".