CONTENIDO Forum

Das Diskussionsforum zum Open Source Content Management System
https://www.forum.contenido.org/

Probleme mit der Darstellung im Hauptcontainer

https://www.forum.contenido.org/viewtopic.php?f=104&t=31849

Seite 1 von 1

Probleme mit der Darstellung im Hauptcontainer

Verfasst: Mi 25. Jan 2012, 23:39
von larsreinke
Moin,
ich bin blutiger Contenido und Web Anfänger.nich habe mich nach längeren Versuchen mit verschiedenen Thestinstallationen für Contenido entschieden. Nun habe ich mein erstes eigenes Temple mit html und CSS gebaut. Ohne Inhalte hat es auch auf Anhieb geklappt. Nun zu meinem Problem. Inhalte , die ich in den Artikeln erfasse und formatiere, werden im Frontend unformatiert ausgegeben. Ich habe heute schon Stunden gesucht, aber ich komme nicht auf den Fehler.

Hier die Seite mit Fehler als Beispiel: http://www.immobilienbewertungen.net/cms/

Das dazugehörige Layout:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
        <container id="1" name="ContenidoHeader" types="Content" mode="fixed" default="Contenido_Header">ContenidoHeader</container>
        <title><container id="10" name="TitleTag" types="Content" mode="fixed" default="Title_Tag">TitleTag</container></title>
        <link rel="stylesheet" href="css/immo.css" type="text/css" media="all" />
        <link rel="shortcut icon" href="favicon.ico" />
                <!--[if lte IE 6]>
            <style type="text/css">
                .clearfix {height:1px;}
            </style>
        <![endif]-->
    </head>
    <body>

      
<div id="maincontainer">

<div id="header">
<div id="immobilienbewertungen">
</div>
<div id="name">
</div>
<div id="title">
</div>
</div>
<div id="header_blau1">
</div>
<div id="slider">
</div>
<div id="navigation"><container id="30" name="Navigation_Main" types="Navigation" mode="fixed" default="Navigation_Main">Navigation_Main</container>
</div>
<div id="content">
 <container id="50" name="Headline" types="Content" mode="optional" default="Headline">Headline</container>
                        <container id="51" name="SubHeadline" types="Content" mode="optional" default="Sub_Headline">SubHeadline</container>
                        <container id="52" name="Text" types="Content" mode="optional" default="">Content 1</container>
                        <container id="53" name="Text" types="Content" mode="optional" default="">Content 2</container>
                        <container id="54" name="Text" types="Content" mode="optional" default="">Content 3</container>
                        <container id="55" name="Text" types="Content" mode="optional" default="">Content 4</container>
                        <container id="56" name="Text" types="Content" mode="optional" default="">Content 5</container>
                        <container id="57" name="Text" types="Content" mode="optional" default="">Content 6</container>
                        <container id="58" name="Text" types="Content" mode="optional" default="">Content 7</container>
                        <container id="59" name="Text" types="Content" mode="optional" default="">Content 8</container>
</div> <!--content zu/*-->
<div id="footer">
 <container id="75" name="Navigation_Meta" types="Content" mode="fixed" default="Navigation_Meta">Navigation_Meta</container>
             <!--footnotes auskommentieren.... <container id="76" name="Footnotes" types="Content" mode="fixed" default="Footnotes">Footnotes</container> /*--> 
</div><!--footer zu/*-->

</div> <!--website zu/*-->

    </body>

</html>
und die CSS:

Code: Alles auswählen

/**
 * CSS styles for Contenido sample client.
 * 
 * @author Rudi Bieller
 * @copyright four for business AG <www.4fb.de>
 * @version 1.0.0
 * 
 * created 2008-03-04
 */

 /* ----------------- general html structure */
 html, body, div, p, td, a, input, textarea, select {
    font-family:Verdana, Arial, sans-serif;
    color:#606060;
}

body
{
background-image: url(../images/tmpl_immobilien/background2.png);
/*text-align: center;*/
}


#maincontainer
{
width:910px;
height: 690px;
position: relative;
/*text-align: left;*/
background-image: url(../images/tmpl_immobilien/schlagschatten.png);
margin: 50px auto;
}

#header
{
height: 100px;
width:900px;
float: center;
background-color: white;
}

#header #immobilienbewertungen
{
height: 100px;
width: 304px;
float: left;
/*background-color: black;*/
/*background-image: url(..images/tmpl_immobilien/immobilienbewertungen.png);*/
}

#header #name
{
height: 100px;
width: 332px;
float: right;
/*background-color: green;*/
background-image: url(../images/tmpl_immobilien/name_title.png);
}

#header_blau1
{
height: 10px;
width:900px;
float: left;
background-color: darkblue;
}

#slider
{
height: 160px;
width:900px;
float: left;
background-color: white;
background-image: url(../images/tmpl_immobilien/slider.png);
}

#navigation
{
height: 30px;
width:900px;
float: left;
background-color: darkblue;
padding: 0px;
margin: 0px;

}

#content
{
height: 360px;
width:900px;
background-color: white;
float: left;
font-family: calibri;
font-size: 13px;
color: darkgrey;
line-height: 5px;
}

#footer
{
height: 25px;
width:900px;
float: left;
background-color: darkblue;
font-family: calibri;
font-size: 10px;
color: white;
text-align: right;
padding: 0px;
margin: 0px;
}



/* ###################################################### */
/* ####################### NAVIGATION ################### */
/* ###################################################### */

/* Level 1 */
#navigation ul {
    width:900px;
    margin:0;
    padding:0;
    /*background-color:#F2F2F2;*/
    background-color:transparent;


}
#navigation ul li {
    width:220px;
    margin:0;
    padding:0 0 0 10px;
    list-style-type:none;
    display: inline;
    
}
#navigation ul li a {
    display:block;
    width:220px;
    height:19px;
    line-height:19px;
    margin:0;
    padding:0 0 0 10px;
    font-size:13px;
    /*background-image:url(../images/navi_pfeil_zu.gif);*/
    background-repeat:no-repeat;
    background-position:210px 3px;
    text-decoration:none;
    display: inline;
    color: white;
}
#navigation ul li a:hover, #navigation ul li.active a {
    /*background-image:url(../images/navi_over.gif);*/
    background-repeat:no-repeat;
    background-position:0 0;
    color:#fff;
    display: inline;
}

/* Level 2 */
#navigation ul li.navmainStandardLevel_2 {
    margin-left:10px;
}
#navigation ul li.navmainStandardLevel_2 a {
    background-image:url(../images/subnavi_pfeil_zu.gif);
    background-repeat:no-repeat;
    background-position:199px 8px;
    border-bottom:1px dotted #ccc;
    color:#666;
    width:210px;
}
#navigation ul li.navmainStandardLevel_2 a:hover, #navigation ul li.navmainStandardLevel_2 a.active {
    background-image:url(../images/subnavi_over.gif);
    background-repeat:no-repeat;
    background-position:0 0;
    color:#fff;
}

/* Level 3 */
#navigation ul li.navmainStandardLevel_3 {
    margin-left:20px;
}
#navigation ul li.navmainStandardLevel_3 a {
    background-image:none;
    border-bottom:0;
    color:#666;
    width:200px;
}
#navigation ul li.navmainStandardLevel_3 a:hover, #navigation ul li.navmainStandardLevel_3 a.active {
    background-image:url(../images/subsubnavi_over.gif);
    background-repeat:no-repeat;
    background-position:0 0;
}
/* ###################################################### */
/* ####################### SEARCH INPUT ################# */
/* ###################################################### */
#search {
    margin:20px 0 0 20px;
    font-size:11px;
    background-color:transparent;
}
#search label {
    font-size:11px;
    display:block;
    float:left;
    width:42px;
    padding:2px 0 0 0;
}
#search input {
    border:1px solid #ccc;
    width:140px;
    height:12px;
    font-size:10px;
}
#search input.sbmt {
    border:0;
    width:5px;
    height:8px;
    margin:0 0 0 10px;
}
/* ###################################################### */
/* ####################### SEARCH OUTPUT ################ */
/* ###################################################### */
#searchResults {
    margin:0 0 10px 0;
}
#searchResults p.message {
    margin:20px 0 30px 0;
}
#searchResults div.searchResultItem {
    border-bottom:1px solid #ccc;
    margin:0 0 10px 0;
    padding:0 0 10px 0;
}
#searchResults div.searchResultItem h2 {
    font-size:14px;
    margin:0 0 5px 0;
    padding:0;
    color:#0060b1;
    font-style:normal;
}

/* ###################################################### */
/* ####################### MAIN CONTENT ################# */
/* ###################################################### */
#content {
    font-size:11px;
    color:#333;
    line-height:14px;
}
#content h1, #content h2 {
    margin:0 0 10px 0;
    padding:0;
    font-size:20px;
    font-weight:normal;
    color:#333;
}
#content h1 {
    line-height:22px;
}
#content h1 a {
    color:#0060b1;
    text-decoration:none;
}
#content h2 {
    font-style:italic;
    font-size:11px;
}

img.hr {
    display:block;
    margin:10px 0;
    padding:0;
}


/* ###################################################### */
/* ####################### LINKS ######################## */
/* ###################################################### */
a {
    color:#0060b1;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}

/* ###################################################### */
/* ####################### CONTACT FORM ############'#### */
/* ###################################################### */
#contactForm {
    font-size:11px;
}
#contactForm .contactRow {
    margin:4px 0;
}
#contactForm label {
    display:block;
    float:left;
    width:80px;
}
#contactForm .contactRow input, #contactForm .contactRow textarea {
    border:1px solid #ccc;
    width:346px;
}
#contactForm .contactRow select {
    border:1px solid #ccc;
    width:172px;
}
* html #contactForm .contactRow input, * html #contactForm .contactRow textarea {
    width:343px;
}

#contactForm .contactRow input {
    height:14px;
}

#contactForm .contactRow textarea {
    height:105px;
    font-size:10px;
}

#contactFormSubmit #contactFormSubmitLeft {
    float:left;
    margin:0 0 0 80px;
    width:174px;
}
* html #contactFormSubmit #contactFormSubmitLeft {
    margin:0 0 0 26px;
}
#contactFormSubmit #contactFormSubmitRight {
    float:right;
    width:174px;
}

#contactFormSubmit #contactFormSubmitLeft input, 
#contactFormSubmit #contactFormSubmitRight input {
    background-color:#fff;
    border:0;
    color:#0060b1;
    padding:0 20px 0 0;
    background-image:url(../images/link_pfeil.gif);
    background-repeat:no-repeat;
    background-position:right 4px;
    font-size:10px;
    width:auto;
    height:auto;
    float:right;
    margin:0;
}
#contactFormSubmit #contactFormSubmitLeft input {
    background-image:none;
    padding:0;
    float:left;
}

#contactForm table {
    width:100%;border-collapse:collapse;
}
#contactForm table td {
    padding:0;
}
#contactForm table td.pt {
    padding-top:2px;
}
* html #contactForm table td.pt {
    padding-top:0;
}
/* ###################################################### */
/* ####################### BACKEND STYLES ############### */
/* ###################################################### */
#modHeaderImgEdit {
    position:absolute;
    top:60px;
    left:270px;
}


/* good old clearfix - remember to use conditional comment for ie6 with .clearfix {height:1px;} */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */



/**** IMAGE GALLERY ****/
table.gallery {
    margin: 20px 10px 0px 0px;
    width: 410px;
}

table.gallery td.gallery-navigation {
    /*font-size: 0.6875em;*/    
}

table.gallery tr.thumbnails td {
    padding: 0;
}

table.gallery dd {
}

div.download {
    padding: 3px 0 3px 10px;
    background: url(../images/link_pfeil_klein.gif) no-repeat 0px 7px;

}

div.downloadImg {

    padding: 0;
    margin-top:10px;
    background: url(../images/navi_pfeil_rechts.gif) no-repeat 10px 7px;
}

dl.gallery-detail {
    margin: 20px 10px 0px 0px;
}

dl.gallery-detail dt {
    text-align: left;
    padding: 0;
}


td.gallery_image{
    height: 220px;
    padding:0px;
    
}
td.gallery_image div.link_image{
    padding:0;  
    background-position:top center; 
    min-height:120px; 
    margin-bottom:5px; 
    overflow:hidden;
}
td.gallery_image .bottom_links{
     height:40px; margin-top:10px;
}
td.gallery_image .bottom_links{
    margin-bottom: 0px; 
    text-align:left; 
    width:180px; 
}
td.gallery_image .links{
    margin-bottom: 0px;
}


/**
 * CSS styles for Contenido Sitemap.
 * 
 * @author rbi
 * @copyright four for business AG <www.4fb.de>
 * @version 0.1.0
 * 
 * created 2009-01-16
 */

ul.sitemapStandardMainCat {
        margin-left:0;
        padding-left: 0;
}

ul.sitemapStandardMainCat li {
    border-bottom: 1px solid #ffffff;
    list-style-type: none;
}

ul.sitemapStandardMainCat li.sitemapStandardLevel_1 {
        background-color: #e6f1fb;
        padding: 3px 3px 3px 10px;
}

ul.sitemapStandardMainCat li.sitemapStandardLevel_2 {
        background-color: #f4f9fd;
        padding: 3px 3px 3px 30px;
}

ul.sitemapStandardMainCat li.sitemapStandardLevel_3 {
        background-color: #ffffff;
        padding: 3px 3px 3px 50px;
}

.teaser_image {
    float:left; 
    margin-top:4px; 
    margin-right:4px;
}
Hat jem eine Idee? Danke für Eure Hilfe.

LG

Lars

Re: Probleme mit der Darstellung im Hauptcontainer

Verfasst: Do 26. Jan 2012, 09:15
von Spider IT
Hallo Lars,

die beiden Container, die laut Layout voreingestellt sind, sind Headline und Subheadline.
Diese sind für die Überschriften h1 und h2 vorgesehen (eben Headline und Subheadline).
In Überschriften sollte keine Formatierung stattfinden, sie sind über das Stylesheet formatiert.
Auch sollte hierin kein Bild oder sonstiges Element zu finden sein.
Deshalb wird für die Ausgabe im Frontend jegliches HTML-Tag daraus entfernt.

Um unter den Unterschriften Inhalt zu positionieren musst du im Template in den nächsten Container das Modul "Text (HTML)" aufnehmen.
Darin kannst du dann in den Artikeln alles machen, auch Bilder und sonstige Elemente aufnehmen.

Gruß
René

Re: Probleme mit der Darstellung im Hauptcontainer

Verfasst: Do 26. Jan 2012, 14:40
von larsreinke
Hey Rene,

was für ein böder Fehler von mir... da hätte ich noch lange gesucht.
Du hast absolut Recht, vielen Dank für Deinen Hinweis. habe es geändert und nun läuft es einwandfrei... Super vielen Dank für Deine Hilfe.

Hab noch ein paar Punkte, muss aber erst selbst rumprobieren und im Forum suchen, nur so lerne ich dann auch...
LG
Lars
Alle Zeiten sind UTC+01:00
Seite 1 von 1

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de