Moving menu to the right side. Please help.

Discussion in 'CSS' started by MoeAlza, Aug 23, 2009.

  1. #1
    Alright, This is the original layout = http://inventoryspecialistslondon.com/

    I wanted to move that left menu to the right side. I attempted this and here is my result = http://matami.com/uncle/index.php.

    But as you can see the bottom is kind of messed up and I don't know whats causing it. I included the css file below. Please help.
    *{margin:0;padding:0;}
    body
    {
    	background-color: #F0F1F1;
    	background-image: url(images/body_bg.jpg);
    	background-repeat: repeat-x;
    	text-align: center;
    }
    
    body, div, a, h3, h2, h1, span
    {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    }
    
    #wrapper
    {
    	width: 870px;
    	margin: auto;
    	text-align: left;
    }
    
    #topbar
    {
    	background-color: #404040;
    	border: 1px solid #FFFFFF;
    	border-top: 0px;
    	padding: 10px;
    	padding-left: 20px;
    	color: #FFFFFF;
    }
    
    #header
    {
    	border: 1px solid #FFFFFF;
    	border-top: 0px;
    	background-color: #C20000;
    	position: relative;
    	height: 128px;
    }
    
    #logo
    {
    	position: absolute;
    	top: 38px;
    	left: 24px;
    	background-image: url(images/logo.jpg);
    	background-repeat: no-repeat;
    	margin: 0;
    	padding-top: 0px;
    	padding-left: 72px;
    	height: 43px;
    	font-size: 21px;
    	color: #FFFFFF;
    }
    
    #logo span
    {
    	margin-left: 3px;
    	color: #EDB3B3;
    	padding: 0;
    	margin: 0;
    	display: block;
    }
    
    #navigation
    {
    	position: absolute;
    	right: 0px;
    	top: 100px;
    }
    
    #navigation li
    {
    	float: left;
    	list-style: none;
    	width: 76px;
    	margin-right: 5px;
    	text-align: center;
    	font-weight: bold;
    }
    
    #navigation li a
    {
    	display: block;
    	padding-top: 7px;
    	padding-bottom: 8px;
    	font-size: 11px;
    	color: #FFFFFF;
    	text-decoration: none;
    }
    
    #navigation li a:hover
    {
    	background-image: url(images/header_selected.jpg);
    	color: #C20000;
    	text-decoration: underline;
    }
    
    #navigation li span a
    {
    	background-image: url(images/header_selected.jpg);
    	color: #C20000;
    	text-decoration: underline;
    }
    
    #body
    {
    	background-color: #FFFFFF;
    	padding-top: 25px;
    }
    
    #leftmenu
    {
    	float: left;
    	background-color: #F4F2E6;
    	width: 213px;
    	margin-left: 25px;
    	margin-bottom: 25px;
    }
    
    #lwrap
    {
    
    }
    
    #leftmenu p
    {
    	padding: 20px;
    	padding-top: 10px;
    	padding-bottom: 0px;
    	color: #918E7F;
    }
    
    #leftmenu blockquote
    {
    	margin-left: 20px;
    }
    
    #footer
    {
    	border-top: 1px solid #D7D7D7;
    	margin: 2px;
    	padding-top: 18px;
    	padding-bottom: 10px;
    	text-align: center;
    	background-color: #FFFFFF;
    	color: #918E7F;
    }
    
    #footer a
    {
    	color: #918E7F;
    	text-decoration: none;
    	margin-bottom: 7px;
    }
    
    #footer a:hover
    {
    	text-decoration: underline;
    }
    
    #footer span a
    {
    	text-decoration: underline;
    }
    
    #footer p
    {
    	color: #000000;
    	margin-top: 10px;
    }
    
    .clear
    {
    	clear: left;
    }
    
    .right
    {
    	float: right;
    	margin-right: 20px;
    	text-align: right;
    	color: #918E7F;
    }
    
    #quotestart
    {
    	padding-top: 20px;
    	background-repeat: no-repeat;
    	background-position: bottom;
    	margin-left: 14px;
    	background-image: url(images/quote_top.jpg);
    	width: 34px;
    	height: 25px;
    }
    
    #quoteend
    {
    	padding-top: 20px;
    	float: right;
    	background-repeat: no-repeat;
    	background-position: bottom;
    	margin-left: 14px;
    	margin-right: 20px;
    	background-image: url(images/quote_bottom.jpg);
    	width: 34px;
    	height: 25px;
    }
    
    .seperator
    {
    	padding-top: 25px;
    	border-bottom: 1px solid #CCCADB;
    	margin-left: 10px;
    	margin-right: 10px;
    	margin-bottom: 30px;
    }
    
    .form
    {
    	margin-left: 13px;
    	margin-right: 15px;
    	color: #918E7F;
    }
    
    #leftmenu h3
    {
    	color: #000000;
    	font-size: 14px;
    	margin-bottom: 5px;
    }
    
    .form label
    {
    	color: #000000;
    	display: block;
    	margin-left: 2px;
    	margin-bottom: 3px;
    }
    
    .form input, textarea
    {
    	background-color: #FFFFFF;
    	border: 1px solid #CECCC0;
    	width: 175px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	padding-top: 3px;
    	padding-bottom: 3px;
    	padding-left: 5px;
    	color: #9D9C9C;
    	margin-bottom: 10px;
    }
    
    .send_button
    {
    	border: 0;
    	display: block;
    	background-image: url(images/send_button.jpg);
    	width: 79px;
    	text-align: center;
    	color: #FFFFFF;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	padding-top: 7px;
    	padding-bottom: 11px;
    	float: right;
    	margin-bottom: 25px;
    }
    
    #content a
    {
    	color: #918E7F;
    	text-decoration: none;
    	margin-bottom: 7px;
    }
    
    #content a:hover
    {
    	text-decoration: underline;
    }
    
    #content
    {
    	margin-left: 280px;
    	margin-right: 25px;
    }
    
    #content h2
    {
    	font-size: 18px;
    	color: #5D5D5D;
    }
    
    #content p
    {
    	color: #918E7F;
    	padding-top: 20px;
    	padding-bottom: 35px;
    }
    HTML:

     
    MoeAlza, Aug 23, 2009 IP
  2. MhW

    MhW Active Member

    Messages:
    370
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    85
    #2
    Simple Fix :)

    On http://matami.com/uncle/index.php,

    Find:
    #leftmenu {
    background-color:#D8DEEC;
    float:right;
    margin-bottom:25px;
    margin-left:25px;
    width:213px;
    }
    Code (markup):
    Replace with:
    #leftmenu {
    background-color:#D8DEEC;
    float:right;
    margin-bottom:25px;
    margin-[COLOR="Red"]right[/COLOR]:25px;
    width:213px;
    }
    Code (markup):
    Find:
    #footer {
    background-color:#FFFFFF;
    border-top:1px solid #D7D7D7;
    color:#918E7F;
    margin:2px;
    padding-bottom:10px;
    padding-top:18px;
    text-align:center;
    }
    Code (markup):
    Replace with:
    #footer {
    background-color:#FFFFFF;
    border-top:1px solid #D7D7D7;
    color:#918E7F;
    margin:2px;
    padding-bottom:10px;
    padding-top:18px;
    text-align:center;
    [COLOR="Red"]clear: both;[/COLOR]
    }
    Code (markup):
     
    MhW, Aug 23, 2009 IP
  3. MoeAlza

    MoeAlza Peon

    Messages:
    304
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    WOOOT THANKS! ur awesome lol.
     
    MoeAlza, Aug 23, 2009 IP