Runescape Bits & Bytes
https://www.rsbandb.com/forums/

Site CSS help
https://www.rsbandb.com/forums/viewtopic.php?f=14&t=80098		 Page 1 of 1
Author:  Sev [ November 17th, 2010, 11:51 am ]
Post subject:  Site CSS help
I think this goes here, but it fits better anywhere else, please move it :)

So I've been designing a blog site, following a tutorial partially, hand coding essentially everything. Everythings done, except I have one small error. If you look at the site (http://jwblog.hvfbla.com) between the main blog entry column and the widget column, theres no spacing. Yes there should be a 20 px spacing. When I Make the Blog column smaller, the widget column makes itself bigger, and vise versa. I disabled all widget as well, thinking that might be the problem, but no avail.

Heres the CSS code, maybe you guys can help.
Spoiler for Wall of CSS:

/* Reset */

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, code, img,
small, strong, dl, dt, dd, ol, ul, li,
fieldset, form, label {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1.5;
font-family: helvetica, arial, sans-serif;
}
ol, ul {
list-style: none;
}

/* End Reset */

h2 {
font-size: 27px;
}

p {
font-size: 14px;
}

a {
text-decoration: none;
color: #4e4e4e;
font-size: 14px;
}

a:hover {
text-decoration: underline;
}

input {
background: #696969;
border: 1px solid #c3c3c3;
color: #cbcbcb;
padding: 3px;
}

input:focus, input:hover {
background: #ededed;
color: #4e4e4e;
}


/* Main Styles */

body {
background: #f2f2f2 url(img/bg.jpg) repeat-x;
}

#wrap {
width: 960px;
margin: auto;
}

#header {
position: relative;
}

#header h1 {
background: url(img/logo.png) no-repeat;
width: 169px;
height: 71px;
text-indent: -9999px;
float: left;
position: relative;
top: -12px;
}

#header h1 a {
width: 169px;
height: 71px;
display: block;
}

/* Navigation */

#header ul {
overflow: hidden;
padding-left: 83px;
}

#header ul li {
float: left;
padding-left: 40px;
margin-right: 40px;
margin-top: 20px;
}

#header ul li a {
color: #cbcbcb;
font-size: 16px;
position: relative;
top: -7px;
left: 3px;
}

#header ul li a:hover {
text-decoration: none;
color: white;
}

#header ul li#home {
background: url(img/nav/home.png) no-repeat;
width: 31px;
height: 34px;
}

#header ul li.page-item-2 {
background: url(img/nav/camera.png) no-repeat;
width: 37px;
height: 36px;
}

#header ul li.page-item-10 {
background: url(img/nav/contact.png) no-repeat;
width: 35px;
height: 31px;
}

/* Search Box */

#header #search {
width: 270px;
height: 66px;
position: absolute;
right: 0;
top: 5px;
background: url(img/searchicon.png) no-repeat;
}

#header #search img {
position: absolute;
right: 0; top: 0;
}

#header #search input#s {
width: 130px;
margin-left: 44px;
}

#header #rss {
float: right;
margin: 0; padding: 0;
}

#rss img {
width: 30px;
padding-right: 1px;
margin-top: 13px;
}

#header p#slogan {
font-size: 2em;
margin: 28px 0 51px 0;
float: right;
background: url(img/slogan.png) no-repeat;
width: 544px;
height: 38px;
text-indent: -9999px;
border-right: 1px solid white;
padding-right: 50px;
}

/* Main Content */

#main {
clear: both;
overflow: hidden;
}

#main #primary {
float: left;
width: 610px;
}

#main #sidebar {
float: right;
width: 250px;
}

#main #primary .post-item,
#page_content {
background: #fafafa url(img/postBG.jpg) repeat-x;
margin-bottom: 28px;
border: 1px solid white;
border-right: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-raidus: 5px;
position: relative;
overflow: hidden;
padding-right: 40px;
padding-left: 30px;
padding-bottom: 20px;
}

.post-item img {
float: left;
margin: 30px 20px 30px 0;
padding: 4px;
border: 1px solid #aBaBaB;
}

#primary h2 {

letter-spacing: 1px;
font-weight: normal;
padding-right: .5em;
line-height: 32px;
margin-bottom: .2em;
}

.post-item h2 {
padding-top: 30px;
margin-bottom: 0px;
}

.post-item h2 a {
font-size: 27px;
}
.post-item p.meta {
background: #9c2323;
color: white;
font-size: 11px;
font-style: normal;
padding: 4px;
margin-left: 230px;
margin-bottom: 1.6em;
width: 170px;
height: 15px;
line-height: 15px;
min-width: 100px;
text-align: center;
border-top: 1px solid #750d0d;
border-left: 1px solid #750d0d;
border-right: 1px solid #bc3d3d;
border-bottom: 1px solid #bc3d3d;
}

.post-item p {
color: #7e7e7e;
font-style: italic;
margin-bottom: 1.2em;
margin-left: 230px;
font-size: .8em;
}

.single .post-item p {
margin-left: 0;
}

/* More Link */

a.more-link {
background: #e1e1e1;
padding: 6px;
color: #696969;
border: 1px solid #a4a4a4;
font-size: .9em;
height: 15px;
line-height: 15px;
width: 70px;
min-width: 70px;
text-align: center;
}

div.numComments {
background: url(img/numComments.png) no-repeat;
height: 38px;
width: 43px;
line-height: 38px;
position: absolute;
right: 15px;
top: 13px;
text-align: center;
}

/* Next Previous Buttons */

#morePrev a {
background: url(img/NextPrevButton.jpg) no-repeat;
padding: 8px;
color: white;
font-size: 12px;
line-height: 12px;
font-style: italic;
float: right;
border: 1px solid white;
border-left: none;
border-bottom: none;
}


/* Side */

.widget {
background: #fafafa url(img/postBG.jpg) repeat-x;
border: 1px solid white;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-right: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
margin-bottom: 28px;
padding: 8px;
overflow: hidden;
margin-left: 20px;
}

.widget h2 {
background: #5b5b5b;
color: white;
margin: 4% 0;
font-size: 12px;
font-weight: normal;
padding: 3px 0 2px 8px;
border: 1px solid white;
border-right: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
}

.widget a {
font-size: 12px;
}

.widget ul li {
padding: 3px 0;
line-height: 22px;
border-bottom: 1px solid white;
border-top: 1px solid #ececec;
}

.widget ul li:first-child,
border-top: none;
}

.widget ul li:last-child,
border-bottom: none;
}

.widget ul li a {
font-size: 12px;
}

/* Single */

body.single div.post-item p {
font-style: normal;
}

.single div.post-item ul {
margin: 1em 0;
color: #7e7e7e;
}

.single div.post-item li {
padding-left: 1em;
margin-left: 2em;
list-style: disc;
line-height: 2em;
}

.single .post-item p.meta {
margin-left: 230px;
}

/* Page Content */

#page_content h2 a {
color: black;
}

#page_content h2 {
margin: 1em 0;
}

#page_content h3 {
margin: 1em 0;
}

#page_content {
padding-bottom: 20px;
}

pre {
margin: 2em 0;
overflow: auto;
}

/* Comments Template */

#comments_template {
margin-top: 2em;
background: #ededed;
border: 1px solid white;
border-right: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
clear: both;
margin-bottom: 28px;
overflow: hidden;
padding-right: 40px;
padding-left: 30px;
padding-top: 30px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-raidus: 5px;
position: relative;
}

#comments_template input {
background: white;
margin-right: 10px;
}

#comments_template li {
clear: left;
border-bottom: 1px solid #d3d3d3;
border-top: 1px solid white;
padding: 2em 0;
overflow: hidden;
}

#comments_template li:first-child {
border-top: none;
}

#comments_template li.last-child {
border-bottom: none;
}

#comments_template .avatar {
float: left;
margin-right: 25px;
background: #afafaf;
border: 1px solid white;
border-right: none;
border-bottom: none;
padding: 4px;
}

.main_comment {
background: white;
margin-left: 133px;
padding: 15px;
position: relative;
}

.main_comment span.arrow {
width: 0;
height: 0;
line-height: 0;
border-bottom: 25px solid #ededed;
border-right: 20px solid white;
position: absolute;
top: 10px;
left: -20px;
}

/* Post Styles */

.single div.tutorial_image img{
border: none;
text-align: center;
border: 1px solid white;
background: #6a6a6a;
padding: 1px;
margin: 1em 0;
}

.tutorial-image img {
float: none;
max-width: 600px;
}
Author:  Adbot [ November 17th, 2010, 11:51 am ]
Post subject:  Register and login to get these in-post ads to disappear
Author:  addiv [ November 17th, 2010, 3:19 pm ]
Post subject:  Re: Site CSS help
Try changing this:

#main #primary {
float: left;
width: 610px;
}

to this:

#main #primary {
float: left;
width: 610px;
padding-right: 20px;
}
Author:  Chief Snake [ November 17th, 2010, 9:00 pm ]
Post subject:  Re: Site CSS help
Addiv's code will work perfectly.

Your Twitter link has three T's in the "http" part of it. :D Just thought I would point that out because Firefox didn't know what to do with it.

I would make your timestamp span the whole width of the post box if I were you (you can do this simply by removing its width property), or make it inline and change a few other properties to make it expand to fit the text inside it. Apart from this I saw no flaws. Nicely done. :)

Edit:

Image

It might not affect anything at the moment, but you could run into problems if you don't put those <li> elements inside your <ul id="sidebar">. ;)
Author:  Sev [ November 19th, 2010, 1:15 pm ]
Post subject:  Re: Site CSS help
addiv wrote:
Try changing this:

#main #primary {
float: left;
width: 610px;
}

to this:

#main #primary {
float: left;
width: 610px;
padding-right: 20px;
}


Thanks a lot! That fixed it :)


Chief Snake wrote:
Addiv's code will work perfectly.

Your Twitter link has three T's in the "http" part of it. :D Just thought I would point that out because Firefox didn't know what to do with it.

I would make your timestamp span the whole width of the post box if I were you (you can do this simply by removing its width property), or make it inline and change a few other properties to make it expand to fit the text inside it. Apart from this I saw no flaws. Nicely done. :)

Edit:

[img*]http://bradpad.co.nz/crate/1290052992.png[/img]

It might not affect anything at the moment, but you could run into problems if you don't put those <li> elements inside your <ul id="sidebar">. ;)


Fixed the twitter and the time stamp, looks a lot better, thanks :)

Also I fixed the ul and messed up my padding for some reason, I fixed it but now my twitter icon wont float right and I have no idea whyyyy. :(
Page 1 of 1 All times are UTC - 7 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/