Hookturn

Thanks Andrew 🙂

I deleted the div #sbar because the validator found that the code I’d used for it was invalid. I narrowed .slideshow and #container because I want the side bar to be next to them, but within wrapper so they need to be thinner to make room. Right now it seems that if .sidebar is inside #container.clear it cannot be next to the slideshow.

I want it to display like this:
http://i49.tinypic.com/2lximv6.png

I can use css to move the sidebar, but when I use position: absolute tags, it doesn’t display consistently in the index and post pages.

I don’t think I can do that because the css sheet isn’t in an html structure and this theme doesn’t have an html stylesheet. It’s one of the reasons I’m finding it more difficult, I’ve dealt with css that links to an external stylesheet before (I’ve put an example of my stylesheet below) but the external sheet has always been written predominately in HTML structure.

My code looks like this:

`body {font: 62.5% Georgia, Geneva, “Times New Roman”, times; background: #27292a url(“images/line.png”) 50% 0 no-repeat; padding: 24px 0;}
.clear:after {content: “.”; display: block; height: 0; clear: both; visibility: hidden;}
.left {float: left;}
.right {float: right;}`

.wrapper {width: 975px; background: #fff; margin: 0 auto; position: relative;
}
#container {padding: 10px 0 10px;}

//**Then there is the header and nav code***//

#slideshow, .slideshow {height: 270px; width: 680px; overflow: hidden; position: relative; border-bottom: 1px solid #d9d9d9;
}

.slide {height: 270px; width: 680px; background: #ffffff;}
.slide img {display: block; float: left; width: 420px; height: 270px; position: relative;top: -20px; left: -30px;}`
.slide .post {padding: 20px 30px 0; height: 250px;`
}
.slide .post-category {font-size: 11px; color: #d9d9d9; text-transform: uppercase; margin-bottom: 5px;}
.slide .post a {color: #000;}
.slide .post .post-category a {text-decoration: none;} etc. etc.

Hi Andrew, thanks for the suggestion that I use a child theme, I saved a backup of the original style.css so I should be able to transfer my changes into a new child theme.

Sorry I wasn’t clear before in my post, I’ll try and explain again:

1. What I meant was that while all the sidebar was positioned correctly for the browser window size, when I made the browser wider, a gap appeared between the main content and the side bar, which was apparent as there was a gap between the top and bottom borders of the “lastest entries” heading on the home page and the left hand border of the sidebar (that gets bigger the wider the browser window is). Furthermore, if the browser is made narrower, the borders intersect.

This also occurs in chrome, and furthermore the sidebar is too high up and off to the left (it still looks correct in espresso’s browser when the window is resized).

2.

In what instance isn’t the sidebar left border connected?

If a post gets beyond a certain length (eg. this one: http://hookturnmelbourne.com/ipsum/) the sidebar does not expand so that it always spans from the navigation bar to the footer (which I would like it to do). If the post is a shorter one however, (eg. http://hookturnmelbourne.com/hello-world/) Then it is too big. I think the latter is partially a result of my hiding the pagenav and comment sections using the code ‘display: none;’ (comments are disabled) but not having have been able remove them entirely.

3. The issue here is that the soical sharing links seem to be tied to the particular div they are in, via php. No matter where I move their code in the stylesheet, or what values I fit in for their absolute positioning, they stay in that little div. I tried creating a new div that would display directly underneath the main content of a post, however this didn’t work at all.