Creating a two column static home page
-
Hi good people :)
I have searched through these forums and google and have found a few html codes etc which enables you to split a single column page into two… one of the most successfull were found upon http://wpbtips.wordpress.com/2009/06/10/formatting-text-pt-1/
This brings me to my question, I am only trying this type of layout for my static ‘home’ page and have been bumping into a few problems.
I am wanting the two images on the right hand side of the page to stay where they are (any hints on how to close the height gap between the two would be great)
Other than that i can use the html code to edit this post into a two page layout but it cramps the pics on the left hand side all over the place, and i would like the text to be aligned underneath the ‘home’ tab as to align the text in the first column more to the left hand side of the page to get rid of the white space and to create space for a second column…hope that makes sense…. any ideas?
Dave.
The blog I need help with is: (visible only to logged in users)
-
i have amended the html to show as a two column format, but now my main text is apearing half way down the page.. and the bottom picture has jumped in the page to the left instead of staying aligned underneath the other one on the right hand margin…
the two column text would ideally be aligned with each other aswell instead of being at different heights.any help would be greatly appreciated :)
Thanks.
-
Please post a link starting with http:// to the exact post or page you are having issue with.
-
-
yeah there not ‘columns’ but more like split into 3 sections with the main text i want one, the red text being another and the images/captions being aligned to the right hand side of the page.
-
reading back through this iv made things sound overly complicated.
what i am looking for is a way to place the image of the ‘western front association’ logo underneath the ‘commonwealth wargraves commission’ logo so that the red text starting with ‘urgent…’ is moved up.
-
Things will become a lot simpler if you activate the sidebar on that page. Then you can add the images to the sidebar, using code in a text widget, and the text on the main column will be very easy to arrange.
Step 1: go to Appearance > Theme Options and select the “Content on left” layout (if it isn’t already selected).
Step 2: edit the page and select the Sidebar layout from the pulldown in the Page Attributes module. -
Hi Justpi,
many thanks for the advice, i have done as you said and it, as you say worked as i wanted and is alot simpler :) Thanks!!
One other thing there is a grey line near the bottom of my page as if part of the bottom of a table or something? have looked in html view and cant see where its coming from… any ideas on how to hide this line?Thanks again.
-
You’re welcome.
The grey line is part of the theme: it marks the end of the content of the page.
The coding of your page isn’t correct. Among other things, you’ve got multiple tags where one would do. Check these pots of mine:
http://wpbtips.wordpress.com/2012/02/05/introduction-to-html-for-wordpress-com-users/
http://wpbtips.wordpress.com/2009/07/11/formatting-text-pt-5/
See what you can figure out after studying these posts, and tomorrow I’ll be back with more details. -
-
a) The h tags are used for actual headings only, not to style any block of text (first because the styling varies from theme to theme, second because h tags have a meaning for search engines and screen readers).
b) When you wish to apply various changes to the same block of text, you add all the properties and values to the style attribute of one HTML tag. Instead of this:
<p style="text-align:center;"><span style="color:#ff0000;">Currently (March</span><span style="color:#ff0000;"> 2012) the site is being built and populated. Please call back to see future developments.</span></p>You need this:
<p style="text-align:center;color:#f00;">Currently (March 2012) the site is being built and populated. Please call back to see future developments.</p>Same thing for the boxed block: instead of a div tag pair with margins, enclosing a div tag pair with border, bg color and padding, enclosing an h1 pair with text alignment, you only need one div pair with all those commands together.
c) As I said, the grey line isn’t part of the content of the page, it’s part of the theme: it’s the divider line that marks the end of the page. You can’t change it without the paid Custom Design upgrade.
So, instead of worrying about the grey line and the excessive left and right margins, why don’t you look for a better theme?
- The topic ‘Creating a two column static home page’ is closed to new replies.
WordPress.com Forums 