Fancybox

flo96 · 22. Juni 2015

Hallo Leute,

ich bastle mal wieder an (m)einer Website...

einige denke ich wissen das schon und kennen vllt auch die Seite... für alle nochmal http://versuch.dietotenkoepfe.de

nur habe ich das Problem, dass das "Unsere Smartphone-App" oben am Rand klebt, wo die nav ist...

ich kriege das ding einfach net runter...

hier mal mein CSS für diesen Teil:

CSS

.app
{
	position: fixed;
	top: 200px;
	width: 100px;
}




#app
{
	width: 418px;
	display: none;	
}

Alles anzeigen

und der HTML:

HTML

<aside>
				<a href="#menu"></a>
				<nav id="menu">
					<ul>
						<li><a href="index.php?page=home" title="Home">Home</a></li>
						<li>
							<a href="index.php?page=about" title="Über uns">Über uns</a>
							<ul>
								<li><a href="index.php?page=mitgl" title="Mitglieder">Mitglieder</a></li>
								<li><a href="index.php?page=team" title="Mannschaftsfoto">Mannschaftsfoto</a></li>
								<li><a href="index.php?page=train" title="Training">Training</a></li>
								<li><a href="index.php?page=kon" title="Kontakt">Kontakt</a></li>
								<li><a href="index.php?page=imp" title="Impressum">Impressum</a></li>
							</ul>
						</li>
						<li><a href="index.php?page=avg" title="Schnittliste">Schnittliste</a></li>
						<li>
							<a href="index.php?page=mitglsch" title="Mitgliedschaft">Mitgliedschaft</a>
							<ul>
								<li><a href="index.php?page=kost" title="Kosten">Kosten</a></li>
								<li><a href="index.php?page=mitglwerden" title="Mitglied werden">Mitglied werden</a></li>
								<li><a href="index.php?page=gast" title="Gastkegler">Gastkegler</a></li>
								<li><a href="index.php?page=kegelreg" title="Kegelregeln">Kegelregeln</a></li>
							</ul>
						</li>
						<li><a href="index.php?page=galerie" title="Galerie">Galerie</a></li>
						<li><a href="index.php?page=gaesteb" title="Gästebuch">Gästebuch</a></li>
						<li><a href="index.php?page=links" title="Links">Links</a></li>
						<li><a href="index.php?page=funde" title="Fundstücke">Fundstücke</a></li>
						<li><a href="index.php?page=intern" title="Mitgliederbereich">Mitgliederbereich</a></li>
					</ul>
				</nav>
				<article class="app">
						<a class="fancybox" href="#app" title="Unsere App für dein Smartphone! Hier erhältlich!">Unsere Smartphone-App</a>
						<div id="app">
							<table>
								<tr>
									<td><a href="https://play.google.com/store/apps/details?id=com.Tobit.android.Slitte6680811379" target="_blank" title="KVDTNW für Android"><img src="icons/android.png" width="100" alt="Android" title="KVDTNW für Android"/></a></td>
									<td><a href="http://www.windowsphone.com/de-de/store/app/kvdtnw/6f485f74-ed04-4b97-9f89-30507f19423f" target="_blank" title="KVDTNW für Windowsphone"><img src="icons/windows.png" width="100" alt="Windows" title="KVDTNW für Windowsphone"/></a></td>
									<td><a href="https://itunes.apple.com/de/app/kvdtnw/id923638873?mt=8" target="_blank" title="KVDTNW für Apple"><img src="icons/apple.png" width="100" alt="Apple" title="KVDTNW für Apple"/></a></td>
									<td><a href="http://www.amazon.de/dp/B00PBVUHIS/" target="_blank" title="KVDTNW über Amazon"><img src="icons/amazon.png" width="100" alt="Amazon" title="KVDTNW über Amazon"/></a></td>
								</tr>
								<tr>
									<td>Android</td>
									<td>Windows</td>
									<td>Apple</td>
									<td>Amazon</td>
								</tr>
							</table>
						</div>
				</article>
			</aside>

Alles anzeigen

wenn jemand was weiß

Sempervivum · 22. Juni 2015

Du hast den Container .app mit position:fixed positioniert. Dadurch ist er aus dem normalen Textfluss herausgenommen und klebt am oberen Browserfenster (mit Abstand wie definiert). Außerdem hast Du den a-Tags innerhalb von aside ein Hintergrundbild gegeben; dadurch überdeckt der Text "Unsere Smartphone-App" dieses Bild. Und weil Du die Größe der a-Tags reduziert hast, ragt der Text über den Rand hinaus.

flo96 · 24. Juni 2015

wie kann ich das ändern, da das mit dem Hintergrund von der navi aus gegeben ist und das ganze css dazu..

Sempervivum · 24. Juni 2015

Wo hast du das denn her? Ich frage mich, ob du das richtig anwendest.
Die Überdeckung kannst Du vermeiden, indem Du dem a-Tag ein padding-top gibst, dann wird die Schrift nach unten verschoben. Und die Schrift("Unsere Smartphone-App") würde ich kleiner machen, damit sie die anderen Inhalte nicht überdeckt.

flo96 · 24. Juni 2015

Naja ich hab das mal gegoochelt ob es so was wie lightbox für html-elemente gibt und hab das dann gefunden... und hab gelesen, dass es mit lightbox halt nicht geht...

Und ich glaube dass ich dass mir so erklären kann: das css von der fancybox spricht das a-tag an... das bedeutet, dass alles in meinem <aside></aside> was ein <a></a> ist anspricht

Sempervivum · 25. Juni 2015

"lightbox für html-elemente" Ja, gibt es und mit Fancybox bist Du ja fündig geworden. Die Lightbox von http://lokeshdhakar.com kann jedoch nur Bilder anzeigen.
Für die Formatierung der a-Tags in aside ist jedoch dieses in demo.css verantwortlich:

CSS

aside a
{
	background: center center no-repeat transparent;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
	background-color: #888888;
	display: block;
	width: 100px;
	height: 40px;
	position: absolute;
	top: 158px;
	left: 0px;
}

Alles anzeigen

Hast Du das auch irgendwoher übernommen?

flo96 · 25. Juni 2015

Ja ich hab das quasi aus der für die fancybox verantwortliche css in die Haupt-css damit nicht viele Dateien geladen werden müssen

Und stimmt das ist verantwortlich... kann man diese Formatierung mit Hilfe irgendeines Befehls aufheben?

Volt mit Child oder so

Sempervivum · 25. Juni 2015

Aufheben kannst Du die Formatierung natürlich, indem Du es aus der CSS-Datei heraus nimmst. Wenn ich dich richtig verstanden habe, stört dich, dass der Text das Hintergrundbild (Menüsymbol) überdeckt. Dazu hatte ich dir empfohlen, ein padding-top einzuführen. Würde dann so aussehen:

CSS

aside a
{
	background: center center no-repeat transparent;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
	background-color: #888888;
	display: block;
	width: 100px;
	height: 40px;
	position: absolute;
	top: 158px;
	left: 0px;
        padding-top: 100px;
}

Alles anzeigen

Dort kannst Du auch die Schriftgröße verringern.

flo96 · 30. Juni 2015

naja ich hatte es so gedacht:

oben eben die navi und unten eben das "unsere Smartphone-App"

und das krieg ich net hin

Fancybox

Jetzt mitmachen!

Teilen