CSS DropDown ohne Bilder

ronjambo · #1 (**permalink**) 04.03.2009, 23:10

Hallo liebe Profis,

habe folgendes Problem. Ich möchte, wie der Titel bereits verrät, ein DropDown mit CSS erstellen, aber keine Bilder verwenden. Im Netz habe ich bereits etwas gefunden, was meiner Vorstellung am nächsten kommt.

HTML-Code:

<!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>
    <title>Navigation</title>
    <style type="text/css" media="screen">
      body { text-align:center; background:#a8cff0; font-size:90%; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; margin:0; padding:0; }
	  #page { width:50em; text-align:left; background:#FFF; border:4px solid #ecf3f9; margin:32px auto; padding:2em; }
	  h1 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight:normal; margin:0 0 0.5em 0; }
	  .clear { clear:both; }
	  
	  
	  /*###################*/
	  /* Beginn Navigation */
	  /*###################*/

	  #navi, #navi ul { list-style-type:none; margin:0; padding:0; } /* Style-Reset */

		#navi li { width:128px; float:left; } /* Horizontale Anordnung */
		
		#navi li ul { display:none; } /* Normalzustand eingeklappt */
		#navi li:hover ul { display:block; } /* Ausgeklappt */
		
      /*###################*/
	  /* Styles fuers Auge */
	  /*###################*/
	  
	  #navcontainer { height:16px; position:relative; }
	  
	  #navi { position:absolute; }
	  
	  #navi li { border:1px solid #000; margin:0 0px 0 0; }
	    #navi ul li { border:none; margin:0; width:170px; }
		
	  #navi a { font-weight:bold; text-align:center; display:block; padding:0.1em; }
	  #navi a:link, #navi a:visited { color:#FFF; background:#A8CFF0; text-decoration:underline; }
	  #navi a:active, #navi a:hover { color:#000; background:#FFF; text-decoration:none; }
	  
    </style>
	
	<!--[if lte IE 6]>
	  <style type="text/css" media="screen">#navi { behavior:url("csshover.htc"); }</style>
	<![endif]-->
	
  </head>
  <body>

<div id="page">

<div id="navcontainer">
<ul id="navi">
  <li><a href="#">foobar</a>
    <ul>
      <li><a href="#">foo<br />bar<hr /></a></li>
	  <li><a href="#">bla<hr /></a></li>
	  <li><a href="#">bli<hr /></a></li>
      <li><a href="#">blub</a></li>
    </ul>
  </li>
</ul>
</div>

<div class="clear"></div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<div class="clear"></div>

</div>

Probleme:
1. Border ringsherum klappt nicht
2. Hover geht über die Trennlinie der einzelnen Punkte

Ich versuch das mal zu skizzieren:

|---------|
| button |
|-----------------| <- horizontale, wie äußere vertikale Linien z.B. rot
| 1. link |
|-----------------| <- andersfarbig
| 2. link |
|-----------------| <- andersfarbig
| 3. link |
|_______________| <- wieder rot

Die Striche hinter "button", "1. link", ... sollen natürlich auf einer Höhe mit den anderen sein, bla.

Mir würde es auch schon reichen, wenn links und unten eine durchgängige Border wäre (die Linien zwischen den einzelnen List-Elementen haben eine andere Farbe als Border -- List-Elemente werden nach Nutzerrechten dynamisch ein- und ausgeblendet, sodass ich auch keine feste Farbe für das "letzte" definieren kann).

Hoffe, das war halb verständlich und bitte um Hilfe.

Grüße

ronjambo · #2 (**permalink**) 05.03.2009, 22:34

Huhu, keiner eine Idee?

ronjambo · #3 (**permalink**) 11.03.2009, 00:11

Mal wieder ich. CSS ist jetzt noch nichr wirklich elegant, aber kommt dem Ergebnis schon näher. Werde das natürlich noch auslagern und über "class" oder "id" realisieren.

Es muss doch jetzt möglich sein, bei mouseOver über den "barfoo-button" und über das erste <li>-Element border-bottom vom "barfoo-button" zu entfernen und gleichzeitig border-top vom ersten <li>-Element zu setzen.

PHP-Code:


			
<!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>

    <title>Navigation</title>

    <style type="text/css" media="screen">

      body { text-align:center; background:#a8cff0; font-size:90%; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; margin:0; padding:0; }

      #page { width:50em; text-align:left; background:#FFF; border:4px solid #ecf3f9; margin:32px auto; padding:2em; }

      h1 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight:normal; margin:0 0 0.5em 0; }

      .clear { clear:both; }

      

      

      /*###################*/

      /* Beginn Navigation */

      /*###################*/



      #navi, #navi ul { list-style-type:none; margin:0; padding:0; } /* Style-Reset */



        #navi li { width:128px; float:left; } /* Horizontale Anordnung */

        

        #navi li ul { display:none; } /* Normalzustand eingeklappt */

        #navi li:hover ul { display:block; } /* Ausgeklappt */

        

      /*###################*/

      /* Styles fuers Auge */

      /*###################*/

      

      #navcontainer { height:16px; position:relative; }

      

      #navi { position:absolute; }

      

      #navi li { border-left:1px solid #000; border-top:1px solid #000; solid #000; margin:0 0px 0 0; }

        #navi ul li { border:none; margin:0; width:170px; }

        

      #navi a { font-weight:bold; text-align:center; display:block; padding:0.1em; }

      #navi a:link, #navi a:visited { color:#FFF; background:#A8CFF0; text-decoration:underline; }

      #navi a:active, #navi a:hover { color:#000; background:#FFF; text-decoration:none; }

      #navi a:hover a:first-child {border-top: 1px solid black;}

      

    </style>

    

    <!--[if lte IE 6]>

      <style type="text/css" media="screen">#navi { behavior:url("csshover.htc"); }</style>

    <![endif]-->

    

  </head>

  <body>



<div id="page">





<div id="navcontainer">

<ul id="navi">

  <li><a href="#" style="border-bottom: 1px solid #000;">foobar</a>

    <ul>

      <li><a href="#" style="border-bottom: 1px solid #CC0; border-right: 1px solid black;">foo<br />bar</a></li>

      <li><a href="#" style="border-bottom: 1px solid #CC0; border-right: 1px solid black;">bla</a></li>

      <li><a href="#" style="border-bottom: 1px solid #CC0; border-right: 1px solid black;">bli</a></li>

      <li><a href="#" style="border-bottom: 1px solid black; border-right: 1px solid black;">blub</a></li>

    </ul>

  </li>

  <li><a href="#" style="border-bottom: 1px solid #000; border-right: 1px solid black">barfoo</a>

       <ul>

      <li><a href="#" style="border-bottom: 1px solid #CC0; border-right: 1px solid black;">foo<br />bar</a></li>

      <li><a href="#" style="border-bottom: 1px solid #CC0; border-right: 1px solid black;">bla</a></li>

      <li><a href="#" style="border-bottom: 1px solid #CC0; border-right: 1px solid black;">bli</a></li>

      <li><a href="#" style="border-bottom: 1px solid black; border-right: 1px solid black;">blub</a></li>

    </ul>

  </li>

</ul>

</div>



<div class="clear"></div>

Hat jemand eine Idee?

Gruß

ronjambo · #4 (**permalink**) 11.03.2009, 21:47

Scheint ja echt ein beliebter Thread zu sein. Kann mir denn wenigstens jmd. sagen, wie ich die "Buttons", je nach Bildschirmauflösung, an die gesamte div-Breite anpassen kann?

greetz

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bilder richtig positionieren - wie mit CSS?	RaBo	CSS	2	15.07.2009 15:34
Wann in CSS verlinkte Bilder wirklich geladen werden	Pablo	CSS	1	07.12.2007 21:27
Bilder Fade-In mit CSS	marc	CSS	3	08.02.2007 16:43
Mysteriöses in CSS Dropdown Menü	ph!L	CSS	3	21.07.2006 13:31
Mehrere Bilder mit css ausrichten, aber wie?	mika	CSS	2	07.09.2004 14:35