Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 40 von 50

Thema: Suckerfish Navigation - Untermenupunkte erscheinen nicht

  1. #1
    Contao-Fan
    Registriert seit
    08.12.2009.
    Beiträge
    719

    Standard Suckerfish Navigation - Untermenupunkte erscheinen nicht

    Hallo,

    ich habe soeben dieses Tutorial durchgearbeitet (http://de.contaowiki.org/typolight/TutorialsSuckerfish) und alles so befolgt, wie es im Tutorial steht, bis auf die Browserkompatibilität, denn mir ist aufgefallen, dass mir die Untermenupunkte schon im Firefox gar nicht mehr angezeigt werden, auch wenn Display auf Block steht.

    Hier der Link zu der Webseite: http://www.christoph-schiffer.de/typolight/
    (Ich habe mehrere Untermenüpunkte bei Software)

    Hat da jemand eine Idee?

    Vielen Dank,
    Chris
    Geändert von Chris87 (09.12.2009 um 00:06 Uhr)

  2. #2
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    ist grade erst gelöst worden; siehe da:
    https://community.contao.org/de/showthread.php?t=4336

  3. #3
    Contao-Urgestein Avatar von Thomas
    Registriert seit
    16.08.2009.
    Ort
    Visselhövede
    Beiträge
    1.947
    User beschenken
    Wunschliste

    Standard

    Hallo!

    Du hast vergessen, auf .mod_navigation eine Höhenangabe zu definieren.
    Code:
    .mod_navigation {
         height:300px;
    }
    Danach sollte das funktionieren.

    Wie mir scheint, hast Du den gesamten Punkt *Letzte Anpassungen* im Tutorial auch nicht umgesetzt.
    Geändert von Thomas (09.12.2009 um 07:15 Uhr)
    Gruß Thomas
    "Zuerst ignorieren sie dich, dann lachen sie über dich, dann bekämpfen sie dich und dann gewinnst du." Mahatma Gandhi

  4. #4
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    Zitat Zitat von Thomas Beitrag anzeigen
    Hallo!

    Du hast vergessen, auf .mod_navigation eine Höhenangabe zu definieren.
    Code:
    .mod_navigation {
         height:300px;
    }
    Danach sollte das funktionieren.
    Das Untermenü ist dann zwar sichtbar, aber der .mod_navigation container verschiebt auch alles andere nach unten.

    Die (bessere) Lösung in dem Fall ist imho
    Code:
     .mod_navigation {overflow: visible; }

  5. #5
    Contao-Urgestein Avatar von Thomas
    Registriert seit
    16.08.2009.
    Ort
    Visselhövede
    Beiträge
    1.947
    User beschenken
    Wunschliste

    Standard

    Ja, aber die Höhenangabe benötigt er zur besseren Übersicht und um das anzupassen, wird ja später im Tut wieder entfernt.

    Wie ich oben schon editiert habe, hat er wohl den Punkt *Letzte Anpassungen*, im Tutorial, nicht umgesetzt.
    Gruß Thomas
    "Zuerst ignorieren sie dich, dann lachen sie über dich, dann bekämpfen sie dich und dann gewinnst du." Mahatma Gandhi

  6. #6
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    Ich hab das Tut bis dato nicht gelesen; da ich die Lösung kannte ...

    Vielleicht könntest Du Dein Tutorial ja noch um einige Hinweise/Erklärungen ergänzen:

    Zum einen, dass die Höhenangage tatsächlich nur der Übersicht beim stylen dient und daher am Ende wieder entfernt wird und zum anderen, was es mit dem overflow auf sich hat

    Ich denke, dann ist es - grade für Anfänger - verständlicher.

    Gruß

    Dennis

    p.s.: was mir grade noch aufgefallen ist: im JS selektierst du ja Layoutbereich > li, wäre es nicht besser, dem Navigationsmodul eine ID zu geben und dann nach ID der Navigation > li zu selektieren? Es ist ja nicht auszuschließen, das im selben Layoutbereich auch noch andere Listen vorkommen ... (z.b. eine individuelle Navigation)

  7. #7
    Contao-Fan
    Registriert seit
    08.12.2009.
    Beiträge
    719

    Standard

    Vielen Dank für die Antworten

    Ich habe das Problem nun wie beschrieben mit z-index: 999; und overflow: visible gelöst, allerdings klappt die dritte Ebene nicht zur Seite raus. Ich habe einen Untermenüpunkt bei Software -> Einsatzgebiete.

    Gibt es irgendwo ein Tutorial, wie ich das Untermenu so einblenden lassen kann wie auf https://contao.org/ ?

    Zitat Zitat von brandtmarke Beitrag anzeigen
    p.s.: was mir grade noch aufgefallen ist: im JS selektierst du ja Layoutbereich > li, wäre es nicht besser, dem Navigationsmodul eine ID zu geben und dann nach ID der Navigation > li zu selektieren? Es ist ja nicht auszuschließen, das im selben Layoutbereich auch noch andere Listen vorkommen ... (z.b. eine individuelle Navigation)
    Ich habe vor, über der Hauptnavigation noch eine kleinere individuelle Navigation zu platzieren, also könnte das für mich auch relevant sein, denke ich.

    Danke,
    Chris
    Geändert von Chris87 (09.12.2009 um 08:03 Uhr)

  8. #8
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    atwht im TUT:

    Code:
    .mod_navigation ul ul li:hover ul
    {
        display:block;
     }

    Nach dem ausblenden muss es auch wieder eingeblendet werden ....

    und naochwas, durch
    Code:
    .mod_navigation li ul{left:-1px;top:36px;position:absolute;display:none;}
    wird die 3te Ebene nach unten versetzt, das lässt sich durch
    Code:
    .mod_navigation li ul ul{top: 0}
    beheben ...
    Geändert von brandtmarke (09.12.2009 um 08:10 Uhr)

  9. #9
    Contao-Fan
    Registriert seit
    08.12.2009.
    Beiträge
    719

    Standard

    Das habe ich alles so drinne. Aber irgendwie scheint es trotzdem nicht zu klappen.

    Edit: Ich habe noch ein anderes Problem. Ich habe einen eigenen Layoutbereich "Navigation" erstellt und diesem im Template fe_pages.tpl über dem Header mit <?php echo $this->getCustomSections('Navigation'); ?> platziert.

    Dann habe ich im Layout das Logo und die Navigation dem Layoutbereich "Navigation" zugewiesen. Wenn ich mir nun die Seite anschaue, erscheint das Logo und das Menü im Inhaltsbereich.
    Geändert von Chris87 (09.12.2009 um 08:56 Uhr)

  10. #10
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    Edit: Ich habe noch ein anderes Problem. Ich habe einen eigenen Layoutbereich "Navigation" erstellt und diesem im Template fe_pages.tpl über dem Header mit <?php echo $this->getCustomSections('Navigation'); ?> platziert.

    Dann habe ich im Layout das Logo und die Navigation dem Layoutbereich "Navigation" zugewiesen. Wenn ich mir nun die Seite anschaue, erscheint das Logo und das Menü im Inhaltsbereich.
    Ich nehme an, das Du im Seitenlayout den Layoutbereich ausgewählt hast und bei Position der Lasyoutbereiche "innerhalb der Hauptspalte" ausgewählte hast (ist die Default Einstellung).

    Wenn Du in Deinem fe_page.tpl die Layoutbereiche händisch einfügst solltest Du zum einen
    Code:
    <?php echo $this->getCustomSections('main'); ?>
    entfernen und zum anderen ist der korrekte Aufruf direkt im Template
    Code:
    <?php echo $this->getCustomSection('Navigation'); ?>
    also nicht "..Sections.:" sondern nur "...Section..."

    Bau das nochmal so hin und setz auch die Navi wieder an die korrekte Stelle, dann schau ich nochmal, was mit der Navigation nicht stimmt...
    Geändert von brandtmarke (09.12.2009 um 09:14 Uhr)

  11. #11
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    Die Anweisung
    Code:
    .mod_navigation UL UL LI:HOVER UL{display:block;}
    MUSS im css UNTER
    Code:
    .mod_navigation UL LI:HOVER UL UL{display:none;}

  12. #12
    Contao-Fan
    Registriert seit
    08.12.2009.
    Beiträge
    719

    Standard

    Vielen Dank für deine Geduld brandtmarke Die Navi und das Logo sind nun über dem Header.

    Die Navigation ist noch etwas empfindlich, sprich wenn man auf Software klickt und mit der Maus nach unten fährt, blendet er die Untermenupunkte ab und zu wieder weg.
    Geändert von Chris87 (09.12.2009 um 09:39 Uhr)

  13. #13
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    wenn Du den .mod_navigation li mal eine Hintergrundfarge gibts wirst Du sehen, dass zwischen der horizontalen 1ten Ebene und der vertikalen 2ten Ebene 1 Pixel luft ist. Der Grund dafür:
    Code:
    .mod_navigation li{width:160px;
    height:35px;
    position:relative;
    float:left;font-family:Verdana;
    font-size:16px;
    color:#e43226;
    line-height:35px;}
    Du hast für die 2te Ebene aber
    Code:
    .mod_navigation li ul {
    left:-1px;
    top:36px;
    position:absolute;
    display:none;}
    ... Klar soweit
    Geändert von brandtmarke (09.12.2009 um 09:45 Uhr)

  14. #14
    Contao-Fan
    Registriert seit
    08.12.2009.
    Beiträge
    719

    Standard

    Ja, habe ich verstanden. Wenn man auf den 1px der frei war gekommen ist, wurde das Untermenü wieder ausgeblendet. Vielen Dank!

  15. #15
    Contao-Urgestein Avatar von Thomas
    Registriert seit
    16.08.2009.
    Ort
    Visselhövede
    Beiträge
    1.947
    User beschenken
    Wunschliste

    Standard

    Ich warne Dich schonmal vor.

    Im IE wirst Du einiges an Frickelarbeit machen müßen.
    Hier ein Pixelchen dazu, hier eines weg.
    An Deiner Stelle würde ich mich direkt darum kümmern und es nicht auf die lange Bank schieben. Man vergißt so einiges, wenn man längere Zeit nicht daran arbeitet.
    Gruß Thomas
    "Zuerst ignorieren sie dich, dann lachen sie über dich, dann bekämpfen sie dich und dann gewinnst du." Mahatma Gandhi

  16. #16
    Contao-Fan
    Registriert seit
    08.12.2009.
    Beiträge
    719

    Standard

    Ich habe diese Browserkompatibilität mit dem Javascript aus dem Tutorial gar nicht gemacht und die Navigation funktioniert trotzdem unter IE7 und IE8.

    Allerdings ist der Footer im IE7 viel weiter oben mitten in der Seite und überlappt sich mit anderen Ebenen.

    Ich weiß das ist wahrscheinlich eine ziemliche Anfängerfrage, aber wie bekomme ich das DIV mit dem Logo und das Navigations-DIV nebeneinander?

    Gruß,
    Chris

  17. #17
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    Zitat Zitat von Chris87 Beitrag anzeigen
    Ich habe diese Browserkompatibilität mit dem Javascript aus dem Tutorial gar nicht gemacht und die Navigation funktioniert trotzdem unter IE7 und IE8.
    Der Javascript FIX ist für den IE 6, da der :hoer nur bei a-Elementen kennt.

    Ich weiß das ist wahrscheinlich eine ziemliche Anfängerfrage, aber wie bekomme ich das DIV mit dem Logo und das Navigations-DIV nebeneinander?
    Kannst Du absolut positionieren, nachdem Du das Elternelement relativ positioniert hast:
    Code:
    #Navigation {position: relative;}
    .mod_navigation{width:740px;position:absolute;overflow:visible;z-index: 999; left: 300px; top: 40px;}
    Allerdings ist der Footer im IE7 viel weiter oben mitten in der Seite und überlappt sich mit anderen Ebenen.
    sieht nach einem Problem mit Floats aus; obwohl der clearer da ist ... muss ich mir genauer angucken ...

  18. #18
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    mal eine grundsätzliche Empfehlung:

    Wenn Du nicht ohnehin Firefox zum enwickeln benutzt, solltest Du das tun und folgende Extensions installieren:
    • Firebug
    • Web Developer Tools-
    • HTML Validator


    Du hast einige nicht valide Macken im Quelltext, ich z.b.
    Code:
    <p>
    <!-- indexer::stop -->
    <div class="mod_quicklink block">
    
    <form action="index.php" method="post">
    <div class="formbody">
    <input type="hidden" name="FORM_SUBMIT" value="tl_quicklink" />
    <select name="target" class="select">
      <option value="">Quicklink</option>
      <option value="index.php/startseite.html">Startseite</option>
      <option value="index.php/software.html">Software</option>
      <option value="index.php/service.html">Service</option>
      <option value="index.php/unternehmen.html">Unternehmen</option>
    
    </select>
    <input type="submit" class="submit" value="Los" />
    </div>
    </form>
    
    </div>
    <!-- indexer::continue -->
    </p>
    Du hast p-Tags als Elternelement von .mod_quicklink !????
    Beheb das erstmal ...

  19. #19
    Contao-Fan
    Registriert seit
    08.12.2009.
    Beiträge
    719

    Standard

    Danke für die Tips, Web Developer und Firebug habe ich bereits installiert. HTML Validator werde ich mir gleich noch installieren.

    Ich habe das Template von Typolight generieren lassen. Die <p> Tags habe ich nicht hinzugefügt.

  20. #20
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    Code:
    <div class="mod_contentbox block">
    	<h1>Schnelleinstieg</h1>
    	<div class="box">
    	</div>
    	<div class="box_footer"/>
    		<h1>Neuigkeiten</h1>
    		<div class="box">
    		</div>
    	<div class="box_footer"/>
    </div>
    ... Du hast das schließende Tag vom div mit der Klasse box_footer ebenfalls mit einer Klasse versehen; nehm die Klasse an der Stelle mal raus

  21. #21
    Contao-Fan
    Registriert seit
    08.12.2009.
    Beiträge
    719

    Standard

    Zitat Zitat von brandtmarke Beitrag anzeigen
    Code:
    <div class="mod_contentbox block">
    	<h1>Schnelleinstieg</h1>
    	<div class="box">
    	</div>
    	<div class="box_footer"/>
    		<h1>Neuigkeiten</h1>
    		<div class="box">
    		</div>
    	<div class="box_footer"/>
    </div>
    ... Du hast das schließende Tag vom div mit der Klasse box_footer ebenfalls mit einer Klasse versehen; nehm die Klasse an der Stelle mal raus
    Oha, das ist mir gar nicht aufgefallen, dadurch kommen wahrscheinlich auch diese Abstände oben und unten zustande.

  22. #22
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    Zitat Zitat von Chris87 Beitrag anzeigen
    Ich habe das Template von Typolight generieren lassen. Die <p> Tags habe ich nicht hinzugefügt.
    Wie hast Du das Modul denn ins Layout eingebaut? Mit einem insert-Tag in einem Artikel?

  23. #23
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    Zitat Zitat von Chris87 Beitrag anzeigen
    Oha, das ist mir gar nicht aufgefallen, dadurch kommen wahrscheinlich auch diese Abstände oben und unten zustande.
    Code:
    <div class="mod_contentbox block">
    	<h1>Schnelleinstieg</h1>
    	<div class="box">
    	</div>
    	<div class="box_footer"/>
    		<h1>Neuigkeiten</h1>
    		<div class="box">
    		</div>
    	<div class="box_footer"/>
    </div>
    Du hast sogar zwei schließende DIV Tags ... Mich wunderts, dass Dein Layout nicht vollkommen zerschossen ist ...

  24. #24
    Contao-Fan
    Registriert seit
    08.12.2009.
    Beiträge
    719

    Standard

    Ich weiß allerdings nicht, wie das zustande kommt. Der Quelltext der mod_box_items.tpl schaut bei mir so aus:
    Code:
    <?php foreach ($this->items as $item): ?>
    <?php if($item['headline']): ?>
    <<?php echo $item['h1']; ?>><?php echo $item['headline']; ?></<?php echo $item['h1']; ?>>
    <?php endif; ?>
    <div class="box">
    
    <?php if ($item['addImage'] && $item['addBefore']): ?>
    <div class="image_container"<?php if ($item['margin'] || $item['float']): ?> style="<?php echo $item['margin'] . $item['float']; ?>"<?php endif; ?>>
    <?php if ($item['href']) : ?>
      <a href="<?php echo $item['href']; ?>" title="<?php echo $item['alt']; ?>" <?php if($item['fullsize']): ?> rel="lightbox"<?php endif; ?>>
    <?php endif; ?>
    <img src="<?php echo $item['src']; ?>" alt="<?php echo $item['alt']; ?>"<?php echo $item['imgsize']; ?> /><?php if ($item['href']): ?></a><?php endif; ?>
    <?php if ($item['caption']): ?>
    <div class="caption"><?php echo $item['caption']; ?></div>
    <?php endif; ?>
    </div>
    <?php endif; ?>
    
    <?php echo $item['content']; ?>
    
    <?php if ($item['addImage'] && !$item['addBefore']): ?>
    <div class="image_container"<?php if ($item['margin'] || $item['float']): ?> style="<?php echo $item['margin'] . $item['float']; ?>"<?php endif; ?>>
    <?php if ($item['href']) : ?>
      <a href="<?php echo $item['href']; ?>" title="<?php echo $item['alt']; ?>" <?php if($item['fullsize']): ?> rel="lightbox"<?php endif; ?>>
    <?php endif; ?>
    <img src="<?php echo $item['src']; ?>" alt="<?php echo $item['alt']; ?>"<?php echo $item['imgsize']; ?> /><?php if ($item['href']): ?></a><?php endif; ?>
    <?php if ($item['caption']): ?>
    <div class="caption"><?php echo $item['caption']; ?></div>
    <?php endif; ?>
    </div>
    <?php endif; ?>
    </div>
    <div class="box_footer"></div>
    <?php endforeach; ?>

    Zitat Zitat von brandtmarke Beitrag anzeigen
    Wie hast Du das Modul denn ins Layout eingebaut? Mit einem insert-Tag in einem Artikel?
    Welches Modul meinst du? Ich habe das Boxes (content-box) Addon und habe zwei Module mit dem Box Addon erstellt (Box Rechts und Box Links). Diese Box-Module habe ich dem Template zugewiesen.

    Dann habe ich mehrere Content-Boxen erstellt und diesen Boxen habe ich wiederum die Module Quicklink und Nachrichtenliste zugeordnet.
    Geändert von Chris87 (09.12.2009 um 14:01 Uhr)

  25. #25
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    Code:
    <div id="schatten_u_header">
    Du verwendest 2 mal auf der Seite eine ID, mach da mal eine Klasse draus
    Code:
    <div class="schatten_u_header">

  26. #26
    Contao-Fan
    Registriert seit
    08.12.2009.
    Beiträge
    719

    Standard

    Ok, das habe ich gemacht, schatten_u_header ist nun eine Klasse.
    Ich weiß allerdings nicht wo dieses <p>-Tag herkommt, es muss ja irgendwie vom Content-Box-Modul kommen, aber im Template finde ich nichts. Hier der Code aus der mod_box.tpl:

    Code:
    <!-- indexer::stop -->
    <div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
    <?php if ($this->headline && $this->items): ?>
    
    <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
    <?php endif; ?>
    
    <?php echo $this->items; ?>
    
    </div>
    <!-- indexer::continue -->

  27. #27
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    Die Content Boxen nutzen doch den TinyMCE, oder? (hab leider grade keine Installation mit der Erweiterung parat) Wenn Du die Module via insert Tag in die Content Boxen eingebaut hast, dann wird das daran liegen; dann geh mal in den HTML Modus vom TinyMCE und entferne die p-tags manuell ...

  28. #28
    Contao-Fan
    Registriert seit
    08.12.2009.
    Beiträge
    719

    Standard

    Vielen Dank für den Hinweis, das scheint wohl der Fehler zu sein. Allerdings macht er die p-Tags jedes mal wieder neu rein, auch wenn ich die vorher im HTML-Modus entferne.

    Liegt das vielleicht an dem Haken "Automatischer Zeilenumbruch" im HTML-Editor? Der Haken lässt sich aber auch nicht entfernen, der ist jedes mal wieder angehakt.
    Geändert von Chris87 (09.12.2009 um 14:41 Uhr)

  29. #29
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    das Verhalten kannst Du in den TL Einstellungen ändern unter Backend Einstellungen -> Neue Zeilen mittels Absätzen erstellen

  30. #30
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    hier noch einige kleine Macken, die mir aufgefallen sind:
    Code:
    <div class="logo_qmcenter"><img src="tl_files/Layout/Logos/qmc_logo.png" border="0"></div>
    das IMG tag ist nicht geschlossen und statt border="0" notiert man unter xhtml style="border: 0;" ein alt="QMC Logo" o,ä würd dem auch gut stehen ...

    Irgendwo weiter unten kommt dann
    Code:
    <p>&nbsp;</p>
    <hr size="1" />
    <p>&nbsp;</p>
    Das size-Attribut ist unter xhtml ist auch propriotär

    Diese Dinge sind zwar kein Beinbruch, aber der Vollständigkeit halber ...

  31. #31
    Contao-Fan
    Registriert seit
    08.12.2009.
    Beiträge
    719

    Standard

    Vielen Dank nochmal, du hast mir echt sehr weiter geholfen

  32. #32
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    Warum der IE 7 mit dem Footer zicken macht hab ich allerdings noch nicht rausgefunden, aber versuch mal
    Code:
    #footer {clear: both;}

  33. #33
    Contao-Fan
    Registriert seit
    08.12.2009.
    Beiträge
    719

    Standard

    Zitat Zitat von brandtmarke Beitrag anzeigen
    Warum der IE 7 mit dem Footer zicken macht hab ich allerdings noch nicht rausgefunden, aber versuch mal
    Code:
    #footer {clear: both;}
    Super, das hat geholfen

    Habe nun auch das mit den Absätzen raus genommen, der Abstand ist nun kleiner geworden aber immer noch da. Irgendwie macht er zwischen <h1>Schnelleinstieg</h1> und <div class="box"> einen Abstand, genau so am Ende zwischen </div> und <div class="box_footer"></div>.

    Ich versuch einfach mal das margin bei den beiden Klassen auf 0 zu setzen.
    Geändert von Chris87 (09.12.2009 um 15:33 Uhr)

  34. #34
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    mach mal
    Code:
    #left h1, #right h1, #left p, #right p {
     margin: 0;
    }

  35. #35
    Contao-Fan
    Registriert seit
    08.12.2009.
    Beiträge
    719

    Standard

    Ja, das hat das Problem mit den Abständen behoben, allerdings werden nun auch die gewollten Abstände zwischen den Boxen und zwischen den News-Einträgen auf 0 gesetzt.

    Kann ich die irgendwie differenzieren und somit nur die falschen Abstände auf 0 setzen?

    Eine Möglichkeit wäre ja, z.B. im Quellcode des Box-Moduls sowie der Nachrichtenliste, manuell Abstände hinzuzufügen. Aber vielleicht kann man das auch eleganter lösen.

    Vielen Dank,
    Chris
    Geändert von Chris87 (09.12.2009 um 17:54 Uhr)

  36. #36
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    Abstand News zur Headline z.b. mit
    Code:
    .box {padding: 15px 0;}
    Die artikel an sich mit
    Code:
    .layout_latest {
    margin: 5px 0;
    padding 5px 0;
    border-bottom: 1px solid #eee;
    }

  37. #37
    Contao-Fan
    Registriert seit
    08.12.2009.
    Beiträge
    719

    Standard

    Mit Padding auf die .box macht er mir wieder die Abstände (ohne Rand) rein, obwohl der Rand links und rechts in der Klasse .box definiert ist. Also wird der Rand auch mit Padding verschoben?

    Ich habe jetzt noch eine zweite Navigation hinzugefügt, wie kann ich die beiden Navigationen rechtsbündig machen, so dass ich vllt kein margin-left benutzen muss? Ansonsten muss ich das margin ja immer anpassen, wenn die Navigationen breiter werden.

    Vielen Dank,
    Chris
    Geändert von Chris87 (09.12.2009 um 23:26 Uhr)

  38. #38
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    Die Lösung ist im Grunde nicht schwer; zuerst einmal ins Markup schauen, welche Elemente sich wofür anbieten. Desweiteren sollte das a) Box Model Prinzip bekannt sein > hier gucken oder hier, der Umgang mit Margins und Paddings ...

    Und Los gehts:
    Das Markup um Beispiel Deiner Newslist:
    Code:
    <h1>Neuigkeiten</h1>
    <div class="box">
    	<div class="mod_newslist block">
    		<div class="layout_latest block first even">...</div>
    		<div class="layout_latest block last odd">...</div>
    	</div>
    </div>
    <div class="box_footer"/>
    Dann macht man im CSS folgendes
    Code:
    .box{
    	border: 1px solid #e1e1e1;
    	border-width:0px 1px;
    	padding:10px 7px; /*7px oben und unten, 0 px links und rechts*/
    	}
    .box_footer{
    	height:4px;
    	margin-bottom:15px; 
    	background-image:url("tl_files/Layout/Hintergrund/box_footer_bg.png");
    	background-repeat:no-repeat;
    	}
    Die Breitenangaben können wir weglassen; bzw. belassen es bei auto (default), die orientiert sich am Elternelement unter Berücksichtigung von border, margin und padding, dann bekommt .box footer noch eine margin nach unten, damit die Blöcke nicht zusammenkleben - und das wars auch schon ...

    Grundsätzlich: versuche Breitenangaben nur da zu machen, wo sie auch wirklich nötig sind; Dein #right Container hat ja schon eine feste Breite; mehr brauchst Du erstmal nicht, der Rest wird bei Block Level Elementen wie schon gesagt von allein berechnet ...

    Ich habe jetzt noch eine zweite Navigation hinzugefügt, wie kann ich die beiden Navigationen rechtsbündig machen, so dass ich vllt kein margin-left benutzen muss? Ansonsten muss ich das margin ja immer anpassen, wenn die Navigationen breiter werden.
    kannst Du beide Absolut positionieren:

    Code:
    .mod_customnav,
    .mod_navigation {
    	position: absolute;
    	right: 20px;
    	top: 20px;
    }
    .mod_navigation {
    	top: 50px;
    }
    Geändert von brandtmarke (10.12.2009 um 08:21 Uhr)

  39. #39
    Contao-Fan
    Registriert seit
    08.12.2009.
    Beiträge
    719

    Standard

    Im IE7 wird die Navigation bzw. die Untermenüpunkte durch den Header überlagert. Im IE8 und FF funktioniert es problemlos.

  40. #40
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    Code:
    #Navigation{
    width:980px;
    height:103px;
    position:relative;background:url("tl_files/Layout/Hintergrund/navi_bg.jpg") center top no-repeat;
    z-index: 999;
    }

Aktive Benutzer

Aktive Benutzer

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

Ähnliche Themen

  1. [gelöst] Navigation (Suckerfish) Hauptpunkt nicht verlinken
    Von psren im Forum Layout / Templates / Holy Grail
    Antworten: 19
    Letzter Beitrag: 27.02.2014, 12:28
  2. Navigation a la Suckerfish und der geliebte IE6
    Von phiesel im Forum Layout / Templates / Holy Grail
    Antworten: 20
    Letzter Beitrag: 31.08.2010, 17:53
  3. Bilder erscheinen nicht...
    Von artomat2 im Forum Bilder/Dateien
    Antworten: 0
    Letzter Beitrag: 16.06.2010, 16:02
  4. Horizontale Navigation a la Suckerfish
    Von JohannesH im Forum Layout / Templates / Holy Grail
    Antworten: 3
    Letzter Beitrag: 26.11.2009, 16:35
  5. Horizontale Suckerfish Navigation
    Von Schlauchbeutelmaschine im Forum Layout / Templates / Holy Grail
    Antworten: 2
    Letzter Beitrag: 25.08.2009, 12:34

Lesezeichen

Lesezeichen

Berechtigungen

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