Help! on figuring out how to code “pages” widget into horizontal nav!?!

• 

  devblog · Member · Jan 20, 2009 at 8:23 pm

  • Copy link

  No problem. Just pay it forward whenever you can.

  Yes, it’s easy, but like I said, I will need to widen the header image so the nav bar fits well. Do I have your permission to modify the header image?

• 

  madisonwest · Member · Jan 20, 2009 at 8:26 pm

  • Copy link

  yes, you do. and thanks again!

• 

  devblog · Member · Jan 21, 2009 at 1:25 am

  • Copy link

  Madison,

  Try this code:

  body {
  background:#fff;
  font: normal 1em Arial, Helvetica, sans-serif;
  color:#404040;
  }
  
  h1 {
  display:none;
  }
  
  a {
  color:#666;
  text-decoration:none;
  }
  
  a:hover {
  color:#333333;
  text-decoration:underline;
  }
  
  img {
  border:0;
  }
  
  #wrapper {
  width:980px;
  background:#fff;
  margin:0 auto;
  padding:0;
  overflow: hidden;
  clear: both;
  font-size: 75%;
  position: relative;
  }
  
  #header, #menu, #footer {
  clear: both;
  overflow: hidden;
  }
  
  #header {
  width:980px;
  height:200px;
  background: transparent url(http://80ero.fileave.com/sandbox/headerbg.gif) top left no-repeat;
  }
  
  #blog-description {display: none;}
  
  #menu{
  display: block;
  width: 550px;
  height: 100%;
  position: absolute;
  top: 108px;
  right: 5px;
  }
  
  #menu ul{
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clear: both;
  
  }
  
  #menu li {
  display: inline;
  margin: 0;
  padding: 0;
  }
  
  #menu li a{
  padding: 0 0 4px;
  margin: 0 5px;
  display: block;
  width: auto;
  height: auto;
  float: left;
  text-decoration: none;
  font-weight: bold;
  }
  
  #menu li a:hover{
  border-bottom: solid 4px #F68933;
  }
  
  #container {
  float:left;
  width:760px;
  margin: 0 0 20px;
  overflow: hidden;
  }
  
  #content {
  margin:0;
  padding: 10px;
  overflow: hidden;
  }
  
  #primary {
  width:220px;
  float:right;
  overflow:hidden;
  }
  
  #primary ul,#secondary ul {
       margin:0;
       padding:0;
  } 
  
  #primary ul li,#secondary ul li {
       list-style:none;
  } 
  
  #primary .textwidget h3,#primary h3 {
       color:#000;
       margin:25px 0 5px;
       text-transform: capitalize;
       padding: 5px 0 5px 20px;
       font-size: 150%;
       background: transparent url(http://80ero.fileave.com/sandbox/widgettitle-bg.gif) 0 8px no-repeat;
  } 
  
  #secondary {
  display: none;
  }
  
  #footer{
  border-top: solid 2px #F68933;
  padding: 20px;
  text-align: center;
  margin:0;
  }
  
  .skip-link{display:none;}
  
  .xoxo {
  width: 200px;
  padding:0;
  margin: auto;
  }

  You need to store the images on your own account. You can get them here:

  http://80ero.fileave.com/sandbox/headerbg.gif
  http://80ero.fileave.com/sandbox/widgettitle-bg.gif

  Of course, you’ll also need to change their path in the CSS code. I wrote the code based on the information I had. I’m also assuming that you won’t be adding more items to your menu.

  Try the code above and let me know if that’s what you wanted.

• 

  devblog · Member · Jan 21, 2009 at 1:27 am

  • Copy link

  Oh, it seems you’re using the Secondary sidebar, don’t use it. I’m hiding it in the CSS. Use your Primary sidebar for your widgets. The sidebar is position to the right.

  Let me know when you’ve downloaded the images so that I can delete them from the server.

  Thanks.

• 

  madisonwest · Member · Jan 21, 2009 at 1:53 am

  • Copy link

  Wow Thanks a Ton! I don’t want to be a pain but, is there anyway that there can be a background image on the main content section that separates the content from the side bar?, kind like on this site: http://www.inhousecreativegroup.com/

  here is a highlighted pic of what i mean..
  http://i12.photobucket.com/albums/a243/bandjunkie04/Picture2.jpg

  Let me know if it is possible or if i have to provided you with anything.

  Also are you on westcoast?

• 

  devblog · Member · Jan 21, 2009 at 2:01 am

  • Copy link

  Let me see what I can do with the sidebar.

  for some reason, the menu is not looking as when I tested it. In the menu definition, change the “top” property value from 108px to 109px so it reads like this:

  #menu {
  display:block;
  width:550px;
  height:100%;
  position:absolute;
  top:109px;
  right:5px;
  }

  Yes, I am on the west coast.

• 

  devblog · Member · Jan 21, 2009 at 3:15 am

  • Copy link

  okay, you don’t really need a background image. Replace the code of #content and .xoxo with this:

  #content {
  overflow:hidden;
  margin:0;
  padding:10px;
  border-right: solid 2px ##f3f3f6;
  }
  
  .xoxo {
  width:200px;
  margin:0;
  padding:0 0 0 20px !important;
  }

  Let me know if that works for you.

• 

  madisonwest · Member · Jan 21, 2009 at 5:12 am

  • Copy link

  it looks great! thanks.
  i hate to be a pain but i think i can figure it out.
  is it possible to replace the navigation with images
  so that it would look exactly like the web page i gave out before?

• 

  madisonwest · Member · Jan 21, 2009 at 5:16 am

  • Copy link

  Also that side line code did not work.
  i will look into it but if you have any suggestions let me know.
  Thanks!

• 

  devblog · Member · Jan 21, 2009 at 5:22 am

  • Copy link

  is it possible to replace the navigation with images so that it would look exactly like the web page i gave out before?

  No because we don’t have access to the .php files to edit them. We could use attribute selectors, but Internet Explorer doesn’t recognize them, and the menu wouldn’t look good in that browser.

  Also that side line code did not work.
  i will look into it but if you have any suggestions let me know.

  Weird, ’cause it did work for me. Probably you’re missing something.

• 

  devblog · Member · Jan 21, 2009 at 5:28 am

  • Copy link

  It’s my mistake, sorry.

  In the #content selector, in the border-right property there are two pound signs. Take one out so the property reads like this:

  border-right: solid 2px #f3f3f6;

• 

  madisonwest · Member · Jan 21, 2009 at 5:36 am

  • Copy link

  Thanks that worked!

  “No because we don’t have access to the .php files to edit them. We could use attribute selectors, but Internet Explorer doesn’t recognize them, and the menu wouldn’t look good in that browser.”

  I am thinking then it would work if i hosted the blog on my server? maybe ill do that later down the line then.

  also if i changes the header around and made it a bit taller i change the header height and the menu top?

  and one thing what do i change if i want the side bars header and sub header to align to the left?

  Thanks Agian, i know i am being a pain….

• 

  devblog · Member · Jan 21, 2009 at 6:30 am

  • Copy link

  yeah, if you host your blog, you can pretty much do whatever you want.

  If you make the header image taller, you need to modify the “top” property in the “#menu” selector definition so that it aligns with the orange line.

  Currently, the sidebar headers are align to the left. well… kinda. they have a left padding so the image background can be displayed. To modify the way they look, you’ll need to modify this:

  #primary .textwidget h3,#primary h3 {
       color:#000;
       margin:25px 0 5px;
       text-transform: capitalize;
       padding: 5px 0 5px 20px;
       font-size: 150%;
       background: transparent url(http://80ero.fileave.com/sandbox/widgettitle-bg.gif) 0 8px no-repeat;
  }

  I’m closing the shop for tonight, so if you have more questions, I’ll answer them tomorrow.

• 

  madisonwest · Member · Jan 21, 2009 at 6:31 am

  • Copy link

  Before u do anything, i think i got it on my own.
  Thanks Again for all your help.
  I think that you should make a guide on the css tags and list what each controls, it would help us self taught codes what up with taking up your time!
  Thanks ALOT!

• 

  madisonwest · Member · Jan 21, 2009 at 6:34 am

  • Copy link

  That worked thanks, ill be working on it tonite ill let you know, if there is any more questions. Thanks!