HELP! Side-bar disappeared

jsoo · 2011-01-27 20:03:17

Or move the header out of #content — that might be the easier approach.

n2 · 2011-01-27 20:39:37

But I don’t seethe image listed in the content ( it’s just in the #container. )
?

jsoo wrote:

Or move the header out of #content — that might be the easier approach.

jsoo · 2011-01-27 21:39:51

Sorry, I meant #container.

n2 · 2011-01-27 23:47:20

That’s what i figured, so i did put it outside the container (thank you) and have been tweaking it with some success.

What i can’t figure it out is how to center it on the page (set the “margin” value to “auto” ) and also move it down a bit to meet up with the container (set the “margin-top” value.)

Is that also in CSS? And if so, which part?

Thanks…

jsoo wrote:

Sorry, I meant #container.

jsoo · 2011-01-28 01:22:16

Yes, this is all CSS tweaks at this point. You could even consider adding another wrapper div, around #content, the sidebar, and footer, then giving #container a transparent background. Lots of ways to approach a problem like this.

Ah — just looking at your test page again. You need to move the img out of the head section, into the body.

n2 · 2011-01-28 01:38:29

Sorry, I’m not sure what you mean by the second paragraph of your suggestion. I went ahead and took the header image link it out of the Form I had created for the test page, but I don’t know where to move it to… Or did you mean change something in the CSS sheet…?

And how do i add another wrapper div to the CSS to hold the conents I’m taking out of the container? (and what do i call the div?)

sorry, my brain is just not getting it… :(

jsoo wrote:

Yes, this is all CSS tweaks at this point. You could even consider adding another wrapper div, around #content, the sidebar, and footer, then giving #container a transparent background. Lots of ways to approach a problem like this.

Ah — just looking at your test page again. You need to move the img out of the head section, into the body.

Last edited by n2 (2011-01-28 02:02:46)

jsoo · 2011-01-28 02:24:15

Currently, the site has something like this:

----------------------------
|         container        |
| ------------------------ |
| |       branding       | |
| ------------------------ |
| |       nav_main       | |
| ------------------------ |
| |       content        | |
| |             |        | |
| |   main      | feature| |
| |             |        | |
| |             |        | |
| |             |        | |
| |             |        | |
| |             |        | |
| |             |        | |
| ------------------------ |
| |      subscribe       | |
| ------------------------ |
| |         info         | |
| ------------------------ |

#container has a white background, which is great for everything except #branding. Options include:

give #container a transparent background, then give everything else except #branding a white background, or;
pull #branding out of #container, then you have to get it centered and aligned properly, or;
give #container a transparent background, and enclose everything except #branding in a new div with a white background.

Which of these makes most sense is mainly a matter of what is easiest. If you had success with the first technique, fine.

At one point when I checked the test page, you had added the image directly to the page, rather than as a CSS background image as it is on the live site. Fine, just a different technique. Doable, but you have to overlay the #vcard element somehow. Also, if I’m not mistaken you had put the img tag inside the <head> section, a no-no.

n2 · 2011-01-28 02:35:03

I think the best/easiest option is the 3rd one (a new div with a white background for the main content) , but what I don’t know how to do is creating another div container with a transparent background in the CSS (to put the branding in.)

jsoo wrote:

#container has a white background, which is great for everything except #branding. Options include:

give #container a transparent background, then give everything else except #branding a white background, or;
pull #branding out of #container, then you have to get it centered and aligned properly, or;
give #container a transparent background, and enclose everything except #branding in a new div with a white background.

Which of these makes most sense is mainly a matter of what is easiest. If you had success with the first technique, fine.

At one point when I checked the test page, you had added the image directly to the page, rather than as a CSS background image as it is on the live site. Fine, just a different technique. Doable, but you have to overlay the #vcard element somehow. Also, if I’m not mistaken you had put the img tag inside the <head> section, a no-no.

Last edited by n2 (2011-01-28 16:11:32)

jsoo · 2011-01-28 14:12:43

n2 wrote:

I think the best/easiest option is the 3rd one (a new div with a white background) , but what I don’t know how to do is creating another div container on the CSS sheet to put either the branding in.

If I’ve followed you correctly to this point, you are using the “default” page template for the home page. I would also guess the “default” template is used for all sections except “calendar”. It’s possible that other sections use other templates; check in Presentation->Sections.

Without seeing all the various forms I am making something of a guess, but probably the correct place to add the new tags in the “default” template would be to add:

<div id="content_container">

right below the “nav_main” form (because I don’t think nav_main needs a white background either), then add the closing </div> tag at the very bottom of the template. Then style div#content_container as you like in the appropriate CSS file.

You’d need to add the div tags in the calendar template (and any other templates in use) also.

GugUser · 2011-01-28 15:42:56

n2:

I recommend: Learn the principles of HTML and CSS

Give a man a fish, and you feed him for a day; teach a man to fish, and you feed him for life.

n2 · 2011-01-28 17:33:44

But the content already has a container. What ineed is another container for “branding” (header image only) and i don’t know how/where to put that in the page template, which is coded like this:

<txp:output_form form=“header” />
<txp:output_form form=“branding” />
<txp:output_form form=“nav_main” />

<!— content —>
<div id=“content” class=“wrapper”>
<div id=“content_main”>

<txp:article status=“sticky”

<hr />

</div>

<txp:output_form form=“home_sidebar” />
</div>

<txp:output_form form=“nav_promote” />
<txp:output_form form=“newsletter” />

<txp:output_form form=“siteinfo” />
<txp:output_form form=“footer” />

jsoo · 2011-01-28 17:42:04

n2 wrote:

But the content already has a container. What ineed is another container for “branding” (header image only) and i don’t know how/where to put that in the page template, which is coded like this:

Again, there are several ways to skin this cat. The problem is that #container holds everything on the page, except for the body margins. Probably the easiest fix is to add a secondary container, inside #container, and holding everything except #branding (and, optionally, #nav_main). From the template you posted, it probably works to add tags like this:

<txp:output_form form="header" />
<txp:output_form form="branding" />
<txp:output_form form="nav_main" />

<div id="foobar">

<!-- content -->
<div id="content" class="wrapper">
<div id="content_main">

<txp:article status="sticky" />

<hr />

</div>

<txp:output_form form="home_sidebar" />
</div>

<txp:output_form form="nav_promote" />
<txp:output_form form="newsletter" />

<txp:output_form form="siteinfo" />
<txp:output_form form="footer" />

</div>

renaming #foobar to whatever you like, then giving that div the white background.

Now, possibly this extra div isn’t needed. For example, it might work to move the close tag for div#content.wrapper to the bottom of the page, instead. I’m not sure; I haven’t studied the CSS that closely.

Textpattern CMS

Textpattern CMS support forum

#85 2011-01-27 20:03:17

Re: HELP! Side-bar disappeared

#86 2011-01-27 20:39:37

Re: HELP! Side-bar disappeared

#87 2011-01-27 21:39:51

Re: HELP! Side-bar disappeared

#88 2011-01-27 23:47:20

Re: HELP! Side-bar disappeared

#89 2011-01-28 01:22:16

Re: HELP! Side-bar disappeared

#90 2011-01-28 01:38:29

Re: HELP! Side-bar disappeared

#91 2011-01-28 02:24:15

Re: HELP! Side-bar disappeared

#92 2011-01-28 02:35:03

Re: HELP! Side-bar disappeared

#93 2011-01-28 14:12:43

Re: HELP! Side-bar disappeared

#94 2011-01-28 15:42:56

Re: HELP! Side-bar disappeared

#95 2011-01-28 17:33:44

Re: HELP! Side-bar disappeared

#96 2011-01-28 17:42:04

Re: HELP! Side-bar disappeared

Board footer