Page 2 of 2 FirstFirst 12
Results 11 to 14 of 14

Thread: full page tab menu problems

  1. #11
    Join Date
    Feb 2014
    Posts
    42
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    hello

    ok I see you have changed the image & I changed the code in the right places.

    however, I cant get the left/right images to show up using the new way. I adjusted the width from 110 to 250 as the image has changed & still nothing. just shows up blank.

    I tried changing the margin top but that didn't work either. so I left your code as is, & added back in the images to either side of the <div id="right"> in the old place.

    unless I missed a piece of code ?

    Thanks,
    HippieChickie

  2. #12
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,782
    Thanks
    46
    Thanked 227 Times in 220 Posts
    Blog Entries
    54

    Default

    There were errors on your page.
    And you added items. When you add an item, you must adjust the CSS. EDIT: I also posted a version that allows you to add menu items without having to change existing CSS, see post below.
    This works:
    Code:
    <!doctype html>
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>WB 20th Anniversary !!</title>
    
    <style>
    .auto-style1 {text-align: center;}
    
    a:link {text-decoration: none}
    body {background: url('http://www.whambamgames.com/wb/events/spade/yybg.jpg'); 
    font-family: verdana; font-size: 16px; line-height: 26px; padding-top: 10px; overflow-y: scroll;
    	padding-left: 3%;
    	padding-right: 3%;
    	padding-bottom: 3%;
    }
    
    .hightlighting {color: white; background: #DB0409; padding: 5px}
    a:hover { background: #DB0409}
    
    /* the image */
    #twenty {width: 250px; display: block; margin: auto; z-index:1; }
    
    /* the imgage is contained in a fixed div now (see below), so we have to make a clone in order to make sure that the fixed div behaves like a relative div   */
    #dummy_twenty {
    	border: medium #DB0409;
    	position: relative;
    	width: 250px;
    	display: block;
    	margin: auto;
    	margin-bottom: 1px;
    	z-index: 1;
    	left: 0;
    	background: white;
    	height: 180px;
    }
    
    #img_container {
    	border: thick #DB0409 solid;
    	position: fixed;
    	z-index: 3;
    	left: 50%;
    	transform: translate(-50%);
    }
    
    /* we should not see parts of the content area when it scrolls up */
    #hider {position: fixed; left:0; top:0; right:0; height:60px; z-index: 1; background: white}
    
    /* the logo-div */
    #logo_div {position: fixed; left:0; width: 100%; background: black; color: white; top: 0px; height: 59px; z-index: 2}
    
    /* the black header-div */
    #black_div {position: fixed; left:0; width: 100%; background: black; color: white; top: 60px; height: 80px; z-index: 2}
    
    /* the part of the menu to the left of the image */
    #left {position: absolute; left: 5%; margin-top: 25px; z-index: 2; width: 45%}
    
    /* the part of the menu to the right of the image */
    #right {position: absolute; right:5%; margin-top: 25px; z-index: 2; width: 45%; text-align: right}
    
    /* the menu-items */
    #menu_item_home, #menu_item_event_rules, #menu_item_pre_register, #menu_item_formats, #menu_item_stats, #menu_item_ticket_grid, #menu_item_prize_drawing, #menu_item_raffle_ticket_list, #menu_item_winners {color: white;   padding: 5px; padding-left: 10px; margin-right: 10px; white-space: nowrap}
    
    #content_area {
    	background: #FFFFFF;
    	position: relative;
    	width: 99%;
    	height: auto;
    	margin-top: -25px;
    	margin-bottom: 5px;
    	border: 1px solid black;
    	margin-left: auto;
    	margin-right: auto;
    	padding: 20px 10px 5px 10px;
    	border-radius: 5px;
    	box-shadow: 5px 10px 18px #888888;
    }
    
    /* image to the left of the central image */
    
    #img_to_the_left {position: fixed; z-index:4; left: 50%; margin-left: -300px; margin-top: -10px; height: 50px; overflow: hidden}
    
    
    /* image to the right of the central image */
    #img_to_the_right {position: fixed; z-index:4; left: 50%; margin-left: 150px; margin-top: -10px; height: 50px; overflow: hidden}
    
    @media screen and (max-width: 1425px) {#twenty {width: 200px; margin-top: 10px}}
    @media screen and (max-width: 1425px) {#content_area {margin-top: 0}}
    @media screen and (max-width: 1365px) {#left {width: 450px; }}
    @media screen and (max-width: 1365px) {#right {width: 450px; }}
    @media screen and (max-width: 1215px) {#left {width: 400px; }}
    @media screen and (max-width: 1140px) {#twenty {width: 150px; margin-top: 30px}}
    @media screen and (max-width: 1140px) {#img_to_the_left {margin-left: -280px; }}
    @media screen and (max-width: 1140px) {#img_to_the_right {margin-left: 110px; }}
    @media screen and (max-width: 1090px) {#left {width: 280px; left:0; margin-top: 15px}}
    @media screen and (max-width: 1090px) {#right {width: 280px; right:0; margin-top: 15px; right: 10px}}
    @media screen and (max-width: 1090px) {#twenty {width: 200px; margin-top: 10px}}
    @media screen and (max-width: 1090px) {#img_to_the_left {margin-left: -290px; }}
    @media screen and (max-width: 1140px) {#img_to_the_right {margin-left: 130px; }}
    @media screen and (max-width: 732px) {#left {width: 150px; margin-top: 0}}
    @media screen and (max-width: 732px) {#right {width: 160px; margin-top: 0}}
    @media screen and (max-width: 560px) {#black_div {top: 130px;}}
    @media screen and (max-width: 560px) {#content_area {margin-top: 30px;}}
    @media screen and (max-width: 560px) {#twenty {margin-top: -3px; width: 150px; border: 1px solid #DB0409}}
    @media screen and (max-width: 560px) {#hider {height: 130px;}}
    @media screen and (max-width: 560px) {#img_to_the_left {margin-left: -270px;  }}
    @media screen and (max-width: 560px) {#img_to_the_right {margin-left: 115px; }}
    @media screen and (max-width: 525px) {#img_to_the_left {display: none;  }}
    @media screen and (max-width: 525px) {#img_to_the_right {display: none; }}
    
    .auto-style3 {
    	color: #DB0409;
    	font-size: x-large;
    }
    
    </style>
    
    <script>
    function highlighting(lochash,the_class)
    {
    if(location.hash==lochash)
    {document.getElementById(the_class).className='hightlighting'}
    else {document.getElementById(the_class).className=null}
    }
    </script>
    
    <script>
    function content_change()
    {
    /* FILLING THE CONTENT-AREA (=A DIV HAVING ID='content_area' ON IT) WITH CONTENT FROM A HIDDEN DIV.*/
    document.getElementById('content_area').innerHTML = document.getElementById(location.hash.substring(1,location.hash.length)).innerHTML
    
    /* HIGHLIGHTING CURRENT MENU ITEMS */
    
    highlighting('#home','menu_item_home') //if(location.hash=="#home"){document.getElementById('menu_item_home').className='hightlighting'}
    
    highlighting('#event_rules','menu_item_event_rules') //if(location.hash=="#event_rules"){document.getElementById('menu_item_event_rules').className='hightlighting'}
    
    highlighting('#pre_register','menu_item_pre_register') //if(location.hash=="#pre_register"){document.getElementById('menu_item_pre_register').className='hightlighting'}
    
    highlighting('#formats','menu_item_formats') //if(location.hash=="#formats"){document.getElementById('menu_item_formats').className='hightlighting'}
    
    highlighting('#stats','menu_item_stats') //if(location.hash=="#stats"){document.getElementById('menu_item_stats').className='hightlighting'}
    
    highlighting('#ticket_grid','menu_item_ticket_grid') //if(location.hash=="#ticket_grid"){document.getElementById('menu_item_ticket_grid').className='hightlighting'}
    
    highlighting('#prize_drawing','menu_item_prize_drawing') //if(location.hash=="#prize_drawing"){document.getElementById('menu_item_prize_drawing').className='hightlighting'}
    
    highlighting('#raffle_ticket_list','menu_item_raffle_ticket_list') //if(location.hash=="#raffle_ticket_list"){document.getElementById('menu_item_raffle_ticket_list').className='hightlighting'}
    
    highlighting('#winners','menu_item_winners') //if(location.hash=="#winners"){document.getElementById('menu_item_winners').className='hightlighting'}
    
    }
    window.onhashchange=content_change;
    </script>
    
    
    </head>
    
    <body>
    
    
    <div id="img_container" >
     <img id="twenty" src="http://www.whambamgames.com/wb/events/spade/20th2.png" alt="" >
    </div>
    
    <div id="img_to_the_left" >
    <img src="http://www.whambamgames.com/wb/events/spade/whamlogo2.png" alt="" style="width: 158px; ">
    </div>
    
    <div id="img_to_the_right"  >
    <img src="http://www.whambamgames.com/wb/events/spade/bamlogo2.png" alt="" style="width: 130px; ">
    
    </div>
    
    <div id="dummy_twenty" ></div>
    
    <div id="hider">
    </div>
    
    <div id="black_div" >
    
    <div id="left" >
    
    <a id="menu_item_home" href="#home" >Home</a>
    <div id="home" style="display: none; ">
    <p class="auto-style1"><span class="auto-style2">S.P.A.D.E.<br/>Spade Players Appreciation Day Event<br/>Saturday, April 21st 2018&nbsp; 
    -&nbsp; From 12p PST to 12a PST</span></p>
    <p class="auto-style1">For 20 years.. from the Zone to WGC &amp; now SHG players have 
    supported our ALT formats, Tournaments &amp; Events.<br/>We would like to Thank 
    YOU for that loyalty by giving away Twenty 3 month Yacht Club Memberships!</p>
    <p class="auto-style1">To give every player a chance at winning - not just those 
    who can be here for the entire event,<br/>we will be using our unique Raffle Ticket 
    System for awarding the YCM prizes.</p>
    <p class="auto-style1">Click any link above to find out more!&nbsp;</p>
    <table style="border:0; width: 100%; text-align: center" >
    <tr>
    <td>
    <div style="font-family: 'Century Gothic', sans-serif; margin-bottom: 20px; font-size:small;">
    <a href="http://www.whambamgames.com/" target="_blank" style="background: white">
    <img style="width: 49px; height: 50px; text-align: center; border: 0" alt="" src="http://www.whambamgames.com/wb/images/yy2.gif">
    </a>
    <b style="font-family: arial; font-size: 12px">
    <a href="mailto:whambamtournys@hotmail.com" style="background: white"><br>whambamtournys@hotmail.com</a><br>
    <span class="auto-style14">WHAM BAM TOURNAMENTS</span><br>
    <span style="color:#008000">We</span> <span style="color:#800000">strive</span> 
    <span style="color:#808000">to</span>
    <span style="color:#000080">be</span> 
    <span style="color:#800080">different.</span><br>
    <span class="auto-style14">Since  1998</span>
    </b>
    </div>
    </td>
    </tr>
    </table>
    </div>
    
    <a id="menu_item_event_rules" href="#event_rules" >Rules</a>
    <div id="event_rules" style="display: none">
    Shows on rules
    </div>
    
    <a id="menu_item_pre_register" href="#pre_register">Pre-Register</a>
    <div id="pre_register" style="display: none; ">
    Shows on pre-register
    </div> 
    
    <a id="menu_item_formats" href="#formats">Formats</a>
    <div id="formats" style="display: none">
    Shows when formats load
    </div> 
    
    <a id="menu_item_stats" href="#stats">Stats</a>
    <div id="stats" style="display: none">
    Shows when 'stats' is clicked on
    </div>
    
    </div>
    
    <div id="right" > 
    
    <a id="menu_item_ticket_grid" href="#ticket_grid">Ticket Grid</a>
    <div id="ticket_grid" style="display: none">
    Shows when 'ticked grid' is clicked on
    </div>
    
    <a id="menu_item_prize_drawing" href="#prize_drawing" >Prize Drawing</a>
    <div id="prize_drawing" style="display: none; ">
    Shows when 'prize drawing' is clicked on
    </div> 
    
    <a id="menu_item_raffle_ticket_list" href="#raffle_ticket_list" >Raffle Ticket List</a>
    <div id="raffle_ticket_list" style="display: none">
    Shows when 'raffle ticket list' is clicked on
    </div>
    
    <a id="menu_item_winners" href="#winners" >Winners</a>
    <div id="winners" style="display: none">
    Shows when 'winners' is clicked on
    </div>
    
    
    </div>
    
    </div>
    
    
    <!-- The region in the body where the script inserts the content of a hidden div (a 'page') depending on the href value of the clicked link: -->
    
    <div id="content_area" ></div>
    
    <!-- At the end of the body section: -->
    <script>
    /* Loading the first 'page' (event_rules) at site entrance. If, in the menu, the ID on the id belonging to the menu-link for the first 'page' is not event_rules, replace '#event_rules' below with your own ID (preceded by the hash symbol) */
    if(window.location.hash==''){window.location.replace('#home');}
    
    /* Executing the function given above (see the head) when the (real) page loads */
    setTimeout("content_change()",0)
    </script> 
    
    </body>
    
    </html>
    Last edited by molendijk; 02-16-2018 at 09:11 PM.

  3. #13
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,782
    Thanks
    46
    Thanked 227 Times in 220 Posts
    Blog Entries
    54

    Default

    Here's a version that allows you to add menu items without having to change the existing CSS:
    Code:
    <!doctype html>
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>WB 20th Anniversary !!</title>
    
    <style>
    .auto-style1 {text-align: center;}
    
    a:link {text-decoration: none}
    body {background: url('http://www.whambamgames.com/wb/events/spade/yybg.jpg'); 
    font-family: verdana; font-size: 16px; line-height: 26px; padding-top: 10px; overflow-y: scroll;
    	padding-left: 3%;
    	padding-right: 3%;
    	padding-bottom: 3%;
    }
    
    .hightlighting {color: white; background: #DB0409; padding: 5px}
    a:hover { background: #DB0409}
    
    /* the image */
    #twenty {width: 200px; display: block; margin: auto; z-index:1; }
    
    
    
    #img_container {
    	border: thick #DB0409 solid;
    	position: fixed;
    	z-index: 3;
    	left: 50%;
    	transform: translate(-50%);
    }
    
    /* we should not see parts of the content area when it scrolls up */
    #hider {position: fixed; left:0; top:0; right:0; height:60px; z-index: 1; background: white; }
    
    /* the logo-div */
    #logo_div {position: fixed; left:0; width: 100%; background: black; color: white; top: 0px; height: 59px; z-index: 2}
    
    /* the black header-div */
    #black_div {position: fixed; left:0; width: 100%; background: black; color: white; z-index: 2}
    
    /* the part of the menu to the left of the image */
    #left {position: absolute; left: 20px; z-index: 2; top: 50%; max-width: 50%; transform: translateY(-50%) }
    
    
    
    /* the part of the menu to the right of the image */
    #right {position: absolute; right:20px; z-index: 2; text-align: right; top: 50%; max-width: 50%; transform: translateY(-50%)}
    
    
    /* the menu-items */
    #menu_item_home, #menu_item_event_rules, #menu_item_pre_register, #menu_item_formats, #menu_item_ticket_grid, #menu_item_prize_drawing, #menu_item_raffle_ticket_list, #menu_item_stats, #menu_item_winners {color: white;   padding: 5px; padding-left: 10px; margin-right: 10px; white-space: nowrap}
    
    #content_area {
    	background: #FFFFFF;
    	position: relative;
    	width: 99%;
    	height: auto;
    	margin-top: -25px;
    	margin-bottom: 5px;
    	border: 1px solid black;
    	margin-left: auto;
    	margin-right: auto;
    	padding: 20px 10px 5px 10px;
    	border-radius: 5px;
    	box-shadow: 5px 10px 18px #888888;
    }
    
    /* image to the left of the central image */
    #img_to_the_left {position: fixed; z-index:4; left: 50%; margin-left: -292px; margin-top: -10px; height: 50px; overflow: hidden}
    
    /* image to the right of the central image */
    #img_to_the_right {position: fixed; z-index:4; left: 50%; margin-left: 160px; margin-top: -10px; height: 50px; overflow: hidden}
    
    @media screen and (max-width: 560px) {#hider {height: 130px;}}
    
    @media screen and (max-width: 655px) {#twenty {width: 100px;  }}
    
    @media screen and (max-width: 655px) {#img_to_the_left {margin-left: -220px  }}
    
    @media screen and (max-width: 655px) {#img_to_the_right {margin-left: 80px  }}
    
    @media screen and (max-width: 450px) {#img_to_the_left {visibility: hidden }}
    
    @media screen and (max-width: 450px) {#img_to_the_right {visibility: hidden}}
    
    .auto-style3 {
    	color: #DB0409;
    	font-size: x-large;
    }
    
    </style>
    
    <script>
    function highlighting(lochash,the_class)
    {
    if(location.hash==lochash)
    {document.getElementById(the_class).className='hightlighting'}
    else {document.getElementById(the_class).className=null}
    }
    </script>
    
    <script>
    function content_change()
    {
    /* FILLING THE CONTENT-AREA (=A DIV HAVING ID='content_area' ON IT) WITH CONTENT FROM A HIDDEN DIV.*/
    document.getElementById('content_area').innerHTML = document.getElementById(location.hash.substring(1,location.hash.length)).innerHTML
    
    /* HIGHLIGHTING CURRENT MENU ITEMS */
    
    highlighting('#home','menu_item_home') //if(location.hash=="#home"){document.getElementById('menu_item_home').className='hightlighting'}
    
    highlighting('#event_rules','menu_item_event_rules') //if(location.hash=="#event_rules"){document.getElementById('menu_item_event_rules').className='hightlighting'}
    
    highlighting('#pre_register','menu_item_pre_register') //if(location.hash=="#pre_register"){document.getElementById('menu_item_pre_register').className='hightlighting'}
    
    highlighting('#formats','menu_item_formats') //if(location.hash=="#formats"){document.getElementById('menu_item_formats').className='hightlighting'}
    
    highlighting('#ticket_grid','menu_item_ticket_grid') //if(location.hash=="#ticket_grid"){document.getElementById('menu_item_ticket_grid').className='hightlighting'}
    
    highlighting('#prize_drawing','menu_item_prize_drawing') //if(location.hash=="#prize_drawing"){document.getElementById('menu_item_prize_drawing').className='hightlighting'}
    
    highlighting('#raffle_ticket_list','menu_item_raffle_ticket_list') //if(location.hash=="#raffle_ticket_list"){document.getElementById('menu_item_raffle_ticket_list').className='hightlighting'}
    
    highlighting('#stats','menu_item_stats') 
    
    highlighting('#winners','menu_item_winners')
    
    }
    window.onhashchange=content_change;
    </script>
    
    
    <script> 
    /* Positioning and sizing elements with the help of javascripts so that we can add menu items without having to make CSS-modifications  */
    
    function position_size_elements()
    {
    document.getElementById('left').style.width = window.innerWidth/2 - document.getElementById('twenty').clientWidth + 50 +'px';
    
    document.getElementById('right').style.width = window.innerWidth/2 - document.getElementById('twenty').clientWidth + 50 +'px';
    
    document.getElementById('black_div').style.height = document.getElementById('left').clientHeight + 40 +'px';
    
    document.getElementById('black_div').style.top = document.getElementById('img_to_the_left').clientHeight + document.getElementById('img_to_the_left').scrollTop + 10+'px';
    
    document.getElementById('content_area').style.top = Math.max(document.getElementById('black_div').clientHeight + document.getElementById('black_div').scrollTop + document.getElementById('img_to_the_left').clientHeight + document.getElementById('img_to_the_left').scrollTop,document.getElementById('twenty').clientHeight + document.getElementById('twenty').scrollTop + document.getElementById('img_to_the_left').clientHeight+ document.getElementById('img_to_the_left').scrollTop)+'px'
    }
    
    window.addEventListener('load', function (){position_size_elements()}, false);
    
    window.addEventListener('resize', function (){position_size_elements()}, false);
    
    </script>
    
    </head>
    
    <body>
    
    <div id="img_container" >
     <img id="twenty" src="http://www.whambamgames.com/wb/events/spade/20th2.png" alt="" >
    </div>
    
    <div id="img_to_the_left" >
    <img src="http://www.whambamgames.com/wb/events/spade/whamlogo2.png" alt="" style="width: 140px; ">
    </div>
    
    <div id="img_to_the_right"  >
    <img src="http://www.whambamgames.com/wb/events/spade/bamlogo2.png" alt="" style="width: 140px; ">
    </div>
    
    <div id="hider">
    </div>
    
    <div id="black_div" >
    
    <div id="left" >
    
    <a id="menu_item_home" href="#home" >Home</a>
    <div id="home" style="display: none; ">
    <p class="auto-style1"><span class="auto-style2">S.P.A.D.E.<br/>Spade Players Appreciation Day Event<br/>Saturday, April 21st 2018&nbsp; 
    -&nbsp; From 12p PST to 12a PST</span></p>
    <p class="auto-style1">For 20 years.. from the Zone to WGC &amp; now SHG players have 
    supported our ALT formats, Tournaments &amp; Events.<br/>We would like to Thank 
    YOU for that loyalty by giving away Twenty 3 month Yacht Club Memberships!</p>
    <p class="auto-style1">To give every player a chance at winning - not just those 
    who can be here for the entire event,<br/>we will be using our unique Raffle Ticket 
    System for awarding the YCM prizes.</p>
    <p class="auto-style1">Click any link above to find out more!&nbsp;</p>
    <table style="border:0; width: 100%; text-align: center" >
    <tr>
    <td>
    <div style="font-family: 'Century Gothic', sans-serif; margin-bottom: 20px; font-size:small;">
    <a href="http://www.whambamgames.com/" target="_blank" style="background: white">
    <img style="width: 49px; height: 50px; text-align: center; border: 0" alt="" src="http://www.whambamgames.com/wb/images/yy2.gif">
    </a>
    <b style="font-family: arial; font-size: 12px">
    <a href="mailto:whambamtournys@hotmail.com" style="background: white"><br>whambamtournys@hotmail.com</a><br>
    <span class="auto-style14">WHAM BAM TOURNAMENTS</span><br>
    <span style="color:#008000">We</span> <span style="color:#800000">strive</span> 
    <span style="color:#808000">to</span>
    <span style="color:#000080">be</span> 
    <span style="color:#800080">different.</span><br>
    <span class="auto-style14">Since  1998</span>
    </b>
    </div>
    </td>
    </tr>
    </table>
    </div>
    
    <a id="menu_item_event_rules" href="#event_rules" >Rules</a>
    <div id="event_rules" style="display: none">
    Shows on rules
    </div>
    
    <a id="menu_item_pre_register" href="#pre_register">Pre-Register</a>
    <div id="pre_register" style="display: none; ">
    Shows on pre-register
    </div> 
    
    <a id="menu_item_formats" href="#formats">Formats</a>
    <div id="formats" style="display: none">
    Shows when formats load
    </div> 
    
    <a id="menu_item_stats" href="#stats">Stats</a>
    <div id="stats" style="display: none">
    Shows when 'stats' is clicked on
    </div>
    
    </div>
    
    <div id="right" > 
    
    <a id="menu_item_ticket_grid" href="#ticket_grid">Ticket Grid</a>
    <div id="ticket_grid" style="display: none">
    Shows when 'ticked grid' is clicked on
    </div>
    
    <a id="menu_item_prize_drawing" href="#prize_drawing" >Prize Drawing</a>
    <div id="prize_drawing" style="display: none; ">
    Shows when 'prize drawing' is clicked on
    </div> 
    
    <a id="menu_item_raffle_ticket_list" href="#raffle_ticket_list" >Raffle Ticket List</a>
    <div id="raffle_ticket_list" style="display: none">
    Shows when 'raffle ticket list' is clicked on
    </div>
    
    <a id="menu_item_winners" href="#winners" >Winners</a>
    <div id="winners" style="display: none">
    Shows when 'winners' is clicked on
    </div>
    
    
    </div>
    </div>
    
    
    <!-- The region in the body where the script inserts the content of a hidden div (a 'page') depending on the href value of the clicked link: -->
    
    <div id="content_area" ></div>
    
    <!-- At the end of the body section: -->
    <script>
    /* Loading the first 'page' (event_rules) at site entrance. If, in the menu, the ID on the id belonging to the menu-link for the first 'page' is not event_rules, replace '#event_rules' below with your own ID (preceded by the hash symbol) */
    if(window.location.hash==''){window.location.replace('#home');}
    
    /* Executing the function given above (see the head) when the (real) page loads */
    setTimeout("content_change()",0)
    </script> 
    
    </body>
    
    </html>
    Last edited by molendijk; 02-16-2018 at 10:43 PM.

  4. #14
    Join Date
    Feb 2014
    Posts
    42
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    hello

    page looks great now & i can play with the menu items at whim!

    why is it when 1 problem is solved another appears lol

    i started adding content under the format div. now i no longer have any bg showing on the bottom. i thought it may be margins or padding but if that were the case it wouldnt be correct when on home.

    yes the content is alot shorter on the home div but that shouldnt matter.

    is it possible to make the content div be a fixed size that works with the users browser showing a little of the bg on all 4 sides. then inside that content div have another div that scrolls the actual content.

    i did try to figure it out myself but it either didnt work or it put the div in the wrong place.

    as i said before i really like the shadow effect & how you have it set up & would like to see all of it at all times.


    the other thing is the central image & media. the adjusted code you are now using removed the white space that was appearing but has pushed it to the right where its colliding with the image to the right.

    thanks,
    HippieChickie

Similar Threads

  1. Css full page background
    By Godji in forum CSS
    Replies: 3
    Last Post: 09-24-2011, 11:37 AM
  2. Want to create a div in a page to acquire full page height
    By registeredspider in forum JavaScript
    Replies: 3
    Last Post: 02-05-2009, 05:50 AM
  3. Full Screen Load movie problems
    By punstc in forum Flash
    Replies: 1
    Last Post: 12-09-2007, 07:58 AM
  4. amazon all 41 product categories full page drop down menu
    By skywind in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-18-2007, 08:44 AM
  5. Making page span full page height
    By Titan85 in forum CSS
    Replies: 6
    Last Post: 06-07-2007, 05:40 AM

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
  •