Any help with this layout problem? Any pointers by WP pros would be appreciated…
Those are some pretty broad questions, almost like you are looking for basic html and css instructions. There are plenty of free resources on the web for that – if you could at least give us a link to your site in progress we could help drill down to the specific problems.
Thanks Gary… I apologize if I wasn’t being clear… This is the development site:
http://wptest.gadgetwebdesign.com/
What I want to do is move the portion of each post above the image (the title and date/author lines) below the image. Moved right above the “Posted in Uncategorized | Leave a comment” line.
Is that possible, and what files would I edit (and what blocks of code would I move if any) to accomplish this?
In case even that wasn’t clear, this is what I am trying to accomplish:
http://wptest.gadgetwebdesign.com/wp-content/uploads/2012/03/fakescreen.gif
I did this in photoshop based on my current design.
Nice looking design – this one isn’t too difficult, it can be accomplished with a small amount of CSS. Try this:
.art-postheader, .art-postheadericons {
position: relative;
top: 450px;
}
.art-postcontent {
position: relative;
top: -50px;
}
Relative positioning takes elements out out the normal html flow and repositions them relative to their parent element. So by adding top: 450px you are moving the element down 450px from the top, relative to where it would normally show up. A negative top number moves it up from where it would normally be. You can experiment with left, right, and bottom to get the desired placement.
Sweet! Thanks… though I notice when I go to the post page (by clicking on the title) the comments rise too high and it gets crowded (i fixed that by adjusting the margin on art-postmetadatafooter) and the image rises all the way to the top of the sheet:
http://wptest.gadgetwebdesign.com/?p=23
What would I edit to make sure the image still has some white space above it on the single post page (http://wptest.gadgetwebdesign.com/?p=23) ?
Sounds like you are fairly confident with CSS now, so let’s get you some tools that will allow you to tweak things in your browser and see the changes immediately.
Chrome, Firefox, Safari, and even IE have add-ons called Developer Tools. These allow you to click on an element, see the html structure around it, view and change (locally) the CSS that styles it. You can keep playing with it until you get it right, then copy the results to your style sheet.
Do a search for Developer Tools in your favorite browser and pretty soon you’ll be answering these questions for the newbies!
The short answer to your question is too make the negative number a little smaller:
.art-postcontent {
position: relative;
top: -20px;
}
But where is the fun in a short answer?
Wooot! Thanks so much… played around with Firebug for Chrome and I’m able to adjust all my elements. Thank you so much for all your help!
Great, why don’t you mark this one as ‘resolved’. And welcome to the dark side!
Oops… maybe not 🙁
I notice that now the placement of the post title, metadata, and post icon lines get all goofed up if the image is not the exact size. And on created pages, the title doesn’t show up (which is no biggie since that can be faked with H2 tags)
See: http://wptest.gadgetwebdesign.com/
The first post at the top is fine (with the image being 550px)… but subsequent posts where the image is NOT at least 550px high, the post title does not appear in the correct space.
Is there a way to automatically place the post title and other two lines (postheadericon, postfooter icons, etc) to fall automatically below the content area?
Well, that didn’t work out and I convinced my client that since she’ll have different sized (height) images in her blog, it would be easier if she didn’t try to change the positioning so much…
But is it possible to move JUST the “Posted in Uncategorized | 1 Comment” line to sit right next to the “Published March 10, 2012 | By Admin” ?
So all the meta data is on one line?
Closing this thread and opening a new one to ask about moving all the metadata into one line.
