zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Dropdown, Paddingprobleme mit Grafiken

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.03.2009, 12:52
Benutzerbild von pkipper
Will keinen Titel
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.10.2008
Ort: Winterthur
Beiträge: 164
pkipper befindet sich auf einem aufstrebenden Ast
Standard CSS Dropdown, Paddingprobleme mit Grafiken

Der Titel mag vielleicht ein wenig nichtssagend sein, aber ich erläutere gerne. Es handelt sich dabei um folgendes: Ich habe mich mit einem Code für ein CSS Dropdown Menü auseinander gesetzt. Soweit habe ich durch einige Tutorials folgenden Code:

(Zur vereinfachten Anschauung habe ich den .css direkt ins html eingefügt.)

Zu meinen beiden Fragen:

1. Wie mache ich den oberen Container transparent? Denn für meine Navigation habe ich .png's mit transparenten Aspekten und hover Code benutzt.

2. Wie eliminiere ich sämtliche Abstände, damit sich der Container dem Inhalt anpasst und keine vorgegebenen Grössenverhältnisse besitzt? Ich hätte gerne die Möglichkeit meine 8 Bilder, aus welchen sich die Navigation zusammensetzt, aneinander zu reihen, und von diesen aus dann das Dropdown drunter zu setzen...

(Mit dem Drop Down handelt es sich um eine einfache schwarze Fläche mit grauer Schrift, die beim Hover weiss wird. Damit bin ich soweit zufrieden...)

Wäre super froh wenn sich das mal jemand anschaun könnte, denn ich habe mich zuvor noch nie mit einem drop down Code befasst

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>CSS Dropdown</title>

<style type="text/css">

body{font-family:arial;}

#container{width:500px;margin:auto;font-size:10pt;}

#menu ul .item{display:none;}

#menu ul:hover .item{display:block;background:#000;padding:0px;margin:0px;}
#menu ul:hover .item a{color:#999;font-size:8pt;text-decoration:none;}
#menu ul:hover .item a:hover{color:#fff;}

#menu ul{width:100px;float:left;margin:0px;padding:0px;background:#d3d3d3;list-style:none;}
.clear{clear:both;height:10px;}

</style>

</head>

<body>

<div id="menu">

<ul id="item1">
<li class="top"><img src="xyz/xyz.png" alt="Navi 1" /></li>
<li class="item"><a href="#">Testmenü 1</a></li>
<li class="item"><a href="#">Testmenü 2</a></li>
<li class="item"><a href="#">Testmenü 3</a></li>
</ul>

<ul id="item2">
<li class="top"><img src="xyz/xyz.png" alt="Navi 2" /></li>
<li class="item"><a href="#">Testmenü 1</a></li>
<li class="item"><a href="#">Testmenü 2</a></li>
<li class="item"><a href="#">Testmenü 3</a></li>
</ul>

<ul id="item3">
<li class="top"><img src="xyz/xyz.png" alt="Navi 3" /></li>
<li class="item"><a href="#">Testmenü 1</a></li>
<li class="item"><a href="#">Testmenü 2</a></li>
<li class="item"><a href="#">Testmenü 3</a></li>
</ul>

<ul id="item4">
<li class="top"><img src="xyz/xyz.png" alt="Navi 4" /></li>
<li class="item"><a href="#">Testmenü 1</a></li>
<li class="item"><a href="#">Testmenü 2</a></li>
<li class="item"><a href="#">Testmenü 3</a></li>
</ul>

</div>


</body>
</html>
__________________
 = ♥ .: MacBook Pro Unibody, 2.8 GHz Intel Core 2 Duo, 4 GB 1067 MHz DDR3, NVIDIA GeForce 9400M/9600M GT :.

Geändert von pkipper (04.03.2009 um 12:54 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.03.2009, 08:29
Neuer Benutzer
neuer user
 
Registriert seit: 13.02.2009
Beiträge: 5
HansHansa befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

Wußte gar nicht das es einen speziellen "drop down Code" gibt.

zu 1. Deinen nicht definierten "oberen Container" bekommt man mit
Code:
background:transparent;
transparent.

zu 2.
Zitat:
damit sich der Container dem Inhalt anpasst
schon mal width:auto; probiert ?
Zitat:
Wie eliminiere ich sämtliche Abstände,
schon mal margin:0; probiert ?

Hansa
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.03.2009, 09:57
Benutzerbild von pkipper
Will keinen Titel
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.10.2008
Ort: Winterthur
Beiträge: 164
pkipper befindet sich auf einem aufstrebenden Ast
Standard

Hallo Hansa,

scheint als wäre ich aufgeflogen, stimmt bin halt noch nicht so pro wie mancher andere hier, aber ich bin auf dem Weg es zu lernen

Werde deine Vorschläge natürlich sofort ausprobieren, danke dir schon mal im Voraus!

MfG Phil
__________________
 = ♥ .: MacBook Pro Unibody, 2.8 GHz Intel Core 2 Duo, 4 GB 1067 MHz DDR3, NVIDIA GeForce 9400M/9600M GT :.
Mit Zitat antworten
  #4 (permalink)  
Alt 05.03.2009, 11:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

pkipper, schau dir doch bitte nochmal die Artikel zu Dropdowns an, die du in den FAQ findest. Dein Markup ist untauglich, die richtige Struktur ist sind verschachtelte Listen. Schließlich sind die "Drops" Unterpunkte der Oberpunkte.
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
Dropdown Menü über CSS realisiseren (Joomla) Robeat CSS 0 20.01.2009 13:24
css dropdown menue / abstände designWerker CSS 0 03.11.2008 19:23
CSS und Verweis-sensitive Grafiken definieren möglich? mysql CSS 8 07.09.2007 17:37
Suche CSS Dropdown Menü Lloyd Larkin CSS 0 11.10.2006 21:50
CSS: Grafiken per CSS einbinden und deren Ausrichtung sancho CSS 12 24.08.2005 14:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:20 Uhr.