Help with CSS and WP layout

[quickfire84]

Ok, so im making a wordpress layout. Everything is working well but my main content float and sidebar float. For some reason All my Blog posting are posting horiztonal and not vertical?? The post are in main-col which is float: left but they stretch across and push my sidebar which float:right down?

A image is attach to see what i mean: (would link but working on home server) the advertisement image is in my sidebar just so you know.

[attachment=0]example.jpg[/attachment]

I put the php code on index file between divs with id of main-col

and put the image inbetween div’s on sidebar.php id: sidebar.

here is my css code:

Code:

/*
ARTHUR: Chris Cardarello
http://www.moppieillusions.com

Colors[orange: fcb201 ]
[dark grey: 4e4e4d ]
[light grey: 9d9d9d ]

*/

* {margin : 0;padding : 0;}
html { overflow-y: scroll; }
html, body { height: 100%; }
body {
text-align : center;
font-size : 62.5%;
font-family : Arial, san-serif; color: black;
background : url(images/topbg.jpg) top center repeat-x white;}
ul {list-style : none;}
ol {list-style : decimal;}
img {vertical-align : middle;}
p {font-size : 1.2em;}
a {outline : none; text-decoration : none;}
a img {border : none;}
table { border-collapse: collapse; }

/*utilities*/
.clear {clear : both;}
.floatleft {float : left;}
.floatright {float : right;}
.button {
border : 1px solid #fcb201;
background : white;
padding : 3px 0;
}
.button:hover {
background : #fcb201;
color : white;
}

/*Structure*/
#main-col { width: 520px; ; float: left; margin-right: 15px; }
#sidebar { width: 270px; ; float: right; }

/*page-wrap settings*/
div#page-wrap {
width : 850px; margin : 0px auto -250px;
min-height: 100%; height: auto !important: height: 100%;
text-align : left;
}

/*bgfader image settings*/
div#bg-content{
width : 850px; margin : 0px auto;
height: 456px;
text-align : left;
background: url(images/bodybg.png) no-repeat;
}

/*wrapcontent settings*/
div#wrap-content{
width : 785px; margin : 0px auto;
text-align : left;
}

/*advertisement area*/
#ads{
width: 224px;
height: 100%;
}

/*sticky footer settings*/
#push{ height: 250px; }

/*header setting*/
div#header {
width : 850px;
height : 128px;
background : url(images/header.jpg) no-repeat;
}

/* NAVIGATION SYSTEM SETTINGS */
ul#nav {list-style : none;}

ul#nav li {
width: 850px;
display: inline;
}

ul#nav li a {
display: block;
height : 66px;
text-indent : -9999px;
float : left;
}
ul#nav li.home a {
height : 66px; width:156px;
background : url(images/homebutton.jpg) no-repeat bottom center;
}
ul#nav li.about a {
height : 66px; width: 118px;
background : url(images/aboutbutton.jpg) no-repeat bottom center;
}
ul#nav li.services a {
height : 66px; width: 137px;
background : url(images/servicesbutton.jpg) no-repeat bottom center;
}
ul#nav li.portfolio a {
height : 66px; width: 146px;
background : url(images/portfoliobutton.jpg) no-repeat bottom center;
}
ul#nav li.quote a {
height : 66px; width: 115px;
background : url(images/quotebutton.jpg) no-repeat bottom center;
}
ul#nav li.contact a {
height : 66px; width: 178px;
background : url(images/contactbutton.jpg) no-repeat bottom center;
}
/*end nav settings*/

/*Navigation Hover State*/

ul#nav li a:hover{
background-position: center center;
}

[apostrophe]

I don’t see any rules for the post divs?

[quickfire84]

Ok, so i added a .post class with same width as main-col and in set post vertical just with no space between each other but, my sidebar is still at bottom of page? I even try’d to float the post class left but can’t get the sidebar along side it up top.

Code:

#main-col { width: 520px; float: left;}
#sidebar { width: 230px; float: right;}

.post {width:520px; float: left;}

[apostrophe]

Without a link it’s difficult to say. Have you validated your html?

[quickfire84]

Ok i got it fixed for now lol, um one question though my buttons have three state the third is a clicked state, how do you make it so once clicked and it goes to page it stays on clicked state?

[quickfire84]

Ok along with my question above^^ I have another, in FireFox, and Chrome the advertisement image is at top right of body, but in IE its not anyway to fix? and in Chrome my dropshadow works for the blog post h2, but not in FireFox or IE, anyway of getting it too work in those?

heres line finally got it live: http://moppieillusions.com/

[AshtonSanders]

"quickfire84" wrote:

Ok i got it fixed for now lol, um one question though my buttons have three state the third is a clicked state, how do you make it so once clicked and it goes to page it stays on clicked state?

If you are using the WordPress list pages function it will add the class of "current_page_item" so just apply the "clicked" background image to that class.

Does that make sense?

"quickfire84" wrote:

Ok along with my question above^^ I have another, in FireFox, and Chrome the advertisement image is at top right of body, but in IE its not anyway to fix?

I’d start with validating your HTML: http://validator.w3.org/check?verbose=1 … ons.com%2F
and your CSS: http://jigsaw.w3.org/css-validator/vali … ons.com%2F

"quickfire84" wrote:

and in Chrome my dropshadow works for the blog post h2, but not in FireFox or IE, anyway of getting it too work in those?

That drop shadow is part of CSS 3, and not viewable in most people’s browser.

[quickfire84]

Ok, i didnt do html yet but i put the validated css in and it total screwed the layout up.. lol…

[apostrophe]

Oh dear. :?
Non validating html aside your page structure is totally screwed up.
The sidebar needs to be inside the #wrap-content div and all of the posts should be inside the #main-col div and not just the first one.

[quickfire84]

Wow, lol sorry i should of done that don’t know why i didn’t but now all post and side bar are inside the wraps, but now if you look the ads image is in correct side just not at top.

[quickfire84]

Nevermind!!!! i got it!! lol thank you, oh i have another question.. i never made a three state button, so how do i add that clicked state too it ? just like i did hover?

Oh and how do i get a line break between post is that somewhere in settings?

[apostrophe]

I would have used wp_list_pages or the new wp_page_menu to create my nav, that way all the neccessary classes are added dynamically. By hard coding the navigation you will have to use something like this http://www.problogdesign.com/wordpress/get-total-control-over-your-page-styles-with-css/

What line break?

[quickfire84]

If you look at the posting there is no real space between them, how can i make that space a little bigger

[apostrophe]

Give div.post a bottom margin.

[quickfire84]

Ok i Got the tabs to work, the only thing that is broken now is my ad image on every page except the index one.

Think i have to link the whole url of this image in the sidebar.php instead of just images/ thats what ill try and see if it works

Thanks for all the help…

[Author]

Posts