Ergebnis 1 bis 10 von 10
  1. #1
    Avatar von mo
    mo
    mo ist offline Administrator
    registriert
    09-06-2000
    Ort
    /dev/null
    Beiträge
    5.409

    <li> element mit 2 Links

    hi!
    ich würde gern im folgenden code 2 elemente in das <li> schreiben, also z.b. 2 links.
    wenn ich das tue, habe ich automatisch eine neue zeile, ich hätte das aber gerne nebeneinander.
    Code:
    <style>
    p, ul, ol {
    	margin-bottom: 1.5em;
    	line-height: 170%;
    	text-align: justify;
    }
    ul, ol {
    	list-style-type:none;
    }
    //QUICKNAV
    #navi, #navi ul { list-style-type:none; padding:0; }
    /* Style-Reset */
    #navcontainer { height:15px; position:relative; margin-left:42px; filter:alpha(opacity=85);-moz-opacity:.85;opacity:.85; z-index:1 }
    #navi { position:absolute; }#navi > li { width:73px; float:left; } /* Horizontale Anordnung */
    #navi > li { height:24px; overflow:hidden; } /* Normalzustand eingeklappt */
    #navi > li:hover { height:auto; overflow:visible; } /* Ausgeklappt */
    #navi a { font-weight:bold; display:block; height:20px; width:150px; padding:2px; font-family:arial,helvetica }
    #navi a:link, #navi a:visited { color:#FFF; background:#00377e; text-decoration:none; }
    #navi a:active, #navi a:hover { color:#000; background:#a8cff0; text-decoration:none; }
    </style>
    <div id="navcontainer">
    <ul id="navi">
    		<li><a href="#">A1</a>
    			<ul>
    		  		<li><a class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> 123</li>
    		  		<li><a class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> 123</li>
    		  		<li><a class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> 123</li>
    		  		<li><a class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> 123</li>
    			</ul>
    		</li>
      
    		<li><a href="#">A2</a>
    			<ul>
    		  		<li><a class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> 123</li>
    		  		<li><a class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> 123</li>
    		  		<li><a class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> 123</li>
    				<li><a class="lightwindow" href="doc_quickinfo_show.php?id=202" title="Quickinfo">def</a> 123</li>
    			</ul>
    		</li>
      
      </ul>
    </div>
    jemand ne idee?
    bye,
    mo

  2. #2
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: <li> element mit 2 Links

    Du meinst, dass abc und 123 nebeneinander stehen?
    123 in ein span-Element packen und in den style
    PHP-Code:
    #navi li:hover span{ position:relative; top:-23px; left:170px;} 


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  3. #3
    Avatar von mo
    mo
    mo ist offline Administrator
    registriert
    09-06-2000
    Ort
    /dev/null
    Beiträge
    5.409

    AW: <li> element mit 2 Links

    hi,
    danke dir.
    aber klappt leider nicht, zumindest nicht im safari. da sind dann die oberpunkte untereinander statt nebeneinander.
    bye,
    mo

  4. #4
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: <li> element mit 2 Links

    Hm, Safari hab ich hier nicht, im FF2 und IE7 gehts so. Und wenn Du als Bezeichnung im style nur span schreibst?


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  5. #5
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: <li> element mit 2 Links

    Was sagt denn Safari (der im Übrigen Recht hat mit seiner Anzeige) dazu:
    Code:
    #navi li:hover ul li span { display:none; }
    #navi li ul li:hover span { display:inline; position:relative; top:-23px; left:170px; }
    außerdem noch hier eine Ergänzung
    Code:
    #navi  li:hover { height:auto; overflow:visible; margin-bottom:-27px; } /* Ausgeklappt */
    getestet mit IE7, FF2 und Opera9


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  6. #6
    Avatar von mo
    mo
    mo ist offline Administrator
    registriert
    09-06-2000
    Ort
    /dev/null
    Beiträge
    5.409

    AW: <li> element mit 2 Links

    hier mal mein aktueller code
    Code:
    <style>
    p, ul, ol {
    	margin-bottom: 1.5em;
    	line-height: 170%;
    	text-align: justify;
    }
    ul, ol {
    	list-style-type:none;
    }
    
    //QUICKNAV
    #navi, #navi ul { list-style-type:none; padding:0; } /* Style-Reset */
    
    #navcontainer { height:15px; position:relative; margin-left:42px; filter:alpha(opacity=85);-moz-opacity:.85;opacity:.85; z-index:1 }
    
    #navi { position:absolute; }
    
    #navi > li { width:73px; float:left; } /* Horizontale Anordnung */
    
    #navi > li { height:24px; overflow:hidden; } /* Normalzustand eingeklappt */
    #navi  li:hover { height:auto; overflow:visible; margin-bottom:-27px; } /* Ausgeklappt */
    
    #navi li:hover ul li span { display:none; }
    #navi li ul li:hover span { display:inline; position:relative; top:-23px; left:170px; }
    
    #navi a { font-weight:bold; display:block; height:20px; width:150px; padding:2px; font-family:arial,helvetica }
    #navi a:link, #navi a:visited { color:#FFF; background:#00377e; text-decoration:none; }
    #navi a:active, #navi a:hover { color:#000; background:#a8cff0; text-decoration:none; }
    </style>
    <div id="navcontainer">
    <ul id="navi">
    		<li><a href="#">A1</a>
    			<ul>
    			  <li><span><a class="lightwindow" href="doc_quickinfo_show.php?id=1">123</a>&nbsp;<a href=""><img src="gfx/info.png" alt="Info" width="16" height="" /></span></li>
    			  <li><span><a class="lightwindow" href="doc_quickinfo_show.php?id=191">123</a>&nbsp;<a href=""><img src="gfx/info.png" alt="Info" width="16" height="" /></span></li>
    		 	</ul>
    		</li>
      
    		<li><a href="#">A2</a>
    			<ul>
    			  <li><span><a class="lightwindow" href="doc_quickinfo_show.php?id=1">123</a>&nbsp;<a href=""><img src="gfx/info.png" alt="Info" width="16" height="" /></span></li>
    			  <li><span><a class="lightwindow" href="doc_quickinfo_show.php?id=191">123</a>&nbsp;<a href=""><img src="gfx/info.png" alt="Info" width="16" height="" /></span></li>
    		 	</ul>
    		</li>
      
      </ul>
    </div>
    mit dem es aber leider im safari nicht klappt...
    bye,
    mo

  7. #7
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: <li> element mit 2 Links

    Im Markup steht auch noch die class="lieghtwindow", die nicht im style angegeben ist. Vielleicht macht das den Unterschied, denn bei mir im FF2 (unter WIN XP)sieht das Ganze mit dem geposteten Code so aus
    hover.jpg


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  8. #8
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: <li> element mit 2 Links

    So hab jetzt auch daheim Safari

    Wie siehts so bei Dir aus?
    PHP-Code:
    <style type="text/css" >
    pulol {
        
    margin-bottom1.5em;
        
    line-height170%;
        
    text-alignjustify;
    }
    ulol {
        list-
    style-type:none;
    }

    //QUICKNAV
    #navi, #navi ul { list-style-type:none; padding:0; }
    /* Style-Reset */
    #navcontainer { height:15px; position:relative; margin-left:42px; filter:alpha(opacity=85);-moz-opacity:.85;opacity:.85; z-index:1 }
    #navi { position:absolute; }#navi > li { width:77px; float:left; } /* Horizontale Anordnung */
    #navi > li { height:24px; overflow:hidden; } /* Normalzustand eingeklappt */
    #navi  li:hover { height:auto; overflow:visible; margin-bottom:-23px; } /* Ausgeklappt */
    #navi a { font-weight:bold; display:block; height:20px; width:150px; padding:2px; font-family:arial,helvetica }
    #navi a:link, #navi a:visited { color:#FFF; background:#00377e; text-decoration:none; }
    #navi a:active, #navi a:hover { color:#000; background:#a8cff0; text-decoration:none; }
    #navi li:hover ul li span a { display:none; }
    #navi li ul li:hover span a { display:block; position:relative; top:-23px; left:154px; }
    </style>

    <
    div id="navcontainer">
    <
    ul id="navi">
            <
    li><a href="#">A1</a>
                <
    ul>
                      <
    li><class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> <span><a href=""><img src="gfx/info.png" alt="Info" width="16" height="" /></a></span></li>
                      <
    li><class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> <span><a href=""><img src="gfx/info.png" alt="Info" width="16" height="" /></a></span></li>
                </
    ul>
            </
    li>

            <
    li><a href="#">A2</a>
                <
    ul>
                      <
    li><class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> <span><a href=""><img src="gfx/info.png" alt="Info" width="16" height="" /></a></span></li>
                      <
    li><class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> <span><a href=""><img src="gfx/info.png" alt="Info" width="16" height="" /></a></span></li>
                </
    ul>
            </
    li>

      </
    ul>
    </
    div


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  9. #9
    Avatar von mo
    mo
    mo ist offline Administrator
    registriert
    09-06-2000
    Ort
    /dev/null
    Beiträge
    5.409

    AW: <li> element mit 2 Links

    hm, da gibts probleme mit den anderen styles irgendwie..
    alleine funktionierts, dafür danke!
    nur sobald ichs in die seite reinsetze, ist wieder alles untereinander.

    gibts ein alternatives drop-down menu (meinetwegen auch mit etwa JS)?
    bye,
    mo

  10. #10
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: <li> element mit 2 Links

    Na ja, Menüs gibts wie Sand am Meer. Hab gedacht, dass evtl. die Vorlage von Stu etwas für Dich wäre. Das Problem taucht aber dann wieder auf, wenn ich a und img in den Description-Text setze.

    Alternativ kannst Du mir mal nen Link mailen und ich schau mir an, ob man mein Beispiel - eventuell mit ner zusätzlichen Klasse - auf Deine Seite adaptieren kann.


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

Ähnliche Themen

  1. Nur ein Element Togglen
    Von [molsch] im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 20-06-2008, 20:05
  2. Links einlesen
    Von Kenin im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 24-01-2008, 00:52
  3. Scriptaculous, neues Element per JS erstellen
    Von dr_green im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 07-12-2007, 18:46
  4. Bestimmtes Element aus Array löschen
    Von cula-online im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 24-09-2002, 23:51
  5. Stichwort Links, Frames, deep links usw...
    Von style-guide! im Forum Internet & Recht
    Antworten: 2
    Letzter Beitrag: 19-12-2001, 22:48

Lesezeichen

Berechtigungen

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