Thema: Neue Positionen definieren

nach dem durchlesen der posts zum thema und einigem rumspielen in der css des templates bin ich keinen schritt weiter.

mein vorhaben: weitere positionen im template definieren.
vielleicht muss mich nur einer draufstossen wies geht.
beispielsweise hier: www.prensa.de.
und so: graue vertikale spalte rechts auf der seite soll eine neue position werden. format z.b. 120 x 600.

wie mach isch das bloß ?

PHP-Code:

*{
    padding:0;
    margin:0;
}
body{
}
.bodies {
    margin:0px;
    background:url(../images/bg_glob.png);
    text-align:center;
}
tr, p, div {
    font-family:Arial,Verdana, Helvetica, sans-serif;
    font-size:11px;
    color:#666666;
}
hr {
    background:#999999;
    height:1px;
    width:100%;
}
ul {
    list-style:none;
}
li {
    line-height: 15px;
    padding-left: 25px;
    padding-top: 0px;
    background-image: url(../images/arrow.png) ;
    background-repeat: no-repeat;
    background-position: 10px 5px;
}
ol{margin-left:40px;
list-style-position:inherit;
}

form {
    display: inline;
    margin: 0;
     padding: 0;
}
.pathway {
    font-family:  Arial,Verdana, Helvetica, sans-serif;
    font-size: 9px;
}
a.pathway:link, a.pathway:visited {
    color            : #ff9900;
    font-weight      : normal;
}
a.pathway:hover {
    color            : #ff3300;
    font-weight      : normal;
    text-decoration   : none;
}
#mainlevel-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.8em;
}
#mainlevel-nav li {
    display: block;
    background-image: none;
    padding-left: 0px;
    padding-right: 0px;
    float: right;
    margin: 0;
    width: auto !important;
     width: 15%;
    font-size: 11px;
    line-height: 21px;
    white-space: nowrap;
    border-left: 1px solid #cccccc;
    border-bottom:none;
}
#mainlevel-nav li a {
    width: 100%;
    display: block;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
    color: #333333;
    background: transparent;
}
#mainlevel-nav li a:hover {
    color: #CCCCCC;
}
#active_menu {
    color: #666666;
}
a.mainlevel:link, a.mainlevel:visited {
    display: block;
    color: #ffffff;
    font-weight: bold;
    background:url(../images/bg_main_menu.png) #cccccc ;
    width: 100%;
    text-indent: 35px;
    text-decoration: none;
    font-family:  Arial,Verdana, Helvetica, sans-serif;
    line-height: 20px;
    margin-bottom: 3px;
}
a.mainlevel:hover {
    color: #ffffff;
    background-color:#333333
}
a.mainmenu:link, a.mainmenu:visited {
    color: #ffffff; 
    font-family:  Arial,Verdana, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 10px;
}
a.mainmenu:hover {
    color: #333333; 
}
.pollstableborder {
    border: 1px solid;
    padding: 1px;
}
a.sublevel:link, a.sublevel:visited {
    font-size: 11px;
    color: #ffffff;
    text-indent:33px;
    line-height: 20px;
    background:url(../images/bg_main_menu_sub.png) repeat-y top left;
    display:block;
    margin-bottom:3px;
    width:100%;
    background-color:#c6c6c6;
}
a.sublevel:hover {
    color: #000000; text-decoration: none;
}
table.moduletable {
    padding: 5px 0px 5px 8px;
    width: 100%;
    margin-bottom:5px;
}
table.moduletable th {
    font-size: 11px;
    color: #f0f0f0;
    text-align: right;
    width: 100%;
    font-weight:bold;
    padding-right:40px;
    background:url(../images/bg_menu.png) no-repeat top right;
    height:25px;
    background-color:#FFFFFF;
    padding-top:3px;
}
table.moduletable li {
    border-bottom:1px solid #cccccc;
}
table.moduletable ul {
    padding: 0px;
}
table.moduletable td {
    font-size: 11px;
    font-weight: normal;
}
.poll {
    font-family      : Arial, Helvetica, sans-serif;
    font-size        : 10px;
    color            : #666666;
    line-height      : 14px;
}
table.pollstableborder {
    border: 1px solid #cccccc;
}
.sectiontableheader {
    background-color : #CCCCCC;
    color            : #333333;
    font-weight      : bold;
    padding:5px;
}
.sectiontableentry1 td{
    border-bottom:1px solid #CCCCCC;
    padding:3px 3px 3px 6px;

}
.sectiontableentry2 td {
    border-bottom:1px solid #CCCCCC;
    padding:3px 3px 3px 6px;
}
.small {
    font-family      : Arial,Verdana, Helvetica, sans-serif;
    font-size        : 10px;
    color            : #999999;
    text-decoration  : none;
    font-weight      : bold;
}
.smalldark {
    font-family      : Arial,Verdana, Helvetica, sans-serif;
    font-size        : 10px;
    color            : #000000;
    text-decoration  : none;
    font-weight      : normal;
}
.contentpane {
}
.contentpaneopen {
    border : 0px ridge #0099cc;
    width: 100%;
    padding: 1px;
}
.contentheading, .componentheading {
    font-family: Arial,Verdana, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #666666;
    text-align: left;
    background:url(../images/bg_tittle.png) no-repeat;
    padding-left:25px;
    border-bottom:1px solid #cccccc;

}
.createdate {
    font-family      : Arial, Helvetica, sans-serif;
    font-size        : 10px;
    color:  #666666;
    text-align       : left;
    text-indent:18px;
    font-weight:bold;
    top:-5px;
    vertical-align: top;
    padding-bottom:2px;
    background:url(../images/date.png) no-repeat;
}
.button {
    font-family: Arial,Verdana, Helvetica, sans-serif;
    font-style: normal;
    font-size: 11px;
    font-weight: bold;
    background-color : #666666;
    color: #ffffff;
    border: 1px solid #757575;
}
.inputbox {
    font-family: Arial,Verdana, Helvetica, sans-serif;
    font-size: 11px;
    color: #757575;
    background-color: #f0f0f0;
    border: 1px solid #cccccc;
}
a:link, a:visited {
    color: #999999;
    text-decoration: none;
}
a:hover {
    color: #CCCCCC;
}
a.contentpagetitle:link, a.contentpagetitle:visited {
    font-family: Arial,Verdana, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
     color: #ff9900;
    text-align:left;
    text-decoration: underline;
    }
a.contentpagetitle:hover {
    font-family: Arial,Verdana, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-align:left;
    color: #666666;
    text-decoration: none;
    font-weight: bold;
    }
a.category:link, a.category:visited {
    color            : #333333;
    font-weight      : bold;
    font-size: 11px;
    font-weight: bold;
}
a.category:hover {
    color            : #999999;
}
.ontab {
    background-color: #ffae00;
    border-left: outset 2px #ff9900;
    border-right: outset 2px #808080;
    border-top: outset 2px #ff9900;
    border-bottom: solid 1px #d5d5d5;
    text-align: center;
    font-weight: bold;
    color: #FFFFFF;
}
.offtab {
    background-color : #e5e5e5;
    border-left: outset 2px #E0E0E0;
    border-right: outset 2px #E0E0E0;
    border-top: outset 2px #E0E0E0;
    border-bottom: solid 1px #d5d5d5;
    text-align: center;
    font-weight: normal;
}
.tabpadding {
}
.tabheading {
    background-color: #ffae00;
    text-align: left;
}
.pagetext {
    visibility: hidden;
    display: none;
    position: relative;
    top: 0;
}
.back_button {
    text-align: center;
    margin-top: 40px;
}
table.contenttoc {
    color: #333300;
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    padding:5px;
}
table.contenttoc td {
    font-size: 8pt;
    font-weight: normal;
    text-align:left;
    padding-left:5px;
    padding-right:5px;
}
table.contenttoc th {
    font-size: 8pt;
    font-weight: normal;
    text-align:left;
    padding:5px;
    background-color:#333333;
    color:#FFFFFF;
}
table.searchintro {
    width: 100%;
}
table.searchintro td {
    background-color: #293C43;
    color: #ffffff;
    font-weight: bold;
}
.readon {
    display:block;
    background:url(../images/bg_readon.png) no-repeat;
    color:#333333;
    text-indent: -5000px;
    width:100px;
    height:20px;
}
.mosimage {
    border: 1px solid #cccccc;
    margin: 5px
}
.mosimage_caption {
    margin-top: 2px;
    background-color:#cccccc;
    padding: 1px 2px;
    color: #fff;
    text-transform: normal;
    font-size: 10px;
    border-top: 1px solid #cccccc;
}
#core {
    background:url(../images/bg_body.png) repeat-y top center;
    padding:0px 5px 5px 5px;
    }
#core_end {
    background:url(../images/bg_footer_end.png) no-repeat top center;
    padding:0px 5px 5px 5px;
    height:14px;
    }
#header {
    background:url(../images/header.jpg) no-repeat;
    height:180px;
    margin-bottom:0px;
}
#sect {
    width:638px;
    background-color:#FFFFFF;
    text-align:left;
}
#menu {
    width:468px;
    background-color:#ffffff;
    padding-top:5px;
    float: left;
}
#l_sect {
    width:468px;
    padding:5px;
    float:left;
}
#l_sect_down {
    width:468px;
    background-color:#ffffff;
    margin-top:5px;
    padding:5px;
    float:left;
}
#mod_down1 {
    width:227px;
    float:left; 
    margin-right:px;
}
#mod_down2 {
    width:227px;
    float:right;
}
#r_sect {
    width:160px;
    float:right;
    background-color:#FFFFFF;
    padding-top:5px;
}
#banner {
    text-align:left;
}
#footer {
    background:url(../images/footer.png) repeat-x;
    clear:both;
    color:#FFFFFF;
    text-align:center;
    padding-top:13px;
    padding-bottom:5px;
} 


Die "rechte, graue Spalte" ist keine Spalte, sondern ergibt sich automatisch aus der Breite des Templates. Dieses ersteckt sich in diesem Beispiel nicht über die gesamte Breite des Bildschirms. Die Breite wird nicht in der CSS befiniert, sondern in der index.php- Datei.
Wenn Du die Ränder verändern willst, musst Du Größe des Templates verändern. Das wirkt sich aber auf beide Seiten aus, da das Template mittig ausgerichtet ist.
MfG
PS.: Ich benutze dieses Template übrigens auch.
http://www.spvg-blau-gelb.schwerin.de

Zitat von Bigbang

So im index.php z.B.

PHP-Code:

<div id="sitename"><?php mosLoadModules ( 'header',-1 ); ?></div>
<div id="banner"><?php mosLoadComponent( "banners" ); ?></div>

und so im css:
http://www.joomlaos.de/CSS_Guide.html

sind denn die module positions die ich im template manager sehen kann, schon definiert und müssen nur noch "aktiviert" werden? und wenn ja, wo ist dann zb. die position "user 6". da steige ich nicht durch.

mein template zb. kennt (preview with positions) derzeit nur user 1,2,3, left und banner. im template manager stehen aber mehr (27 stck - standart)

muss ich diese nach dem dir genannten muster in die css und index.php schreiben? allerdings wäre das ja (nach meinem bisherigen) wissenstand ein blindflug, weil ich ja nicht weiss, wo welche position positioniert (ich weiss wortwahl: aua) wird!?

gibt es nicht eine anleitung (gerne auch auf englisch) nach dem motto "so definiere ich positionen" ?!

dankeschön

Zitat von Bigbang

Die Position wählst du ja, indem du so festlegst wo es reingeladen wird, ganz easy..

thats the problem. was ist "wo"? wo ist "wo" und wo lege isch das fest?
also.
zb.

<div id="XXXX"><?php mosLoadModules ( 'user6' ); ?></div>

was kommt an stelle von "XXXX" und wo erscheint das modul dann?!

Zitat von Bigbang:
Du machst im index.php deine Tabelle oder noch besser Div und ladest deine Module hinein.
Die Position wählst du ja, indem du so festlegst wo es reingeladen wird, ganz easy..

Ich glaube, ich muss Dich enttäuschen, denn so einfach ist für einen Anfänger (und ich zähle mich auch dazu) nicht ganz so einfach ein Template per Div zu erstellen oder zu verändern. Es ist am Anfang ist es leichter ein Template das mittels Tabelle erstellt worden ist, denn da kann man leichter verstehen, was wo ist. Benutze zum Üben einfach XJ. Ich benutze das Template auch (fast) unverändert.
Ich habe auchnoch nicht verstanden, was für "Positionen" Du noch einfügen möchtest.
MfG

Zitat von zimmerfrei

Zitat von Bigbang:

Ich habe auch noch nicht verstanden, was für "Positionen" Du noch einfügen möchtest.
MfG

buenas dias. hier der versuch der "aufklärung":

schaut mal: hier ein screenshot meiner page im modus "inline with positions" screenshot

die positionen "user3" und "left" gibts wirklich,
hypothetisch will ich jetzt mal die position "neu" an der stelle schaffen, an der sie jetzt im shot steht.

wie geht dem?

hier auch mal die index.php des templates von www.prensa.de:

PHP-Code:

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );$iso = split( '=', _ISO );echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';?>
<!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">
<head>
<?php mosShowHead(); ?>
<meta **********="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php if ( $my->id ) { initEditor(); } ?>
<link href="templates/sabana_plazza/css/template_css.css" rel="stylesheet" type="text/css"/>
</head>
<body class="bodies"><center>
<div id="core">
    <div id="sect">
        <div id="header"></div>
        <div id="r_sect"><?php mosLoadModules ( 'left' ); ?></div>
        <div id="menu"><?php mosLoadModules ( 'user3' ); ?></div>
        <div id="l_sect"><?php mosMainBody(); ?></div>
        <div id="l_sect_down">
            <div id="mod_down1"><?php mosLoadModules ( 'user1' ); ?></div>
            <div id="mod_down2"><?php mosLoadModules ( 'user2' ); ?></div><br />

        </div>
        <div id="banner"><?php mosLoadComponent( "banners" ); ?></div><br />
        <div id="footer">by <strong><a href="http://www.prensa.de">  prensa.de</a></strong> <br /><strong> <a href="http://www.disclaimer.de/disclaimer.htm?farbe=FFFFFF/000000/000000/000000">disclaimer</a></strong> </div>
    </div>
</div>
<div id="core_end"></div>
</center>
</body></html>

das ist ja eine schwere Geburt aber ich habe dass selbe Problem und auch noch nichts im Forum gefunden.
Ich denke das Problem sollte durch den vorherigen screenshot erklärt worden sein falls nicht.... woher weiß die php datei wo die angaben hier liegen
<div id="core">
<div id="sect">
<div id="header"></div>
<div id="r_sect"><?php mosLoadModules ( 'left' ); ?></div>
<div id="menu"><?php mosLoadModules ( 'user3' ); ?></div>
<div id="l_sect"><?php mosMainBody(); ?></div>
<div id="l_sect_down">
<div id="mod_down1"><?php mosLoadModules ( 'user1' ); ?></div>
<div id="mod_down2"><?php mosLoadModules ( 'user2' ); ?></div><br />
</div>
sie muss die module ja irgendwohin auf die Seite schmeißen. Warum lässt diese Zeile <div id="r_sect"><?php mosLoadModules ( 'left' ); ?></div> ein modul nicht z.b. unter der seite anzeigen????

Vielen Dank im voraus

und bitte keinen Link mehr zu den css-styles http://www.joomlaos.de/CSS_Guide.html ich kenne die seite und sie hilft im moment nicht im geringsten