ilch Forum » Ilch Clan 1.1 » Allgemein » Dynamische Menu

Geschlossen
  1. #1
    User Pic
    derNager Mitglied
    Registriert seit
    09.06.2008
    Beiträge
    13
    Beitragswertungen
    0 Beitragspunkte
    Hallo,
    ich habe folgendes Problem. Auf der linken Seite seht ihr unser Menu. Ichh möchte den Style beibehalten, aber das Ilch Menu einfügen, damit ich den Inhalt in Ilch erstellen kann. Allerdings werden Bilder verwendet. Ich weiss leider nicht was ich ändern muss, damit mein Menu in meinem Style aber mit Ilch auf der linken Seite angezeigt wird.
    Ich poste mal meinen index.htm und den street.css

    INDEX.HTM:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="xhtml+xml; charset=iso-8859-1"/>
    <meta name="description" content="Dota Community, jeder ist willkommen. Wir sehen uns in Warcraft3"/>
    <meta name="keywords" content="Dota, Warcraft3, Game, Battle.net, derNager, Zap3l"/>
    <meta name="author" content="street-live.net"/>
    <link rel="stylesheet" type="text/css" href="include/designs/street/street.css"/>
    <link rel="shortcut icon" href="include/designs/street/img/sl.ico" />
    <title>{TITLE}</title>
    </head>

    <body>

    <div class="container">

    <div class="header">.</div>

    <div class="main_right">

    <div class="padded">

    <h4>Login</h4>
    {_boxes_LOGIN}

    <p><img src="include/designs/street/img/ph.jpg" alt="Platzhalter"></p>

    <h4>Held des Tages</h4>
    {_list_menunr3@<b>%1</b><br/>%2<hr/>}

    {_list_menunr2@<b>%1</b><br/>%2<hr/>}
    <p>
    <a href="http://jigsaw.w3.org/css-validator/validator?uri=www.street-live.net&profile=css21&usermedium=all&warning=1/">
    <img style="border:0;width:88px;height:31px"
    src="http://jigsaw.w3.org/css-validator/images/vcss"
    alt="CSS ist valide!" />
    </a>
    </p>

    </div>

    </div>

    <div class="subnav">

    <h1>Home</h1>
    <ul>
    <li><a href="index.php?news">News</a></li>
    <li><a href="index.html">Info</a></li>
    <li><a href="index.php?contact">Kontakt</a></li>
    <li><a href="index.php?impressum">Impressum</a></li>
    </ul>


    <h1>Dota</h1>
    <ul>
    <li><a href="">Neuste Version</a></li>
    <li><a href="include/changelog.php">Changelog</a></li>
    <li><a href="index.php?Links">Links</a></li>
    <li><a href="index.php?downloads">Download</a></li>
    </ul>

    <h1>Community</h1>
    <ul>
    <li><a href="index.php?forum">Forum</a></li>
    <li><a href="index.php?gbook">Guestbook</a></li>
    <li><a href="index.php?gallery">Bilder</a></li>
    </ul>

    </div>

    <div class="main">

    <div class="padded">
    {EXPLODE}

    </div>

    </div>

    <div class="clearer"><span></span></div>

    <div class="footer">

    <span class="right">Design&copy; 2008 <a href="index.html">Street-Live.net</a></span>

    <div class="clearer"><span></span></div>

    </div>

    </div>

    </body>

    </html>

    STREET.CSS:

    /* Standart */
    * {
    margin: 0;
    padding: 0;
    }

    a {color: #682;}

    a:hover {color: #9A6;}

    body {
    background: #333 url(img/bg.gif);
    color: #333;
    font: normal 62.5% "Lucida Sans Unicode",sans-serif;
    margin: 3% 0;
    }

    p,ul {
    padding-bottom: 1em;
    }

    ul {margin-left: 1.2em;}

    li {list-style: none;}
    .main li {list-style-image: url(img/li.gif);}

    h1 {font-size: 1.2em;}
    h4 {font-size: 1.2em;}

    blockquote {
    background: #FFF;
    border-bottom: 1px solid #EEE;
    border-top: 1px solid #EEE;
    color: #333;
    display: block;
    font-size: 0.9em;
    margin-bottom: 1.2em;
    padding: 6px 12px;
    }
    blockquote p {padding: 3px 0;}

    h1,h2,h3 {color: #e0c830;}

    h4 {color: #e0c830;}

    /* verschiedenes */
    .clearer {clear: both;}
    .main_right .padded {padding: 6px 2px 6px 16px;}
    .main .padded {padding: 18px 24px;}
    .meta {font-size: 0.8em; color: #666;}
    .left {float: left;}
    .right {float: right;}

    /* Struktur */
    .container {
    font-size: 1.2em;
    background: url(img/bgcontainer.gif) repeat-y;
    margin: 0 auto;
    width: 840px;
    border: 12px solid #222;
    }

    /* header */
    .header {
    float: left;
    width: 640px;
    background: url(img/Header.jpg) no-repeat;
    font: normal 2.4em Verdana,sans-serif;
    line-height: 150px;
    text-align: center;
    }

    /* Struktur */
    .top {
    background: #222;
    color: #DDD;
    float: left;
    font: normal 1.4em Verdana;
    height: 50px;
    text-align: center;
    width: 639px;
    }
    .subnav {
    float: left;
    width: 160px;
    }
    .main {
    float: left;
    width: 480px;
    }
    .main_right {
    float: right;
    width: 200px;
    color: #CCC;
    }

    /* Unter-Verzeichnis */
    .subnav h1 {
    background: #e0c830;
    color: #FFE;
    font: bold 1.1em Verdana,sans-serif;
    line-height: 24px;
    padding-left: 8px;
    }
    .subnav ul {margin: 0; padding: 0;}
    .subnav li {
    border-bottom: 1px solid #696755;
    list-style: none;
    }
    .subnav li a {
    background: #89866F;
    color: #111;
    display: block;
    padding: 8px 0 8px 12px;
    width: 148px;
    text-decoration: none;
    }
    .subnav li a:hover {
    background: #9C997C;
    color: #000;
    }

    /* footer */
    .footer {
    background: url(img/Footer.jpg) repeat-x;
    color: #000000;
    font-size: 0.9em;
    line-height: 39px;
    width: 100%;
    text-align: center;
    }
    .footer .left,.footer .right {padding: 0 16px;}
    .footer a {color: #000;}
    .footer a:hover {color: #000;}

    betroffene Homepage: externer Link
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    Ich konnte es jetzt natürlich nicht testen, aber hoffe dass es so funktioniert. Ich hab auch recht noch die statische Box entfernt und das zu einem Menü zusammengefasst, sprich du musst noch die Loginbox und deine PicOfX (wo du den Titel in der Navigation im Adminbereich festlegenkannst) ins Menü 2 mit einfügen.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="xhtml+xml; charset=iso-8859-1"/>
    <meta name="description" content="Dota Community, jeder ist willkommen. Wir sehen uns in Warcraft3"/>
    <meta name="keywords" content="Dota, Warcraft3, Game, Battle.net, derNager, Zap3l"/> 
    <meta name="author" content="street-live.net"/> 
    <link rel="stylesheet" type="text/css" href="include/designs/street/street.css"/>
    <link rel="shortcut icon" href="include/designs/street/img/sl.ico" />
    <title>{TITLE}</title>
    </head>
    
    <body>
    
    <div class="container">
    
    	<div class="header">.</div>
    
    	<div class="main_right">
    
    		<div class="padded">
          {_list_menunr2@<h4>%1</h4>%2<hr class="menu2_trenn" />} 
        <p>
        <a href="http://jigsaw.w3.org/css-validator/validator?uri=www.street-live.net&profile=css21&usermedium=all&warning=1/">
            <img style="border:0;width:88px;height:31px"
                src="http://jigsaw.w3.org/css-validator/images/vcss"
                alt="CSS ist valide!" />
        </a>
        </p>
    
      </div>
    
    	</div>
    
    <div class="subnav">{_list_menunr1@<h1>%1</h1>%2}	</div>
    		
    	<div class="main">
    
    		<div class="padded">
        {EXPLODE}
    
    	  </div>
    
    	</div>
    	
    	<div class="clearer"><span></span></div>
    
    	<div class="footer">
    		
    		<span class="right">Design&copy; 2008 <a href="index.html">Street-Live.net</a></span>
    		
    		<div class="clearer"><span></span></div>
    
    	</div>
    
    </div>
    
    </body>
    
    </html>
    
    <!--           anfang        +     link                |ende |teilende|teilee  -->
    <!-- horizontaler menupunkt -->
    {_list_hmenupoint@<li><a target="%1" href="%2">%3</a>|</li>|<br />|</ul></li>}
    <!-- horizontaler menupunkt anfang -->
    {_list_hmenubegi@<ul>}
    <!-- horizontaler menupunkt ende -->
    {_list_hmenuende@</ul>}
    
    <!-- vertikaler menupunkt -->
    {_list_vmenupoint@<li><a target="%1" href="%2">%3</a>|</li>|<br /><ul>|</ul></li>}
    <!-- vertikaler menupunkt anfang -->
    {_list_vmenubegi@<ul>}
    <!-- vertikaler menupunkt ende -->
    {_list_vmenuende@</ul>}


    In deine CSS noch folgendes einfügen:

    .menu2_trenn {
        border: 1px solid rgb(224, 200, 48);
        height: 1px;
        margin-top: 2px;
        margin-bottom: 2px;
    }
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    derNager Mitglied
    Registriert seit
    09.06.2008
    Beiträge
    13
    Beitragswertungen
    0 Beitragspunkte
    super, vielen Dank. Läuft tadellos.
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    derNager Mitglied
    Registriert seit
    09.06.2008
    Beiträge
    13
    Beitragswertungen
    0 Beitragspunkte
    hab doch ein kleines Problemchen. Und zwar ist im linken Menu einmal kein Trennstrich und beim zweiten ist er doppelt so dick. Kannst du mir noch sagen wie ich das ändern kann dann ist alles super. Danke
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    Das ist weil du den Menüpunkt eigentlich eingeschoben hast, das könnte man jetzt noch mit der CSS verfeinern.

    Gibts schon und solltest du ersetzen
    .subnav ul {
        margin: 0;
        padding: 0;
        background-color: #696755;
    }


    Neu einfügen
    .subnav li ul {
        margin-bottom: -1px;
        margin-top: 1px;
        text-indent: 10px;
    }


    Funktioniert so aber auch erstmal nur mit einer Einrückung.

    PS: Du hast in der street.css auch noch einen Fehler, vor dem .menu2_trenn hast du noch ein } was entfernt werden muss.


    Zuletzt modifiziert von Mairu am 13.06.2008 - 13:17:31
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    derNager Mitglied
    Registriert seit
    09.06.2008
    Beiträge
    13
    Beitragswertungen
    0 Beitragspunkte
    danke für die schnelle und kompetente Hilfe.
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Allgemein

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten