Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    34
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Header wont stay still

    I'm sorry to say I'm back, but I'm back! I changed a few things and now my header will not stay still. I cannot figure out how to get it to remain in place at different zooms as well as different browsers. Can someone take a look at the code and let me know if you see something out of place.

    I'm referring to the main header area that includes the join now as well as the actual logo on every page.
    http://www.eminiroom.com

    Thanks as always
    Chris

  • #2
    New Coder
    Join Date
    Apr 2012
    Posts
    34
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Its been sometime and I forgot about my post here. I still haven't figured out the problem, but I do know why I haven't received a response yet. I forgot the code! Sorry about that..

    Here is the code :

    Code:
    <?php  
     // no direct access
     defined( '_JEXEC' ) or die( 'Restricted access' );?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
    <head>
    <jdoc:include type="head" />
     <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/system.css" type="text/css" />
     <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/general.css" type="text/css" />
     <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/styles.css" type="text/css" />
    </head>
    <body>
        <div id="wrap">
          <div id="header">
               <div class="headerUpper">
                                                    <div class="eminiHeaderLeft"><a href="http://www.eminiroom.com"><img src="templates/emini-room/images/logovideo.png" alt="Emini Room : EminiRoom.com"/></a></div>
                                                    <div class="eminiHeaderMiddle">
                                                            <jdoc:include type="modules" name="top-middle" style="xhtml" />
                                                 
                                                    </div>
                                                        <div class="eminiSignUp">
                                                        
                                                                        <div class="logIn">
                                                                        
                                                          <a href="http://stocksandstocks.com/index.php/disclaimer/contact-about-emini-room.html">Contact</a></div>
                                                                        
                                                                        <div class="signUpA">
                                                                        <a href="http://www.stocksandstocks.com/index.php/sign-up-for-emini-trade-room/non-members.html" title="LiveEminiSignUp" id="signUpLogo">Live Emini Room Sign Up</a>
                                                                        
                                                                        </div>
                                                        
                                                        </div>
                                                
            </div>
            
            <div id="nav-left">
                        <jdoc:include type="modules" name="menuload" style="xhtml" />
                    
                    <!--closes nav -->
                    
            </div>
          </div>
                    
                    
                    
                <div id="content">
                    <jdoc:include type="component" />
                      
                        </div>
        <div id="footer">
            
            
            <p>
            Copyright 2011 Experienced Emini Futures and Stock Trader Sharing Trades.<a href="http://stocksandstocks.com/index.php?option=com_content&amp;view=article&amp;id=%2088">Dislaimer</a> .
            
            </p>
            
            
            </div>
        <!--closes wrap--></div>
    </body>
    </html>
    and here is the css code :

    Code:
    #wrap {
      width: 100%;
      min-height: 100%;
      margin: 0 auto -103px; /* the bottom margin is the negative value of the footer's height */
      position: relative;
      text-align: left;
      border-right: 1px solid #000000;
      border-left: 1px solid #000000;
      background-color: #FFF;
    }
    
    #header {
      background: url(http://stocksandstocks.com/templates/emini-room/images/emini_room_bg.png) repeat-x;
        height:100px;  
      width:100%;
      padding-left:250px;
          -moz-border-radius: 5px;
      -moz-box-shadow: 0 0 5px #000;
      -webkit-box-shadow: 0 0 5px #000;
       box-shadow: 0 0 5px #000;
    }
    
    .headerUpper {
      width:960px;
      clear:right;
      padding-left:150px;
    }
    
    .eminiHeaderLeft  {
      width:100px;
      float:left;
      margin-left:2px;
      
    }
    
    
    .eminiHeaderMiddle  {
      width:150px;
      float:left;
      /*background-color:#090;*/
      margin-left:20px;
      margin-top:5px;
    }
    
    .eminiSignUp  {
      float:right;
      color:#FFF;
      text-shadow: 1px 1px 7px #000000;
      filter: dropshadow(color=#000000, offx=1, offy=1);
            
      width:200px;
      height:31px;
      margin-top:5px;
      margin-right:120px;
      font-family:Arial, Helvetica, sans-serif;
      
    }
    
    .logIn {
      width:83px;
      height:31px;
      text-align:center;
      padding-top:7px;
      float:left;
      font: 15px Verdana, Arial, Helvetica, sans-serif;
      text-decoration:none;
    }
    
    .signUpA {
      width:83px;
      height:31px;
      background:url(http://stocksandstocks.com/templates/test-emini/images/join_now.png);
      background-repeat:no-repeat;
      text-align:center;
      float:left;
      font-family:Arial, Helvetica, sans-serif;
    }
    
    #content {
      width: 960px;
      margin: 0 auto;
      padding: 0px 20px 103px 20px;
      border-left:solid thin #CCC;
      border-right:solid thin #CCC;
      line-height:140%;
    }
    
    #footer {
      position:absolute;
      bottom: 0;
      height: 103px;      /* Height of the footer */
      width: 100%;
      background:#000 url(http://stocksandstocks.com/templates/emini-room/images/emini_room_footer_bg.png);
      text-align: center;
      line-height: 103px;
      color:#FFF;
    }
    Also for example if you press CTRL+(+/-) you'll see what I'm saying...or your broswer may show it off already.

    Thanks a lot guys for all of your help

    Chris
    Last edited by ChrisTrader; 06-04-2012 at 03:53 AM. Reason: Added an example

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    34
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Still no reply on this. Can I get a confirmation that my post is currently showing up in the post rotation?

    Thanks!

  • #4
    New Coder
    Join Date
    Mar 2012
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your post is showing up. If you can see it, than everyone else can

    Now about your header. You say that it is not still. What do you mean by that? Your header content is exactly there where you have defined it.
    Do you want its content to be in the center of the page when zooming like footer?
    I have noticed your page goes on right side although it is nothing there. Make your browser window smaller and you will see what I mean. This is because on #header you have padding-left:250px, class .headerUpper is 960px wide so your page is at least 1210px wide.

    .eminiSignUp class is defined twice in styless.css line 623 and in line 654 why would you need that?

    Report back so we can continue with your problem.

  • #5
    New Coder
    Join Date
    Apr 2012
    Posts
    34
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Your post is showing up. If you can see it, than everyone else can

    Now about your header. You say that it is not still. What do you mean by that? Your header content is exactly there where you have defined it.
    Do you want its content to be in the center of the page when zooming like footer?
    I have noticed your page goes on right side although it is nothing there. Make your browser window smaller and you will see what I mean. This is because on #header you have padding-left:250px, class .headerUpper is 960px wide so your page is at least 1210px wide.

    .eminiSignUp class is defined twice in styless.css line 623 and in line 654 why would you need that?

    Report back so we can continue with your problem.
    Yes I want the header to stay above the content of the site. Also I'm not sure how to fix the width. I believe I fixed it, but maybe you can verify that. I'm not sure why I have 2 .eminiSignUp classes defined, but will get on that and fix it.

  • #6
    New Coder
    Join Date
    Mar 2012
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In class .menu delete line width: 960px;.
    In class .headerUpper add line margin: auto;
    In class .menu delete lines padding-left: 250px; and width: 960px;
    In class .menu add line float:right;
    Create new CSS rule #nav-left in styles.css:

    #nav-left {
    margin: auto;
    width: 960px;
    }

    I think this should be it. Please let us know.

  • #7
    New Coder
    Join Date
    Apr 2012
    Posts
    34
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thanks for helping me out. That didn't do the trick though. Like I said before if I hit CTRL + (+/-) the logo header ect all stay on the left while the content and footer remain align and move right with the zoom out/In. Thanks again for your help.


  •  

    Posting Permissions

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