|
|
crashb648
new user
Reg'd: Sat
Posts: 23
|
|
Hello everyone!
I am still getting to grips with css. I have done a how page using css, but come across a problem when i have tried to do a three coloum layout at the bottom of the page:
As you can see, the left (named toplink) and middle coloums (the top one is called storyhead and the one below it is called storynav) are fine, but the right one (top link) wont go to the right. Can anyone please help?
Here's the html code:
<div id="backlink">
<a href="javascript:history.go(-1)"><img border="0" src="images/backicon.png" alt="back" width="80" height="50" /></a>
</div>
<div id="storyhead">
Charlotte's Story Navigation
</div>
<div id="storynav">
<a href="story.php"><em>Page 1</em></a> | <a href="story2.php"><em>Page 2</em></a> | <a href="story3.php"><em>Page 3</em></a> | <a href="story4.php"><em>Page 4</em></a> | <a href="story5.php"><em>Page 5</em></a>
</div>
<div id="toplink">
<a href="#top"><img border="0" src="images/topicon.png" alt="top" width="80" height="50" /></a>
</div>
Heres the css:
div#backlink
{float: left; width: 100px; height: 50px; padding: 0px; margin: 0px;
background-color:#000000; border-top: thin solid #000000; color:#FFFFFF;}
div#storyhead
{float: right; width: 740px; height: 25px; padding: 0px; margin-left: 100px;
text-align: center; font-family: verdana; font-weight: bold; font-size: 10pt;
border-top: thin solid #000000; color:#778899;
background-color:#000000; }
div#storynav
{float: right ; width: 740px; height: 25px; padding: 0px; margin-left: 100px;
text-align: center; font-family: verdana; font-weight: bold; font-size: 10pt; color:#778899;
border-top: thin solid #000000;
background-color:#000000; }
div#toplink
{float: right; width: 100px; height: 50px; padding: 0x;
background-color:#000000; border-top: thin solid #000000; color:#FFFFFF; }
|
|
crashb648
new user
Reg'd: Sat
Posts: 23
|
|
Here's the screenshot of the problem, i forgot to post it in the previous post! haha
Can anyone help me?
Click to view...
Edited by TheFatControlleR (Sat Oct 03 2009 02:42 PM)
|
ianm
regular
Reg'd: Fri
Posts: 371
Loc: Colchester
|
|
Have juggled a few things around in the html mostly dont think its still quite right but it should be closer, you might need to add a little bit of padding to a few things but I was not quite to sure how it is meant to look, anyway have a play with the following see if its works any better, i was tempted to redo the whole thing but I guess that would have taken away the fun of learning.
html
<div id="storyhead">
<a href="javascript:history.go(-1)"><img border="0" src="images/backicon.png" alt="back" width="80" align="left" height="50" /></a>
Charlotte's Story Navigation
<a href="#top"><img src="images/topicon.png" alt="top" width="80" height:"50px" border="0" align="right" /></a></div>
<div id="storynav">
<a href="story.php"><em>Page 1</em></a> | <a href="story2.php"><em>Page 2</em></a> | <a href="story3.php"><em>Page 3</em></a> | <a href="story4.php"><em>Page 4</em></a> | <a href="story5.php"><em>Page 5</em></a>
</div>
</div> <!-- end of story nav div -->
css
div#storyhead
{width: 100%; height: 25px; margin: 0 auto;
text-align: center; font-family: verdana; font-weight: bold; font-size: 10pt;
border-top: thin solid #000000; color:#778899;
background-color:#000000; }
div#storynav
{width: 100%; height: 25px; padding: 0px; margin: 0 auto;
text-align: center; font-family: verdana; font-weight: bold; font-size: 10pt; color:#778899;
border-top: thin solid #000000;
background-color:#000000; }
|
|
|
Previous
Index
Next
Threaded
Edit
Reply
Quote
