Probleme mit der "Verankerung"

einsiedler · 25. August 2015

Liebe Leute, ich habe ein Problem,

zwar funktioniert bei mir die horizontale Verankerung:

Bild: http://goo.gl/VJGh3D Website: http://goo.gl/GHcctP

dennoch habe ich eine Frage zu diesem Thema:

ist es möglich anstatt von "BILD 1" "BILD 2" "BILD 3" ... wo man dann zur entsprechenden Stelle springt,

lediglich ein >> und ein << einzusetzen???? Also ein >> für "weiter" und << für "zurück"!!!!

das müsste doch mittels php funktionieren, habe aber keine Ahnung wie?

Wer kann mir dabei helfen???

Grüsse T.

JR Cologne · 25. August 2015

1. Am einfachsten ist es immer, wenn man den Code gleich mitgibt, denn dann kann man dir viel besser helfen.

2. Sind die verschiedenen Bilder in einer anderen HTML-Datei, also kommt man auf eine neue Seite, wenn man z.B. auf Bild 4 klickt? Wenn das so ist, kannst du es einfach mit HTML machen. Falls nicht, brauchst du PHP.

einsiedler · 26. August 2015

Ja sicherlich, entschuldigung! :o)

Hier also der Quelltext, mit den Funktionen wie ich es mir vorstelle!

HTML

<!DOCTYPE html>
<html lang="de">




	<!--[if lt IE 9]>
	<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->







<head>
	<meta charset="UTF-8" />
	<title>Waldfrieden -- Tassilo Sturm</title>




	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>




	<link rel="icon" href="img.ico" />
	<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/main_css.css"/>
</head>







<body>




<!-- Anfang Content-Bereich -->




	<header>




	<h1>Waldfrieden  --  Tassilo Sturm</h1><h2>Rauminstallationen</h2>




		<nav class="main_menue">
     			<ul>
				<li> <a href="templates/works.html">WORKS</a></li>
       			        <li> <a href="templates/text.html">TEXT</a> </li>
				<li> <a href="templates/news.html">NEWS</a> </li>
       			        <li> <a href="templates/cv.html">CV</a> </li>
       			        <li> <a href="templates/kontakt_impressum.html</a> </li>
			</ul>
		</nav>




        </header>




         

	<div id="wrapper">




			<div id="eins" class="sidebar_linkscontent">
				<p>
					HOME____Stet clita kasd gubergren, no sea takimata sanctus est Lorem 
					ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
					elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 
					magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
					duo dolores et Lorem ipsum dolor sit amet, consetetur sadipscing 
					elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
					aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
					dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
					est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur  
                                 </p>                              
			</div>




			<div class="main_contentframe">
					<div id="zwei" class="main_content">
							<p>
								WORKS____Stet clita kasd gubergren, no sea takimata sanctus est Lorem    
							</p>




						  <figure class="imgbox"> <img src="fotos/demofotos_700px/erdbeerteller_web.jpg" width="700" height="700" alt="Bild1"> </figure>
					</div>




					<div id="drei" class="other_content">
							<p>
								TEXT____<br/>
								Der in Mï¿½nster lebende Tassilo Sturm schafft in seinen installativen Arbeiten Rï¿½ume, die er selbst als Schutzrï¿½ume bezeichnet,
								die imaginï¿½ren Bewohnern eine Zuflucht bieten sollen. Schutz vor einer als brutal empfundenen Realitï¿½t. Die heimelig - unheimlichen
								Zufluchten und Traumstï¿½tten sind meist aus einfachen, jedermann zugï¿½nglichen Materialien gebaut, Pappe, Sperrholz. Palletten,
								Presspappe, Spanplatten, Zeltstoff. Seine eigenwillgen, sperrigen Konstruktionen sind konkrete kleine Utopien, die ihre Besucher
								mitnehmen auf eine Reise ins Ungewisse. Ungewiss auch deshalb, weil man, so behaglich die Bauten auch wirken, nie weiï¿½, ob sie sich
								in der unwirtlichen Umgebung behaupten kï¿½nnen. In ihrer dï¿½steren, schlichten Behaglichkeit wirken die verlassenen Rï¿½ume, oft rï¿½hrend,
								auf bedrï¿½ckende Weise anziehend und noch lange beflï¿½geln sie die Phantasie. Wer lebte hier, was geschah an diesem Ort, wo sind die
								Bewohner nun? Oft wirken diese Schutzrï¿½ume jedoch selbst schutzbedï¿½rftig, bedroht in einer immer unï¿½bersichtlicher werdenden
								hochtechnisierten Welt, ï¿½ber die der einzelne Mensch die Kontrolle zu verlieren droht. Sturms Refugien - das sind seltsam aus der Zeit
								gefallene, mit schlichten Materialien sorgsam gebaute Anderswelten. Sie spiegeln den Wunsch des modernen Menschen wider nach Einfachheit
								und Beherrschbarkeit im Dschungel der Zivilisation. Die Erschaffung einer eigenen kleinen Welt - Sturms Bauten sind trotzige, poetische
								Gegenentwï¿½rfe zur modernen, kalten Perfektion. Es sind nicht nur Rï¿½ckzugsorte, nein sie sind auch Symbole der Verweigerung, das Scheitern
								wird bewusst riskiert. In der letzten Zeit ï¿½ffnet Tassilo Sturm seine hermetisch abgekapselten Bauten anderen Kï¿½nstlern, Musikern, 
								Schauspielern und Schriftstellern. Der weltabweisende Charakter der Refugien wird dadurch einerseits gebrochen, doch andererseits findet
								eine weitere Individualisierung der Gegenwelt statt. Unvergessliche Geschichten scheinen diesen bockigen, kleinen Trutzburgen zu
								entspringen, die mal auf schmutzigen Gewï¿½ssern schwimmen, mal sich gegen feindliche Mï¿½llkippen zu behaupten suchen. Jeder dieser Bauten
								hat eine magische Aura, die lange nachwirkt. <br/>--- <b>Bettina Mï¿½hlbauer</b>   
							</p>
					</div> 




					<div id="vier" class="another_content">
							<p>
								NEWS____Stet clita kasd gubergren, no sea takimata sanctus est Lorem 
								ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
								elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 
								magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
								duo dolores et Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
								sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
								erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et 
								ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem 
								ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
								elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
								aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
								dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
								est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
								sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
								dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
								justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
								sanctus est Lorem ipsum dolor sit amet.   




							</p>
					</div>




					<div id="fuenf" class="more_content">
							<p>
								CV_____ <br/>
								2011 "Silent Space", Cuba Cultur (Mï¿½nster), Mï¿½nster <br/>
								2011 "Heimathafen", Nachtspeicher23 e.V. , Hamburg <br/>
								2010 "Stiegenhausexil", TomA Mï¿½nster, Mï¿½nster <br/>
								2010 "Glï¿½ck ... absent", Keimzelle Ostbevern, Ostbevern <br/>
								2009 "Refugium Moguntia - Eine Eremitage fï¿½r Mainz" -  Kunstverein Walpodenakademie, Mainz <br/>
								2008 "Fernwï¿½rme" - dieHO Galerie, Magdeburg <br/>
								2008 "Eremitage fï¿½r Schï¿½ppingen" - Stiftung Kï¿½nstlerdorf Schï¿½ppingen (Atelier 4), Schï¿½ppingen <br/>
								2008 "Rendezvousprobleme" - Stï¿½dtische Bï¿½hnen, Mï¿½nster <br/>
								2007 "Der Bau" - Rhizom - Bï¿½ro fï¿½r Kunstvermittlung, Mï¿½nster <br/>
								2006 "Waldfrieden", MARTa-Kapelle / Museum MARTa, Herford <br/>
								2004 "When it`s cold i`d like to die", Wewerka-Pavillon, Mï¿½nster <br/>
								2003 "Selbstportrait als Insel", Stï¿½dt. Galerie "Sohle 1", Bergkamen <br/>
							</p>




					</div>




					<div id="sechs" class="muchmore_content">
							<p>
								KONTAKT / IMPRESSUM ____ <br/>
								2015 "RTFM (Read the Fucking Manual)" - Oliver Breitenstein / Tassilo Sturm", Kunsthalle Mï¿½nster, Mï¿½nster <br/> 
								2015 "Mï¿½nsteraner Hï¿½ngung", Kï¿½nstler/innen der Mï¿½nsteraner Ateliergemeinschaften  Fresnostrasse / Hawerkamp / Schulstrasse / Speicher II / Bremsenprï¿½fstand /Ausstellungshalle HawerkampMï¿½nster <br/>  
								2014 "INTERZONAL"  - Anja Kreysing, Jï¿½rg Schulze-Neuhoff, Tugsal Mogul, Gregor Bohnensack, Atelier 2.6 / Speicher II,  Mï¿½nster <br/>  
								2014 "lichtkasten"  - Kunststation Delden / M.I.K.C. Perron 1,  Delden (NL) <br/>  
								2013 "Forum 2013" - Al Hagita, Anne Wissmann, Carol Pilars de Pilar, Dorthe Goeden, Naomi Akimoto, Nora Grunwald, Silke Brï¿½sskamp, Sylvia Forstmann, Tassilo Sturm, Thomas Fornfeist , Burg Vischering, Lï¿½dinghausen <br/> 
								2013 "25 Jahre KunstVerein Ahlen - "Kï¿½nstler im Verein", Kunstverein Ahlen, Ahlen <br/>
								2013 "Hydra" , Marcio-Andrï¿½, Ana Gesto, Beate Gï¿½rdes und Adrienne Brehmer, Yi Zheng Lin, Nuno Margarida (Nuno Oliveira und Guida Chambel, Tassilo Sturm, Eva Wal,  Kï¿½nstlerforum Bonn, Bonn <br/>            
								2013 "TWILIGHT ZONE Wiederkehr der Schatten" , montanaberlin &amp; Gï¿½ste -- Jï¿½rn Gerstenberg - Esther Horn - Oliver Krï¿½henbï¿½hl - Tassilo Sturm - Christian Heilig - Richard Schï¿½tz - Nadine Rennert - Markus Vater - Marcin Cienski - Alekos Hofstetter / Florian Gï¿½pfert, 
									Galerie Nord | Kunstverein Tiergarten, Berlin <br/> 
								2013 "Rendezvous des Amis II" , Esther Horn - Jï¿½rn Gerstenberg - Oliver Krï¿½henbï¿½hl - Tassilo Sturm,  Hotel Kaiserhof, Zimmer 117 / 1.Etage, Mï¿½nster <br/>
								2012 "Mï¿½nsteraner Hï¿½ngung", Kï¿½nstler/innen der Mï¿½nsteraner Ateliergemeinschaften  Fresnostrasse / Hawerkamp / Schulstrasse / Speicher II, Ausstellungshalle Hawerkamp, Mï¿½nster <br/>
							</p>
					</div>




					<div id="sieben" class="muchmuchmore_content">
							<p>
								SONSTIGES ____ <br/>
								2012 "Mï¿½nsteraner Hï¿½ngung", Kï¿½nstler/innen der Mï¿½nsteraner Ateliergemeinschaften  Fresnostrasse / Hawerkamp / Schulstrasse / Speicher II, Ausstellungshalle Hawerkamp, Mï¿½nster <br/> 
								2011 "Rendezvous des Amis", Esther Horn - Jï¿½rn Gerstenberg - Oliver Krï¿½henbï¿½hl - Tassilo Sturm, Art`otel - Wallstrasse 70 - 73 // Zimmer 401 / 4. Etage - 10179 Berlin-Mitte, Berlin <br/>
								2011 "NEW HOME",MIKC / PERRON 1 (Delden) &amp; MTS / Fabrik (Hengelo) <br/>
								2011 "Geist ist Geil -- Sommerausstellung mit Arbeiten aktueller und ehemaliger Stipendiaten der Stiftung Kï¿½nstlerdorf Schï¿½ppingen", Stiftung Kï¿½nstlerdorf Schï¿½ppingen, Schï¿½ppingen <br/>
								2010 "hbf - hï¿½user | bilder | fenster", Schauraum im Bahnhofsviertel Mï¿½nster, Mï¿½nster <br/>
								2010 "Perlen fï¿½r das Volk" Marianne Tralau, Tassilo Sturm , Berliner Kunstverein Mï¿½nster, Mï¿½nster <br/>
								2009 "Labor Schï¿½ppingen - Das Universum nebenan" -  Stiftung Kï¿½nstlerdorf Schï¿½ppingen, Schï¿½ppingen <br/>
								2006 "Open Call" - Fï¿½rderpreis des Westfï¿½lischen Kunstvereins, Westfï¿½lischer Kunstverein, Mï¿½nster <br/>
								2006 "Zaungï¿½ste", neues Kunstforum, Kï¿½ln <br/>
								2006 "Ensemble(s) I", Citï¿½ des Arts, Paris <br/>
								2005 "Ulrich Erben im Cubus mit ... Timo Kube, Antonia Low, Martin Meiswinkel, Ulrike Arndt, Tassilo Sturm, Verena Pï¿½schel, Sï¿½ren Schmitt", Cubus Kunsthalle, Duisburg <br/>
								2005 "Wanderpause", Stï¿½dt. Galerie im Peschkenhaus, Moers <br/>
								2004 "Heimweg", Galerie Martin Kudlek, Kï¿½ln <br/>
							</p>
					</div>




			</div>  
      </div>      







	<footer> 
			<p> FOOTER FOOTER FOOTER </p>




			<nav class="main_menue">
				<ul>
					<li> <a href="templates/bildergalerie1.html">BILD 1</a></li>
					<li> <a href="templates/bildergalerie2.html">BILD 2</a></li>
					<li> <a href="templates/bildergalerie3.html">BILD 3</a> </li>
					<li> <a href="templates/bildergalerie4.html">BILD 4</a> </li>
					<li> <a href="templates/bildergalerie5.html">BILD 5</a> </li>
					<li> <a href="templates/bildergalerie6.html">BILD 6</a> </li>
					<li> <a href="templates/bildergalerie7.html">BILD 7</a> </li>
					<li> <a href="templates/bildergalerie8.html">BILD 8</a> </li>
					<li> <a href="templates/bildergalerie9.html">BILD 9</a> </li>
					<li> <a href="templates/bildergalerie10.html">BILD 10</a> </li>
				</ul>
			</nav>
	</footer>




</body>




</html>

Alles anzeigen

Das Menue oben führt zu weiteren Unterseiten, die aber "mehrseitig" sind sodas man horizontal scrollt!

Speziel jetzt das Menue unten, was dort zu sehen ist, erscheint nur bei der Unterseite "works", wo man dann die verschiedenen Arbeiten anklick, wobei es sich jedoch um mehrere Fotos handeln kann (oder ein Video) die man sich horizontal erscrollt!

Villeicht.... , das habe ich mir auch gedacht, benutze ich das untere Menue (im Footer), bei den verschiedenen Unterseiten (die man oben anklickt) sozusagen als Kapitel-Überschrift!

Ich möchte eigentlich, wenn es geht kein java-script benutzen müssen, villeicht nur zusätzlich, die Funktionen sollen aber auch ohne erreichbar sein!

Vielen dank ersteinmal!

Grüsse T.

P.S. : Villeicht ist dieses ganze "Gerüst" auch viel zu umständlich gecodet und man würde es so in der Form nicht machen (bei horizontalen Webseiten)!
Einen Tipp habe ich bekommen: http://www.gipspferd.de/forumhilfe/anker/anker.htm
Stimmt das? Was denkt ihr?

Als (relativ) funktionierendes Beispiel möchte ich diese Seite anführen obwohl mich einige Sachen vorallem der Navigation, sehr stören: http://elfletterig.nl/pjroggeband

JR Cologne · 27. August 2015

Tut mir Leid. Ich verstehe irgendwie nicht, was du vor hast bzw. wo das Problem liegt. Vielleicht hilft es, wenn du das ganze nochmal anhand eines Bildes deutlich erklärst und vielleicht auch einzeichnest, was anders sein soll. Weil so kann ich dir nicht helfen. Sorry!

einsiedler · 29. August 2015

hi JR Cologne,

ich habe es mal versucht.....

[Blockierte Grafik: http://goo.gl/vcpG1t]

zur zusätzlichen erläuterung:

(links auf der zeichnung geht`s los! = startseite)

dort siehst du den viewport, oben rechts ist das hauptmenue ( works text news cv kontakt/impressum ) ===> bei klick >>> geht es jeweils auf eine neue unterseite weiter ( works text news ..... )

die jeweilge unterseiten kann man horizontal scrollen

weiter am beispiel der unterseite "works" ( zeichnung weiter rechts )

dort ist wieder der viewport

unten im footer ( grün eingekreist ) ist eine menueleiste wo man zwischen mehrere fotos wählen kann (hier BILD 1 --> Bild 9) ===> bei klick >>> geht es jeweils auf eine neue unterseite BILD 1, BILD 2, Bild 3 .... weiter....

das foto wird im darüber liegenden orangenen bereich angezeigt

BILD 1, BILD 2, BILD 3, BILD 4 ..... können aber auch aus mehreren fotos (aber auch videos) bestehen, deshalb kann man im orangenen bereich weiter nach rechts scrollen

dazu sollen die bottons >> und << zum scrollen dienen (in der skizze hell-blau eingezeichnet), die findet man im footer unten neben den "BILD 1 --> BILD 9" bottons

mit denen soll man zwischen den weiteren fotos (beispielsweise im bereich BILD 1...) hin und her scrollen können

so, nun wollte ich dazu die anker-funktion anwenden, und die bottons >> und << (hell-blau eingezeichnet) zum hin und her bewegen

noch habe ich ich keine genaue ahnung wie man das anstellen könnte

für die anker habe ich id`s verwendet ( 1 2 3 ... ) (dabei können (auf der viewportseite) immer jeweils zwei fotos nebeneinander abgebildet werden / siehe skizze / sollte passen!)

es müsste quasi eine variable hoch und runtergezählt werden ( ID ???? )

ich habe die funktion label entdeckt und mit before: und after: wollte ich es hinbekommen

-----

(nur rein als gedankenskizze!!!!)
......

label {
cursor:pointer;
}

label:before , label:after {
content:"<";
...
}

label:after {
content:">";
...
}

----------------

ist DAS ein möglicher weg???

grüsse siedler

JR Cologne · 29. August 2015

So ist es doch alles schon viel verständlicher. Danke.

Also: Wie du schon richtig erkannt hast, kann man den divs einfach id's geben und dann mit einem normalen <a>-Tag dort hinspringen.

Für den Fall, dass die Bilder auf unterschiedlichen Seiten sein sollen, also so, wie du es ja gerade hast, denn im Footer ist ja bei jedem Bild eine neue HTML-Datei angegeben: Dann würde es, glaub ich, auch nur mit HTML funktionieren, weil du dann einfach einmal im Footer die ganz normalen Links Bild 1, Bild 2, ... hast, wo man dann jeweils zu anderen Seiten springt, wo dann, wenn man auf z.B. Bild 2 geklickt hat, auch die Bilder von Bild 2 innerhalb des Viewports erscheint. Die Weiter und Zurück Funktion geht dann auch ohne Probleme. Man muss diese dann nur richtig verlinken. Also wenn man z.B. auf der Bild 2 Seite ist, muss man beim Zurück-Button Bild 1 verlinken und beim Weiter-Button Bild 3. Ist ja auch logisch.

So, falls du jetzt aber das Ganze auf einer Seite haben möchtest, also so, dass man horizontal scrollen muss, um andere Bilder sehen zu können, kannst du es eigentlich nur mit JS oder PHP lösen. Bei JS bin ich aber schon mal definitiv raus. Ob das mit PHP geht, weiß ich leider auch nicht. JS wäre aber sowieso die bessere Wahl bei deinem Problem.

Probleme mit der "Verankerung"

Jetzt mitmachen!

Teilen