Adjusted Header, Slideshow no longer centered

fdjcorp · September 20, 2008

How do I center the slideshow? I made my header to go to the left and navigation to the right. l have the Javascript for the slideshow to center but not working. Please help.

Thank you.

Freddie

fdjcorp · September 20, 2008

Please help - How to center slideshow
I want to place the header on the left and the navigation towards right. I did this earlier and the slideshow was not centered it was more toward the right margin.

Thank you for your time and help.

Allen · September 20, 2008

fdjcorp wrote:

I want to place the header on the left and the navigation towards right. I did this earlier and the slideshow was not centered it was more toward the right margin.

Thank you for your time and help.

See if you like this.

Replace your header with this. (also fixes error in middle of nav)

<div id="my_header"> 

<div id="my_banner"> </div> 

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/Family%20Album">Family Album</a></li>
<li><a href="/MHS63%20Album">MHS63 Album</a></li>
<li><a href="/gallery/5543846_Sivmm">About Me</a></li>
<li><a href="/gallery/5536281_UECZM">Guestbook</a></li>
<li><a target="_blank" href="http://fdjphoto.wordpress.com/">Blog</a></li>
</ul>
</div>
</div>  <!-- closes my_header -->

Replace the top of your CSS with this.

#my_header {
height: 50px;
border-bottom: 1px solid #CBFCCB;
margin: 0 20px 15px; /* top right/left bottom*/
padding: 0 5px;
}

#my_banner {
   width: 750px;
   height: 50px;
   margin: 0 0 0 -10px;
   background: url(/photos/340665641_T5zWq-S.png) no-repeat;
  _background: none;  _filter:progid[B]:[/B]DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
      sizingmethod=image,src='/photos/340665641_T5zWq-S.png'); 
}

#navcontainer {
float: right;
margin: -32px 0; /* top/bottom right/left */
}

#navcontainer ul li { 
    display: inline; 
}

/* ---------------------------------------------------*/
/* change look of navbar and text */
/* ---------------------------------------------------*/
#navcontainer ul li a {
    text-decoration: none;
    padding: .2em .4em;
    color: #CBFCCB;
    background: none;
    font-family: copperplate gothic light, verdana;
    font-size: 125%;
}

#navcontainer ul li a:hover {
    color: #ccc;
    background: none;
}

[U][I][B]down to this[/B][/I][/U]
#albumDescription {.....

fdjcorp · September 20, 2008

It worked!
Allen,

Thank you so much. I am very happy the way it looked. You saved me a lot of aggravation

Freddie

Allen wrote:

See if you like this.

Replace your header with this. (also fixes error in middle of nav)

<div id="my_header"> 

<div id="my_banner"> </div> 

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/Family%20Album">Family Album</a></li>
<li><a href="/MHS63%20Album">MHS63 Album</a></li>
<li><a href="/gallery/5543846_Sivmm">About Me</a></li>
<li><a href="/gallery/5536281_UECZM">Guestbook</a></li>
<li><a target="_blank" href="http://fdjphoto.wordpress.com/">Blog</a></li>
</ul>
</div>
</div>  <!-- closes my_header -->

Replace the top of your CSS with this.

#my_header {
height: 50px;
border-bottom: 1px solid #CBFCCB;
margin: 0 20px 15px; /* top right/left bottom*/
padding: 0 5px;
}

#my_banner {
   width: 750px;
   height: 50px;
   margin: 0 0 0 -10px;
   background: url(/photos/340665641_T5zWq-S.png) no-repeat;
  _background: none;  _filter:progid[B]:[/B]DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
      sizingmethod=image,src='/photos/340665641_T5zWq-S.png'); 
}

#navcontainer {
float: right;
margin: -32px 0; /* top/bottom right/left */
}

#navcontainer ul li { 
    display: inline; 
}

/* ---------------------------------------------------*/
/* change look of navbar and text */
/* ---------------------------------------------------*/
#navcontainer ul li a {
    text-decoration: none;
    padding: .2em .4em;
    color: #CBFCCB;
    background: none;
    font-family: copperplate gothic light, verdana;
    font-size: 125%;
}

#navcontainer ul li a:hover {
    color: #ccc;
    background: none;
}

[U][I][B]down to this[/B][/I][/U]
#albumDescription {.....

Adjusted Header, Slideshow no longer centered

Comments