Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2004
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Menu driving me insane!

    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:

    Code:
    <!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
    Code:
    #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!

  • #2
    New Coder
    Join Date
    Jul 2004
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    bumpity bump! anyone any ideas? xx


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •