kostenloser Webspace werbefrei: lima-city

3-spalten-layout

lima-city → Forum → Die eigene Homepage → Homepage Allgemein

auto blocken code display element form header image inhalt linke spalte message modul position problem spalte spalten system text tool url
  1. Autor dieses Themas

    it-heberle

    Kostenloser Webspace von it-heberle, auf Homepage erstellen warten

    it-heberle hat kostenlosen Webspace.

    5:19, 17.2.2011
    was ich gerne wüsste wäre, wie ich es schaffe, dass die linke spalte vom inhalt genutzt wird, wenn kein modul zugewiesen wurde.
    ...und wie bekomme ich mein right bündig an den main-teil? die spalte steht nämlich ganz rechts und lässt abstand, wenn ich den mainteil manuell erweitere, weil links frei ist.

    hier mal noch das css:
    /*Elements*/
html { 
height : 100%; 
margin-bottom : 0; 
}
body { 
font-family : Tahoma, Helvetica, Arial, sans-serif; 
line-height : 1.3em; 
font-size : 12px; 
color : black; 
  margin: 0px;
  padding: 0px;
}
h1 { 
font-family : Helvetica, Arial, sans-serif; 
font-size : 16px; 
font-weight : bold; 
color : #666; 
} 
h2 { 
font-family : Arial, Helvetica, sans-serif; 
font-size : 14px; 
font-weight : normal; 
color : #333; 
} 
h3 { 
font-weight : bold; 
font-family : Helvetica, Arial, sans-serif; 
font-size : 13px; 
color : #135cae; 
} 
h4 { 
font-weight : bold; 
font-family : Arial, Helvetica, sans-serif; 
color : #333; 
}
a:link, a:visited { 
color : #1b57b1; 
text-decoration : none; 
font-weight : normal; 
} 
a:hover { 
color : orange; 
text-decoration : underline; 
font-weight : normal; 
}
a.readon { 
background : url(../images/grey/mw_readon.png) no-repeat right center; 
}
form { 
margin : 0; 
padding : 0; 
} 
img, table { 
border : none; 
} 
table.user1user2 div.moduletable { 
margin-bottom : 0; 
}
fieldset { 
border : 1px solid #ccc; 
margin-top : 15px; 
padding : 15px; 
} 
legend { 
margin : 0; 
padding : 0 10px; 
} 
td.key { 
border-bottom : 1px solid #eee; 
color : #666; 
}
input { 
background : none; 
border : 1px solid; 
color : #000; 
}
message{ 
color : #c00; 
background : #efe7b8;
border-top : 3px solid #f0dc7e; 
border-bottom : 3px solid #f0dc7e; 
}

/*Classes*/
/* Classes */
.caption { 
padding : 0 10px 0 10px; 
} 
.caption img { 
border : 1px solid #ccc; 
} 
.caption p { 
font-size : 0.9em; 
color : #666; 
text-align : center; 
}
.inputbox { 
background : #f7f7f7; 
border : 1px solid #d1d1d1; 
color : #000; 
font-size : 12px; 
padding : 2px 0 2px 4px; 
}
.modifydate { 
color : #000; 
} 
.createdate { 
color : #000; 
} 
.column_separator { 
border-left : 1px dashed #999; 
}
.sectiontableheader { 
background : #ebebeb; 
color : #333; 
border-right : 1px solid #c5c5c5; 
} 
.module_menu, .module, .module_text { 
margin-bottom : 14px; 
padding : 0; 
} 
.module form { 
background : #f7f7f7; 
border : 1px solid #999; 
padding : 6px; 
} 
.center { 
text-align : center; 
margin : 0 auto; 
}
.nopad { 
padding : 0; 
} 
.middle_pad { 
width : 20px; 
} 
.offline { 
background : #fffebb; 
width : 100%; 
position : absolute; 
top : 0; 
left : 0; 
font-size : 1.2em; 
padding : 5px; 
}
.invalid { 
border-color : #ff0000; 
} 
.article_column { 
padding-right : 5px; 
} 
.buttonheading { 
text-align : right; 
}
.article_separator { 
display : block; 
height : 20px; 
} 
.contenttoc { 
margin : 5px; 
border : 1px solid #ccc; 
padding : 5px; 
} 
.contenttoc td { 
padding : 0 5px; 
} 
.sectiontableentry0 td, .sectiontableentry1 td, .sectiontableentry2 td { 
padding : 4px; 
} 
.sectiontableentry0, .sectiontableentry1, .sectiontableentry2 { 
padding : 3px; 
} 
.contentpaneopen, .contentpane { 
margin : 0; 
padding : 0; 
text-align : left; 
} 
.contentpane ul { 
text-align : left; 
} 
.contentpaneopen li { 
margin-bottom : 5px; 
} 
.contentpaneopen fieldset { 
border : 0; 
border-top : 1px solid #ddd; 
} 
.contentpaneopen h3 { 
margin-top : 25px; 
} 
.contentpaneopen h4 { 
font-family : Helvetica, Arial, sans-serif; 
color : #333; 
} 
.highlight { 
background-color : #fffebb; 
}
.moduletable { 
margin-bottom : 25px; 
}
.adminform textarea { 
width : 540px; 
height : 400px; 
font-size : 1em; 
color : #000099; 
} 
.search input { 
width : 150px; 
margin : 16px 10px 10px 0; 
} 
.search .button { 
width : 80px; 
}
.mosimage { 
margin : 5px; 
} 
.mosimage_caption { 
font-size : 0.9em; 
color : #666; 
} 
.paramlist { 
margin-top : 5px; 
} 
.paramlist td.paramlist_key { 
width : 128px; 
text-align : left; 
height : 30px; 
} 
.message { 
font-family : "Trebuchet MS", Arial, Helvetica, sans-serif; 
font-weight : bold; 
font-size : 14px; 
color : #c30; 
text-align : center; 
width : auto; 
background-color : #f9f9f9; 
border : 1px solid #d5d5d5; 
margin : 3px 0 10px; 
padding : 3px 20px; 
} 
.banneritem_text { 
padding : 4px; 
font-size : 11px; 
} 
.bannerfooter_text { 
padding : 4px; 
font-size : 11px; 
text-align : right; 
} 
.pagination span { 
padding : 2px; 
} 
.pagination a { 
padding : 2px; 
} 
.pollstableborder td { 
text-align : left; 
}
.tool-tip { 
float : left; 
background : #ffc; 
border : 1px solid #d4d5aa; 
padding : 5px; 
max-width : 200px; 
} 
.tool-title { 
padding : 0; 
margin : 0; 
font-size : 100%; 
font-weight : bold; 
margin-top : -15px; 
padding-top : 15px; 
padding-bottom : 5px; 
background : url(../../system/images/selector-arrow.png) no-repeat; 
} 
.tool-text { 
font-size : 100%; 
margin : 0; 
}
.pathway { 
display : block; 
overflow : hidden; 
color : #666; 
}
.contentheading { 
color : #333; 
} 
.componentheading, table.moduletable th, legend { 
color : #333; 
} 
.small { 
color : #000; 
}
.componentheading { 
padding-top : 6px; 
} 
.clr { 
clear : both; 
} 
.sectiontableentry0 td, .sectiontableentry1 td, .sectiontableentry2 td { 
padding : 4px; 
} 

/*DIV'S*/

/*main*/
#Kopf{
  height: 185px;
  margin: 10px;
}
#page_bg { 
background : url(../images/background.jpg)repeat-x fixed; 
padding : 0 0 0 0px;
} 
#header {  
position: relative;
background : url(../images/header.jpg); 
margin: 0px auto; 
width : 1000px;
height: 150px;
text-align: center; 
}
#maincolumn {
width: 1000px;
margin: 0px auto;
}
#component {
position: absolute; 
  float: left;
  width: 595px;
  margin: 0px 195px;
  background-color: #ffffc6;
} 
#component a, #component a:link { 
color : blue; 
} 
#component a:hover { 
color : red; 
}
#leftcolumn{
position: absolute; 
  float: left;
  width: 200px;
  height: auto;
  background-color: #ffffc6;
 } 
#rightcolumn {
position: relative;  
  float: left;
  width: 200px;
  height: auto;
  background-color: #ffffc6;
 } 
#leftcolumn h3, #rightcolumn h3 { 
margin : 0; 
font-weight : bold; 
font-family : Helvetica, Arial, sans-serif; 
font-size : 1.1em; 
padding : 0 0 0 10px; 
line-height : 29px; 
text-align : left; 
} 
#tobi1 { 
text-decoration : none; 
float : left; 
width : 30%; 
margin : 0 20px 0 0; 
} 
#tobi2 { 
float : left; 
width : 30%; 
margin : 0 20px 0 0; 
} 
#tobi3 { 
float : left; 
width : 30%; 
margin : 0 0 0 0; 
}
#debug { 
text-align : center; 
}

/*menus*/

#pillmenu ul { 
margin : 0px auto; 
list-style : none; 
} 
#pillmenu li { 
float : left; 
margin : 0px 5px 0px 0px; 
}
#pillmenu { 
line-height : 31px; 
width : 750px; 
margin: 135px auto 0px auto; 
} 
#pillmenu a { 
background : transparent url(../images/link1.jpg) repeat-x;
text-align:center;
color : blue; 
font-family : Helvetica, Arial, sans-serif; 
font-size : 14px; 
font-weight : normal; 
display : block; 
text-decoration : none; 
} 
#pillmenu a:hover { 
background : url(../images/link2.jpg) repeat-x; 
color : orange; 
}

/*sonstiges*/

#system-message dd.message ul { 
background : #c3d2e5 url(../../images/notice-info.png) no-repeat 4px center; 
} 
#system-message dd.error ul { 
color : #c00; 
background : #e6c0c0 url(../../system/images/notice-alert.png) no-repeat 4px center; 
border-top : 3px solid #de7a7b; 
border-bottom : 3px solid #de7a7b; 
} 
#system-message dd.notice ul { 
color : #c00; 
background : #efe7b8 url(../../system/images/notice-note.png) no-repeat 4px center; 
border-top : 3px solid #f0dc7e; 
border-bottom : 3px solid #f0dc7e; 
}
#maindivider { 
border-top : 1px solid #ddd; 
margin-bottom : 10px; 
overflow : hidden; 
height : 1px; 
}
#form-login fieldset { 
border : 0 none; 
margin : 0; 
padding : 0.2em; 
} 
#form-login ul { 
padding : 10px 20px; 
margin : 0; 
}


    Beitrag zuletzt geändert: 17.2.2011 6:04:35 von it-heberle

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. tom-moeller

    Kostenloser Webspace von tom-moeller

    tom-moeller hat kostenlosen Webspace.

    7:13, 17.2.2011
    it-heberle schrieb:
    was ich gerne wüsste wäre, wie ich es schaffe, dass die linke spalte vom inhalt genutzt wird, wenn kein modul zugewiesen wurde.
    ...und wie bekomme ich mein right bündig an den main-teil?


    Deine CSS bringt fast rein gar nichts, außer das ich sehen kann dass Du Joomla als CMS verwendest.
    Spalten und Modulp. ausblende, wenn keine Module dort veröffentl sind, kannst Du nur über eine PHP if-Anweisung im Template machen. Das muss dann z.B. so aussehen:
    <?php
if($this->countModules('left') != 0)
{
echo '<div id="leftcolumn" >
<jdoc:include type="modules" name="left" style="xhtml" />
</div>';
} else {
echo '<style type="text/css" media="screen">
#lefttcolumn { display:none; }
#main_full { width:99%; }
</style>';
} ?>


    Es gibt aber noch andere Ansätze, z.B.:
    <?php
if($this->countModules('left')) : ?>
  <div class="leftcolumn">
    <jdoc:include type="modules" name="left" style="xhtml" />
  </div>
<?php endif; ?>


    Für Deine 2. Frage muss man das System in der Laufzeit sehen und analysieren. Wie gesagt die CSS alleine reicht nicht aus.

    Gruß Tom

    Edit//.... Zu Frage 2: Vielleicht hilft es die rechte Spalte links zu floaten {float:left;}.

    Beitrag zuletzt geändert: 17.2.2011 7:18:51 von tom-moeller
  4. Autor dieses Themas

    it-heberle

    Kostenloser Webspace von it-heberle, auf Homepage erstellen warten

    it-heberle hat kostenlosen Webspace.

    15:15, 17.2.2011
    was meinst du mit mein css bringt nichts? hab ich was falsch gemacht oder wie meinst du das?

    wenn ich right auf float left mache, verdeckt es mir meine linke spalte...=) ich glaub ich krieg langsam echt nen vogel=)



    Beitrag zuletzt geändert: 17.2.2011 15:27:45 von it-heberle

  5. daswing

    Moderator Kostenloser Webspace von daswing

    daswing hat kostenlosen Webspace.

    15:30, 17.2.2011
    Dein CSS bringt schon etwas nämlich das es formatiert dargestellt ist, er meint es nur für das Problem ist es nutzlos. Du solltest dir Firebug installieren -> Auf den blauen Kasten gehen und dann deine Spalte auswählen -> Dann siehst du unten links den Code und rechts die CSS Formation. So kannst du es live bearbeiten bis es dir gefällt, wenn es passt das ganze in die angegebene CSS-Datei übernehmen.

    Am einfachsten wäre es wenn du den Link postest und was genau gesehenen soll.

    mfg Stephan

    Beitrag zuletzt geändert: 17.2.2011 15:30:49 von daswing

  6. s*************h

    15:48, 17.2.2011
    Das was du da vorhast ist wie oben schon gesagt wurde mit CSS nicht möglich. CSS ist keine Programmiersprache sondern nur zum Formatieren von HTML-Elementen gedacht. CSS ist im Grunde recht blöd, da es nicht sieht ob ein Element gefüllt ist oder andere Eigenschaften besitzt. Das einzige was es erkennt ist wenn die Maus darüber fährt (Hover).

    Deine zweite Frage hat so wie es scheint etwas mit der Breite der einzelnen Spalten zu tun. Ich verstehe allerdings dein Problem nicht ganz (eine ausführlichere Erklärung wäre gut). Wie daswing schon vorgeschlagen hat wäre es besser du stellst einen Screenshot oder noch besser die Seite zur Verfügung damit man sich das Problem live anschauen kann.

    Gruß S.Brosch
  7. Autor dieses Themas

    it-heberle

    Kostenloser Webspace von it-heberle, auf Homepage erstellen warten

    it-heberle hat kostenlosen Webspace.

    15:52, 17.2.2011
    www.it-heberle.12hp.de
    ich hätte es gerne so, dass ich alle drei spalten fest hätte, sprich sie sich nicht verändern, wenn das fenster z.b kleiner gemacht wird. ausserdem sollen sie nicht verrutschen, wenn sich die auflösung ändert.
    das mit firebug ist ne klasse sache, ich arbeite gerade mit opera, ich glaub ich wechsel mal!
    allerdings hilft mir das know-how technisch gerade halt nicht viel.

    linke & rechte spalte 200px;
    inhalt: auto;

    und ich hätte es halt gerne, dass sich die inhaltsspalte irgendwie ausdehnt, wenn links kein modul zugewiesen wurde.

    bin ich verplant?

    ich hoffe du verstehst, was ich meine
    daswing schrieb: Du solltest dir Firebug installieren -> Auf den blauen Kasten gehen und dann deine Spalte auswählen -> Dann siehst du unten links den Code und rechts die CSS Formation. So kannst du es live bearbeiten bis es dir gefällt, wenn es passt das ganze in die angegebene CSS-Datei übernehmen.
    mfg Stephan


    thanks so much!!! sieht zwar immer noch wie kindergarten aus aber wenigstens funzt es jetzt einigermaßen...und ich denke, wenn dann das können auch noch da ist, werden die seiten bestimmt auch anspruchsvoller!

    vielen dank an alle, die sich die mühe gemacht haben, mir zu helfen!

    bis zum nächsten mal

    euer it-heberle aka errorkid

    Beitrag zuletzt geändert: 18.2.2011 20:10:58 von it-heberle

  8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!