CSS Problem with $content

[Ansgar]

Hiho s9yners!

I´m working on a pure CSS Design for s9y without tables und approched a tough problem: I can't get the content area right.

This is my basic css-design:

Code: Select all

  <div id="container">
    <div id="header">
       header
    </div>
    <div id="main">
      <div id="content">
        {$CONTENT}
      </div>
      <div id="sidebar">
        sidebar{serendipity_printSidebar side="right"}
      </div    
    </div> 
    <div id="footer">
    footer
    </div>
  </div id="container">

Code: Select all

#main { float: left; width: 902px; }

#content { float: left; width: 455px; /* 555px */ padding-left: 80px; padding-right: 20px; }

#sidebar { float: right; width: 217px; /* 347 */  padding-left: 30px; padding-right: 100px; }

But whatever attributes I assign to #content and #sidebar - they were not displayed beside each other. The sidebar will only start horizontally after the content.

When I substitute {$content} with some sample lorem ipsum text, everthing is displayed right. And if I put the {$content} in a table like this: <table><tr><td>{$CONTENT}</td></tr></table> it is displayed correct, too. But I want no table.

How do I fix this?

Is there some other place than the templates style.css where styles are defined?

Regards
Ansgar

[garvinhicking]

Hi!

Are you loading the s9y specific stylesheets as well? If so, then the stuff that comes into $content might contains CSS elements that use "clear: both", check for that?

Regards,
Garvin

[Ansgar]

Hiho!

Where do I specify, if I want the s9y specific stylesheets?

Currently the stylesheet serendipity.css is used which I thougt is a simple forwarding of the templates style.css.

Should I change the line:
<link rel="stylesheet" type="text/css" href="{$head_link_stylesheet}" />

to a direkt link to my templates style sheet -> /templates..../style.css ?

Regards
Ansgar

[Ansgar]

Hiho!

Just tried it and it did the job.

But what are these global serendipity-stylesheets - where do I find them?

Thanx for your help!
Regards
Ansgar

[garvinhicking]

Hi!

actually serendipty.css IS a forward to your style.css file (only a few variables like TEMPLATE_PATH are substituted), and most importantly, Plugin's CSS output is incorporated.

So I'm not sure what you now changed to make it work? Was the previous CSS code not emitted? This might hint at a non-working URL Rewriting?

Regards,
Garvin

[Don Chambers]

You definitely want to keep

Code: Select all

<link rel="stylesheet" type="text/css" href="{$head_link_stylesheet}" />

As this will include your template's style.css as well as anything else defined by plugins, etc.

Do other elements of your stylesheet appear to work, and the positioning of #content is the only thing NOT working??

Your problem would be a lot easier to diagnose if we could see the actual site. Can you provide a URL?

[Ansgar]

Hiho!

Now, everything is working fine in FF and IE8. But in IE6 and IE6 strange things happen: the article site http://www.herren-unterwaesche-blog.de/ ... tikel.html is working. But the archive / index has still the same problem http://www.herren-unterwaesche-blog.de/

I thougt, that the problem is the $content. But when I substitute it with some simple text the problem is still there.

Regards
Ansgar

[Don Chambers]

I believe you have a problem with widths.... your html structure is:

Code: Select all

#wrapper
   #container
        #header
        #main
        #sidebar

You have defined a width of 902px to #wrapper, #header and #main. #sidebar is 317px. It MIGHT work if you define #main as width: auto;

[Ansgar]

yes, margin: auto; did the job, though I do not understand why...

Thanx a lot for your help!

regards
Ansgar

[Don Chambers]

It worked because you did not set #main to the same width as your overall wrapper... "auto" means it stretched to fill in the space remaining within the wrapper less the sidebar width.... ie: 902px - 317px = 585px.

[Ansgar]

Hiho Don!

That's right. But I don't understand why width: 585px; doesn't work...

Now I've got another problem:
1. The date get's displayed above each entry, even if two entry appear on the same date.
2. only the first entry on the index-page is in the div "content". That's strange because

<div id="content">{$content}</div>

by this the layout gets broken ... but: if I published several articles with the same date, they're all in the div and the website gets displayed correct.

Any ideas?

Regards
Ansgar

[garvinhicking]

Hi Ansgar!

This sounds as if you might have modified your entries.tpl file to accidentally remove or add a </div> too much after a {foreach} / {/foreachelse} loop?!

Regards,
Garvin