CSS Guru's inside please.

[Vini]

/*
Theme Name: Fundamental
Theme URI: http://www.kaushalsheth.com/
Design Name: Fundamental
Description: Fundamental theme ported to Wordpress.
Version: 1.0
Author: Kaushal Sheth
Author URI: http://www.kaushalsheth.com
*/
/* Main Credit*/

/* Fundamental CSS by Martin Wulffeld <martin.wulffeld@aeonblue.dk> */

body {
        margin: 0;
        padding: 0;
        background-color: #FFF;
        font-size: 14px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        background: url('images/bgsidebar.gif') repeat-y;
}
        
h1, h2, h3, h4, h5, h6 {
        margin: 5px 0;
        font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
}

h1 {
        font-size: 21px;
}

h2 {
        font-size: 18px;
}

h3 {
        font-size: 14px;
}

h4 {
        font-size: 12px;
}

h5 {
        font-size: 11px;
}

h6 {
        font-size: 9px;
}

span,
p,
code,
pre,
li,
th,
td,
blockquote {
        font-size: 11px;
}

form, div {
        padding: 0;
        margin: 0;
}

p {
        margin: 0 0 1em 0;
        padding: 0;
}

img {
        margin: 0;
        padding: 0;
        border: none;
}

#page {
        float: left;
        margin: 0;
        padding: 0 5px 0 7px;
        text-align: left;
        background-color: #FFF;
}

#header { 
        margin: 0;
        padding: 0;
        background-color: #464646;
        border-bottom: 10px solid #4CC4EE;
        border-bottom: 7px solid #EEE;
        width: 510px;
}

#footer {
        margin: 0;
        padding: 0;
        height: 2em;
        background-color: #464646;
        border-top: 7px solid #00BBEE;
        width: 510px;
        color: #ffffff;
}

#main { 
        width: 490px;
        border-bottom: none;
        padding: 0;
        margin: 15px 10px 5px 10px;
}

#sidebar {
        height: 1px; /* Fixes IE bug. */
        margin: 0 0 0 520px;
        padding: 15px 14px 15px 24px;
        color: #FFF;
}

#header h1#sitename {
        margin: 0;
}
     
#header h1#sitename a,
#header h1#sitename a:hover {
        display: block;
        color: #FFF;
        padding: 30px 10px 4px 10px;
        font-size: 1.2em;
        border: none;
        text-align: right;
}

#header h4#subtitle {
        color: #FFF;
        padding: 4px 10px 6px 10px;
        background-color: #00BBEE;
        margin: 0;
        text-align: right;
}

#page a {
        color: #00BBEE;
        text-decoration: none;
        border-bottom: 1px solid #00BBEE;
}
        
#page a:hover {
        color: #FFF;
        background-color: #00BBEE;
        border-bottom: 1px solid #00BBEE;
}

#sidebar a {
        color: #AAF100;
        text-decoration: none;
        border-bottom: 1px solid #AAF100;
}
        
#sidebar a:hover {
        color: #FFF;
        background-color: #AAD100;
        border-bottom: 1px solid #AAD100;
}

#sidebar p {
        margin: 0 0 5px 0;
}

#search #sform {
        padding: 5px 3px;
}
 
/* Apparently search borks if font-size is specified here. */
#search #q {
}

.post {
        margin: 0 0 5px 0px;
        padding-bottom: 10px;
}

.post h2.articletitle {
        text-align: right;
}

.post table {
        margin: 5px 0;
        padding: 0;
}

.post thead td {
        background-color: #555;
        color: #FFF;
        font-size: 0.8em;
        padding: 1px 3px;
        margin: 0;
}

.post tbody td {
        background-color: #DDD;
        color: #222;
        font-size: 0.8em;
        padding: 1px 3px;
        margin: 0;
}

.post p {
        line-height: 1.6em;
}
        
#page .post span.typo_date {
        font-size: 1em;
        text-transform: uppercase;
        text-align: right;
}

.post p.meta {
        text-align: right;
        color: #666;
        font-size: 0.6em;
        text-transform: uppercase;
}

.post p.author {
        display: block;
        padding: 2px 0 0 0;
        font-size: 0.6em;
        margin: 0;
        color: #999;
        text-align: right;
        border-top: 1px dashed #A2DFFC;
        text-transform: uppercase;
}

.post ul.postmetadata {
        text-align: right;
        margin: 0 0 10px 0;
        padding: 0;
        list-style-type: none;
        font-size: 0.7em;
}

.post ul.postmetadata li {
        text-transform: uppercase;
        display: inline;
        font-size: 0.9em;
}

.post table {
        margin: 5px 0;
        padding: 0;
}

.post thead td,
.post th {
        background-color: #FF6600;
        color: #FFF;
        border: 1px solid #EE5500;
        padding: 1px 3px;
        margin: 0;
}

.post tbody td,
.post td {
        background-color: #EEE;
        color: #222;
        border: 1px solid #DDD;
        padding: 1px 3px;
        margin: 0;
}

blockquote {
        font-style: italic;
        border-top: 2px solid #00BBEE; border-bottom: 2px solid #00BBEE;

}

code {
        display: block;
        background-color: #F4F4F4;
        border: 1px solid #E4E4E4;
        margin: 3px;
        padding: 5px;
}

ol.comment-list {
        list-style-type: none;
        margin: 0 0 30px 0;
        padding: 0;
}

ol.comment-list li {
        border-bottom: 1px dashed #00BBEE;
        padding:  0 0 5px 0;
        margin: 0 0 10px 0;
        color: #222;
}

ol.comment-list li h4.commentauthor {
        margin: 0 0 8px 0;
        padding: 2px 4px;
        background-color: #00BBEE;
        color: #FFF;
}

#page ol.comment-list li h4.commentauthor a {
        color: #FFF;
        text-decoration: none;
        border-bottom: 1px solid #FFF;
}

#page ol.comment-list li h4.commentauthor a:hover {
        color: #00BBEE;
        background-color: #FFF;
        text-decoration: none;
        border-bottom: 1px solid #FFF;
}

ol.comment-list li div.commentbody {
        padding: 0 4px 4px 4px;
}

h4.blueblk {
        padding: 5px 0;
        margin: 10px 0;
        border-bottom: 1px dashed #DDD;
        color: #AAA;
}

table.comment {
        padding: 2px 0px;
}

table.comment td {
        vertical-align: top;
        padding: 2px;
}

table.comment td.meta {
        padding: 3px 0;
}

table.comment td#comments-buttons {
        text-align: right;
}

table.comment p {
        margin: 0;
}

table.comment input#comment_author,
table.comment input#comment_url,
table.comment input#comment_email,
table.comment textarea#comment_body {
        width: 485px;
        background-color: #F4F4F4;
        color: #555;
        border: 1px dashed #DDD;
        padding: 2px;
}

input#form-submit-button {
        background-color: #86868A;
        color: #FFF;
        border: none;
        padding: 2px;
}

input#form-submit-button:hover {
        background-color: #46464A;
        color: #FFF;
        border: none;
        padding: 2px;
}

table.comment textarea#comment_body {
        height: 140px;
}

.light-bg {
        background: #F727F7;
        padding: 2px;
}

#errors {
        color: red;
}

/* Sidebar */
#sidebar h3 {
        margin-top: 10px;
        font-size: 0.8em;
}

#sidebar ul {
        margin: 0;
        padding: 0 0 0 20px;
        list-style-type: square;
}
         
#sidebar ul li { 
        margin: 0 0 2px 0;
        font: 0.8em Verdana, Helvetica, sans-serif;
}

#sidebar ul li em {
        font-size: 8px;
        font-style: normal;
}
          
#sidebar #flickr div img {
        border: 2px solid #FFF;
}
         
#sidebar #flickr div {
        width: 108px;
        margin-bottom: 5px;
}

#sidebar #flickr div.flickrsquare { 
        display: inline;
        width: 82px;
}

#sidebar #flickr div a {
        border: none;
}

#sidebar #flickr div a:hover {
        border: none;
        color: #FFF;
        border-bottom: 1px solid #AAF100;
}

#sidebar div#pagemeta {
        margin-top: 10px;
}

#sidebar div#pagemeta h4 {
        margin-bottom: 0;
}

#sidebar div#pagemeta ul {
        list-style-type: none;
        margin: 3px 0 5px 0;
        padding: 0;
}

#sidebar div#pagemeta ul li {
        margin: 0;
        padding: 1px 0;
}

.post .admintools {
        float: left;
}

.admintools {
        float: right;
        background-color: #FFF;
        font-size: smaller;
        padding: 0 2px;
        margin: 0;
        color: #CCC;
}

.admintools:hover {
}


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

#commentform textarea {
	width: 100%;
	padding: 2px;
	border: 1px solid #c2c2c2;
	}

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

/* Comments */
.alt {
	margin: 0;
	padding: 10px;
	border: 1px solid #cecece;
	}

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

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

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

#commentform p {
	margin: 5px 0;
	}

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

.commentmetadata {
	margin: 0;
	display: block;
	}

.commentlist li, #commentform input, #commentform textarea {
	font: 0.9em Verdana, Arial, Sans-Serif;
	}
	
.commentlist li {
	font-weight: bold;
	}

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

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

#commentform p {
	font-family: Verdana, Arial, Sans-Serif;
	}

.commentmetadata {
	font-weight: normal;
	}

im no guru, and im really struggling to make this lovely (ideal) wordpress theme mutli-resolution compatible.

i know its hard (most of the time) to make something, multibrowser/multires compatbile 100% through and through.

but this one should be simple.

at the minute its width is assigned by specific 'px' so at anything under 1280x1024 and anything over 1280x1024 the site looks stupid.

so im trying to define the width's using %, but struggling big time.

anyone willing to have a bash? or aid me in my ways?



above is how i want it to look, with percentages it should be possible.

but this is how it looks at default (http://www.ibeats.co.uk)

[mike_w]

A couple of things I noticed from taking a quite look:

- I wouldn't use that image repeated down the righthand side. Just setting the body background color will achieve the same effect, and be more flexible. You might need to adjust margins appropriately.

- Use relative measurements i.e. use em instead of px or pt.

Try taking a look here: http://www.glish.com/css/

And perhaps try this code:

/*
Theme Name: FundamentalBeats
Theme URI: http://www.ibeats.co.uk/
Design Name: FundamentalBeats
Description: Fundamental theme ported to Wordpress and customised by <a href="http://www.vini.co.uk">Vini</a> for <a href="http://www.ibeats.co.uk">iBeats.co.uk</a>
Version: 1.0
Author: Vini
Author URI: http://www.vini.co.uk
*/
/* Main Credit*/

/* Fundamental CSS by Martin Wulffeld, Customised for iBeats by Vini */

body {
        margin: 0;
        padding: 0;
        background-color: #FFF;
        font-size: 14px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color:#222;
/*        background: url('images/bgsidebar.gif') repeat-y;*/
}
        
h1, h2, h3, h4, h5, h6 {
        margin: 5px 0;
        font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
}

h1 {
        font-size: 21px;
}

h2 {
        font-size: 18px;
}

h3 {
        font-size: 14px;
}

h4 {
        font-size: 12px;
}

h5 {
        font-size: 11px;
}

h6 {
        font-size: 9px;
}

span,
p,
code,
pre,
li,
th,
td,
blockquote {
        font-size: 11px;
}

form, div {
        padding: 0;
        margin: 0;
}

p {
        margin: 0 0 1em 0;
        padding: 0;
}

img {
        margin: 0;
        padding: 0;
        border: none;
}

#page {
        float: left;
        margin: 0;
        padding: 0 5px 0 7px;
        text-align: left;
        background-color: #FFF;
	width:80%;
}

#header { 
        margin: 0;
        padding: 0;
        background-color: #2B2B2B;
        border-bottom: 10px solid #4CC4EE;
        border-bottom: 7px solid #EEE;
 /*      width: 510px;*/
}

#footer {
        margin: 0;
        padding: 0;
        height: 2em;
        background-color: #2B2B2B;
        border-top: 7px solid #598371;
/*        width: 510px;*/
        color: #ffffff;
}

#main { 
/*        width: 490px;*/
        border-bottom: none;
        padding: 0;
        margin: 15px 10px 5px 10px;
}

#sidebar {
        height: 1px; /* Fixes IE bug. */
        margin: 0 0 0 520px;
        padding: 15px 14px 15px 24px;
        color: #FFF;
}

#header h1#sitename {
        margin: 0;
}
     
#header h1#sitename a,
#header h1#sitename a:hover {
        display: block;
        color: #FFF;
        padding: 30px 10px 4px 10px;
        font-size: 1.2em;
        border: none;
        text-align: right;
}

#header h4#subtitle {
        color: #FFF;
        padding: 4px 10px 6px 10px;
        background-color: #598371;
        margin: 0;
        text-align: right;
}

#page a {
        color: #598371;
        text-decoration: none;
        border-bottom: 1px solid #598371;
}
        
#page a:hover {
        color: #FFF;
        background-color: #598371;
        border-bottom: 1px solid #598371;
}

#sidebar a {
        color: #598371;
        text-decoration: none;
        border-bottom: 1px solid #598371;
}
        
#sidebar a:hover {
        color: #FFF;
        border-bottom: 1px solid #365A49;
}

#sidebar p {
        margin: 0 0 5px 0;
}

#search #sform {
        padding: 5px 3px;
}
 
/* Apparently search borks if font-size is specified here. */
#search #q {
}

.post {
        margin: 0 0 5px 0px;
        padding-bottom: 10px;
}

.post h2.articletitle {
        text-align: right;
}

.post table {
        margin: 5px 0;
        padding: 0;
}

.post thead td {
        background-color: #555;
        color: #FFF;
        font-size: 0.8em;
        padding: 1px 3px;
        margin: 0;
}

.post tbody td {
        background-color: #DDD;
        color: #222;
        font-size: 0.8em;
        padding: 1px 3px;
        margin: 0;
}

.post p {
        line-height: 1.6em;
}
        
#page .post span.typo_date {
        font-size: 1em;
        text-transform: uppercase;
        text-align: right;
}

.post p.meta {
        text-align: right;
        color: #666;
        font-size: 0.6em;
        text-transform: uppercase;
}

.post p.author {
        display: block;
        padding: 2px 0 0 0;
        font-size: 0.6em;
        margin: 0;
        color: #999;
        text-align: right;
        border-top: 1px dashed #A2DFFC;
        text-transform: uppercase;
}

.post ul.postmetadata {
        text-align: right;
        margin: 0 0 10px 0;
        padding: 0;
        list-style-type: none;
        font-size: 0.7em;
}

.post ul.postmetadata li {
        text-transform: uppercase;
        display: inline;
        font-size: 0.9em;
}

.post table {
        margin: 5px 0;
        padding: 0;
}

.post thead td,
.post th {
        background-color: #FF6600;
        color: #FFF;
        border: 1px solid #EE5500;
        padding: 1px 3px;
        margin: 0;
}

.post tbody td,
.post td {
        background-color: #EEE;
        color: #222;
        border: 1px solid #DDD;
        padding: 1px 3px;
        margin: 0;
}

blockquote {
        font-style: italic;
        border-top: 2px solid #598371; border-bottom: 2px solid #598371;

}

code {
        display: block;
        background-color: #F4F4F4;
        border: 1px solid #E4E4E4;
        margin: 3px;
        padding: 5px;
}

ol.comment-list {
        list-style-type: none;
        margin: 0 0 30px 0;
        padding: 0;
}

ol.comment-list li {
        border-bottom: 1px dashed #598371;
        padding:  0 0 5px 0;
        margin: 0 0 10px 0;
        color: #222;
}

ol.comment-list li h4.commentauthor {
        margin: 0 0 8px 0;
        padding: 2px 4px;
        background-color: #598371;
        color: #FFF;
}

#page ol.comment-list li h4.commentauthor a {
        color: #FFF;
        text-decoration: none;
        border-bottom: 1px solid #FFF;
}

#page ol.comment-list li h4.commentauthor a:hover {
        color: #598371;
        background-color: #FFF;
        text-decoration: none;
        border-bottom: 1px solid #FFF;
}

ol.comment-list li div.commentbody {
        padding: 0 4px 4px 4px;
}

h4.blueblk {
        padding: 5px 0;
        margin: 10px 0;
        border-bottom: 1px dashed #DDD;
        color: #AAA;
}

table.comment {
        padding: 2px 0px;
}

table.comment td {
        vertical-align: top;
        padding: 2px;
}

table.comment td.meta {
        padding: 3px 0;
}

table.comment td#comments-buttons {
        text-align: right;
}

table.comment p {
        margin: 0;
}

table.comment input#comment_author,
table.comment input#comment_url,
table.comment input#comment_email,
table.comment textarea#comment_body {
        width: 485px;
        background-color: #F4F4F4;
        color: #555;
        border: 1px dashed #DDD;
        padding: 2px;
}

input#form-submit-button {
        background-color: #86868A;
        color: #FFF;
        border: none;
        padding: 2px;
}

input#form-submit-button:hover {
        background-color: #46464A;
        color: #FFF;
        border: none;
        padding: 2px;
}

table.comment textarea#comment_body {
        height: 140px;
}

.light-bg {
        background: #F727F7;
        padding: 2px;
}

#errors {
        color: red;
}

/* Sidebar */
#sidebar h3 {
        margin-top: 10px;
        font-size: 0.8em;
}

#sidebar ul {
        margin: 0;
        padding: 0 0 0 20px;
        list-style-type: square;
}
         
#sidebar ul li { 
        margin: 0 0 2px 0;
        font: 0.8em Verdana, Helvetica, sans-serif;
}

#sidebar ul li em {
        font-size: 8px;
        font-style: normal;
}
          
#sidebar #flickr div img {
        border: 2px solid #FFF;
}
         
#sidebar #flickr div {
        width: 108px;
        margin-bottom: 5px;
}

#sidebar #flickr div.flickrsquare { 
        display: inline;
        width: 82px;
}

#sidebar #flickr div a {
        border: none;
}

#sidebar #flickr div a:hover {
        border: none;
        color: #FFF;
        border-bottom: 1px solid #598371;
}

#sidebar div#pagemeta {
        margin-top: 10px;
}

#sidebar div#pagemeta h4 {
        margin-bottom: 0;
}

#sidebar div#pagemeta ul {
        list-style-type: none;
        margin: 3px 0 5px 0;
        padding: 0;
}

#sidebar div#pagemeta ul li {
        margin: 0;
        padding: 1px 0;
}

.post .admintools {
        float: left;
}

.admintools {
        float: right;
        background-color: #FFF;
        font-size: smaller;
        padding: 0 2px;
        margin: 0;
        color: #CCC;
}

.admintools:hover {
}


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

#commentform textarea {
	width: 100%;
	padding: 2px;
	border: 1px solid #c2c2c2;
	}

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

/* Comments */
.alt {
	margin: 0;
	padding: 10px;
	border: 1px solid #cecece;
	}

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

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

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

#commentform p {
	margin: 5px 0;
	}

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

.commentmetadata {
	margin: 0;
	display: block;
	}

.commentlist li, #commentform input, #commentform textarea {
	font: 0.9em Verdana, Arial, Sans-Serif;
	}
	
.commentlist li {
	font-weight: bold;
	}

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

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

#commentform p {
	font-family: Verdana, Arial, Sans-Serif;
	}

.commentmetadata {
	font-weight: normal;
	}

I just commented out some of the fixed widths, got rid of the repeating picture and set the width of #page to 80%. Obviously, you'll need to tinker a bit more than I did! (Assuming that works as you want)

Personally, I would set the width of the menu to so many units em so that the look is based upon text size rather than screen width. Of course, that requires a bit more effort.

[Vini]

Thats pretty darn tooting spot on.

[mike_w]

It needs some editing for Internet Explorer though. At narrow resolutions (e.g. 800px), the navigation gets knocked down below the main page. Two ways I can think of solving it:

- Make #page narrower e.g. 70% (quick, but not great)

- Make #sidebar float to the right and stick it inside #main. A much better solution, but it will take more time.

[Vini]

any ideas on getting the footer to stick to the bottom of the window at all times, it isnt at the minute and looks pap ala archives

[mike_w]

If you mean stuck to the actual bottom of the window then no, I don't know of a way. The best compromise I found was just to have stuck on the bottom of the main div, and then use max-height for the main div. Naturally, such a solution doesn't work for Internet Explorer users, but I've really stopped caring about Internet Explorer for such small issues.

[Vini]

If you mean stuck to the actual bottom of the window then no, I don't know of a way. The best compromise I found was just to have stuck on the bottom of the main div, and then use max-height for the main div. Naturally, such a solution doesn't work for Internet Explorer users, but I've really stopped caring about Internet Explorer for such small issues.

i dont care about ie users much either, so how would i fix it to the main div?

[mike_w]

(Max height? What am I talking about? I meant min height. I'm must be getting stupider with age. Actually, on second thoughts, I've always been this stupid!)

You just set the min-height attribute of an appropriate div e.g. #main, or #page.

For example, this:

#main{
	min-height:30em;
}

would set the the height of the div #main to 30em or greater. Obviously, the footer sits below the div #page, so would be pushed down if #main, and by extension #page, is taller.