zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Dropdown, woher kommt die graue Leiste?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.03.2009, 17:22
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
Frage CSS Dropdown, woher kommt der extra Abstand?

Hallo Leute,

Hab mir mal ein CSS Dropdown gebastelt... Nun habe ich aber folgendes Problem: Aus mir unerklärlichen Gründen habe ich unterhalb meiner Navi Grafiken einen überflüssigen Abstand (zur verbesserten Ansicht habe ich diesen grün eingefärbt). Ich weiss auch welcher Teil des Codes dafür verantwortlich ist, verstehe allerdings NICHT wieso der Abstand passiert, denn mein Padding, Margin etc ist ja auf 0px gesetzt. Das einzige was ich mir noch vorstellen könnte ist dass es mit dem...

#menu ul{width:auto;float:left;margin:0px;padding:0px;ba ckground:#12ff00;list-style:none;}
.clear{clear:both;height:10px;}

...zu tun haben könnte, allerdings verändert sich rein gar nichts wenn ich die 10px verändere, egal ob ich sie kleiner, grösser mache, oder gar lösche, der Abstand bleibt...

Hier der Screenshot:


Und hier der gesammte Code (ignoriert die Parameter, ich war faul und hab das File auf dem Desktop liegen lassen :P):
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 Test</title>

<style type="text/css">

body{font-family:arial;}
#container{width:500px;margin:0 px;font-size:10pt;background:transparent;}

#menu{position:absolute;margin-top:0px;}
#menu ul .item{display:none;}

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

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

</style>

</head>

<body>

<div id="menu">

<ul id="item1">
<li class="top"><img src="Eigene Arbeiten/Bassride_Web/Web/images/layout_02.png" alt="home" /></li>
<center>
<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>
</center>
</ul>

<ul id="item2">
<li class="top"><img src="Eigene Arbeiten/Bassride_Web/Web/images/layout_03.png" alt="home" /></li>
<center>
<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>
</center>
</ul>

<ul id="item3">
<li class="top"><img src="Eigene Arbeiten/Bassride_Web/Web/images/layout_04.png" alt="home" /></li>
<center>
<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>
</center>
</ul>

<ul id="item4">
<li class="top"><img src="Eigene Arbeiten/Bassride_Web/Web/images/layout_05.png" alt="home" /></li>
<center>
<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>
</center>
</ul>

</div>


<p>&nbsp;</p>
<p>blablablablablabla usw usw usw</p>
<p>blablalbasdiuashdaisuhd</p>
</body>
</html>
Wäre echt froh wenn mich jemand aufklären könnte warum dies passiert... Und wenn möglich hätte ich noch eine Frage.

Die Navi sollte zuoberst auf einer "div"-gesättigten Seite angebracht werden ("div"-gesättigt weil direkt aus Photoshop exportiert). Wird es mir die unteren divs, bzw mein Layout, nach unten verschieben wenn das dropdown sich nun expandiert oder wird das einfach darüber gelegt wie bei normalem Text auch?

Ich danke euch schon mal im Vorraus für die hilfreichen Antworten,

Freundliche Grüsse Philippe
__________________
 = ♥ .: MacBook Pro Unibody, 2.8 GHz Intel Core 2 Duo, 4 GB 1067 MHz DDR3, NVIDIA GeForce 9400M/9600M GT :.

Geändert von pkipper (20.03.2009 um 17:41 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.03.2009, 18:26
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

Dein Code ist fehlerhaft, die Bilder können wir nicht sehen und sinnvoll ist dein Markup noch immer nicht.

Lesestoff: DOCTYPE-Switch: Unerklärliche Lücken zwischen Elementen
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.03.2009, 16:01
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

Also, ich habe versucht die ganzen Seiten zu welchen ich durch das FAQ weitergeleitet werde durchzulesen, und habe mich mittlerweile auch schon durch weitere verschiedene Tutorials gearbeitet. Sowohl durch die Links, wie als auch durch selbst ergoogeltes

Leider verstehe ich nicht genau was du mir mit "falschem Markup" zu sagen versuchst, bzw. was genau du damit meinst. Ich lerne gerne und habe auch kein Problem damit, wenn man mir beibringt, dass ich was falsche gemacht habe. Ich würde allerdings gerne verstehen was genau ich denn falsch gemacht habe

Also, hier meine neuste Version: (Alle Styles und Scripts habe ich zur verbesserten Anschauung direct im Code eingebaut)

Hoffe auf konstruktive Kritik,

Freundliche und lernfreudige Grüsse Philippe

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=ISO-8859-1" />
<title>CSS Dropdown Menü - Test 1</title>

<style>
#navbar {
	margin: 0;
	padding: 0;
	height: 1em; }
#navbar li {
	list-style: none;
	float: left; }
#navbar li a {
	display: block;
	padding: 3px 8px;
	background-color: #5e8ce9;
	color: #fff;
	text-decoration: none; }
#navbar li ul {
	display: none; 
	width: 10em; /* Weite für Opera Bug */
	background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0; }
#navbar li:hover li, #navbar li.hover li {
	float: none; }
#navbar li:hover li a, #navbar li.hover li a {
	background-color: #151515;
	border-bottom: 0px;
	color: #ffffff; }
#navbar li li a:hover {
	background-color: #202020; }
body {
	background-color: #000000;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}
</style>

<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns
sfHover = function() {
	var sfEls = document.getElementById("navbar").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" hover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" hover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

</head>

<body>

      <ul id="navbar">

		<li>
		<a href="#">MENÜ 1</a>
		</li>

		<li>
		<a href="#">MENÜ 2</a>
		<ul>
		<li><a href="#">Subitem 1</a></li>
		<li><a href="#">Subitem 2</a></li>
		</ul>
		</li>
            
		<li>
		<a href="#">MENÜ 3</a>
		<ul>
		<li><a href="#">Subitem 1</a></li>
		<li><a href="#">Subitem 2</a></li>
		<li><a href="#">Subitem 3</a></li>
		</ul>
		</li>
            
		<li>
		<a href="#">MENÜ 4</a>
		<ul>
		<li><a href="#">Subitem 1</a></li>
		<li><a href="#">Subitem 2</a></li>
		<li><a href="#">Subitem 3</a></li>
		<li><a href="#">Subitem 4</a></li>
		</ul>			
		</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 (27.03.2009 um 16:04 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 27.03.2009, 17:56
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

Vergleiche deine erste Fassung mit der zweiten. Siehst du denn nicht den Unterschied?
Fehler im HTML nennt dir der Validator.
The W3C Markup Validation Service

HTML Grundlagen: Einführung in XHTML, CSS und Webdesign
Mit Zitat antworten
  #5 (permalink)  
Alt 28.03.2009, 10:42
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

Ne, also klar sehe ich den Unterschied. Ich meinte ja nur was du unter "Markup" verstehst

Das Tutorial was ich für diesen Code verwendet habe war auch einiges ausführlicher und professioneller gestaltet. Die wesentlichen 2 Unterschiede die ich zu meiner ersten Version feststellen kann sind folgende:

1. 12 Zeilen .js für das ausmerzen einiger Fehler, somit browserübergreiffend.
2. Die Dropdown Liste passt sich nicht mehr länger der Überliste an, somit verschieben sich die Hauptmenü Punkte nicht mehr länger wenn der Text im Dropdown etwas länger ist.

Ich habe allerdings eine weitere Frage, denn wenn ich Grafiken anstatt Text in der Navi benutzte, so habe ich noch immer das Problem mit der Baseline... Ich habe mir unerklärliche Lücken zwar durchgelesen, aber noch immer nicht ganz verstanden wo genau ich die Codes einbinden würde damit der Abstand unterhalb der Grafiken verschwinden...

Könntest du mir nicht evntl. in 3-4 Zeilen erklären wo ich die codes die ich auf der Seite finde in meinem Code einbinden würde?

Danke im Vorraus für die Antworten,

Freundliche Grüsse Philippe
__________________
 = ♥ .: MacBook Pro Unibody, 2.8 GHz Intel Core 2 Duo, 4 GB 1067 MHz DDR3, NVIDIA GeForce 9400M/9600M GT :.

Geändert von pkipper (28.03.2009 um 10:44 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 28.03.2009, 10:53
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

Zitat:
Zitat von pkipper Beitrag anzeigen
Ne, also klar sehe ich den Unterschied. Ich meinte ja nur was du unter "Markup" verstehst
HTML = Hypertext Markup Language

Zitat:
Könntest du mir nicht evntl. in 3-4 Zeilen erklären wo ich die codes die ich auf der Seite finde in meinem Code einbinden würde?
Nein, ich schreibe dir deinen Code nicht.
Auf der verlinkten Seite findest du sogar Beispiele. Studier sie.
Wenn du dann immer noch Probleme hast, zeig was du versucht hast. Als Link.
Mit Zitat antworten
Antwort

Stichwörter
css, down, drop, dropdown

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
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
DIV immer ganze Breite - normal?!?!? csski CSS 3 02.07.2008 13:20
Wege zum guten CSS - Ausgewählte Links Sp33dy G0nz4l3s Ressourcen 1 27.05.2008 12:09
CSS Dropdown menu horizontal...Help please ... Oni CSS 4 09.04.2008 10:48


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:45 Uhr.