Ergebnis 1 bis 2 von 2

Thema: Kleines Problem mit horizontalen Menu...

  1. #1
    Neuer Benutzer
    Registriert seit
    27.08.2012
    Beiträge
    19

    Standard Kleines Problem mit horizontalen Menu...

    Hallo Leute,

    ich muss mir wohl an dem Punkt eingestehen das ich nicht zu der Sorte CSS Guru gehöre und würde gern auf euer gebaltes Fachwissen zurückgreifen.

    Zum Problem, ich schreibe gerade ein Shop Template und habe immer noch hier und da kleinere CSS Formatierungsprobleme.Hierbei handelt sich um die Formatierung zweier inline ausgerichteter Menustruckturen. Der Titel oberhalb der Liste sollte sich optimaler weise an das darunterliegende Menu von der Länge her anpassen. Macht er aber nicht.

    Meine CSS Defintionen...
    Code:
    #information,
    #about_us{
            padding: 1%;
            background-color: #f0f0f0;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px 5px 5px 5px;
    }
    #information{
            margin-left: 1%;
    }
    #information p.headline{
            padding-left: .5%;
            background-color: #f25d44;
    }
    #about_us ul li,
    #information ul li{
            float: left;
            display: inline;
            padding: 1% 1%;
            background-color: #004DA8;
            border-bottom:1px dotted white;
            border-right:1px dotted white;
    }
    #information ul li:first-child{
            border-left:1px dotted white;
            border-radius: 5px 0 0 5px;
    }
    #information ul li:last-child{
            border-radius: 0 5px 5px 0;
    }
    #about_us ul li{
            border-radius: 0 0 5px 5px;
    }
    #about_us ul li a,
    #information ul li a{
            color: white;
            font-weight: bold;
            font-size: 100%;
    }
    /* section und col */
    .section {
            clear: both;
            padding: 0px;
            margin: 0px;
    }
    .col{
    
            float:left;
            margin: 1% 0 1% 1%;
    }
    .col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
    Aufruf in der index.html
    Code:
    <section class="section">
            <article class="col">
                    {box name=footer_left htmlonly=1}
            </article>
    </section>
    Das umschließende Div-Element passt sich in der Breite nicht an!?

    screnn.jpg

    Und nun der Aufbau dieser Box...
    Code:
    {content block_id=6 levels=nested}
    {if $_content_6|count > 0}
    <div id="information">
    <p class="headline">{txt key=TEXT_INFO}</p>
    <ul>
        {foreach name=aussen item=box_data from=$_content_6}
        <li class="level{$box_data.level}{if $box_data.active} active{/if}"><a href="{$box_data.link}" {if $page != 'index' && $box_data.content_hook gt 0} rel="nofollow"{/if}>{$box_data.title}</a></li>
        {/foreach}
    </ul>
    <div class="section"></div>
    </div>
    {/if}
    Das Element selbst wird aus Smarty heraus mit Inhalt befüllt. Am Ende habe ich noch ein Div-Element eingefügt welches die flaot Eigenschaften der li`s auflöst, somit kann sich das umschließende Tag der Größe seines Inhaltes anpassen. Merkwürdig hierbei ist jedoch, das sich der Div Container nur in Punkto Höhe damit anpasst???

    Kann mir jemand einen Tipp geben worin mein Fehler besteht?

  2. #2
    Erfahrener Benutzer
    Registriert seit
    11.05.2011
    Ort
    Erde
    Beiträge
    605

    Standard

    Moinsen,

    ich komme zwar gar nicht aus "Smarty" (hab ich früher gern gegessen - joooo!), doch ist das ja auch eher ein CSS-Ding. Also ...

    Zeigst mir mal die Klassen "level" und "active"? Die fehlen ... vielleicht wird da schon überschreibselt - nur der Vollständigkeithalber.

    Und: Bei der Menge wäre es klasse, wenn Du ein JSFiddle einrichten könntest/würdest. Alternativ: Häng bei derartigem Umfang eine Demo-Seite mit dran ... ich persönlich bin dann immer eher bereit zu helfen. Doch wenn ich mir 'ne Demo-Seite selbst fummeln muss ... hmmm ... das aber nur zu meiner Bequemlichkeit.

    Grüße vom überdurchschnittlich Koffeinierten.

Ähnliche Themen

  1. Kleines Problem mit Rückgabewerten bei jQuery
    Von deMischa im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 26.03.2010, 18:51
  2. Antworten: 1
    Letzter Beitrag: 28.04.2009, 15:29
  3. Kleines Firefox problem
    Von vaxeos im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 17.06.2008, 00:30
  4. ajax und kleines formular problem
    Von ticcoid im Forum Sonstige Probleme
    Antworten: 3
    Letzter Beitrag: 16.12.2007, 15:48
  5. Menu bei Request-Problem
    Von Timo Trallala im Forum Serverseitige Skriptsprachen
    Antworten: 1
    Letzter Beitrag: 19.01.2007, 11:44

Lesezeichen

Lesezeichen
  • An Mister Wong übertragenMister Wong
  • An YiGG.de übertragenYiGG.de
  • An Google übertragenGoogle
  • An del.icio.us übertragendel.icio.us

Berechtigungen

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