zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Ausklappbare "Box" wenn man über Link fährt?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.05.2010, 21:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.05.2010
Beiträge: 10
stephsteph befindet sich auf einem aufstrebenden Ast
Standard Ausklappbare "Box" wenn man über Link fährt?

Hallo zusammen,

ich habe einen Container, der ein Hintergrundbild beinhaltet.. Nun möchte ich einen Link in diesen tun (wie das geht weiß ich wohl..) - es soll eine weitere Auswahlmöglichkeit (die auch Links beinhaltet) nach oben weg erscheinen, wenn man drüberfährt... Kann mir da jemand helfen?

Ich habe zur Verdeutlichung zwei Grafiken erstellt:






Den transparenten Hintergrund würde ich als .png machen... Mich würde nur interessieren, wie ich die Links erscheinen lassen kann.....

Ich hoffe, ich habe ausreichend beschrieben...

Dankeschön schon im Voraus.

Achja, CSS- Kentnisse sind natürlich schon vorhanden.

Liebe Grüße
Steph
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.05.2010, 21:44
Benutzerbild von digmed08
Benutzer
neuer user
 
Registriert seit: 15.05.2010
Ort: Mannheim
Beiträge: 41
digmed08 befindet sich auf einem aufstrebenden Ast
Standard

Deine Frage ist ohne Quellcode schwer zu beantworten.

Generell musst du in deinem CSS die erscheinende Menüebene mit display: none; deklarieren. Dann wird sie nicht mehr dargestellt. Um sie beim Überstreichen des Links erscheinen zu lassen, setzt du auf diesen Link einen :hover, beispielsweise a:hover. Jetzt kannst du da reinschreiben, was sich beim Mouseover (Überstreichen) verändern soll.
Da sich in deinem Fall aber nicht das Überstrichene Element ändert, sondern ein anderes wird das etwas komplizierter. Da brauchst du Selektoren. Und um dir da den richtigen zu geben müsstest du deinen HTML-Code posten.

Versuchs mal damit:

a:hover xx { display: block;}

xx musst du hier durch das div ersetzen, in dem deine Links enthalten sind. Ich nehm mal an, dass du für die 3 Links ein umschließendes Element hast, in dem alle drinn sind, sonst funzts nicht.

Viel Erfolg
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.05.2010, 03:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.05.2010
Beiträge: 10
stephsteph befindet sich auf einem aufstrebenden Ast
Böse

*edit: Schaut mal dort oben in der Navi... So ähnlich mein ich das.. Netzfeuilleton.de
*EDIT 2: Ich habe was gefunden, das einem ganz gut helfen kann! http://de.selfhtml.org/css/layouts/n...ten.htm#modern Jetzt müsste ich rein theoretisch nur noch rausfinden, wie sich die Links "nach oben weg" öffnen, wenn man drüber fährt... Also wenn ich es rausbekommen habe, werde ich den kompletten Code hier mal posten, falls noch jemand ein ähnliches Problem hat.. Trotzdem könnt ihr mir gerne helfen, wenn ihr wisst wie's geht.
Grüßchen

Okay.. Dann Achtung, es folgen: Eine Meeenge Codes.
Vorab: Ich musste leider einmal absolut positionieren, da es anders nicht ging, den Text nach unten rechts zu bekommen.. Aber ich denke, das ist halb so wild..

Code für Container 1:
Code:
#hauptnavi {
	width: 870px;
	height: 200px;
	margin-top: 3px;
	margin-bottom: 0px;
}
Erläuterung: Das ist also der 1. Der sollte sich unterhalb des Headers befinden und 3 Weitere enthalten. Diese 3 sind alle gleich, ich werde hier also nur mit einem Beispiel arbeiten...

Code für Container 2:
Code:
		.navibg1 {
		margin-left:30px;
		background: url(images/cates.png) no-repeat;
		border: none;
		float:left;
		width: 260px;
		height: 149px;
		position:relative;
}
.. Und in diesem, der das Hintergrundbild enthält, befindet sich nun ein weiterer, der die Links enthalten soll.. (Es musste noch ein Weiterer sein, da ich den Text ansonsten nicht nach unten rechts hätte rücken können) Nämlich:

Code für Container 3:
Code:
		.navi1 {
		position: absolute;
		bottom: 12px;
		left: 10px;
}
So.. wie gesagt, in diesem befinden sich die Links. Puh...

Und nun zurück zum Problem... Ich weiß wie gesagt nicht, wie ich es einrichten kann, dass sich Links zeigen, wenn man über den 1. Link fährt.
Code:
a.nav:link, a.nav:active, a.nav:visited {
	font-size: 140%;
	font-weight: bold;
	color: #262626;
	outline: none;
	}

a.nav:hover {
	color: #212121;
	}
Ich wüsste auch gar nicht, wo ich anfangen soll... Bis hier hin wars schon recht turbulent.

Und nun noch eben wie es in html ausschaut:
HTML-Code:
	<div id="hauptnavi">
			<div class="navibg1">
				<div class="navi1">
				<a href="http://example.com" class="nav">Kategorien</a>
				</div>
			</div>

</div>
Wo müsste ich diese Links denn überhaupt hinpacken? Ich bin wirklich ziemlich ratlos

Steigt da jemand durch? Ich habe versucht es so übersichtlich wie möglich zu machen..

Dankeschön für jede Hilfe

Geändert von stephsteph (16.05.2010 um 09:50 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 16.05.2010, 11:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.05.2010
Beiträge: 10
stephsteph befindet sich auf einem aufstrebenden Ast
Daumen hoch

So...
Mein Fazit:

Man kann diese Seite SELFHTML: Stylesheets / CSS-basierte Layouts / Navigationsleisten WUNDERBAR dafür benutzen.

Eigentlich brauche ich gar nichts mehr posten. Denn ein wenig CSS-Kenntnisse sollte Jeder haben... bekommt man locker hin. Außerdem steht dort echt schon alles!

Wo ich nicht gleich drauf gekommen bin:

Wenn man möchte, dass die Links nach oben ausklappen, anstatt nach unten (ich poste es einfach mal.. vielleicht hat irgendwann Jemand das selbe Problem)
Folgendes Stückchen ändern:
Code:
  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    BOTTOM: 1.6em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }
So.. viel Glück allen Anderen...
Mit Zitat antworten
Antwort

Stichwörter
css, linkstyling

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
Text ragt entweder hinaus oder wird verschoben Der_FLo CSS 3 25.07.2006 23:14
Sidebarlänge dem Content anpassen?! Pumpkin CSS 2 14.03.2006 18:21
Bildwechsel mit CSS als Link Vira CSS 4 28.04.2005 14:44
xhtml validator error doni (X)HTML 40 17.09.2004 06:20
JavaScript Trigger per Link zur Anzeige eines (CSS)DIV-Block eugenandreas CSS 7 26.02.2004 20:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:48 Uhr.