Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 26. Februar 2011 21:08

mörml
Server-Pate
Registriert: 23. Januar 2011
Beiträge: 443

mehrspaltiges Template

Hallo ihr lieben Nochnichtverzweifelten,

ich probiere seit heute morgen am Stück, doch ich bekomme einfach kein dreispaltiges Design hin, es ist zum Beklopptwerden
CSS4you, Firebug, rumprobieren hat alles nichts geholfen.

Lediglich, wenn ich die zweite Sitebar zwischen erster und Content im Template einfüge, werden mir drei Spalten ausgeworfen, allerdings in genau der Reihenfolge. Was ich mir wünsche, ist aber Sidebar - Content - Sidebar.

Meine 2.zweite Sidebar sieht so aus:

<div id="sidebarright">
{global_content name='Sidebar rechts'}
</div>


Ich poste das Template hier (ohne zweite Sidebar):

{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

  <head>
    <title>{sitename} - {title}</title>

{metadata}

{stylesheet}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}

{literal}
<script type="text/JavaScript">
<!--
//pass min and max - measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</script>
    <!--[if lte IE 6]>
    <style type="text/css">
    #pagewrapper {width:expression(P7_MinMaxW(720,950));}
    #container {height: 1%;}
    </style>
    <![endif]-->
    {/literal}

    <!--[if lte IE 6]>
    <script type="text/javascript" src="modules/MenuManager/CSSMenu.js"></script>
    <![endif]-->
{* The above JavaScript is required for CSSMenu to work in IE *}
  </head>
  <body>
    <div id="pagewrapper">

      <ul class="accessibility">
        <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
        <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
      </ul>

      <hr class="accessibility" />

      <div id="header">

        <h2 class="headright">{sitename}</h2>

        <h1>{cms_selflink dir="start" text="$sitename"}</h1>       
        <hr class="accessibility" />
      </div>

      <div id="menu_vert">
        <h2 class="accessibility">Navigation</h2>
        {menu template='cssmenu.tpl'}
        <hr class="accessibility" />
      </div>

      <div id="search">
      {search}
      </div>

      <div class="crbk">
        <div class="breadcrumbs">
        {breadcrumbs starttext='Sie befinden sich hier' root='Home' delimiter='&raquo;'}
          <hr class="accessibility" />
        </div>
      </div>

      <div id="sidebar">
      <div id="sidebarb">
      {content block='Sidebar'}

            <div id="news">
              <h2>News</h2>
              {news number='5' detailpage='news'}
            </div>

          </div>
        </div>
   
      <div id="content">

        <div class="back1">
          <div class="back2">
            <div class="back3">
              <div id="main">
                <div style="float: right;">{print showbutton=true script=true}</div>
                <h2>{title}</h2>
                {content}
                <br />

            <div class="right49">
              <p>{anchor anchor='main' text='^ oben'}</p>
            </div>
            <div class="left49">
              <p> {cms_selflink dir="previous" label="Vorherige Seite: "}

              <br />
              {cms_selflink dir="next" label="Nächste Seite: "}
              </p>
            </div>

                <hr class="accessibility" />
                <div class="clear"></div>

              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="footback">
        <div id="footer">
          <div id="footrt">
          {global_content name='footer'}
          </div>
          <div class="clear"></div>
        </div>
      </div>

    </div>

  </body>
</html>



Das entsprechende CSS-Element sieht so aus (und funzt natürlich auch nicht):

div#sidebarright
{
    float: left;
    width: 20%;
    display: inline;
    margin-right: 12px 0px 20px;
    padding: 10px;
    background: url(background2.gif) no-repeat right top;
}


Vielleicht erbarmt sich einer.

Herzlichst
mörml


kann CMSms buchstabieren...

CMSms 1.11.12
PHP 5.5.14

Offline

#2 27. Februar 2011 19:55

Tobias_Gl
probiert CMS/ms aus
Ort: Siegen
Registriert: 09. November 2010
Beiträge: 69
Webseite

Re: mehrspaltiges Template

Mehrspaltige Templates kannst du sehr gut mit YAML erstellen.

YAML ist extra dafür erstellt worden um Mehrspaltige Designs möglichst flexibel zu erstellen. Eine sehr gute Hilfe zum Umgang mit YAML bietet die Internetseite oder das Buch von Herrn Jesse.

Falls du es anders probiern willst würde ich dir folgende Struktur vorschlagen:

[== HTML ==]
<div id="maincontainer">
   <div id="left_col"></div>
   <div id="right_col"></div>
   <div id="center_col"></div>
</div>
[== CSS ==]
 #maincontainer {
   width:auto;
   max-width:1280px;
   min-width:1004px;
   background-color:#ffffff;
   margin:0 auto;
   padding:0px;
   overflow:hidden;
 } 

#left_col {
   width:200px;
   float: left;
}  

#right_col {
   float:right;
   width:200px;
} 

#center_col {
   margin-right:200px;
   margin-left:200px;
   border-left: 1px solid #cccccc;
   border-right:1px solid #cccccc;
   padding:0px; 
}

Offline

#3 27. Februar 2011 20:49

Connie
Server-Pate
Ort: Gribow
Registriert: 12. Dezember 2010
Beiträge: 216
Webseite

Re: mehrspaltiges Template

Hast du mal von "Faux Columns" gehört? Das ist ein Schlüsselwort für gleich hohe Bereiche nebeneinander

ich hab leider grad meine LInks nicht bei mir, bin auf der Datscha ...

aber du findest mit dem Stichwort sicherlich die richtigen CSS-Infps

Offline

#4 28. Februar 2011 03:34

mörml
Server-Pate
Registriert: 23. Januar 2011
Beiträge: 443

Re: mehrspaltiges Template

Vielen, vielen Dank an Tobias, dein Tipp war goldwert.

Und herzlichen Dank an Connie, die mein nicht genanntes zweites Problem angesprochen hat. Ich guck mir das an!

Beste Grüße
mörml


kann CMSms buchstabieren...

CMSms 1.11.12
PHP 5.5.14

Offline

#5 28. Februar 2011 08:48

Andynium
Moderator
Ort: Dohna / SN / Deutschland
Registriert: 13. September 2010
Beiträge: 7.018
Webseite

Re: mehrspaltiges Template

Ein fertiges YAML-Template gibt es auch im Theme-Archiv auf der .org ...

Offline