...

View Full Version : Header wont stay still



ChrisTrader
05-17-2012, 04:32 AM
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

ChrisTrader
06-04-2012, 02:48 AM
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 :


<?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 :


#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

ChrisTrader
06-08-2012, 05:50 PM
Still no reply on this. Can I get a confirmation that my post is currently showing up in the post rotation?

Thanks!

tomazs
06-08-2012, 06:50 PM
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.

ChrisTrader
06-09-2012, 07:10 AM
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.

tomazs
06-09-2012, 10:24 AM
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.

ChrisTrader
06-12-2012, 07:12 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum