Help with achieving this layout [updated 11/07/07]

daikw · 2007-10-27 15:58:23

Hello all,

I wanted to ask for some help creating this layout.

I have read as much as possible on the building blocks of textpattern, including Wion’s excellent articles, but I
have limited coding experience. Please bear this in mind when offering advice!

This is the layout I want to end up with:

And this is what I have so far!

I have tried to break down what I think I need to know into 7 questions, but if there is anything else to add, please do so:

1. How can I format the page into two clear columns without them overlapping as they do in on my current textpattern page?

2. How can I left align the “Dai Kurebayashi”, dotted-line dividers, navigation, and articles?

3. How can I fix the column width of articles to 500 pixels?

4. How can insert the “about” and “contact” elements? see example
— should I create ‘forms’ for each of these? and if so, how do I do this, step-by-step?

5. What would be the best way to make the nav? rollovers or an .swf? Where should I insert it into the page template code?

6. How can I format the date as dd:mm:yy?

7. How do I decrease the spacing between the dotted line dividers and the articles, and how do I decrease the spacing between the titles/articles and the “—” (m-dashes)? [I tried removing the tag from before the “—” and it ruins the alignment and spacing entirely!]

Thanks a million to everyone who replies. I am determined to figure this out!

Dai

Last edited by daikw (2007-11-07 19:41:21)

Gocom · 2007-10-27 16:46:49

The first three questions have nothing to do with the Textpattern. You should read some CSS and XHTML totorials to archieve what you want, we can not offer any solution to you. But use float.

How can insert the “about” and “contact” elements? see example
— should I create ‘forms’ for each of these? and if so, how do I do this, step-by-step?

Just insert the code what you have, you won’t need anykind of forms. This is also kind not a Textpattern issue. IE:

<div id="contact">
	<h3>Contact</h3>
	<-- Your contact information -->
</div>

What would be the best way to make the nav? rollovers or an .swf? Where should I insert it into the page template code?

The way you want. It’s up to you basically. You could use help of Tag Listing

How can I format the date as dd:mm:yy?

See txp:posted <txp:posted format="%d:%m:%y" />

How do I decrease the spacing between the dotted line dividers and the articles, and how do I decrease the spacing between the titles/articles and the “—” (m-dashes)? [I tried removing the tag from before the “—” and it ruins the alignment and spacing entirely!]

Use margin.

p,h2,h3,h4 {
	margin: 0 0 20px 0;
}

Tip: Read and learn ;)

Cheers!

jakob · 2007-10-27 17:02:47

EDIT: aha, Gocom got there first, but here’s some more to get you going:

1 & 3. It is already set up that way, you just need to change the width for the main content. Making the main column thinner leaves the right-column on its own on the right-hand side:

#content {
margin: 0 0px;
padding-top: 30px;
text-align: left;
width: 500px;
}

2. set padding-left for the elements that are inside #content to 0:

blockquote, h3, p, li {
padding-right: 10px;
padding-left: 0px;
font-size: 0.8em;
line-height: 1.5em;
}

4. If you like you can make individual forms for those elements (call them forms using txp:output form="myformname" /> form the page template), but if they never change you can insert them right into your page template under or in place of the search box and category select dropdown. That is located within the div #sidebar-2. To adjust the starting height for the right-hand column adjust padding-top in the following to what you need:

#sidebar-1, #sidebar-2 {
padding-top: 100px;
width: 150px;
}

5. Use txp:section_list to output the code for your menu. That will give you a text menu. If you want your own special font, check this article (there are cleverer ways of doing this, but this tutorial is easier to follow).

6. You’ll need to change the format=”…” in the standard article form – see here for how (tip: check the examples).

7. The dotted line is the div with class divider. Change the margin value for that, e.g. from 2em to 1em:

div.divider {
margin: 1em 0;
text-align: center;
}

for the — after the title replace — with (— and then add the following to your css stylesheet:

.separator {
	margin:  0;
	padding: 0;
	}

Change all the above code in the presentation > styles pane.

Last edited by jakob (2007-10-27 17:18:18)

daikw · 2007-10-27 21:50:33

Thankyou Gocom and Jakob for your clear and helpful replies. Thanks to you I have now managed to get a lot closer to my goal!

I still have a few issues I am trying to iron out. Could you help with these?:

1. Following Jakob’s recommendation, I used this tutorial to create a rollover menu with CSS. Unfortunately, ugly black lines appear around the images. How can I get rid of them?

2. what is the best way to link each rollover to a new textpattern section?

3. Does anyone know how to make the text on the right of the page appear the same size as the text on the left?

4. Following Gocom and Jakob’s suggestions, I have managed to reduce the spacing between the “—” and the title, but the gap between the “—” and the body text is still too big. Any other ideas about how to get around this?

5. Vertical spacing of the right hand elements appears differently in Firefox/Safari/Explorer. Should I use conditional stylesheets to get around this, and if so, how do I integrate this into textpattern?

Again, many thanks.

Last edited by daikw (2007-10-27 22:06:33)

jstubbs · 2007-10-27 22:14:14

You have no styles for img. You could add img {border: none;}
Either absolute like http:mysite.com/section or relative like /section
Place the sidebar text within paragraph tags in the page
Set the “blockquote, h3, p, li” style to margin=0 and padding=0 and go from there
Don’t know what you want to achieve, but it would be better if you had some styles in there, such as #sidebar p, to make it easier to set the styles as you want

Last edited by jstubbs (2007-10-27 22:14:39)

jakob · 2007-10-28 09:21:39

3 & 5 may have been solved now that you have enclosed the about and contact in ... tags as jstubbs suggested. If not try this:

You could add eric meyer’s reset css for more consistent cross-browser performance to the very top of your css:

After that correct the line in h1, h2, h3 to read
font-weight:bold; (instead of font-weight:strong;)

1. you got it right already, the border:none belongs with .menu li a as they are background images not img’s.

2. As jstubbs says, put a href="/section-name" in place of a href="#" (in the tutorial that’s just a placeholder). If you use txp:section_list as described above, it will auto-generate this whole block of code for you.

daikw · 2007-11-07 19:38:29

Been a short while since I’ve had a chance to work ok this, I just want to say thanks again to Jokob, gocom and jstubs for all their help so far.

Here’s the page

1. I want the elements to appear in three columns: News items on the left, boxes on the right, and the vertical rule separating them in the middle. How can I get the rule and the boxes up and onto the top right hand side of the page?

2. I used

#sidebar-2 p, #sidebar-1 p {
font-size: 0.8em;
line-height: 1.2em;
border: 1px solid #BABABB;
border-top: none;
padding: 10px;
}

to give the boxes their outline, however in IE and Safari another empty box appears between the text and the orange “about” and “contact” bars. Any ideas on how to get rid of this, or do it another way?

3. Once this is achieved; how can I horizontally align the top of the orange rectangle around “news”, the top of the vertical rule, and the top of the orange rectangle around “about”?

Last edited by daikw (2007-11-07 19:40:05)

Textpattern CMS

Textpattern CMS support forum

#1 2007-10-27 15:58:23

Help with achieving this layout [updated 11/07/07]

#2 2007-10-27 16:46:49

Re: Help with achieving this layout [updated 11/07/07]

#3 2007-10-27 17:02:47

Re: Help with achieving this layout [updated 11/07/07]

#4 2007-10-27 21:50:33

Re: Help with achieving this layout [updated 11/07/07]

#5 2007-10-27 22:14:14

Re: Help with achieving this layout [updated 11/07/07]

#6 2007-10-28 09:21:39

Re: Help with achieving this layout [updated 11/07/07]

#7 2007-11-07 19:38:29

Re: Help with achieving this layout [updated 11/07/07]

Board footer