Content in header not fixed and menu

  • Hi,

    I’m back yet again with another issue …

    I’ve been working on this theme for what feels like forever.

    At first, the client wanted it filling the screen and now, they’re wanting it fixed … my problem is within the header. When the screen is re-sized, the elements within it don’t stay where they’re supposed to be.

    I fear that I’ve made such a huge mess with the css, I’m worrying about trying anything else on my own ~`

    Thank you to a regular forum poster here, I’ve managed to iron out several other issues I’d had.

    My only additional problem is that I’m trying to figure out how to make the active link highlighted …

    Any ideas would be greatly appreciated … I soon hope to not be such a bother on here!

    Thanks,
    Jennifer

    * { margin: 0; padding: 0; outline: none; }

a:link, a:visited, a:active { color: #630001; }

a:hover { color: #134077; }
html, body {
height: 100%;
}

body { background-color: #f7921e; font-family: Verdana, Arial, Helvetica,
san-serif; font-size: 12px; color: #666;  }

.newcampers { background:url(img/campers.png); width:518px; height: 19px; margin-left:58px; cursor:
hand; top: 230px;position: absolute; }

.bed {background-color: #e4e2d6; width: 960px; margin: auto; border-left: 1px solid #333333; border-right: 1px solid #333333;}

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

.floatleft
{
float: left;
background: url(img/left.png); margin-top: 0;
width:43px; height: 182px;
margin-left: 25px;
}
.floatright
{
float: right;
background: url(img/leaves-top.png); background-repeat: no-repeat; margin-top: 0;
width:488px; height: 334px;
right:13px;
position:absolute;
}

.photo
{
float:right;
background: url(img/photo.png) no-repeat;
width:275px; height: 263px;
margin-right: 95px;
margin-top:50px;
}

.board
{
float: right;
background:  url(img/bg.png); margin-top: -10px;

width:379px; height: 500px;
}

#header { width: 960px; height: 262px; background: #e4e2d6 url(img/hdbg.jpg); }

a.logo { width: 570px; height: 76px; margin-top: 37px; margin-left: 0px; background:
url(img/logo.png);  position: absolute; float: left; }

a.logo span { display: none; }

#content { width: 520px; float: left;
margin-left: 24px; padding-top: 5px;
clear: both;
padding-left:10px;
margin-top: -52px;
    display: inline;
}

.post { width: 520px; margin-bottom: 50px; margin-top:0px;}

.post h2 a { color: #24446b; font-weight: normal; text-decoration: none; font-size: 24px; }

.post span.post-info { color: #CCCCCC; font-size: 10px; padding-bottom: 10px; width: 560px; float: 

left; }

.post p { line-height: 22px; margin-bottom: 10px; }

.post div.cats { border-top: 1px solid #ececec; padding-top: 10px; }

#sidebar { width: 379px; float: right; margin-right:0px;}

#footer { clear: both; width: 960px;  height: 350px; background: #e4e2d6 url(img/footer.jpg);
margin-bottom: 0px;
padding: 0px; margin-left: 0px;}

.comments { float: left; padding: 0; }

.comments input[type=text], textarea { width: 350px; }

textarea { width: 450px; }

.comments fieldset { padding: 20px; border: 1px solid #CCC; margin: 10px 0 20px 0; }

.comments p { padding: 0 0 10px 0; }

.comments h2 { padding: 0 0 15px 0; }

.aligncenter,

div.aligncenter {

   display: block;

   margin-left: auto;

   margin-right: auto;

}

.alignleft {

   float: left;

}

.alignright {

   float: right;

}

img.avatar {float:right;}

.newspaper {
float:right;background:url(img/newspaper.png) bottom; background-repeat: no-repeat;width:382px;
height:350px;padding-bottom:0px; margin: 0px;}

.inner {width:382px; height:300px; text-align: center; margin-bottom: 0px; padding-bottom: 0px;
}

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at https://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

.menu {
margin-top: -87px;
margin-left: 26px;
padding: 10px;
position: absolute;
width:auto;
z-index:4;
text-align: center; }

/* hack to correct IE5.5 faulty box model */
* html .menu {width:746px; w\idth:745px;}

/* remove all the bullets, borders and padding from the default list styling */

.menu ul {padding:0;margin:0;list-style-type:none;}
.menu ul ul {width:75px;margin-right: 20px;}

/* float the list to make it horizontal and a relative position so that you can control the 

dropdown menu positon */
.menu li {float:left;position:relative; padding:0; }

/* style the links for the top level */
.menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:#fff; padding: 0 

10px; height:20px;  font-weight:bold; }

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:70px; w\idth:70px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited 

{background:url(https://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif) no-repeat 78px center;}

/* style the second level hover */
.menu ul ul a.drop:hover{background: url(https://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) 

no-repeat 78px center;}

.menu ul ul :hover > a.drop { url(https://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) 

no-repeat 70px center;}

/* hide the sub levels and give them a position absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;padding-top: 10px;left:0; width:89px;}

/* another hack for IE5.5 */
* html .menu ul ul {top:30px;t\op:31px;}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited { color:#000; height:auto; line-height:1em; padding:5px 5px; 

width:68px;}

/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:68px;}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color:#f7921e;}
.menu :hover > a, .menu ul ul :hover > a {color:#f7921e;}

li a.active{color:#f7921e;}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible;}
Viewing 5 replies - 1 through 5 (of 5 total)

  • Here to your rescue ??

    I assume your referring to the photo and the green thingemies on the side. In order to ‘attach’ them to the rest, you’ll have to bring them into the wrapper div. That way you can fix them to the rest of the layout. You’ll have to do some recalculation of some values though.

    Active links in the menu bar will have a class called current_page_link attached to it. I think you’ll be able to figure out how to apply some code to that (like a background).

    Peter

    Thread Starter jennifer420

    (@jennifer420)

    Thank you Peter! ??

    I think I’m dumbfounded because of the way the menu is done …

    <?php wp_css_dropdownmenu(0, '<div class="menu"><ul><li><a href="index.php">Home</a><!"[if IE 7]><!"></a><!"<![endif]"></li>', '</ul></div>'); ?>

    I’m going to try figuring it however, using the current_page_link, we’ll see how I make out ~`!

    Thank you again!

    I saw you followed my suggestion, but .floatright doesn’t behave like it should: if you want absolute positioning you have to add the following to #wrapper:

    position: relative;

    Absolute positioning is always dependent on body, unless another parent becomes relative.

    Peter

    Thread Starter jennifer420

    (@jennifer420)

    Thank you, looking the way it should now – even when resizing. ??

    Peter, you’re my hero! Lol

    In case you missed it: I just want a share in your profit ??

    Neh, just kidding: I like it when someone calls me ‘hero’…

    Glad I could help.

    Peter

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Content in header not fixed and menu’ is closed to new replies.