...

View Full Version : CSS Menu driving me insane!



Emmsy
08-31-2010, 01:19 AM
I'm trying to add a menu onto a pre-exisiting layout I made for my tumblr which can be seen here; http://elmiee.tumblr.com/
But no matter what I seem to do I can get the menu there or lined up! :/ this is the coding:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Elmiee; a magical place to be</title>

<style type="text/css">

* { padding: 0; margin: 0; }
p.padding {padding-left:8px;
padding-right:8px;
}

body {background-image:url('http://img.photobucket.com/albums/0903/cottonmoon/tumblr/bg.gif')}

body {
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#808080;
font-size: 11px;
}

a {
color: #808080;
font-size: 12px;
background-color:transparent;
text-decoration: none;
}

#wrapper {
margin: 20px 0px 0px 40px; left;
width: 530px;
}

#header {
width: 530px;
color: #333;
padding: 0px;
border: 0px solid #ccc;
height: 119px;
margin: 0px 0px 0px 0px;
background: #DAC8BF;
}

#content {
width: 528px;
color: #333;
border-right: 1px solid #808080;
border-left: 1px solid #808080;
background: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px;

}
#footer {
width: 530px;
color: #FFFFFF;
border: 0px solid #ccc;
background: #808080;
margin: 0px 0px 10px 0px;
padding: 2px 0px 2px 0px;
}


img {
border: 0;
}
.post {
margin-bottom: 2em;
margin-left: 1.2em;
margin-right: 1.2em;
}
.post .pf {
font-family: Lucida Grande, Verdana, sans-serif;
font-size: 11px;
margin-top: .5em;
}
.post .pf a {
color: #333;
background: #eee;
-moz-border-radius: 3px;
padding: 3px 2px 3px 2px;
text-decoration: none;
}
.post .pf a:hover {
color: #000;
}
.post .date {
text-align: left;
margin-right: 1.2em;
margin-bottom: 0.2em;
}

.post .date:hover .day {
display: inline;
}
.post .date .day {
display: none;
}
.post .date a {
background: #fff;
color: #808080;
display: block;
font-size: 11px;
padding: 1.5px;
font-weight:bold;
text-decoration: none;
}
.post .caption {
margin-top: .25em;
}
.post .quote span.quote {
font-size: 14px;
}
.post .quote .box {
font-family: Lucida Grande, Georgia, sans-serif;
}
.post .chat li {
list-style: none;
margin-left: 140px;
}
.post .chat .label {
font-family: Courier New, monospace;
}

.post .regular img {
max-width: 500px;
}

.times a{
display:block;
text-align:right;
margin-top:2px;
background-color:{color:b};
color:{color:Times};
font-family:verdana;
font-size:11px;
font-weight: bold;}

.times
a:hover{text-decoration:none;
background:{color:b};
color:{color:1a}!important;}

h3{font-size:20px;
font-family:georgia;
text-transform:lowercase;
font-weight:normal;
font-style:italic;
letter-spacing:-2px;
line-height:14px;
margin:0px;}

ol.notes,
.action{list-style:none;
padding:0px;
margin:0px;}

.notes li{
list-style:none;
padding:0px;
margin:0px;
border-bottom: dotted 1px;
border-color:{color:Accents};
padding-top:5px;
padding-bottom:5px;}
ul#twitter_update_list {list-style:none; padding:0px; margin:0px;}


</style>

</head>

<body>

<!-- Begin Wrapper -->
<div id="wrapper">

<!-- Begin Header -->
<div id="header">

<a href="http://elmiee.tumblr.com"> <img

src="http://img.photobucket.com/albums/0903/cottonmoon/tumblr/header2.jpg"></a>

</div>
<!-- End Header -->




<!-- Begin Content -->
<div id="content">


{block:Posts}
<div class="post"> <!-- BEGIN POSTS -->

<div class="date">
<a href="{Permalink}">{DayOfMonth}{DayOfMonthSuffix} {Month}, {Year} @ {12Hour}:{minutes}{AmPm}</a>
</div>

{block:Regular}
<div class="regular">
{block:Title}<h2>{Title}</h2>{/block:Title}
{Body}
</div>
{/block:Regular}

{block:Photo}
<div class="photo">
<div class="img">
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
</div>

<div class="times">
<a href="{Permalink}"><div style="float:right;"><b>{block:NoteCount}{NoteCount} Notes{/block:NoteCount}</b></div></a></div>
{TimeAgo}{block:PostNotes}<BR>{PostNotes}{/block:PostNotes}{ReblogRootName}<br>

<center><img src="http://img.photobucket.com/albums/0903/cottonmoon/tumblr/divider.gif">
</center>

{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}

{block:Quote}
<div class="quote">
<div class="box">
<span class="quote">{Quote}</span>
</div>
{block:Source}<div class="caption">{Source}</div>{/block:Source}
</div>
{/block:Quote}

{block:Link}
<div class="link">
<h2><a href="{URL}" class="link" {Target}>{Name}</a></h2>
{block:Description}
<div class="caption">{Description}</div>
{/block:Description}
</div>
{/block:Link}

{block:Conversation}
<div class="chat">
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul>
{block:Lines}
<li>
{block:Label}<span class="label">{Label}</span>{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
{/block:Conversation}

{block:Audio}
<div class="audio">
{AudioPlayerWhite}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Audio}

{block:Video}
<div class="video">
{Video-400}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Video}

{block:HasTags}
<div class="pf">
Filed &darr; {block:Tags}<a href="/tagged/{Tag}">{Tag}</a> {/block:Tags}
</div>
{/block:HasTags}

</div> <!-- END POSTS -->
{/block:Posts}

<br>


<center>
<b>
{block:PreviousPage}<a class="navleft" href="{PreviousPage}">&laquo; Previous Page</a>{/block:PreviousPage}
&nbsp;page {CurrentPage} of {TotalPages}&nbsp;
{block:NextPage}<a class="navright" href="{NextPage}">Next Page &raquo;</a>{/block:NextPage}

{/block:Pagination}
{block:DayPage}
{block:DayPagination}

{block:PreviousDayPage}<a class="navleft" href="{PreviousDayPage}">&laquo; previous day</a> {/block:PreviousDayPage}
{block:NextDayPage}<a class="navright" href="{NextDayPage}">next day &raquo;</a> {/block:NextDayPage}

{/block:DayPagination}
{/block:DayPage}
</b></center><br>
</div>
<!-- End Content -->

<!-- Begin Footer -->
<div id="footer">

<center> Layout Made by me, Emma. Contact me at cottonmoon@gmail.com </center>

</div>
<!-- End Footer -->

</div>
<!-- End Wrapper -->

</body>
</html>





I've tried things like


#right {
width:160px;
float:left;
position:relative;
margin-right:-160px;
margin-left:1px;
}


with no luck, I feel that I am having a uber blonde moment as not coded for a while!

Emmsy
08-31-2010, 11:47 PM
bumpity bump! anyone any ideas? xx



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum