1 reply [Last post]
jennakirsty
jennakirsty's picture
Offline
newbie
Last seen: 7 years 32 weeks ago
Timezone: GMT+1
Joined: 2013-04-14
Posts: 1
Points: 2

Let me start by apologising if I don't make myself clear - my experience in CSS is very limited, and a lot of what I've done has been trial and error. Saying that, I've looked over the codes over and over, and I cannot find a solution to the problem I'm having.

http://afairywonderneverland-rp.tumblr.com/nav

As you can see, I am having trouble moving the left hand column up to the top of the page where it should be (A working example can be seen at http://afairywonderneverland-rp.tumblr.com/ ). On this page, I have tried adding this coding so that instead of entries appearing, it would be set navigation, using the same layout (the code for this part can be found separately here http://pastebin.com/raw.php?i=GKBCxq9P )

The code for this page is as follows:

<html>
 
<!--
    Theme 009 - Poison & Wine by thewicked-eternity.tumblr.com
    PLEASE DO NOT REMOVE THE CREDIT OR REDISTRIBUTE
    For any help, visit wickedeternitythemehelp.tumblr.com
-->
 
<head>
 
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<meta name="description" content="{MetaDescription}" />
 
<!-- DEFAULT VARIABLES -->
        <meta name="color:Background" content="#FFFFF5"/>
        <meta name="color:Text" content="#C5B09A"/>
        <meta name="color:Title" content="#FFFFF5"/>
        <meta name="color:Post Background" content="#FFFFF5"/>
        <meta name="color:Links" content="#C17477"/>
        <meta name="color:Links Hover" content="#BB846E"/>
        <meta name="color:Sidebar Links" content="#FFFFFF"/>
        <meta name="color:Sidebar Links Hover" content="#C5B09A"/>
        <meta name="color:Sidebar Background" content="#67564B"/>
        <meta name="color:Sidebar Image Border" content="#867567"/>
        <meta name="color:Navigation" content="#9A897B"/>
        <meta name="color:Navigation Hover" content="#867567"/>
        <meta name="color:Sidelinks" content="#FAF6E4"/>
        <meta name="color:Sidelinks Hover" content="#867567"/>
        <meta name="color:Info Background" content="#F2ECD5"/>
        <meta name="color:Topbar Background" content="#867567"/>
        <meta name="color:Topbar Border" content="#67564B"/>
 
        <meta name="image:Sidebar" content=""/>
        <meta name="image:Mini Sidebar" content=""/>
        <meta name="image:Mini Sidebar2" content=""/>
        <meta name="image:Background" content=""/>
        <meta name="image:Sidebar Background" content=""/>
 
        <meta name="font:title" content="georgia" />
        <meta name="font:body" content="arial" />
        <meta name="font:description" content="georgia" />
 
        <meta name="if:Show Navigation" content="0"/>
        <meta name="if:Show Mini Sidebar Imgs" content="0"/>
        <meta name="if:Show 250 Sidebar Img" content="1"/>
 
        <meta name="text:Link 1" content="http://"/>
        <meta name="text:Link 1 Title" content=""/>
        <meta name="text:Link 2" content="http://">
        <meta name="text:Link 2 Title" content=""/>
        <meta name="text:Link 3" content="http://"/>
        <meta name="text:Link 3 Title" content=""/>
        <meta name="text:Link 4" content="http://"/>
        <meta name="text:Link 4 Title" content=""/>
        <meta name="text:Link 5" content="http://"/>
        <meta name="text:Link 5 Title" content=""/>
        <meta name="text:Link 6" content="http://"/>
        <meta name="text:Link 6 Title" content=""/>
 
<link href='http://fonts.googleapis.com/css?family=Tulpen+One' rel='stylesheet' type='text/css'>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
 
<style type="text/css">
/* BODY */
body {
background-image: url('http://s5.postimage.org/tmvnu38c7/tagpage01_bg.png');
background-attachment: fixed;
background-color: #ebedea;
}
 
/* CHANGE MAIN CONTENT */
#container {
width: 400px;
margin: auto;
font-family: calibri;
font-size: 8px;
color: #b38553;
text-transform: uppercase;
letter-spacing: 1px;
}
 
/* CHANGE HEADER */
#header {
font-family: 'Tulpen One', sans-serif;
font-size: 28px;
color: #eceeeb;
text-transform: uppercase;
text-align: center;
margin-bottom: 10px;
letter-spacing: 6px;
position: relative;
z-index: 999;
background-color: #b38553;
height: 30px;
width: 450px;
margin-left: -25px;
top: 100px;
}
 
#banner {
max-width: 400px;
margin-top: -30px;
}
 
/* CHANGE TAG HEADERS */
b {
background-color: #d96386;
font-family: consolas;
font-size: 9px;
color: #eceeeb;
text-transform: uppercase;
width: 198px;
height: 20px;
display: block;
line-height: 20px;
text-align: center;
letter-spacing: 1px;
font-weight: normal;
margin-bottom: 5px;
}
 
/* CHANGE LINKS */
a {
color: #db4875;
text-decoration: none;
}
 
#credit {
position: fixed;
bottom: 10px;
right: 10px;
font-family: calibri;
font-size: 8px;
text-transform: uppercase;
text-align: right;
letter-spacing: 1px;
}
 
#credit a {
color: #b38553;
text-decoration: none;
}
 
table {
margin-left: -3px;
}
</style>
 
<style type="text/css">
 
 
/* --- BASICS --- */
 
body {
    color:#8a8581;
    background-attachment:fixed;
    background-color:#fcfbf7;
    background-image: url('http://assets.tumblr.com/images/x.gif');
    background-position:bottom left;
    background-repeat:no-repeat;
    text-align:justify;
    font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size:10px;
    }
 
a {
    color: #756f66;
    text-decoration:none;
    }
 
a:hover {
    color:#BB846E;
    text-decoration:none;
    }
 
 
/* --- SIDEBAR --- */
 
#sidebarimage img {
    margin-top:35px;
    margin-bottom:5px;
    max-width:250px;
    height:auto;
    text-align:center;
    position:relative;
    border:7px solid #9bc29f;
    }
 
.sidebarimages {
    letter-spacing:2px;
    padding:2px;
    margin-top:30px;
    position:relative;
    }
 
.sidebarimages img {
    display:inline;
    height:auto;
    max-width:113px;
    border:7px solid #9bc29f;
    position:relative;
    }
 
#sidebarbackground img {
    max-width:365px;
    bottom:0px;
    position:fixed;
    }
 
#sidebar {
    position:fixed;
    margin-top:-8px;
    margin-left:-8px;
    width:365px;
    height:1000%;
    background-color:#b5ddd2;
    }
 
#description {
    font-size:10px;
    font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
    margin-left:45px;
    margin-right:45px;
    position:relative;
    }
 
#description a {
    color:#978f86;
    }
 
#description a:hover {
    color:#c5b09a;
    }
 
 
/* --- TITLES --- */
 
#title {
    margin-top:10px;
    margin-bottom:10px;
    margin-right:3px;
    margin-left:3px;
    font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
    color:#ffffff;
    text-transform:normal;
    font-size:16px;
    font-style:bold;
    line-height:12px;
    letter-spacing:0px;
    text-align:center;
    text-decoration:none;
    position:relative;
    }
 
#title1 {
    font-size:18px;
    font-style:normal;
    font-family:georgia;
    text-decoration:none;
    }
 
#title2 {
    font-size:14px;
    font-style:normal;
    font-family:georgia;
    }
 
 
/* --- NAVIGATION & SIDELINKS --- */
 
#mainlinks {
    position:fixed;
    margin-top:-11px;
    margin-left: 400px;
    width:514px;
    height:auto;
    background-color:#b5ddd2;
    border-bottom:5px solid #d5f0e8;
    z-index:2;
    }
 
#sidelinks {
    position:fixed;
    margin-left:930px;
    margin-top:31px;
    }
 
#sidelinks a {
    display:block;
    width:130px;
    height:auto;
    font-family:georgia;
    font-size: 9px;
    text-align:center;
    background-color:#c7e7de;
    color:#756f66;
    padding:3px;
    margin-bottom:-10px;
    text-transform:lowercase;
    letter-spacing:1px;
    }
 
#sidelinks a:hover {
    color: #fcfbf7;
    background-color:#f5d960;
    text-align:center;
    text-decoration:none;
    letter-spacing:2px;
    border-bottom:3px solid #c7e7de;
    -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
    }
 
#topbar {
    position:fixed;
    margin-top:-8px;
    margin-left:930px;
    width:136px;
    height:auto;
    background-color:#b5ddd2;
    border-bottom:5px solid #d5f0e8;
    z-index:2;
    }
 
.navigation a {
    width:90px;
    margin-top:10px;
    margin-bottom:0px;
    padding:3px 0 3px 0;
    display:inline-block;
    font-family:arial;
    font-size:10px;
    text-align:center;
    letter-spacing:1px;
    background-color:#b5ddd2;
    color:#fcfbf7;
    text-transform:lowercase;
    }
 
.navigation a:hover {
    color:#fcfbf7;
    background-color:#91c7b8;
    }
 
 
/* --- INFO & OTHER --- */
 
#pagination {
    font-size:25px;
    text-align:center;
    font-family:{font:Body};
    text-align:center;
    position:relative;
    }
 
#pagination a {
    color:{color:Sidebar Links};
    }
 
#pagination a:hover {
    color:{color:Sidebar Links Hover};
    }
 
#info {
    display:block;
    margin:5px 0px 2px 0px;
    padding:4px 5px 4px 5px;
    color:{color:Text};
    font-size:9px;
    font-family:georgia;
    line-height:110%;
    text-transform:lowercase;
    width:492px;
    background-color:{color:Info Background};
    letter-spacing:1px;
    }
 
#info a {
    color:{color:Links};
    }
 
#info a:hover {
    color:{color:Links Hover};
    }
 
#tags {
    margin-right:7px;
    font-family:georgia;
    text-align:center;
    text-transform:lowercase;
    font-style:italic;
    font-size:9px;
    }
 
#questions {
    background-color:transparent;
    color:{color:text};
    padding:10px;
    margin-bottom:0px;
    font-family:georgia;
    font-size:10px;
    font-style:italic;
    border-bottom:3px solid {color:Info Background};
    }
 
#questions a {
    color:{color:Links};
    }
 
#questions a:hover {
    color:{color:Links Hover};
    }
 
#source {
    margin-top:3px;
    text-align:right;
    margin-bottom:5px;
    font-size:10px;
    }
 
.chat {
    line-height:12px;
    list-style: none;
    }
 
.chat ul {
    line-height:15px;
    list-style:none;
    padding:0px;
    line-height:20px;
    }
 
.person1 {
    background-color:{color:Background};
    color:{color:Text};
    }
 
.person1 .label {
    font-weight:bold;
    padding:0px;
    margin-left:5px;
    color:{color:Text};
    }
 
.person2 {
    color:{color:Text};
    }
 
.person2 .label {
    font-weight:bold;
    padding:0px;
    margin-left:5px;
    color:{color:Text};
    }
 
blockquote {
    border-left:4px solid {color:Text};
    padding:0px;
    padding-left:5px;
    margin:5px;
    }
 
{CustomCSS}
 
</style>
</head>
 
<body>
 
 
<div id="mainlinks"><center><div class="navigation"><a href="/">home</a> <a href="/ask">message</a> <a href="/archive">archive</a> <a href="http://thewicked-eternitythemes.tumblr.com/">theme</a></div></center><p></div>
 
<div id="topbar"><center><div id="title">explore</div><p></center></div>
 
<div id="sidelinks">
 
<a href="/moreplot">Extended Plot</a><br>
<a href="/characterslist">Characters</a><br>
<a href="/rules">The Rules</a><br>
<a href="/mods">Meet The Mods</a><br>
<a href="/masterlist">The Masterlist</a><br>
<a href="/navigation">Navigate</a><br>
<a href="/submit" title="">Apply</a><br>
</div>
 
<div id="container">
<div id="header">tags masterlist</div>
 
<div id="banner"><img src="http://s5.postimage.org/blciwaebb/tagpage01_banner.jpg"></div>
 
<table>
<tr>
 
<!-- START FIRST COLUMN -->
<td valign="top">
<!-- TAGS HEADER -->
<b>Themes &raquo;</b>
<!-- TAGS -->
&rarr; <a href="/">#01 Sugarless</a><br />
&rarr; <a href="/">#02 Utopia</a><br />
 
<br /><br />
 
<b>My Anime List &raquo;</b>
&rarr; <a href="/">#01 Pink/Brown</a><br />
&rarr; <a href="/">#02 Sugar</a><br />
&rarr; <a href="/">#03 Mystery Machine</a><br />
&rarr; <a href="/">#04 Argyle - Blue/Green</a></td>
<!-- END FIRST COLUMN -->
 
<!-- START SECOND COLUMN -->
<td valign="top">
<!-- TAGS HEADER -->
<b>Resources &raquo;</b>
<!-- TAGS -->
&rarr; <a href="/">view them all</a><br />
&rarr; <a href="/">backgrounds</a><br />
&rarr; <a href="/">color palettes</a><br />
&rarr; <a href="/">emoticons</a><br />
&rarr; <a href="/">fonts</a><br />
&rarr; <a href="/">textures</a>
 
<br /><br />
 
<b>Tutorials &raquo;</b>
&rarr; <a href="/">view them all</a><br />
</tr>
<!-- END SECOND COLUMN -->
 
</table>
</div>
 
<div id="sidebar">
 
<div id="sidebarbackground"><img src="http://static.tumblr.com/520f979a7e50d611fa0695768361d571/qtiw9rx/edLmg515m/tumblr_static_sidebarrp4.png"/></div>
 
<center><div id="sidebarimage"><img src="http://static.tumblr.com/d8ccbe5675d3f1aa52055bf3caf50472/qtiw9rx/qrhmg2m2r/tumblr_static_sidebar.gif"/></div></center>
 
<div id="title">A Fairy Wonder Never Land</div>
 
<div id="description"><p><big><big>O</big></big>nce upon a time, an Evil Queen sought to overpower all that dared to cross her. She cast a curse on all the land, whereby every last one of her rivals were transformed into common household objects. Having escaped the effects of the curse, Emma Swan grew into a woman whose one fateful kiss changed everything. The Evil Queen's curse was broken, and—through unimaginable circumstances—the three worlds' inhabitants were now stuck in just one: Fairytale Land.
 
<p>The curse is broken, friends and families are separated, and the land is unfamiliar to both old and new inhabitants. Is there still hope for happy endings?
<p><center>{<script language="JavaScript"> 
var ref = (''+document.referrer+''); 
document.write('<script src="http://s1.freehostedscripts.net/ocounter.php?site=ID2298459&e1=lost Wonderlander&e2=lost Wonderlanders&r=' + ref + '"><\/script>'); 
</script> |
<!-- End FreeOnlineUsers.com --><script language="JavaScript" src="http://s1.freehostedscripts.net/ocount.php?site=ID1755675&name=Visits"></script>}
<p>[A roleplay based on the television show Once Upon A Time]
<p><b>We Are Currently Accepting OC's.</b> 
 
<div id="pagination"> <a href="/page/2">»</a><br></div>
 
</body>
</html>

I have tried moving the div id="container" to different positions in the body to see if this was the cause, but it either made no difference, or was in the wrong place entirely.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 53 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Bad news

Of all the methods you could have chosen to lay out your page, you picked the worst.

If you continue on this path, you will never be able to build a usable, accessible web page with any confidence.

First things first: let's help you learn html and css. Go to http://htmldog.com and work through the tutorials there. They are offered in order, alternating html and css so that you build a solid knowledge base. It won't take you long (the html and css basics are not that complex). Unlike many tutorials, htmldog will teach you best practice.

I just glanced at your html markup. It doesn't look that bad, so once you do the tutes, improvements will be simple and understood. The css, though, isn't worth saving; dump it. (you can save the notes on colors, etc.)

All set? Go to work, then. We'll be here to help you over the rough spots, and clarify what seems obscure.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.