Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
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:
<body>
<div id="back">
<a href="index.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" 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?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Chapter 1</a></li>
<li><a href="link2.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Chapter 2</a></li>
<li><a href="link3.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Chapter 3</a></li>
<li><a href="link4.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Chapter 4</a></li>
</ul>
</div>
</div>
</div>
<div id="forward">
<a href="navigate.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" class="contentsforward"><span>Navigate
></span></a>
</div>
</body>
CSS:
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%;
} -
Hi,
Trouble shooting would be much more easy, if I had the background images. Could you please upload a hole zip, which contains all the necessary stuff? Meanwhile I've set up a simple framework for a book layout. You can find it at www.StaniCorp.com/cssmess.
Dave. -
-
CommentAuthorArcNeXuS.net
- CommentTimeMar 2nd 2008
pretty sure you need both columns to be absolute in IE>.. thats what I have to do .. left and right are both absolute...i also used a trick of putting a full page width leveler in .. a division above the two columns so it acts to push the columns down exactly ...since some of my columns where not absolute also .. but I had to have it to get a fluid center which fully expands...
there are a lot of things yoiu need to do to make a page fully compliable for MS .. since MS does not obey the W3 standards...
i spent the last 2 weeks working on these pages so ....if this will help you but you can DL my source
Final verson can be seen here... just DL and unzip ... run index.html
SOURCE is available here @ ftp://arcnexus.net:2111/anonymous/XHTML_CONTAINER.zip
please sign the guestbook to let me know what errors are found or alternatively if it helps you in some way??..[the code .. not the layout].... or what you think of it ..?
I hope this helps you ...and now I am off to post it for review.. LOL.. I hope .. -
1 to 3 of 3