3 Columns with sidebars to the right
-
Hi, I’m currently using Sandbox 10 theme because I want to be able to make a blog theme from scratch and because the layouts available arent quite set to my liking.
I am kind of new when it comes to CSS. I’ve only made one website ever. It was a simple basic one column layout. However I got bored with that and now have ventured into 2 and 3 columns. Unfortunately its kind of harder than what I thought it would be. So I need just a little help! If anyone can help it would be much appreciated.
What I would like to do is make a stylesheet with the look of a combination of Digg 3 and Fadtastic. Basically I want a 3 column fixed-width layout with a custom header, no footer, horizontal navigation menu, and two sidebars aligned to the right (like Fadtastic). I have already done some coding but when I put it in an editor (I’m afraid to try it here) the left sidebar/column seems to either disappear or stack up on the right one. To give you a better understanding of what I’m saying/doing here is my html/css.
My html order is wrapper, header, navigation, content, leftcolumn, rightcolumn. Here is my CSS:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
}p {
padding: 10px;
}#wrapper {
margin: 0 auto;
width: 750px;
height: 350px;
text-align: left;
}#content {
float: left;
color: #333;
background: #FFFFFF;
height: 350px;
width: 450px;
display: inline;
}#header {
color: #333;
width: 750px;
float: left;
height: 100px;
background: #6B6659;
}#navigation {
float: left;
width: 750px;
height: 40px;
color: #333;
background: #8AA1B6;
}#leftcolumn {
color: #333;
background: #EBE3CD;
height: 350px;
width: 150px;
float: left;
}#rightcolumn {
color: #333;
background: #EBE3CD;
height: 350px;
width: 150px;
float: left;
} -
Because you have not provided a link, we don’t know if you are hosted here at wordpress.COM. If you are, please be aware that there is no official support for CSS and only a few people in the forums are well versed in it. There are some links at the top of the CSS forum that you might find useful.
(Speaking of CSS forums, mods please move this thread.)
-
Ooops! Sorry for posting this in the wrong thread. I know that this isnt an official support forum for CSS and thats its basically volunteered help. But I was hoping that someone could assist me.
Yes I have an account with wordpress.com its http://lifeasanurse.wordpress.com
-
My suggestion is that you get the web developer’s toolbar for Firefox, take a look at the CSS for the two themes you are trying to combine and familiarize yourself with the various elements. Also, do a Google search for the Sandbox 1.0 skin that sets up the two sidebars.
One part of your wishlist is already included in Sandbox 1.0 – the horizontal navigation.
-
-
After you’re done with the CSS, use this tool which provides screenshots of what your blog will look like on other browsers. IE is always a problem.
-
So with alot of searching I finally found a really good template with what I am looking for. Here is the link http://www.bloganything.net/541/blog-pixel-3-column-wordpress-theme-released
But when I downloaded the demo it came with php files. Opening up the files is not a problem though. I used notepad and I discovered that its basically the html files (I said I was a newbie! ;)). But where do I put these files? Do I just copy and paste them into the custom css section?
-
You cannot use downloaded themes here on wp.com
Based on the description of what you want, I wrote this basic CSS code that you could use and build upon.
body { background:#acacac; font:normal 1em Arial, Helvetica, sans-serif; margin:0; } #wrapper { width: 1000px; height: 100%; margin: 0 auto; padding: 0; clear: both; overflow; hidden; background: #fff; } #header{clear: both;} #menu {border: solid 1px #f00;} #menu ul {list-style: none; margin: 0; padding: 0;} #menu li {display: inline; margin: 0; padding: 0;} #menu li a {padding: 2px 5px;} #container { width: 600px; height: auto; background: #ddd; float: left; } #content { padding: 10px; overflow: hidden; } #primary, #secondary {width: 200px; height: auto; overflow: hidden;} #primary{ float: right; background: #ededed; } #secondary {float: left; background: #f9f9f9;} #footer {clear: both;} .skip-link {display: none;}HTH
-
-
Devblog, I put your coding into the custom css section and it knocked one of the sidebars off side to the left (it was that way in both IE and Modzilla). Unless you’re saying I should just use it as a guideline and add my own coding?
-
Yeah this is something basic that you could use and take it from there.
In one of the definitions, I made a slight change. In the #secondary selector, change “float: left” to “float: right”. It should read like this:
#secondary {float: right; background: #f9f9f9;}Also, I noticed that you are using the old version of Sandbox, which has “predefined” templates. You should use “Sandbox-10” instead. The code I gave you is for Sandbox-10.
-
I am having trouble with adding a menu bar like this one http://icant.co.uk/sandbox/osx/ can you help? Thanks for everything :)
-
-
In case anyone is interested you can get the basic Sandbox CSS for the various layouts here http://svn.automattic.com/wpcom-themes/sandbox-10/sandbox-layouts/
-
vivian, quick questions. Is it possible to add a header and nagivation menu to Twenty-eight Thirteen (its what I am currently using to study the code..)
- The topic ‘3 Columns with sidebars to the right’ is closed to new replies.
WordPress.com Forums 