By touchcrew on

-------I posted this in Modules but they told me it belongs here. So I am sorry for the repost. ----------

if you look at my site http://www.fansportsunion.com/fan/ you can see that I put the menu in the header I know how to move it around with in the header. But my problem is this - you can see that I have a banner in the header as well is there any way that I can Position the menu to the lower left and the banner in middle right of the header?

#header-region {
  position: absolute;
  top: 30px;
  left: 20px;
  height: 38px;
  line-height: 28px;
  vertical-align: bottom;
  padding: 0;
  color: #F1F5F9;
}

#header-region * {
  display: inline;
  vertical-align: bottom;
}

#header-region h2, #header-region h3, #header-region div, #header-region ul, #header-region li {
  display: inline;
  padding-right: .5em;
  line-height: 20px;
  font-size: 10px;
}

#header-region h2, #header-region h3 {
  font-weight: bold;
}

#header-region h2 {
  font-size: 13px;
}

#header-region input, #header-region select {
  background-color: #B4D1F1 !important;
  border-color: #8EACCE !important;
  color: #476281 !important;
⋅ Categories: Drupal 5.x

Comments

touchcrew’s picture

touchcrew commented

Can any one help?

http://life1134.wordpress.com/
http://www.touchcrew.com/

nevets’s picture

nevets commented

Add

#block-nice_menus-1 ul {
  margin: 0 0 0 0;
}

This should help position the menu in the lower left of the header region.

This will get you part way there but not all the way. You have 'FAN Sports' hanging off to the side. Not sure where you want it but that is probably do to your liberal use of 'inline' (I think you are inlining more than you need/want). Between 'FAN Sports' hanging over there and inlining it is hard to center the banner header region. Note the header region is also only somewhat wider than the banner as it is.

If you use firefox I would recommend the firebug extension, the inspect feature is priceless.

touchcrew’s picture

touchcrew commented

First off thanks for the help
I tried this code but it did nothing I change the margins and still nothing.

#block-nice_menus-1 ul {
  margin: 0 0 0 0;
}

Then I tried this code and it worked some what. But for some reason it says with in the relm of the banner ad and I also can not get rid of the fan sports text that is showing up. any ideas?

#header-region {
  position: absolute;
  top: 30px;
  left: 260px;
  height: 38px;
  line-height: 28px;
  vertical-align: bottom;
  padding: 0;
  color: #F1F5F9;
}

#block-nice_menus-1 ul {
  position: absolute;
  top: 180px;
  left: 1px;
  height: 38px;
  line-height: 28px;
  vertical-align: bottom;
  padding: 0;
  color: #F1F5F9;
}

#header-region * {
  display: inline;
  vertical-align: bottom;
}

#header-region h2, #header-region h3, #header-region div, #header-region ul, #header-region li {
  display: inline;
  padding-right: .5em;
  line-height: 20px;
  font-size: 10px;
}

#header-region h2, #header-region h3 {
  font-weight: bold;
}

#header-region h2 {
  font-size: 13px;
}

http://life1134.wordpress.com/
http://www.touchcrew.com/

touchcrew’s picture

touchcrew commented

How can I set it so the header banner ad so it does not move when you widen the browser or make the browser smaller. here is the site http://www.fansportsunion.com/fan/

http://life1134.wordpress.com/
http://www.touchcrew.com/

touchcrew’s picture

touchcrew commented

Does any one have any idea were I can post to get help with this?

http://life1134.wordpress.com/
http://www.touchcrew.com/

nevets’s picture

nevets commented

To keep the banner add from moving try making #header use a position of relative and change the positioning of #header-region from absolute to fixed. That should make #header-region positiioned relative to #header (right now it is relative to the page).

For the 'FAN Sports" header you should be albe to configure the block so the title is ''. If that dones not work you can always set display to none for the h2 tag in the block.

touchcrew’s picture

touchcrew commented

May be I am not to smart but i just tried to change the headers but it did nothing.
now I have 2 style sheet one in the normal style sheet. and other is the blue breeze fixed and I am using blue breeze fixed. I am really sorry that I cant seem to get this to work it is driving me nuts. I will take any help I can get.

What do I change and where? Any ideas?

So here is the code. for the main style sheet

#header-region {
  position:fixed;
  top: 30px;
  left: 260px;
  height: 38px;
  line-height: 28px;
  vertical-align: bottom;
  padding: 0;
  color: #F1F5F9;
}

#block-nice_menus-1 ul {
  position:fixed;
  top: 180px;
  left: 200px;
  height: 38px;
  line-height: 28px;
  vertical-align: bottom;
  padding: 0;
  color: #F1F5F9;
}

#header-region * {
  display: inline;
  vertical-align: bottom;
}

#header-region h2, #header-region h3, #header-region div, #header-region ul, #header-region li {
  display: inline;
  padding-right: .5em;
  line-height: 20px;
  font-size: 10px;
}

#header-region h2, #header-region h3 {
  font-weight: bold;
}

#header-region h2 {
  font-size: 13px;
}

#header-region input, #header-region select {
  background-color: #B4D1F1 !important;
  border-color: #8EACCE !important;
  color: #476281 !important;
}

this is the other header parts in the main style.css

#header {
  height: 205px;
  background: url(images/bg-header.gif) repeat-x;
  padding: 0;
  margin: 1px 0 0 0;
}

#logo-title {
  position: relative;
  overflow: visible;
  float: left;
  height: 30px;
  padding-left: 10px;
  z-index: 1;
}

#header #site-name, #header #site-slogan {
  position: relative;
  padding: 0;
  margin: 0;
  left: 100px;
  top: 43px;
  padding-left: 10px;
  border: 0;
}

#header #site-name a, #header #site-name a:visited, #header #site-name a:hover {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  color: #F8FEFF;
  font-weight: bold;
  letter-spacing: 3px;
  text-decoration: none;
  border: 0;

}
#header #site-name a:hover {
  color: #fff;
}

#header #site-slogan {
  text-align: left;
  font-size: 12px;
  font-weight: bold;
  color: #A4BEDD;
  letter-spacing: 1px;
}

#header #logo {
  position: relative;
  top: -8px;
}

now this is the style sheet that is in the bluebreeze fixed 


#header {
  margin-top: 0;
  padding-top: 1px;
  background: #FCFDFF url(../images/bg-header.gif) repeat-x 0 0px;
  border-left: 0px solid #D1D9E3;
  border-right: 0px solid #D1D9E3;
}

#footer {
  margin-bottom: 0;
  padding-bottom: 15px;
  background: #FCFDFF url(../images/bg-footer.gif) repeat-x 0 0;
  border-left: 1px solid #D1D9E3;
  border-right: 1px solid #D1D9E3;
}

#container {
  background-color: #FCFDFF;
  border-left: 1px solid #D1D9E3;
  border-right: 1px solid #D1D9E3;
}

body, #page, #front, #second {
  background-color: #909092;
}

#main {
  padding-top: 2px;
}

/* primary & secondary links */

/* re-positioning the primary and secondary links, as the absolute positioning 
   used in the bluebreeze theme won't work here */

#header .menu {
  position: relative;
  overflow: visible;
  float: right;
  width: 100%;
}
#primary ul {
  position: absolute;
  top: -74px;
  left: -400px;
}

#primary ul li {
  float: right;
}


#secondary ul {
  position: absolute;
  top: -58px;
  left: -400px;
  width: auto;
  background: none;
  border: none;
}

#secondary ul li {
  float: right;
  background: url(../images/bg-secondary.gif) repeat-x;
  border-bottom: 1px solid #B7CFE9;
  padding-bottom: 2px;
  padding-top: 2px;
  line-height: 11px;
}

http://life1134.wordpress.com/
http://www.touchcrew.com/

nevets’s picture

nevets commented

To this part

#header {
  height: 205px;
  background: url(images/bg-header.gif) repeat-x;
  padding: 0;
  margin: 1px 0 0 0;
}

add position relative like this

#header {
  height: 205px;
  background: url(images/bg-header.gif) repeat-x;
  padding: 0;
  margin: 1px 0 0 0;
  position: relative;
}

This should cause the #header-region to position relative to #header instead of the body/page