PDA

View Full Version : How to Move Sidebar and Content Area Over



mariahneu
Jan 25th, 2010, 10:21 PM
I currently use WordPress to edit my website, however, I can't figure out how to move the Sidebar and the content page over to the left so it's in line with the top-navigation menu.

My website's at http://www.flowersitters.com

Here's what I want to do: http://velociteen.com/SS.png

How do I edit the CSS so this occurs?

Here is the CSS:


body {
margin:0;
padding:0;
background: #cbe86b;
background: url('http://flowersitters.com/wp-content/themes/velociteen/Bubble%20Girl%20Four.jpg'); background-attachment: fixed;
color:#030736;
text-align:left;
font-family: Arial, sans-serif;
font-size:12px;
}

#container{
background:white;
border:0px red solid;
width:825px;
margin:0 0 0px 0;}

#header {
width : 825px;
height : 275px;
margin : 0 0 0 0;
background : url('http://flowersitters.com/wp-content/themes/velociteen/Banner%203.jpg') no-repeat;
}


#wrapper{
width:800px;
margin:0px auto;}

#content {
margin: 20px 0 0 0;
width:530px;
float:left;
}


#sidebar{
float:right;
width:220px;
height:100%;
margin:10px 0 0 0;
}

.sidebar{
padding:5px;
margin:0 0 10px 0;
border:1px solid #03073;
background-color:#cbe86b;
}



#sidebar ul li{
list-style:none;
padding: 6px 3px;
border-bottom:none;
border-bottom: 1px dotted #030736;}

#sidebar ul{
list-style:none;
padding: 6px 3px;
margin:0;}

#footer {
border:0px red solid;
margin:10px 0;
padding:0px;
width:825px;
clear:both;
}

.footercol{
border:0px solid #030736;
width:218px;
padding:15px;
margin:0 5px;
float:left;}

.footercol2{
border:1px solid #030736;
background-color:#030736;
width:218px;
padding:15px;
margin:0 5px;
float:right;}

#copyright{
padding:20px 50px;
clear:both;
border-top:10px solid #030736;
background-color:#cbe86b;}


/*Nav styling*/

#navigation {
background: #030736;
border-top:1px solid #030736;
border-bottom:1px solid #030736;
width:825px;
color: #cbe86b;
font-weight:bold;
float:left;
}

#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;}

#navigation li {
margin: 0;
float: left;}

#navigation li a {
display: block;
text-align: center;
color: #cbe86b;
padding: 15px 20px;}

html>body #navigation li a {
width: auto;
}

#navigation li a:
{
background-color: #cbe86b;
color: #030736;
}

/* sub menu */
#subnav {
clear:both;
float:left;
background: #47133c;
}
#subnav ul {
margin: 0px;
padding: 3px 0px 18px 5px;
list-style: none;
font: 11px/100% Arial, Helvetica, sans-serif;
}
#subnav li {
border-right: 1px solid #0d4775;
border-left: 1px solid #0d4775;
padding: 5px 7px;
margin: 0px;
float: left;
}
#subnav li a, #subnav li a:visited, #subnav .page_item {
text-decoration: none;
color: #030736;
}
#subnav .current_page_item a, #subnav .current_page_item a:visited {
color: #30261c;
}
#subnav li a:hover {
text-decoration: none;
color: #FFFFFF;
}


h1{
font-weight:lighter;
border-bottom:1px solid #871a44;
color:#030736;
font-size:18px;}

h2{
font-weight:lighter;
color:#030736;
font-size:16px;}


a {
color:#780001;
text-decoration:none;
}

a:hover {
color:#030736;
text-decoration:none;
}

.clear{clear:both;}

.post, .wrapper{
margin:0 0 10px 0;
padding:15px;
border:1px solid #ccc;
background-color:#FFFFFF;}


.alignright {
float: right;
}

.alignleft {
float: left;
}

.alignleft a, .alignright a{
display: block;
background-color:#871a44;
color:#000000;
padding:8px;}

.alignleft a:hover, .alignleft a:hover{
background-color:#871a44;
color:#030736;}


.navigation {
display: block;
text-align: center;
margin-top: 10px;
margin-bottom: 60px;
}


#commentform #author, #commentform #email, #commentform #url {
background: #871a44;
padding: .2em;
border: 1px solid #871a44;

}

.commentlist li, #commentform input, #commentform textarea {
font-weight:normal;
}


.commentlist li .avatar {
float: right;
border: 1px solid #871a44;
padding: 2px;
background: #871a44;
}

.commentlist cite{
font-weight: normal;
font-style: normal;
font-size: 1.1em;
}

.commentlist cite a {
color:#ff3399;
font-weight: normal;
font-style: normal;
font-size: 1.1em;
}

.commentlist p {
font-weight: normal;
line-height: 1.5em;
text-transform: none;
}


.commentmetadata {
font-weight: normal;
margin: 0;
display: block;
}


#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
}

#commentform textarea {
width:95%;
border: 1px solid #871a44;
background: #FFFFFF;
padding: .2em;
}

#commentform #submit {
margin: 0;
float: left;
}

.alt {
background-color: #871a44;
border-top: 1px solid #871a44;
border-bottom: 1px solid #871a44;
margin: 0;

padding: 5px;
}


.commentlist {
padding: 0;
text-align: justify;

}

.commentlist li {
margin: 15px 0 3px;
padding: 5px 10px 3px;
list-style: none;
}

.commentlist p {
margin: 10px 0 10px 0;
}


.nocomments {
text-align: center;
margin: 0;
padding: 0;
}


/*styling for wp-cal*/

#wp-calendar {
empty-cells: show;
font-size: 9px;
margin: 0;
width:100%;
}

#wp-calendar #next a {
padding-right: 9px;
text-align: right;
}

#wp-calendar #prev a {
padding-left: 9px;
text-align: left;
}

#wp-calendar a {
display: block;
text-decoration: none;
}

#wp-calendar a:hover {
color: #030736;
}

#wp-calendar caption {
color: #666;
font-size: 9px;
text-align: left;
font-weight: normal;
}

#wp-calendar td {
color: #666;
font: normal 10px verdana, "Trebuchet MS", arial, tahoma, sans-serif;
letter-spacing: normal;
padding: 2px 0;
text-align: center;
}

#wp-calendar td.pad:hover {
background: #ddd;
}

#wp-calendar td:hover, #wp-calendar #today {
background: #eaeaea;
color: #030736;
}

#wp-calendar th {
font-style: normal;
text-transform: capitalize;
}

Thanks!

jenius
Jan 25th, 2010, 11:14 PM
Holy jesus.... I don't mean to be invasive, but that page really needs a total makeover far more than just moving that column to the left. The design is confusing and disorienting, and the code is an absolute mess.

There's no reason you should be using wordpress to manage a page like this. In fact, I'd say that your using wordpress is actually hindering the site's development. You are not using any of the features that wordpress is useful for (comments, categorizing posts, etc) - this is a static webpage. In addition, you have huge amounts of unnecessary code that muddles up the appearance and slows load time.

I looked through the code for a while, but it was such a mess that I couldn't pinpoint the margin problem (sorry!) - I'm sure someone whos smarter or has more time than me here will be able to track it down. If I had to take a guess, I would say it would have to do with the wrapper being { 0 auto }, because you have specifically defined margins of 0 for the content elements everywhere else

But in all honesty, I would suggest a quick site redesign. Not a huge deal - it's a simple site, and it would make it not only easier for you to manage, but easier for your viewers to navigate, and it would make your company look better. A poorly designed website (true or not) directly implies a poorly organized company.

If you think this is the way to go, let me know and I can help you out.