Problem with sidebar in css. (WordPress Theme)
-
Here is my site: http://nickhiebert.com/
Now the problem is on each page in the navigation pages (logo-website name), About, Contact and Resume all display the sidebar. But the problem is nothing is aligning properly.
——————————————————————–
Here is my style.css file:
/* SIDEBAR */
#sidebar {
margin-right: 312px;
padding-bottom: 100px;
color: #231f20;
padding-left: 50px;
margin-top: 10px;
position: relative;}
#sidebar h3 {
color: #bab8b8;
font-size: 18px;
margin-right: 312px;
padding-right: 20px;
padding-left: 41px;
position:relative;
}#searchform {
margin-right: 630px;
padding-left: 45px;
position: relative;
}/*
#sidebar links_with_style {
margin-right: 312px;
}#sidebar wp_list_categories {
margin-right: 300px;
margin-top: 600px;
}
*/
#sidebar a {
color: #231f20;
line-height: 1.5em;
position: relative;
}#sidebar a:hover {
color: #bab8b8;
}/* END SIDEBAR */
/* BODY */
html {
background: url(http://website.com/wp-content/themes/portfolio/images/background.png) scroll;
}body {
text-align: left;
font-size: 100%;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #999999;
background: url(http://website.com/wp-content/themes/portfolio/images/mainBG.png) repeat-y;
margin-right: 128.2px;
margin-left: 137.2px;
margin-bottom: -18px;
background-position:center;
}body h1 a{
float: left;
padding-left: 60px;
padding-top: 9px;
width: 260px;
}body h2 a {
color:#000000;
}a {
text-decoration: none;
}a:hover {
text-decoration: none;
}p {
color: #333333;
line-height: 20px;
margin-right: -20px;
}h1 {
float: left;
margin-top: 0;
border: none;
width: 260px;
margin-left: -3;
}img {
border-style: none;
margin-left: -45px;
float: left;
margin-top: -9px;
}h2 {
font-size: 25px;
margin-right: 45px;
overflow: hidden;
}#container {
width: 973px;
margin: auto;
text-align: left;
}/* END BODY */
/* HEADER */
/*———————————————————————#header h1 a{
float: left;
margin-right: 312px;
width: 260px;
}/* END HEADER */
/* NAVIGATION */
#nav {
background: url(http://website.com/wp-content/themes/portfolio/images/nav_bg.png) repeat-x;
overflow: hidden;
height: 93px;
margin-right: 13px;
margin-left: -70px;
padding: 0 0 0 31px;
}#nav li {
float: right;
line-height: 93px;
padding-left: 5px;
padding-right: 85px;
width: 110px;
}#nav li a {
padding: 0 1em;
color: #565354;
text-transform: uppercase;
font-size: 17.3px;
font-weight: bold;
line-height: 20px;
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
}#nav li a.first {
padding-left: 0;
}ul, li {
list-style-type: none;
}/* END NAVIGATION */
/* MAIN CONTENT*/
#content {
margin-left: 380px;
margin-right: 150.2px;}
#content .date {
padding-left: 200px;
color: #000000;
}#content .post-comments a {
color: #999999;
}comment form .p {
margin-right: -50px;
}/* END MAIN CONTENT*/
/* FOOTER*/
#credits {
background: url(http://website.com/wp-content/themes/portfolio/images/footer_bg.png) repeat-x bottom;
margin-top: -300px;
margin-bottom: 40px;
padding-top: 15px;
margin-right: 14px;
margin-left: 14px;
padding-bottom: 20px;
}#credits .alignleft {
margin-left: 175px;
margin-bottom: 10px;
margin-top: 10px;
padding-top: 10px;
padding-bottom: 16px;
color: #231F20;
}#credits .alignright {
color: #231F20;
}
#credits a, alignleft, alignright {
padding-bottom: 20px;
}/* END FOOTER*/
——————————————————-
If anyone has any solutions to my problem please post code that would work with the issue.
Thanks.
-
What I want is the sidebar links to appear on the top of each page obviously in the sidebar on the left.
you could float the #sidebar and #content (and a few others) and adapt some margins and paddings (only the changed formatting shown):
#sidebar { float:left; width:200px; padding-bottom: 100px; color: #231f20; padding-left: 30px; margin-top: 10px; } #searchform { flaot:left; width:200px; padding-left: 45px; } #content {float:right; width:500px; margin-right:30px; padding: 0 10px; } #credits { background: url(http://nickhiebert.com/wp-content/themes/portfolio/images/footer_bg.png) repeat-x bottom; clear:both; margin-bottom: 40px; padding-top: 15px; margin-right: 14px; margin-left: 14px; padding-bottom: 20px; } #credits .alignleft { margin-left: 75px; margin-bottom: 10px; margin-top: 10px; padding-top: 10px; padding-bottom: 16px; color: #231F20; }only checked in firefox with the developer add-on (if you don’t have it, get it – good tool to debug html/css; also check firebug)
Thanks 🙂 That fixed the problem. I just need to fix the margins and padding abit then it should work.
Thanks again,
Nick
The topic ‘Problem with sidebar in css. (WordPress Theme)’ is closed to new replies.