zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS DropDown ohne Bilder

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.03.2009, 22:10
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2009
Beiträge: 35
ronjambo befindet sich auf einem aufstrebenden Ast
Standard CSS DropDown ohne Bilder

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.03.2009, 21:34
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2009
Beiträge: 35
ronjambo befindet sich auf einem aufstrebenden Ast
Standard

Huhu, keiner eine Idee?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.03.2009, 23:11
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2009
Beiträge: 35
ronjambo befindet sich auf einem aufstrebenden Ast
Standard

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:centerbackground:#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"VerdanaGenevaArialHelveticasans-seriffont-weight:normalmargin: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ß
Mit Zitat antworten
  #4 (permalink)  
Alt 11.03.2009, 20:47
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2009
Beiträge: 35
ronjambo befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:55 Uhr.