Halving a static page in two columns Twenty Eleven
-
Hi there
Is there a way to include some content on the left hand side of the Twenty Eleven home page, and more content on the right hand side? This would create something similar to 2 distinct columns. I’ve seen that you can import from words, but am not too convinced by how it looks. I recall seeing it is possible to include a horizontal dividing line. Is something similar doable vertically?
Any tips would be useful.
many thanks
The blog I need help with is: (visible only to logged in users)
-
There isn’t a way to setup columns to break up content inside content areas using CSS only.
Within an individual post, you could do that with some html table code. In fact, it looks like you’ve done that already which I can see at http://mtromme.wordpress.com/
-
Hi, thanks for your response. Yes, I think that’s the best solution. I need to try and play with it now. Thanks
-
…on the other hand, it seems you lose alot of editing/coding. For example, my table in Word is pretty neat, and includes colours etc. Copy/paste or import into WordPress, and it becomes a very basic one. Don’t know if there’s a way round it?
-
For two-column text see here:
Formatting text pt. 1: blank lines, alignment, wrap-around, two columns
-
Hey, that’s great Justpi, great start. I’ve had a go, including at changing the width. Can I ask:
– is there a way to insert borders (ideally coloured, or shaded)?
– is there a way to separate the 2 columns, so that they’re not too close to each? You’ll see what I mean when you look at how it currently stands.Many thanks really for your help
-
I’ve actually seen your post here: http://wpbtips.wordpress.com/2009/10/14/borders-pt-1/ and have tried adapting this, but am not too sure how to proceed:
<div style=”border: 1px TYPE #HEX; padding: 1.2em;”>
<div style=”float: right; width: 50%;”> -
-
… however, it’d still be great if you could advise on how to:
– bring the right-hand column up a bit to match the left-hand one
– Try and separate the 2 a bit moreFinally, is there a way I can also use shading, so that the whole ‘static’ part (upper part), adopts a light grey tone, for e.g.? Failing that, just the 2 boxes?
Thanks,
-
This is so good! Nice!!! :)
Formatting text pt. 1: blank lines, alignment, wrap-around, two columns
-
How can I bring the right-hand column up a bit to match the left-hand one?
Try the following. Go to Pages in your blog dashboard and edit the “Page 2” page.
Find this HTML:
<strong> EXPERTISE </strong>And move it *just* below this line:
<div style="float: right; width: 50%;">Then add “margin-top:-52px;” to that line so it looks like this:
<div style="float: right; width: 50%;margin-top:-52px;"> -
Try and separate the 2 a bit more
Make the percentages a little smaller than 50%. For example, try changing those to 49% first and see how it looks.
-
Finally, is there a way I can also use shading, so that the whole ‘static’ part (upper part), adopts a light grey tone, for e.g.? Failing that, just the 2 boxes?
The top article background is already very light gray. You can change it to another color by adding the following CSS to your Appearance → Custom Design → CSS page:
article.intro { background: beige; }You can pick other color names from here: http://www.w3.org/TR/css3-color/#svg-color
-
I noticed your header image looks cut off and pixelated. That’s probably happening because you started with an image that was too small or had the wrong dimensions to fit in the header area of the Twenty Eleven theme.
To make the header image look better, you should get an image created that is 1000 × 288 pixels and upload that to the Appearance → Header page instead.
-
Hi there,
Thanks again for all your help, I’ve gone through most of the changes you recommend. I’ve got another question for you. I’ve been trying to play around with the HTML editing function. What happens if I want to insert another ‘coloured’ box underneath the one on the right-hand column? So essentially, there’d be 2 boxes stacked underneath each other? I can’t seem to figure out what code I’d need.
Thanks,
-
Assuming you mean the “Geographical expertise” section, you’ll just put its code inside the right-floating div. In other words, just cut the second closing div tag you’ve got after “anatom y” and paste it at the very end of the content.
-
-
You’re welcome.
Some suggestions for improving things:a) You should remove the spaces before “EXPERTISE” and “GEOGRAPHICAL EXPERTISE”. Or do you want them centered?
b) There’s too much space between the bottom of the boxes and the text inside them. Instead of a single padding value (which applies to all four sides), you can use four values, for example:
padding:1.2em 1.2em .3em 1.2em;
(Order is clockwise from top.)c) You need more space above “GEOGRAPHICAL EXPERTISE”. So you can change the style of the first box from this:
div style=”border:2px solid #3579DC;padding:1.2em;”
to this:
div style=”border:2px solid #3579DC;margin-bottom:24px;padding:1.2em;” -
Hi Justpi,
Many thanks for your help with this.
a) yes, ideally, I want them centered
b) thanks for this — I’ve tried adding the code as you suggested
c) Agreed, and have done so as well
Now for my final questions:
– How do you put in a box around the left-hand column? I’ve tried all sorts of codes, but it all goes pear shapeThanks
-
If you mean similar to the right-hand boxes, then:
1. Remove the negative margin from the opening div float-right tag.
2. Move the “About Us” paragraph above the opening div float-left tag.
3. Enclose the rest of the left-hand content in the same div you used for the right-hand boxes:<div style="border:2px solid #38739C;margin-bottom:24px;padding:1.2em 1.2em .3em;"> BOXED CONTENT HERE </div>To center the three headings (and decrease the space below them), delete all those nbsps, and change their p tags to this:
<p style="text-align:center;margin-bottom:.5em;"><strong>HEADING HERE</strong></p>
- The topic ‘Halving a static page in two columns Twenty Eleven’ is closed to new replies.
WordPress.com Forums 