Alignment problems
Hi everyone
Please bear with me - I'm new to designing in pure CSS. I'm trying to build a page that looks like a book - book background image with two columns of text - one on each page of the book. I'd like the user to be able to move back and forth by clicking on the sides of the book. Also, i'd like the corners of the book to 'fold down' when the mouse is moved over the edges of the book.
I'm using <a href>s nested in block divs with the <a> background image changing on :hover.
I cannot for the life of me get it to all line up properly. I seem to have it working in Firefox and Safari but not in IE7 (despite playing with conditional comments) or Opera. I haven't dared to look at IE6 yet!
I'm not sure whether I'm just getting browser bug problems or whether I've made a complete mess setting up my CSS. Both the CSS and HTML validate OK.
If any experts out there would mind having a quick glance over and could give me any pointers, I'd be eternally grateful.
Many thanks
HTML:
Code:<body> <div id="back"> <a href="index.html" class="contentsback"><span>< Book Cover</span></a> </div> <div id="maincontainer"> <div id="leftcolumn"> <div id="copyright"> <p><b>Copyright © 2008</b></p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <br> <p><b>Email:</b></p> <p ><b><a href="mailto:info@company.com">info@company.com</a></b></p> <br> </div> </div> <div id="rightcolumn"> <div id="contents"> <h1>Book Contents</h1> <ul> <li><a href="link1.html">Chapter 1</a></li> <li><a href="link2.html">Chapter 2</a></li> <li><a href="link3.html">Chapter 3</a></li> <li><a href="link4.html">Chapter 4</a></li> </ul> </div> </div> </div> <div id="forward"> <a href="navigate.html" class="contentsforward"><span>Navigate ></span></a> </div> </body>
CSS:
Code:body{ margin:0px; padding: 0px; background: #FFF url("images/book.gif") no-repeat; background-position: 20px 20px; min-height: 746px; min-width: 1000px; margin-bottom:40px; font: normal 18px "Times New Roman", Times, serif; } #maincontainer{ width: 920px; margin-top: 40px; margin-left: 60px; } #back{ width: 81px; height: 376px; float: left; display: block; margin-left: 25px; margin-top: -6px; } #back a span{ display: none; } #back a{ background: #FFF url("images/left.jpg") no-repeat; width: 81px; height: 376px; display: block; } #back a.contentsback:hover{ background: #FFF url("images/left_contents.jpg") no-repeat; width: 81px; height: 376px; display: block; } #forward{ width: 81px; height: 376px; float: left; display: block; margin-left: 299px; margin-top: -4px; } #forward a span{ display: none; } #forward a{ background: #FFF url("images/right.jpg") no-repeat; width: 81px; height: 376px; display: block; } #forward a.contentsforward:hover{ background: #FFF url("images/right_contents.jpg") no-repeat; width: 81px; height: 376px; display: block; } #leftcolumn{ float:left; width: 450px; margin-right: 70px; } #rightcolumn{ position: absolute; left: 520px; width: 450px; } p{ margin-top: 0px; margin-bottom: 0px; } b{ font-weight: bold; } h1{ text-align: center; font-size: 20px; } a{ color: #000; text-decoration: none; } a:hover{ color: #808080; } img.left{ float: left; margin-right: 10px; margin-bottom: 10px; } ul { list-style: none; text-align: center; margin: 0px; padding: 0px; } li{ padding-bottom: 0.8em; } #copyright{ padding-top: 120px; padding-left: 25px; padding-right: 120px; font-size: 0.6em; } #contents{ padding-top: 140px; font-size: 0.9em; text-align: center; width: 200px; position: absolute; left: 30%; }
CSS Codes
Reply With Quote
Bookmarks