Contao-Camp 2024
Seite 2 von 2 ErsteErste 12
Ergebnis 41 bis 73 von 73

Thema: Erstes Layout mit oder ohne grid.css?

  1. #41
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.494
    User beschenken
    Wunschliste

    Standard

    Der Unterschied zu Subcolumns ist aber, das ich nicht selbst die, ich nenne es mal Hauptspalten definiere, das macht Contao für mich. Das Grid von Contao was ich aufgebohrt habe stützt sich auf Artikel wie das Original. Subcolumns so weit ich weiß auf Elemente.

    Das ist also eine ganz andere Weise wie daran gegangen wird.
    Außerdem ist mit dem reinem setzen der Prozentwerte ja noch nicht alles getan.
    Fonts bekommen em Werte, Pixelbreiten werden eliminiert, table tags ersetzt usw.
    Mir gehts auch um die automatischen Anpassungen bei geringeren Browsergrößen, und das ohne Anpassung des Frontend Templates fe_page.
    (wegen Sticky Footer hab die dann doch angepasst, aber nicht wegen des Grids)

    Wie ich bereits schrieb gibt es aber Core Partial Templates die sich überhaupt nicht darum scheren ob ich mit Prozent Werte, em's o.ä. arbeite, da darin feste Pixel Größen stehen oder generierte Werte innerhalb von html tags, die sich jeweils bei Änderung der Browsergröße ebend nicht anpassen.
    Da hilft auch kein Subcolumns, xGrid oder sowas.
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

  2. #42
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.494
    User beschenken
    Wunschliste

    Standard

    Hallo Monic49,

    falls du den anderen Thread noch nicht gesehen hast, hier meine Infos.
    http://contaogrid.glen-langer.de/
    Wird ständig vervollständigt und erweitert, wie weit ich halt selber bin.
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

  3. #43
    Contao-Fan Avatar von Monic49
    Registriert seit
    15.08.2010.
    Ort
    Frankfurt an der Oder
    Beiträge
    255

    Standard

    Danke BugBuster, werde es gleich studieren!
    Meine Anerkennung!

  4. #44
    Gesperrt
    Registriert seit
    07.05.2011.
    Beiträge
    1.199

    Standard

    @Andreas
    Ob nun Grid-Layouts oder YAML, letztlich unzureichende Kompromisse und gehört hoffentlich beides bald der Vergangenheit an. Immerhin ist zumindest das CSS3 Multi-Column Layout Modul bereits Candidate Recommendation. Na ja, ich hoffe es wird dann entgegen liebgewonnenen Gewohnheiten halbwegs zeitnah auch in Mr. Gates Sadomaso-Browser implementiert.

    http://www.drweb.de/magazin/css-spal...moglichkeiten/



  5. #45
    Contao-Nutzer
    Registriert seit
    22.12.2010.
    Beiträge
    243

    Standard

    Hallo BugBuster u.@ All,

    gratulation, auf Deine Grid-Site wird schon fleißig im Netz verlinkt. Ich glaube eine in Contao
    integrierte Grid-Lösung wird nicht so schnell obsolet werden. Habe leider noch, mal wieder, Fragen:

    Du hast in der basic-sticky zu:

    Code:
    h1
    {
    	margin:0 0 1em;
    	padding:0;
    	font-weight:bold;
    	font-size:1.167em;
    }
    h2
    {
    	margin:0 0 6px;
    	padding:0;
    	font-weight:bold;
    	font-size:1em;
    }
    eine relativ (für mich) große fontsize. Auf Deiner Beispiel Grid kommt mir dies nicht so vor und die normale Text-Schrift scheint mir dafür eher etwas klein.

    übersehe sicher was, nur was?
    (an der contao-css habe ich nichts geändert)

    Gruss Ria

  6. #46
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.494
    User beschenken
    Wunschliste

    Standard

    ja, da ich im body die Schriftgröße verkleinert habe, bzw. ich sage damit das alles sich relativ darauf bezieht:
    Code:
    body {
       font-size: 0.75em;
    }
    D.h. hier wird von 16pixel (1em) auf 12Pixel (0.75em) runtergesetzt.

    H1 hat damit 14Pixel, H2 wegen 1em dann 12 Pixel.

    Nachtrag: und grad habe ich das geändert, beide Überschriften nun etwas größer, damit H2 größer wird wie der normale Text.
    Geändert von BugBuster (03.06.2011 um 23:03 Uhr)
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

  7. #47
    Contao-Nutzer
    Registriert seit
    22.12.2010.
    Beiträge
    243

    Standard

    Hallo BugBuster u.@ All,

    besten Dank BugBuster, leider mal wieder was. Müßte ich nicht so auch ein Bild im footer sehen?

    Code:
    body.startseite #footer
    {
    	background:url (tl_files/bottombilder/footer_740.png) no-repeat bottom;
    }
    
    body.startseite #header
    {
    	background:url(tl_files/topbilder/header_blue.png) no-repeat top;
    }

    im Seitenlayout ist die Fusszeile auch eingefügt. Oder ist zwingend das Frontendmodul Fusszeile
    (eigener HTML Code) nötig,um dies da einzubinden. Beim header geht es so wie oben, sitzt auf Mitte, ohne sonstige Klimmzüge. Oder fehlt noch Code, was den "sticky - footer" betrifft?

    Gruss Ria

  8. #48
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.494
    User beschenken
    Wunschliste

    Standard

    Also das funktioniert bei mir einwandfrei.
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

  9. #49
    Contao-Nutzer
    Registriert seit
    22.12.2010.
    Beiträge
    243

    Standard

    Hallo Bugbuster,

    da hast Du sicher recht! Habe oben ein Leerzeichen drin:

    Code:
    background:url (tl_files/
    muss natürlich so aussehen:

    Code:
    background:url(tl_files/
    sorry, bei code habe ich leider so meine Probleme...

    Gruss Ria

  10. #50
    Contao-Nutzer
    Registriert seit
    22.12.2010.
    Beiträge
    243

    Standard

    Hallo Bugbuster u. @ All,

    Nach Behebung anderer Probleme will es mit dem sticky-footer bei mir immer noch nicht.

    1. - Frontendmodul "eigener html code":

    Code:
    <!-- indexer::stop -->
    {{insert_article::24}}
    <div id="footer">
    <img src="/test02/tl_files/footer/footer.jpg" height:200px width:10px alt="" title="" />
    Letzte Aktualisierung: {{last_update::d.m.Y}} | Alle Rechte vorbehalten | &copy: {{date::Y}}
    </div>
    <!-- indexer::continue -->
    2. -Habe dem footer unter "Themes Stylesheets" ein eigenes verpasst:

    Code:
    #footer
    {
            max-height:200px;
    	background:url("test02/tl_files/footer/footer.jpg") repeat-x fixed bottom;
    }
    Jetzt mal unabhängig von den noch zu machenden Textformatierungen, auf Artikel Datensatz 24
    bearbeiten, habe ich unter "CSS-ID/Klasse" links footer und rechts g16 eingetragen.


    2 FRAGEN:

    a) kann es sein, dass es beim Footerbild keine Bildwiederholung nach rechts gibt, weil ich bereits
    das body Webseitenhintergrundbild mit repeat wiederhole? Oder was mache ich falsch?

    b) die Footerhöhe dehnt sich nach oben aus, durch den {{insert_article::24}} Text, was mache ich da am Besten?

    Gruss Ria

  11. #51
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.494
    User beschenken
    Wunschliste

    Standard

    Äh, warum legst du ein HTML Modul an und definierst darin ein div id=footer ? Das gibt es doch schon vom Layout, sofern sticky footer template verwendet und im Layout genutzt.
    Und dann legst du im Artikel selbst nochmal eine id footer fest, das darf nicht sein, eine id muss eindeutig je Seite sein.
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

  12. #52
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hier ist mal meine Lösung für Sticky-Footer (Full-Height-Layout). Ist im Prinzip das gleiche wie auf http://www.cssstickyfooter.com/, nur angepasst an Contao bis 2.10.x und etwas anders aufbereitet. Vielleicht kommst du oder andere damit ja besser klar.

    Der Footer muss auf jeden Fall eine festgelegte Höhe haben, sonst kann es das Layout zerschießen. max-height reicht hier nicht, du musst height verwenden. Zur Sicherheit könnte man dem Footer noch overflow:hidden geben, falls Kunden dort Inhalte einpflegen.

    Da der Footer über dem Body liegt, wird ein Hintergrund des Footers den Hintergrund des Bodys überdecken.

    Und wie BugBuster schon sagte, vergib IDs nur, wenn du ganz sicher bist, dass diese ID auf einer Seite nur einmal benutzt wird. Wie du selbst gezeigt hast, hat dein Markup ja schon eine ID
    <div id="footer">
    und den entsprechenden Selektor
    #footer
    Über welchen du den Container ansprichst und formatierst. Ich würde den Footer aber auch nicht über ein HTML-Modul, sondern einen Artikel einpflegen, dann hast du mit HTML nichts zu tun und bist auf der sicheren Seite. Allerdings verstehe ich auch nicht, warum du einen Footer als Modul anlegst, wo er doch schon im Framework enthalten ist.

    Gruß Andreas

    ps Die unterstrichenen Texte hier sind irgendwie nicht so gut. Unterstrichene Texte im Internet suggerieren immer 'ich bin ein Link'.
    Angehängte Dateien Angehängte Dateien
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  13. #53
    Gesperrt
    Registriert seit
    07.05.2011.
    Beiträge
    1.199

    Standard

    Zitat Zitat von Andreas Beitrag anzeigen
    Hier ist mal meine Lösung für Sticky-Footer (Full-Height-Layout). Ist im Prinzip das gleiche wie auf http://www.cssstickyfooter.com/, nur angepasst an Contao bis 2.10.x und etwas anders aufbereitet. Vielleicht kommst du oder andere damit ja besser klar.
    Hallo Andreas,
    Ich komme bislang für meinen Bedarf mit dem normalen sticky_footer gut klar. Außer dass mich der permanente Scrollbalken etwas stört und dass der Footer eben ohne zu scrollen auch bei wenig Inhalt in main.inside nie sichtbar ist. Aber auch dafür bzw. dagegen fand ich kürzlich einen Thread mit Workaround.

    Was ist denn an Deiner Lösung anders und was musste denn für 2.10x angepasst werden? Bedeutet das, die Normalversion müsste für die Weiterverwendung unter 2.10 ebenfalls angepasst werden?

  14. #54
    Contao-Nutzer
    Registriert seit
    22.12.2010.
    Beiträge
    243

    Standard

    Hallo zusammen,

    besten Dank für die Hinweise, leider verstehe ich noch nicht alles:

    @ BugBuster

    das darf nicht sein, eine id muss eindeutig je Seite sein.
    das habe ich schon mal geändert.

    nach dem ich das erste mal nicht klar kam habe ich Deine fe_page_sticky.tpl genommen.

    Ausschnitt:

    Code:
    <?php echo $this->getCustomSections('after'); ?>
    
    <!-- indexer::stop -->
    <img src="<?php echo $this->base; ?>cron.php" alt="" class="invisible" />
    <!-- indexer::continue -->
    
    </div>
    <?php if ($this->footer): ?>
    <div id="footer">
    <div class="inside">
    <?php echo $this->footer; ?> 
    </div>
    </div>
    <?php endif; ?>
    
    <?php echo $this->mootools; ?>
    In Deiner basic-sticky (css)ist nichts drin mit footer, außer dem Satz:

    Code:
    /* Die Höhe des Footers, wird später 
     * auch noch mal in #footer definiert */
    ich habe deshalb (aber falsch) dies und jenes versucht, da fehlt in Deinem Download wohl
    noch code denke ich mal, oder?

    @ Andreas

    bin leider noch immer etwas css schwach(habe jetzt noch 2 neue Bücher)nützt aber hierzu noch nix

    Code:
    <div id="footer">
      Footer is next sibling of #wrapper, just above $this->mootools.
      (Contao <= 2.9.5: Make sure, that the cron image stays inside the #wrapper.)
      That's all you have to change in your fe_xxx.tpl|xhtml|html5, not more.
      Simply drag the footer incl. its PHP IF-statement right above $this->mootools and drop.
    </div>
    verstehe zwar was da steht, verstehe aber nicht wie das "praktisch" zu vollziehen, bzw. zu verstehen ist, das "Footer is next sibling of #wrapper," verstehe ich allerdings gar nicht. Oder reicht oben das <div>, von Bugbuster zu footer?

    Vielleicht noch 2 Sätze für eine DAU /in

    Gruss Ria

    PS. habe das Modul "Fußzeile [Eigener HTML-Code]" behalten, weil in den Footer soll ja mehr rein als die Zeile.

  15. #55
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.494
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von Ria Beitrag anzeigen
    @ BugBuster
    In Deiner basic-sticky (css)ist nichts drin mit footer, außer dem Satz:
    Code:
    /* Die Höhe des Footers, wird später 
     * auch noch mal in #footer definiert */
    ich habe deshalb (aber falsch) dies und jenes versucht, da fehlt in Deinem Download wohl noch code denke ich mal, oder?
    Ja, in dem Beispiel ja, ich habe die #footer Definition in einer weiteren CSS Datei die aber nicht veröffentlicht ist, da speziell für diese Seite.

    Habe mal das Basic Beispiel ergänzt:
    Code:
    /* Sticky Footer Hoehe als height und margin-top */
    #footer
    {
        height:50px;
        position:relative;
        margin-top:-50px;
        margin-right:auto;
        margin-left:auto;
        max-width: 1140px;
        min-width: 755px;
    }
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

  16. #56
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von soweit_ok Beitrag anzeigen
    Außer dass mich der permanente Scrollbalken etwas stört und dass der Footer eben ohne zu scrollen auch bei wenig Inhalt in main.inside nie sichtbar ist. Aber auch dafür bzw. dagegen fand ich kürzlich einen Thread mit Workaround.
    Dann hast du die Lösung von http://www.cssstickyfooter.com/ irgendwie nicht richtig umgesetzt. Einen Workaround bedarf es eigentlich nicht. Einen permanenten Scrollbalken sieht man damit nicht, außer einen ausgegrauten, welchen man mit html{overflow-y: scroll} erzeugt, um ein Layouthüpfen bei zentrierten Seiten zu vermeiden. Der hat aber nix mit der Lösung zu tun.
    Zitat Zitat von soweit_ok Beitrag anzeigen
    Was ist denn an Deiner Lösung anders und was musste denn für 2.10x angepasst werden?
    Nein, die normale Version muss nicht angepasst werden, außer, dass man natürlich die neue fe_page als Template nimmt. Aber die Version kann vereinfacht werden, man braucht nicht mehr den Conditional Comment für IE!7 im HEAD, da jetzt jeder Browser 3 eigene Klassen in den BODY generiert bekommt, eine fürs Betriebssystem, eine für die Browserfamilie und einen für die Browserversion.

    @Ria Im Prinzip hab ichs ja dreimal dort reingeschrieben. Einmal das Schaubild der DIV-Struktur, dann die Erklärung mit dem Sibling... und das mit dem Drag and Drop. Ist alles das gleiche, es geht halt darum, dass dein HTML-Markup für die Lösung von http://www.cssstickyfooter.com/ auch dem von dieser Lösung entsprechen muss. Also Footer als letzter Container, außerhalb vom Wrapper. So wie du es auch bereits haben solltest. Mit Contao haben wir allerdings noch einen zweiten Container 'Header' direkt im Wrapper, den wir aber einfach ignorieren können, die Lösung fünzt auch mit dem Header.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  17. #57
    Contao-Nutzer
    Registriert seit
    22.12.2010.
    Beiträge
    243

    Standard

    Hallo BugBuster @ Andreas

    Ich bilde mir ein, alles so wie beschrieben gemacht zu haben, jedoch der Footer sollte am unteren Ende des Browserfensters kleben, ist bei mir kurz unter den Inhalten.

    Ich habe im Seitenlayout Fußzeile 160px;
    Im style:

    Code:
    #footer
    {
    	height:160px;
    	position:relative;
    	margin-top:-160px;
    	margin-right:auto;
    	margin-left:auto;
    	max-width: 1140px;
    	min-width: 755px;
    	clear:both;
    }
    ich habe allerdings noch ganz wenig Inhalt in der Linken- und in der Hauptspalte.
    Muß da ein Vertikaler Mindestinhalt rein? Oder habt Ihr noch einen Tipp?

    mache ich in die Hauptspalte vertikal gesehen mehr rein, dann sieht es natürlich besser aus, müßte aber doch auch mit wenig Inhalt stimmen können, oder?

    Gruss Ria

  18. #58
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Genau darum geht es ja, dass der Footer bei wenig Inhalt am unteren Ende des Viewports sitzt und es keine vertikale Scrollmöglichkeit gibt.

    Das CSS nur für den Footer reicht allerdings nicht, wie du in den Lösungen sehen kannst. Du musst halt alles umsetzen.

    Gruß Andreas
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  19. #59
    Contao-Nutzer
    Registriert seit
    22.12.2010.
    Beiträge
    243

    Standard

    Hallo,


    Hallo Andreas, BugBuster u. @ All

    ich hoffe Ihr verliert nicht die Geduld komplett mit mir, hier noch mal eine Zusammenfassung:

    Code:
    /* Sticky Footer css komplett in extra layout-themes-footer */
    
    html, body, #wrap {height: 100%;}
    
    body > #wrap {
        height: auto;
        min-height: 100%;
    }
    
    #main {padding-bottom: 160px;}  /* Muss genau so hoch sein wie der Footer */
    
    #footer {
        position: relative;
    	margin-top: -160px; /* Negativer Wert der Footer-Höhe */
    	margin-right:auto;
    	margin-left:auto;
    	max-width: 1140px;
    	min-width: 755px;
    	height: 160px;
    	clear:both;
    }
    
    /*clearfix fuer chrome usw.*/
    
    .clearfix:after {
        content: ".";
    	display: block;
    	height: 0;
    	clear: both;
    	visibility: hidden;
    }
    .clearfix {display: inline-block;}
    
    /* Bereich nicht für IE-mac Anfang \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* Bereich nicht für IE-mac Ende */
    
    /*hier die boxen links,mitte,rechts je Modul-html, erst mal nicht aktiviert*/
    
    /*#footer
    {
    	padding-top:4px;
    	padding-bottom:4px;
    	background-color:#0F3352;
    	color:#fff;
    	font-size: 85%;
    }
     
    #footer a:link, #footer a:visited
    {
    	color:#FFD940;
    }
     
     #footer a:hover, #footer a:focus, #footer a:active
    {
    	color:#fff;
    }
     
    #foot_links
    {
    	width:220px;
    	float:left;
    }
     
    #foot_rechts
    {
    	width:220px;
    	float:right;
    }
     
    #foot_mitte
    {
    	position:relative;
    	width:auto;
    	margin-left:220px;
    	margin-right:220px;
    }
    */
    ################################################## ##

    Hier die fe_page-sticky:

    Code:
    <! --letztes ist zum footer im head -->
    <!--[if !IE 7]>
    
      <style type="text/css" media="screen">
    
      /*<![CDATA[ */
    
        #wrapper {
    
          display: table;
    
          height: 100%;
    
        }
    
      /* ]]>*/
    
      </style>
    
    <![endif]-->
    <!--ENDE -->
    
    </head>
    
    <body id="top"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
    <div id="wrapper">
    <?php if ($this->header): ?>
    
    <div id="header">
    <div class="inside">
    <?php echo $this->header; ?> 
    </div>
    </div>
    <?php endif; ?>
    <?php echo $this->getCustomSections('before'); ?>
    
    <div id="container" class="clearfix">
    <?php if ($this->left): ?>
    
    <div id="left">
    <div class="inside">
    <?php echo $this->left; ?> 
    </div>
    </div>
    <?php endif; ?>
    <?php if ($this->right): ?>
    
    <div id="right">
    <div class="inside">
    <?php echo $this->right; ?> 
    </div>
    </div>
    <?php endif; ?>
    
    <div id="main">
    <div class="inside">
    <?php echo $this->main; ?> 
    </div>
    <?php echo $this->getCustomSections('main'); ?> 
    <div id="clear"></div>
    </div>
    
    </div>
    <?php echo $this->getCustomSections('after'); ?>
    
    <!-- indexer::stop -->
    <img src="<?php echo $this->base; ?>cron.php" alt="" class="invisible" />
    <!-- indexer::continue -->
    
    /*fuer den footer eigentlich ab hier:*/
    
    </div>
    <?php if ($this->footer): ?>
    <div id="footer">
    <div class="inside">
    <?php echo $this->footer; ?> 
    </div>
    </div>
    <?php endif; ?>
    
    <?php echo $this->mootools; ?>
    
    </body>
    </html>
    #################################################

    Hier die bassic_sticky css:

    Code:
    /* Style sheet basic-sticky */
    html,
    
    {
    	background-color:#f1f7f6;
    	overflow-y: scroll;
    }
    /* keine Farbe zu wrapper,weil Hintergrundgrafik */
    body,
    #wrapper
    {
    	height:100%;
    	background-color:#;
    }
    /* header-Bereich */
    body > #wrapper
    {
    	height:100%;
    	background-color:#;
    	min-height: 100%;
    }
    .ie #wrapper
    {
    	height:100%;
    	display:table;
    }
    .ie7 #wrapper
    {
    	height:auto;
    	display:block;
    	min-height: 100%;
    }
    body
    {
    	margin:0;
    	padding:0;
    	font-family:Tahoma,Geneva,Verdana,sans-serif;
    	font-size:0.8em;
    	color:#000000;
    	line-height:1.3em;
    	background:url("/test02/tl_files/bilder/body.jpg") repeat-x fixed top left;
    }
    /* container ist der Mittelbereich */
    #container
    {
    	padding-bottom:50px;
    	background-color:#;
    }
    a,
    body,
    div,
    em,
    input,
    label,
    li,
    ol,
    p,
    select,
    span,
    strong,
    td,
    th,
    textarea,
    u,
    ul
    {
    	font-family:Tahoma,Geneva,Verdana,sans-serif;
    }
    h1
    {
    	margin:0 0 0.8em;
    	padding:0;
    	font-weight:bold;
    	font-size:1.2em;
    }
    h2
    {
    	margin:0 0 6px;
    	padding:0;
    	font-weight:bold;
    	font-size:1.1em;
    }
    h3
    {
    	margin:0 0 6px;
    	padding:0;
    	font-weight:bold;
    	font-size:0.8em;
    }
    h4
    {
    	margin:0 0 6px;
    	padding:0;
    	font-weight:bold;
    	font-size:0.8em;
    }
    h5
    {
    	margin:0 0 5px;
    	padding:0;
    	font-weight:bold;
    	font-size:0.7em;
    }
    h6
    {
    	margin:0 0 4px;
    	padding:0;
    	font-weight:bold;
    	font-size:0.6em;
    }
    a,
    a:link,
    a:visited
    {
    	font-weight:normal;
    	color:#000000;
    }
    a:hover
    {
    	text-decoration:none;
    	color:#CC0000;
    }
    img
    {
    	vertical-align:middle;
    	border:0 none;
    }
    pre,
    form
    {
    	margin:0;
    	padding:0;
    }
    p
    {
    	margin:0;
    	padding:0 0 10px;
    }
    ##############################################
    sorry für soviel Code. Wenn oben das alles richtig wäre, dann bräuchte ich an den Stellen schon mal nicht
    weiter Fehler zu suchen(dann "nur" noch in der Funktion Contao-Backend selbst, meine Bedienungsfehler!)

    Kann jemand so nett sein und zu oben eine Aussage machen, bzw. mich evtl. verbessern?

    Gruss Ria

    PS. vielleicht hilft der Thread ja sonst noch jemand, um weiterzukommen

  20. #60
    Contao-Nutzer
    Registriert seit
    22.12.2010.
    Beiträge
    243

    Standard

    Hallo zusammen,

    nun funktioniert es zumindest erstmals schon mal richtig!

    Habe einfach mal:

    Code:
    border-top:2px solid #666;
    color:#fff;
    background: ##EA14A7;
    nur zum testen dazugesetzt unter #footer und schon sehe ich wenigstens was ich da gemacht habe.
    Jetzt muss ich den nächsten Versuch machen da Inhalte an die richtigen Stellen zu bekommen.

    Das Backend vernünftig (Fehlerfrei) zu bedienen, ist wohl immer noch nicht voll gewährleistet.
    Da hilft wohl nur weiter üben!

    Gruss Ria

  21. #61
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Code bei CSS-Fragen bringt nicht viel, da wird auch nicht gerne geholfen. Du solltest eine Seite anbieten. Mir ist nur grad aufgefallen, dass du body > #wrap oben stehen hast, das ist kein Default-Container von Contao. Und falls du es noch nicht machst, experimentiere mit deinem CSS über das Firefox Addon Firebug.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  22. #62
    Contao-Nutzer
    Registriert seit
    22.12.2010.
    Beiträge
    243

    Standard

    @ Andreas

    dass du body > #wrap oben stehen hast,
    besten Dank, das habe ich noch geändert und sieht jetzt erstmal so OK aus. ABER:

    Hallo @ All u. Bugbuster,

    bei BugBusters (http://contaogrid.glen-langer.de/) Grid Akademie, bleibt beim Verkleinern der Seite, also Tasten Strg und - Minus, im FF, die Seite am unteren Browserfenster kleben.

    Wird also nur in der Breite schmäler. Bei mir ist nach dem 2 Klick die leere Seite unter dem Footer zu sehen.
    Beim normalen Aufruf bis zum 1 Klick (Strg und - Minus) ist ja noch die normale Footer-Farbe bis zum unteren Rand da. Danach ab dem 2 Klick sieht das nicht mehr so schön aus. Der Firebug hilft mir da nicht weiter. BugBuster hast Du da noch einen Kniff angewandt?

    Ein Tipp hierzu wäre sehr nett, danke.

    Gruss Ria

  23. #63
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.494
    User beschenken
    Wunschliste

    Standard

    Ja, ich habe das Sticky-Footer Prinzip eingebaut, mehr nicht.
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

  24. #64
    Gesperrt
    Registriert seit
    07.05.2011.
    Beiträge
    1.199

    Standard

    Zitat Zitat von Andreas Beitrag anzeigen
    Dann hast du die Lösung von http://www.cssstickyfooter.com/ irgendwie nicht richtig umgesetzt. Einen Workaround bedarf es eigentlich nicht. Einen permanenten Scrollbalken sieht man damit nicht, außer einen ausgegrauten, welchen man mit html{overflow-y: scroll} erzeugt, um ein Layouthüpfen bei zentrierten Seiten zu vermeiden. Der hat aber nix mit der Lösung zu tun.
    Danke für den kleinen Anschub ... Dein Kommentar hat mich am Ehrgeiz gekitzelt und dazu gebracht, mir das mit nochmal anzuschauen und das kleine Problemchen erfolgreich zu beheben. Hatte mich eigentlich nicht so sehr gestört, weil nur ein sehr kleiner Teil meiner Seiten so kurz ist.

    An sich hatte ich die Stickyfooter-Lösung korrekt umgesetzt. Ich brauchte nur zwei Kleinigkeiten am CSS ergänzen. Nämlich dem Footer margin-top:-footerhöhe zu geben und dem Mainbereich das entsprechende padding-bottom. Ja, das html{overflow-y: scroll} funktioniert. Ob ich es drinlasse, weiß ich allerdings noch nicht, denn ohne springen lediglich die Boxen der re. Spalte um die Breite der Scrollbar. Was optisch kaum auffällt und nicht unangenehm, weil ich ein bei jeder Viewportgröße formatfüllendes Liquid Layout habe.

    Gute Güte, erinner mich bloß nicht an die 2.10. Obgleich ich natürlich auf die Verbesserungen nicht verzichten möchte, gruselt mich schon ein bisschen vor der Umstellung. Na ja, momentan sind 70 Erweiterungen installiert und die meisten auch aktiviert. Muss ich dann alle erneut auf korrekte Funktion testen und bin mal gespannt, ob alles weiterhin fehlerfrei laufen wird. Vielleicht kann ich die 2.10 deshalb noch garnicht produktiv einsetzen.
    Geändert von soweit_ok (01.07.2011 um 20:16 Uhr)

  25. #65
    Contao-Nutzer
    Registriert seit
    22.12.2010.
    Beiträge
    243

    Standard

    Hallo, @Bugbuster

    da hast Du wohl recht! Bei mir ist jetzt aber alles OK, habe das css noch mal neu gemacht. Vermute es hatte was mit dem Hintergrundbild zu tun, welches jetzt im wrapper ist und vorher im body war.

    Ehrlich gesagt, bin ich mir nicht 100% sicher ob es daran lag. Aber es funktioniert ja jetzt.

    @ soweit_ok

    Ja, das html{overflow-y: scroll} funktioniert. Ob ich es drinlasse, weiß ich allerdings noch nicht,
    ich lasse es drin, Leute die selten im Internet sind irritiert es, wenn da plötzlich kein Scrollbalken ist, finde ich lustig stimmt aber.

    Gruss Ria

    PS. so jetzt geht es mit dem normalen Grid weiter, mal sehen wie weit ich komme

  26. #66
    Contao-Nutzer
    Registriert seit
    08.07.2011.
    Beiträge
    9

    Standard Gleiche Frage... Grid oder normal mit gegebenen Mitteln von Contao

    Zitat Zitat von schman Beitrag anzeigen
    Darf ich fragen warum du genau auf 1140px kommst?

    Wenn du das Grid System verwenden willst dann wirst du das Prozent grid verwenden müssen, da das px auf 960px basiert (soweit ich weiß)

    jetzt aber zurück zur Frage.
    wenn jemand das CMS verwendet der sich mit CSS etc auskennt, dann verwende ich immer das Grid System ich finde es ist einfacher. Eine CSS Klasse eintragen und gut ist.

    Wenn jemand das CMS betreut der nicht so versiert ist dann installiere ich xGrind bzw. Subcolumns, da kann man sich die Spalten zusammenklicken.
    Hallo liebes Forum

    Ich bin ebenfalls in der gleichen Lage und hab noch nicht so Erfahrung mit CSS. Mein Kunde ohne CSS Erfahrung muss nachher die Webseite betreuen können. Sollte ich das Design gridbasiert oder normal mit den gegebenen Mitteln von Contao lösen? Im Anhang 2 JPGs der Website. Danke für die Antworten
    Angehängte Grafiken Angehängte Grafiken

  27. #67
    Gesperrt
    Registriert seit
    07.05.2011.
    Beiträge
    1.199

    Standard

    Zitat Zitat von Patric Simon Beitrag anzeigen
    Ich bin ebenfalls in der gleichen Lage und hab noch nicht so Erfahrung mit CSS. Mein Kunde ohne CSS Erfahrung muss nachher die Webseite betreuen können. Sollte ich das Design gridbasiert oder normal mit den gegebenen Mitteln von Contao lösen?
    Die Antwort, wie von Dir zitiert, gab Dir eigentlich bereits schman. Ganz allgemein gilt die Handhabung eines Grid-Layouts für weniger erfahrene Redakteure als schwieriger, u. a. weil es sicheren Umgang mit CSS erfordert, was die entsprechenden HTML-Kenntnisse einschließt. Man kann das nicht so pauschal sagen, ohne zuvor die Anforderungen klar definiert zu haben. Mit Verwendung eines Grids oder auch eines Fluid Layouts ohne Grid sind zumeist auch Templateanpassungen verbunden. Im günstigen Fall hat das schon jemand erledigt wie BugBuster mit seinem speziellen Grid. Doch auch das schließt eigene Modulanpassungen nicht aus, denn es hängt auch davon ab, was Du einsetzen willst und ob Du ein Layout "von der Stange" verwendest oder mit individuellen Modifikationen.

    Nehmen wir mal die Boxen "Aufträge" in einem Deiner Screenshots. Falls diese Boxen nicht einzeln redaktionell eingepflegt werden, kümmert sich irgendein Listenmodul um die Ausgabe. Aber nicht zwingend auch um die Darstellung. Man muss also wissen was es macht und wie. Es sollte keine Unvereinbarkeiten mit dem Layout geben und Du kannst auch nicht erwarten, dass die Modulausgabe mit dem Contao-Inhaltselement "Spaltenset" harmonieren würde. Hast Du ein statisches Layout, muss die Anzahl der Boxen je Zeile und deren Bemaßung dazu passen. Bei einem Grid oder einem Fluid Layout oder einer Kombination aus zwei oder drei der Layouttypen auch, aber die Vorgehensweise ist nicht identisch.

    Damit Du Dir die Frage also bedarfsgerecht beantworten kannst, kommst Du nicht darum herum, deine Anforderungen eindeutig zu definieren, Dich gut in Contao einzuarbeiten und soweit nötig, auch Deine CSS-Kenntnisse zu vertiefen. Auch grundlegende PHP- u. JS-Kenntnisse wären nicht verkehrt. Je nachdem, an welchen Stellen Du gern Eingriffsmöglichkeiten haben willst. Für die händische Umsetzung dessen, was auf Deinen Sceenshots zu sehen ist, kommt man mit wenigen Grundkenntnissen klar. Und je höher der gewünschte Automatisierungsgrad, umso fundiertere Kenntnisse setzt es voraus.

    Bau Dir doch vielleicht anfangs erstmal ein paar der Seiten mit den ganz normalen Bordmitteln von Contao zusammen. Dann siehst Du viel besser, wo es ggf. klemmt und findest nach und nach auch heraus, was Du zur Verbesserung unternehmen kannst. Bei konkreten Dingen kann Dir außerdem das Forum besser helfen als bei einem noch unklar beschriebenen Vorhaben. Du kannst auch mehrere Layouts parallel verwenden.

  28. #68
    Contao-Nutzer
    Registriert seit
    22.12.2010.
    Beiträge
    243

    Standard

    Hallo Bugbuster,

    Seit Tagen versuche ich das Verhalten Deiner Seite(1140pxGrid), beim Verkleinern, zu ergründen.

    Auch wurde kein statisches Layout aktiviert und somit keine feste Breite eingetragen

    Achja, verkleinert mal den Browser in der Breite, dann solltet ihr an 2 Stellen (Breiten) eine Veränderung sehen. Erklärungen dazu folgen später.
    Genau das ist der Punkt, der Footer macht das ja bei mir mit, der Rest der Seite nicht. Verrätst Du das Geheimnis, ist ja schon lange angekündigt?

    (ich drehe DAU-mäßig mal wieder an den falschen Schrauben )

    Gruss Ria

  29. #69
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.494
    User beschenken
    Wunschliste

    Standard

    Dann hast du warscheinlich irgendwo feste Breiten gesetzt.
    Der #wrapper ist genauso definiert wie der Footer was die Breiten betrifft, siehe hier:
    contao-grid-mit-16-spalten.html
    Hmm, #wrapper sollte ich mal lieber in basic packen, da passt es besser rein.
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

  30. #70
    Contao-Nutzer
    Registriert seit
    22.12.2010.
    Beiträge
    243

    Standard

    Hallo Bugbuster,

    Dann hast du warscheinlich irgendwo feste Breiten gesetzt.
    nein, über das Stadium bin ich inzwischen hinaus, fast. Aber ich hatte eine Vorgänger-Grid-16. Und da war der #Wrapper oben noch nicht drin, oder es war noch meine Eigene

    Besten Dank! Jetzt ist es Bestens und sehe mal ob ich noch ein Bild in html reinbringe, so das bei einer Verkleinerung es schick aussieht

    Eine Frage fällt mir noch ein wozu ist der #wrapper ganz oben in der basic_sticky? Wegen des Footers?

    Gruss Ria und gute Nacht

  31. #71
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.494
    User beschenken
    Wunschliste

    Standard

    Das habe ich auch nur so übernommen.
    Sicherlich könnte man hier und da noch etwas optimieren durch Zusammenfassung, aber bevor ich mir damit wieder andere Probleme einfange die ich dann erst später merke, lasse ich das so wie es ist.
    Habe die #wrapper Definition jetzt mal verschoben ins Basic.
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

  32. #72
    Contao-Fan Avatar von Monic49
    Registriert seit
    15.08.2010.
    Ort
    Frankfurt an der Oder
    Beiträge
    255

    Standard

    Zitat Zitat von BugBuster Beitrag anzeigen
    Hmm, #wrapper sollte ich mal lieber in basic packen, da passt es besser rein.
    Hallo BugBuster, es ist echt eine tolle Arbeit,die du dir da gemacht hast.Änderung o.g. Art finde ich unter "Neues"? Ich möchte ja am Ball bleiben :-)
    Ich habe die Variante 2 übernommen für Leerspalten bzw. zentrieren. Das macht sich ja wesentlich besser. Beim füllen meiner vielen Seiten bin ich im Moment noch auf kein Problem gestoßen.
    Mir gefällt nur die etwas größere Schriftart (0.875em), da ja jetzt auch alles 1140 breit ist, besser.

    Wie kann man bei Bildunterschriften u.a. die Schrift kleiner machen?

    Vielen herzlichen Dank für deine Arbeit.

    Viele Grüße Monic49

  33. #73
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.494
    User beschenken
    Wunschliste

    Standard

    Hallo Monic49,
    hier mal 2 Beispiele, einmal für die Galerie Bilder, einmal für ein einfaches Bild, hier gleich noch mit einer Farbangabe, falls du auch gleich noch umfärben willst (OK, ist wegen copy-paste..., keine Lust zu löschen... )
    Code:
    /* fuer Galerie Bilder */
    .ce_gallery .caption {
        color: #999999;
        font-size: 0.75em;
    }
    /* fuer einfache Bilder */
    .ce_image .caption {
        color: #999999;
        font-size: 0.75em;
    }
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen

  1. MooTools Accordion zweites öffnen ohne das erstes schließt
    Von mo2402 im Forum Allgemeine Inhaltselemente
    Antworten: 9
    Letzter Beitrag: 18.02.2015, 13:54
  2. Anfängerfrage: Erstes Layout
    Von j0hN80 im Forum Layout / Templates / Holy Grail
    Antworten: 6
    Letzter Beitrag: 09.03.2011, 19:42
  3. Schwieriges Layout - vielleicht kann mir jemand mit Tipps oder Hinweisen helfen
    Von xtcPlanet im Forum Layout / Templates / Holy Grail
    Antworten: 12
    Letzter Beitrag: 22.02.2011, 17:33
  4. Seite wird beim Aufruf ohne Layout angezeigt
    Von Micha_Neuling im Forum Layout / Templates / Holy Grail
    Antworten: 4
    Letzter Beitrag: 11.08.2010, 19:11
  5. Kalender einbinden über Layout oder Artikel
    Von carlos im Forum Nachrichten/Events/FAQ
    Antworten: 2
    Letzter Beitrag: 30.09.2009, 15:34

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •