SMFletcher91 Posted May 19, 2012 Share Posted May 19, 2012 (edited) I'm trying to make my PrestaShop page look like the rest of my site. I've got the jist of it, but this header section is throwing me for a loop. First of all, here's what I want the header to look like: http://asshadowscollapse.com, and here's the HTML and CSS for this header: <div id="lspacer"> </div> <div id="rspacer"> <ul id="social"> <li><a href="http://www.facebook.com/pages/As-Shadows-Collapse/170373817074" target="_blank"> <img src="images/fblogo.png" alt="Facebook" width="25" height="25"> </a></li> <li><a href="http://www.myspace.com/asshadowscollapse" target="_blank"> <img src="images/mslogo.png" alt="Myspace" width="25" height="25"> </a></li> <li><a href="http://twitter.com/ascmetal" target="_blank"> <img src="images/twitlogo.png" alt="Twitter" width="25" height="25"> </a></li> </ul> </div> <div id="headercontent"> <div id="image"> <img src="images/banner.jpg" width="800" height="150" alt="ASC"> </div> <ul id="nav"> <li><a href="index.php">HOME</a></li> <li><a href="band.php">BAND</a></li> <li><a href="merch/">MERCH</a></li> <li><a href="music.php">MEDIA</a></li> <li><a href="contact.php">CONTACT</a></li> </ul> </div> <br> <div id="pagetitle"><h1>M E R C H</h1></div> #lspacer { float: left; width: 35px; height:188px; background:#000 url('images/sidebar.jpg') no-repeat center; border-bottom:2px solid #181818; } #headercontent { height:188px; background-color: #000; text-align: center; } #image { text-align:center; } #rspacer { float:right; width:35px; height:188px; background:#000 url('images/sidebar.jpg') no-repeat center; border-bottom:2px solid #181818; } #social { width:25px; height:75px; list-style:none; margin:0 auto; padding:46px 0 0; } #social li { margin:0 auto; padding:0 0 10px; } #social li a { margin:0 auto; padding:0; } /* NAV */ #nav { height:26px; text-align:center; list-style:none; margin:0; padding:5px 35px; border-top:2px solid #181818; border-bottom:2px solid #181818; } #nav li { display:inline; padding:0 20px; } #nav li a { display:inline-block; color: #9c9c9c; margin:0; padding:0 10px; text-decoration:none; font:22px Abaddon, Arial; line-height:1.3em; } #nav li a:hover { color: #B00000; } #nav li a.active, #nav li a.active:hover { color:#000000; background:#ff0000; font-weight:bold; } /* END NAV */ #pagetitle { height:35px; background: url('images/pagetitle.jpg') no-repeat center; margin:0 auto; text-align:center; } #pagetitle h1 { font:bold 24px Arial; color: #B00000; } I've gotten everything working after a force compile except the pagetitle div. I'm really needing this site to be up and running by midnight, so any suggestions I'll take and try. If you want to access the merch page, you'll have to use the direct link since I've put up a maintenance page: http://asshadowscollapse.com/merch/ Thank you in advance! Edited May 19, 2012 by SMFletcher91 (see edit history) Link to comment Share on other sites More sharing options...
SMFletcher91 Posted May 19, 2012 Author Share Posted May 19, 2012 (edited) I also forgot to mention that I have this working fine on all my other pages, it's ONLY when I add this to PrestaShop that it goes crazy. And I have changed all the relative links to absolute links. Edited May 19, 2012 by SMFletcher91 (see edit history) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now