IE 11 : bei STRG++ kollabiert irgendwann meine Seite

[einsiedler]

Hallo liebe Leute,

ich habe heute folgendes Problem, im IE (und auch nur dort!) kollabiert meine Seite (zieht sich zusammen!), und zwar bei 175%....

An diesem Punkt möchte ich per "@media all and (max-width: 1279px) {} " einen Umbruch....

Okay, ich verschachtele die div`s schon extrem, kann es daran liegen??? Ein gesamtumspannendes div hält die zwei bereiche (links Menue darunter Bildbeschreibung und rechts das Bild!!) im flex-direction: row; .... Aber mir fällt auf, wenn das Gesamtumspannende div ein "flex-direction: column;" bekommt, im Firefox funzt es normal.... aber nur im SCH..... IE NICHT!

So ähnlich (wie hier im Firefox) soll es mal aussehen (an die Meckerer: JA, ich muss noch feinjustieren!)

Grob die Strucktur:

<div class="frasetmodulbox">

	<header>
		<ul class="webheading">
			<h1>Tassilo Sturm</h1>
			<h2>//&nbsp;&nbsp;&nbsp;&nbsp;Rauminstallationen</h2>
		</ul>
		<ul class="containerMainNavi">
			<li class="linkitem"><a href="index.html">Home</a></li>
			<li class="linkitem"><p class="containerMainNavifont"> Arbeiten </p></li>
			<li class="linkitem"><a href="cv.html">CV</a></li>
			<li class="linkitem"><a href="text_de.html">Text</a></li>
			<li class="linkitem"><a href="imprint_contact.html">Kontakt & Impressum</a></li>
		</ul>
	</header>

	
	<div class="frasetcontentmodulbox">
		
		<div class="sidebarmodulbox">
		
			<div class="containerSubNavi_row">
				<ul class="block_item">
					<li><a href="work.php?dir=1">1</a></li>
					<li><a href="work.php?dir=2">2</a></li>
					<li><a href="work.php?dir=3">3</a></li>
					<li><a href="work.php?dir=4">4</a></li>
					<li><a href="work.php?dir=5">5</a></li>
					<li><a href="work.php?dir=6">6</a></li>

					<li><a href="work.php?dir=7">7</a></li>
					<li><a href="work.php?dir=8">8</a></li>
					<li><a href="work.php?dir=9">9</a></li>
					<li><a href="work.php?dir=10">10</a></li>
					<li><a href="work.php?dir=11">11</a></li>
					<li><a href="work.php?dir=12">12</a></li>

					<li><a href="work.php?dir=13">13</a></li>
					<li><a href="work.php?dir=14">14</a></li>
					<li><a href="work.php?dir=15">15</a></li>
					<li><a href="work.php?dir=16">16</a></li>
					<li><a href="work.php?dir=17">17</a></li>
					<li><a href="work.php?dir=18">18</a></li>
				
					<li><a href="work.php?dir=19">19</a></li>
					<li><a href="work.php?dir=20">20</a></li>
					<li><a href="work.php?dir=21">21</a></li>
					<li><a href="work.php?dir=22">22</a></li>
					<li><a href="work.php?dir=23">23</a></li>
					<li><a href="work.php?dir=24">24</a></li>
				</ul>
			</div>
			
			<div class="sidebarmoduldescription">
		
				<div class="frasetordnerbeschreibung">
					
					Ausgabe Ordnerbeschreibung in php
				
				</div>
				
				<div class="frasetbildbeschreibung">
							
					Ausgabe Bildbeschreibung in php
						
				</div>
				
			</div>
			
		</div>
		
			<div id="frasetmediamodul" class="row">
				
					<div class="bottonprevious">
                            Botton previous
                    </div>
			
			<div class="mediaboxspan">			
                    
                               Bildausgabe
					
			</div>
					
					<div class="bottonnext">
                            Botton next
                    </div>
						
			</div>
			
	</div>
	
</div>

Ich weiss mir nicht zu helfen.

Der Link zur Testseite: Linkbeschreibung

Hoffentlich weiss einer von euch Rat!

Grüsse der siedelnde

[MrMurphy1]

Hallo

Hoffentlich weiss einer von euch Rat!

Ja - aber ob der dir gefällt?

Irgendwie bist du mit deiner Flexboxbegeisterung falsch abgebogen.

Zunächst solltest du den HTML-Quelltext aufräumen und die Fehler beseitigen. h1- und h2-Elemente direkt in einem ul-Element geht gar nicht. Genau so wenig wie br-Elemente um Abstände zu erzeugen.

Bei Verwendung von HTML5 müssen nach den HTML5-Regeln auch geeignete Container verwendet werden. Nur wenn sich keine finden sind div-Elemente sinnvoll. Dadurch würde auch der Quelltext für Humanoiden übersichtlicher werden. Deine divitis mag technisch keine Probleme bereiten - sachlich ist sie aber falsch.

Anschließend solltest du das CSS aufräumen. Du verwendest Flexbox unangebracht und viel zu häufig.

Viele Elemente benötigen keine Flexbox-Anweisung (zum Beispiel h1, h2 und so weiter). Häufig ist sie überflüssig, zum Beispiel beim body-Element, welches nur einen Container enthält.

Weiterhin kann auf die vielen Prefixe verzichtet werden. Viele sind für Browser die einen Marktanteil von 0% haben. Das hat mit gutem CSS nichts zu tun.

Falls du doch ein paar Prefixe verwenden willst dann

• nur die für Brower welche zumindest einen kleinen Marktanteil haben, zum Beispiel den IE10

und

• sollten die erst eingefügt werden, wenn die Seite funktioniert. Es gibt Online-Lösungen, die das fast automatisch erledigen. Es gibt keinen Grund Prefixe bereits beim Erstellen einer Webseite zu verwenden.

Dadurch fallen gefühlt 60 bis 70% deines CSS weg.

Danach fällt die Fehlersuche auch viel leichter.

Gruss

MrMurphy

[einsiedler]

hey MrMurphy1,

sorry hat ein wenig länger gedauert (bis ich mich eingelesen habe)

ist dies hier besser / richtiger????

<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Waldfrieden -- Tassilo Sturm</title>

		
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<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" type="text/css" media="screen" href="css/main_css.css" />	
</head>

<body>
	<header>
		<hgroup>
			<h1>Tassilo Sturm</h1>
			<h2><span> // </span>Rauminstallationen</h2>
		</hgroup>
			
		<nav class="containerMainNavi">
                    <ul>
			<li><a href="index.html">Home</a></li>
			<li><a href="work.php"> Arbeiten </a></li>
			<li><p class="containerMainNavifont"> CV </p></li>
			<li><a href="text_de.html"> Text </a></li>
			<li><a href="imprint_contact.html"> Kontakt & Impressum </a></li>
                    </ul>
		</nav>
	</header>
	
	<main>			
		<aside>
			
			<nav class="containerSubNavi_row">
				<ul>
					<li><a href="work.php?dir=1">1</a></li>
					<li><a href="work.php?dir=2">2</a></li>
					<li><a href="work.php?dir=3">3</a></li>
					<li><a href="work.php?dir=4">4</a></li>
					<li><a href="work.php?dir=5">5</a></li>
					<li><a href="work.php?dir=6">6</a></li>
					<li><a href="work.php?dir=7">7</a></li>
					<li><a href="work.php?dir=8">8</a></li>
					<li><a href="work.php?dir=9">9</a></li>
					<li><a href="work.php?dir=10">10</a></li>
					<li><a href="work.php?dir=11">11</a></li>
					<li><a href="work.php?dir=12">12</a></li>
					<li><a href="work.php?dir=13">13</a></li>
					<li><a href="work.php?dir=14">14</a></li>
					<li><a href="work.php?dir=15">15</a></li>
					<li><a href="work.php?dir=16">16</a></li>
					<li><a href="work.php?dir=17">17</a></li>
					<li><a href="work.php?dir=18">18</a></li>					
					<li><a href="work.php?dir=19">19</a></li>
					<li><a href="work.php?dir=20">20</a></li>
					<li><a href="work.php?dir=21">21</a></li>
					<li><a href="work.php?dir=22">22</a></li>
					<li><a href="work.php?dir=23">23</a></li>
					<li><a href="work.php?dir=24">24</a></li>
				</ul>
			</nav>
			
		</aside>
		
		<article>
		
			<h3>Einzelausstellungen</h3>
			
			<section>
				
				<h4>2016</h4>
				<article>
					<section>
						<p>"Aufzeichnungen aus dem Kellerloch",</p>
						<p>Haus der Stadtgeschichte Kamen, Kamen</p>
					</section>
					
					<section>
						<p>"Refugium Moguntia - Eine Eremitage für Mainz",</p>
						<p>Kunstverein Walpodenakademie, Mainz</p>
					</section>
					
					<section>
						<p>"Eremitage für Schöppingen",</p>
						<p>Stiftung Künstlerdorf Schöppingen, Schöppingen</p>
					</section>
				</article>
				
				<h4>2015</h4>
				<article>
					<section>
						<p>"Waldfrieden", MARTa-Kapelle / Museum MARTa, Herford</p>
					</section>
					
					<section>
						<p>"INTERZONAL",</p>
						<p>Anja Kreysing, Jörg Schulze–Neuhoff, Gregor Bohnensack, Tugsal Mogul,</p>
						<p>Atelier 2.6 / Speicher II, Münster</p>
					</section>
					
					<section>
						<p>"lichtkasten",</p>
						<p>Kunststation Delden / M.I.K.C Perron 1, Delden (NL)</p>
					</section>
				</article>
				
				<h4>2014</h4>
				<article>
					<section>
						<p>RTFM  (Read The Fucking Manual),</p>
						<p>Tassilo Sturm u.a., Kunsthalle Münster, Münster</p>
					</section>
					
					<section>
						<p>"Münsteraner Hängung",</p>
						<p>Künstler/innen der Münsteraner Ateliergemeinschaften</p>
						<p>Fresnostrasse / Hawerkamp / Schulstrasse / Speicher II / Bremsenprüfstand,</p>
						<p>Ausstellungshalle Hawerkamp,  Münster</p>
					</section>
					
					<section>
						<p>"Forum 2013",</p>
						<p>Al Hagita, Anne Wissmann, Carol Pilars de Pilar, Dorthe Goeden,</p>
						<p> Naomi Akimoto, Nora Grunwald, Silke Brösskamp, Sylvia Forstmann,</p>
						<p>Tassilo Sturm, Thomas Fornfeist</p>
						<p>Burg Vischering, Lüdinghausen</p>
					</section>
				</article>
				
			</section>
		
		</article>
	
</body>
</html>

grüsse t.

[einsiedler]

es geht mir darum diese struktur zu erhalten:

<article>
  <h3>Gruppenausstellungen</h3> 
  
  <section>
    <h4> 1993 </h4>
    <ul>
        <li>
        <li>
        <li>
        <li>
    </ul>
  </section>

  <section>
     <h4> 1994 </h4>
     <ul>
        <li>
        <li>
        <li>
     </ul>
   </section>

   <section>
     <h4> 1995 </h4>
     <ul>
        <li>
        <li>
        <li>
        <li>
      </ul>
   </section> 

</article>

grüsse t.

[MrMurphy1]

Hallo

Es ist immer schwierig wenn die Angaben (hier Zeichnung und Quelltext) nicht zueinander passen.

Deshalb habe ich mal ein Beispiel erstellt das mit nur einer übergeordneten Klasse (uebersicht) auskommt. Die Container innerhalb des übergeordneten Containers können deshalb mehr oder weniger frei gewählt werden.

So entspricht der Quelltext der HTML-Vorgabe, dass Inhalt und Design möglichst getrennt werden sollen, und andererseits ist die Übersicht sehr vielfältig einsetzbar.

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout mit Flexbox 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         width: 98%;
         margin: 1rem auto;
      }
   }

   /*Spezielle Einstellungen*/
   @media all {
      .uebersicht {
         width: 400px;
         padding: 0.2rem;
         border: 2px solid blue;
         display: flex;
         flex-wrap: wrap;
      }
      .uebersicht h3 {
         font-size: 1.2rem;
         margin: 0.2rem 0;
      }
      .uebersicht h4 {
         font-size: 1rem;
         margin: 0.2rem 0;
      }
      .uebersicht p {
         font-size: 1rem;
         margin: 0.2rem 0;
      }
      .uebersicht li {
         list-style-type: none;
      }
      .uebersicht>:nth-child(1) {
         padding: 0.2rem;
         border: 2px solid orange;
         margin: 0.2rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 100%;
      }
      .uebersicht>:nth-child(2n+2) {
         padding: 0.2rem;
         border: 2px solid green;
         margin: 0.2rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 150px;
      }
      .uebersicht>:nth-child(2n+3) {
         padding: 0;
         border: 0;
         margin: 0;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: calc(100% - 150px - 0.4rem - 4px - 0.4rem);
      }
      .uebersicht>:nth-child(2n+3)>* {
         padding: 0.2rem;
         border: 2px solid gold;
         margin: 0.2rem;
      }
      .uebersicht>:nth-child(5)>* {
         border-color: red;
      }
      .uebersicht>:nth-child(7)>* {
         border-color: aqua;
      }
      .uebersicht>:nth-child(9)>* {
         border-color: purple;
      }
   }

   </style>
</head>
<body>
   <header>
   </header>
   <nav>
   </nav>
   <main>
      <article class="uebersicht">
         <h3>Überschrift h3</h3>
         <aside>
            <h4>1993</h4>
         </aside>
         <div>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
         </div>
         <aside>
            <h4>1994</h4>
         </aside>
         <div>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
         </div>
         <aside>
            <h4>1995</h4>
         </aside>
         <div>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
         </div>
         <aside>
            <h4>1995</h4>
         </aside>
         <ul>
            <li>
               <p>li</p>
            </li>
            <li>
               <p>li</p>
            </li>
            <li>
               <p>li</p>
            </li>
            <li>
               <p>li</p>
            </li>
         </ul>
      </article>
   </main>
   <footer>
   </footer>
</body>
</html>

Gruss

MrMurphy

[einsiedler]

Vielen Dank ersteinmal. ich werde versuchen dies nun für mich anzuwenden.

Ersteinmal lass ich den schwierigen Teil mit der Bildergalerie: Bildergalerie und fange mit den einfacheren "tabellarischen Abschnitten" an, wie hier: CV - Einzelausstellungen und: Kontakt/Impressum - Disclaimer & Haftungsausschuss

Denkst Du, das das mit Deinem Beispiel so machbar wäre? Ich versuche es Mal.

Gruss T.

P.S. Die Helfer hier sind nett und hilfsbereit (DANKE!) und ich kann den Argumenten im Thread "Die selfhtml-Blase - Was einal war, und was daraus geworden ist." NICHT zustimmen.

[einsiedler]

Danke nocheinmal für Deine Antwort. Ich weiss nicht ob Du zuvor noch den Thread vom 16.7. 21h25 Thread 16.7. 21h25 durchgelesen hattest, aber egal, hat sich ja durch Dein Quelltext erledigt.

Das einzigste Problem was ich noch habe ist folgender:

Und zwar benötige ich zwei unterschiedliche Breiten bei aside (hier:)

.uebersicht>:nth-child(2n+2) {flex-basis: -----;}

siehe einmal hier: Fotodokumentation ::: hier ist "aside" etwas breiter.....

ansonsten reicht ein "schmales" aside:

wie hier: aside schmal aside schmal aside schmal

oder es wird sogar gar kein aside benötigt wie hier:

ohne aside ohne aside

deswegen würde ich es so machen:

.uebersicht>:nth-child(2n+2) {
         padding: 0.2rem;
         border: 2px solid green;
         margin: 0.2rem;
         flex-grow: 0;
         flex-shrink: 0;
         **flex: 1;**
      }
      .uebersicht>:nth-child(2n+3) {
         padding: 0;
         border: 0;
         margin: 0;
         flex-grow: 1;
         flex-shrink: 1;
         **flex: 4;**
      }

was denkst Du?

Gruss t.

[Matthias Apsel]

Hallo einsiedler,

Das einzigste Problem was ich noch habe

Einziger als einzig kann man nicht sein ;-)

Ich habe mir deine Seite nicht so genau angeschaut, gebe aber zu bedenken, dass die strukturellen Pseudoklassen sehr fragil sind, sollte sich einmal die Struktur deines Projektes ändern. Durch die Verwendung von Klassen- oder Elementselektoren wird das CSS wesentlich robuster gegenüber Änderungen und auch besser lesbar. Vor allem für dich, wenn du nach einiger Zeit wieder draufschaust.

Bei aside ist sofort klar, was gemeint ist. Hingegen musst du bei nth-child erst mal wieder schauen, welches nun das richtige Kind ist.

Das aside bleibt ein aside, auch wenn irgendein div dazwischen geschoben wird. Dadurch wird aber vielleicht aus dem 3. Kind das 4.

Bis demnächst
Matthias

[einsiedler]

Hallo Matthias,

mein von mir "verlinkter KRAM" (der Quellcode) ist quatsch, ich weiss. Eine blöde Div-Suppe.

Soll nur zur anschauung dienen wie es "aussehen" soll.

Ich möchte es ja "korrekt" machen! Nur ist mir der richtige strukturelle Aufbau nicht klar. Deshalb frage ich ja hier.

<body>
   <header>
   </header>
   <nav>
   </nav>
   <main>
      <article class="uebersicht">
         <h3>Überschrift h3</h3>
         <aside>
            <h4>1993</h4>
         </aside>
         <div>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
         </div>
         <aside>
            <h4>1994</h4>
         </aside>
         <div>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
         </div>
         <aside>
            <h4>1995</h4>
         </aside>
         <div>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
         </div>
         <aside>
            <h4>1996</h4>
         </aside>
         <ul>
            <li>
               <p>li</p>
            </li>
            <li>
               <p>li</p>
            </li>
            <li>
               <p>li</p>
            </li>
            <li>
               <p>li</p>
            </li>
         </ul>
      </article>
   </main>
   <footer>
   </footer>
</body>

Dies ist mir schon einleuchtend, wegen den neuen html5 - tags.

So könnte ich auch dem aside wie gewünscht zwei unterschiedliche breiten geben, wie ich es brauche (siehe Posting!)

Warum aber MrMurphy das mit den kind-elementen einsetzt verstehe ich nicht so ganz, ob das überhaupt nötig ist.

Gruss t.

[Matthias Apsel]

Hallo einsiedler,

Die Wahl der Elemente hängt zu allererst vom Inhalt ab und nicht von der gewünschten Darstellung. Aside etwa steht für Informationen, die nicht direkt mit dem Hauptinhalt zu tun haben. Eine Jahreszahl scheint mir eher eine Überschrift oder ein übergeordnetes Listitem zu sein.

Demzufolge muss man auch fragen, was in section stehen soll, ob es Überschriften erster und zweiter Ordnung in deinem Dokument gibt, ob article als allumfassendes Element korrekt ist, ...

Ich konnte auch keinen Zusammenhang zwischen deiner Seite und deiner Zeichnung herstellen. Auf der anderen Seite will ich natürlich an dieser Stelle auch keinen Streit mit MrMurphy vom Zaun brechen, weil das für dich überhaupt nicht zielführend ist.

Bis demnächst
Matthias

[einsiedler]

Richtig, also bitte mal konkret:

<body>
   <header>
   </header>
   
   <nav>
   </nav>
   
   <main>
      <article>
         <h3>Überschrift h3</h3>
		 
         <div>
	    <h4>1993</h4>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
         </div>
		 
         <div>
            <h4>1994</h4>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
         </div>
 
         <div>
	<h4>1995</h4>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
            <section>
               <p>section</p>
            </section>
	    <section>
               <p>section</p>
            </section>
         </div>
		 
         
         <ul>
	    <h4>1996</h4>
            <li>
               <p>li</p>
            </li>
            <li>
               <p>li</p>
            </li>
            <li>
               <p>li</p>
            </li>
            <li>
               <p>li</p>
            </li>
         </ul>
      </article>
   </main>
   <footer>
   </footer>
</body>

Ist dies so für meine Beispiele "korrekter"????

Beispiel 1 Beispiel 2 Beispiel 3 Beispiel 4

Wie würde man es "richtig" machen?

Gruss T.

[Matthias Apsel]

Hallo einsiedler,

Ist dies so für meine Beispiele "korrekter"????

Beispiel 1 Beispiel 2 Beispiel 3 Beispiel 4

Ich denke, es ist möglich.

Wie würde man es "richtig" machen?

Beispiel 2:

Ich sehe einen header mit einer h1, einer h2 und einer nav.

Darunter sehe ich ein main-Element, unterteilt in nav und div.

Ich würde den Inhalt des main-Elements als Liste auszeichnen.

<ul>
  <li>
    <h4>2015</h4>
    <ul>
      <li>RTFM
      <li>
    </ul>
  </li>

Die gewünschte Darstellung erreichtst du mit main { display: flex; } sowie div > ul > li { display: flex; }

Bis demnächst
Matthias

[Matthias Apsel]

Hallo einsiedler,

Richtig, also bitte mal konkret: Wie würde man es "richtig" machen?

Das solltest du als Arbeitsgrundlage nehmen.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Waldfrieden -- Tassilo Sturm</title>
</head>


<body>

	<header>
		<h1>Tassilo Sturm</h1>
		<h2>Rauminstallationen</h2>
		
		<nav>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="work.php">Arbeiten</a></li>
				<li><a href="cv.html">CV</a></li>
				<li><a href="text_de.html">Text</a></li>
				<li><a>Kontakt & Impressum</a></li>
			</ul>
		</nav>
	</header>
	
	<main>
		<nav>
			<ul>
				<li><a href="imprint_contact.html">Kontakt & Impressum</a></li>
				<li><a href="imprint_photo_credits.html">Fotonachweis & Links</a></li>
				<li><a>Disclaimer & Haftungsausschluss</a></li>
			</ul>
		</nav>
				
		<div>

			<h3>Verantwortlich für den Inhalt dieser Webseite</h3>

			<address>
				Tassilo Sturm<br>
				Studio 2.6 / Speicher II<br>
				Hafenweg 28 / 48155 Münster<br>
				Tel.:  0251 – 2849346<br>
				info [.] awg [ät] gmx [.] net
			</address>
			
			<h3>Rechtliche Hinweise und Datenschutzhinweise / Urheberrecht</h3>

			<p>
				Meine Webseite ist urheberrechtlich geschützt. …
			</p>

			<h3>Gewährleistung und Haftung</h3>
			
			<p>
				Die Informationen auf meiner Webseite werden …
			</p>
					
			<h3>Querverweise (Links)</h3>
			
			<p>
				Auf meiner Webseite befindliche Links …
			</p>
		</div>
	
	</main>
	

</body>

</html>

Beachte auch die kleinen Fehlerchen, die ich verbessert habe:

• //     ist ein Gesatltungselement, wird deshalb Pseudoelement der Überschrift, Abstand mit CSS
• Ausschluß → Ausschluss
• ( Links ) → (Links)

Die aktuellen Menüpunkte habe ich als a ohne href umgesetzt, sämtliche Gestaltung sollte durch CSS zu erreichen sein.

Bis demnächst
Matthias

[einsiedler]

Oh, vielen Dank!

Schau ich mir morgen mal an.

Habe mich auch mal drangesetzt: siehe: Version

dabei ist alles in der "main_css.css"!

Ist dies so besser?

Gruss t.

[Matthias Apsel]

Hallo einsiedler,

Ist dies so besser?

deutlich, aber noch nicht gut.

Ich würde aus deinem Beispiel nicht

<ul class="articlebox">
	<li>2008</li>
						
	<li>
		<ul>		
			<li>Artist in Residence</li>
		</ul>
	</li>
</ul>

<ul class="articlebox">
	<li>2005</li>
	<li>
		<ul>
			<li>Artist in Residence </li>
		</ul>
	</li>
</ul>

sondern

<ul class="articlebox">
	<li>2008
		<ul>		
			<li>Artist in Residence</li>
		</ul>
	</li>
	<li>2005
		<ul>		
			<li>Artist in Residence</li>
		</ul>
	</li>
</ul>

machen.

Zudem: Eine Liste darf ausschließlich li-Elemente als Kinder haben. (Oder script oder template)

Bis demnächst
Matthias

[einsiedler]

Gut und schön, aber wie steuere ich dann die zwei elemente an (also die li`s ???)

(Um ihnen zum beispiel: links: flex:1; und rechts: flex: 4; zu geben.... Irgendwie passt das nicht!!!!)

Ausserdem wenn ich :first-child ; :last-child benutze dann werden diese elemente unendlich hoch, warum? Im main-menue hab ich ein height: 1.6em; gesetzt, aber man sieht es unten in der tabelle! Was ist da falsch?

Gruss t.

[Matthias Apsel]

Hallo einsiedler,

Gut und schön, aber wie steuere ich dann die zwei elemente an (also die li`s ???)

.articlebox li selektiert alle li innerhalb von articlebox.
.articlebox > li nur die der ersten Ebene.

oder auch

.articlebox li
.articlebox li li

Ausserdem wenn ich :first-child ; :last-child benutze dann werden diese elemente unendlich hoch, warum?

Die Frage lässt sich mangels Informationen nicht beantworten.

Im main-menue hab ich ein height: 1.6em; gesetzt, aber man sieht es unten in der tabelle! Was ist da falsch?

Ebenso.

Bis demnächst
Matthias

[marctrix]

Hej einsiedler,

Wie würde man es "richtig" machen?

Einfach mal ein Lob: Deine Geduld und Deine Bereitschaft es "richtig" machen zu wollen ist beeindruckend und werden zu einer Webseite führen, die nicht nur irgendwann so aussehen wird wie gewünscht, sondern zu einer, die auch von Menschen mit Screenreadern benutzt werden kann und die sich auch dauerhaft vernünftig warten lässt.

Weiter so!

Marc

[einsiedler]

Jetzt komme ich total durcheinander..... :o((((

Hier in diesem Beispiel habe ich links ein ASIDE und rechts in dem hell rosanen Kasten das MAIN

Beispiel

Demnach wäre dann wie ich es habe "falsch", wie Du es schreibst????

CONFUSED durcheinander

Dann weiss ich nicht wie ich alles korrekt "einsetze"!!!!

Gruss T.

[marctrix]

Hej MrMurphy1,

es ist zwar ein wenig "Fischen im Trüben" aber ich glaube, nach der Zeichnung zu urteilen, sollte dort, wo ein "article" verwendet werden soll, eine section oder ein div besser passen. Die weiter unten aufgeführten "section" neben den "aside" werden doch wohl in sich abgeschlossene Texte enthalten und sollten daher "article" sein.

Die Jahreszahlen dagegen strukturieren optisch das Dokument und überschreiben die einzelnen Artikelgruppen. Sie sollten auch logisch die Seite strukturieren. Hier sollte statte "aside" eine Überschrift verwendet werden

Marc

[einsiedler]

Sieht so die struktur besser aus. In der Tat ist das CSS um einiges "schlanker" @MrMurphy1

Demostruktur1

Aber eine frage habe ich, wenn ich ".articlebox > :first-child {}" benutze dann ist diese .articlebox so komisch hoch, obwohl ich kein hight angegeben habe????

Nunja.... erstmal gute N8

Gruss T.

[einsiedler]

Kann mir bitte mal jemand erklären wie diese pi___ss (gelb eingezeichnete HÖHE entsteht?

Nirgens habe ich ein margin / padding / hight angegeben?

Ich habe festgestellt das das NUR entsteht wenn ich " #MainNavi li:nth-child(1n) " ... usw. angebe....... dann entsteht diese blöde untere HÖHE (gelb)

Was stimmt da nicht, wenn man dann eine height: 1.9em; angibt dann ist es weg, das kann aber doch nicht die Lösung sein, oder???

#MainNavi {
		display: flex;
		
			flex-direction: row;
				
			flex-wrap: wrap;
			
			justify-content: space-around;
			
			background-color: rgb(255,255,255);
			background-color: rgba(255,255,255,.22);
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=22)";
			filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=22);
			z-index: 1;
			
			border: 2px solid orange;
		}

#MainNavi li:nth-child(1n)  {display: flex; flex: 1.1; justify-content: center; align-items: center; border: 1px dotted yellow;}
#MainNavi li:nth-child(2n){display: flex; flex: 1.4; justify-content: center; align-items: center; border: 1px dotted yellow;}
#MainNavi li:nth-child(3n), #MainNavi li:nth-child(4n) {display: flex; flex: 1; justify-content: center; align-items: center; border: 1px dotted yellow;}
#MainNavi li:nth-child(5n) {display: flex; flex: 2.8; justify-content: center; align-items: center; border: 1px dotted yellow;}
		
#MainNavi li a:link {
		color: black;
		font-size: 22px;
		font-size: 1.375rem;
		line-height: 100%;
		text-decoration: none;
		list-style-type: none;
		}
		
#MainNavi li a:hover {
		color: mediumblue;
		font-size: 22px;
		font-size: 1.375rem;
		line-height: 100%;
		text-decoration: underline;
		font-weight: bold;
		list-style-type: none;
		}

hier mal ein Link zum Projekt: Projektseite

Gruss t.

[Matthias Apsel]

Hallo einsiedler,

Du hast flex nicht verstanden.

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=22)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=22);

Uralt-IEs müssen unbedingt halbtransparente Grafiken anzeigen?? Die haben ganz andere Probleme. Zum Beispiel flex.

#MainNavi li:nth-child(1n)  {display: flex; flex: 1.1; justify-content: center; align-items: center; border: 1px dotted yellow;}
#MainNavi li:nth-child(2n){display: flex; flex: 1.4; justify-content: center; align-items: center; border: 1px dotted yellow;}
#MainNavi li:nth-child(3n), #MainNavi li:nth-child(4n) {display: flex; flex: 1; justify-content: center; align-items: center; border: 1px dotted yellow;}
#MainNavi li:nth-child(5n) {display: flex; flex: 2.8; justify-content: center; align-items: center; border: 1px dotted yellow;}

Du hast auch CSS nicht verstanden.

Alles, was mit flex für die li zu tun hat, ist sinnfrei. Für dein gewünschtes Verhalten reicht

#MainNavi {
  display: flex;
  justify-content: space-between;
}

#MainNavi li a:link {

Dir ist bewusst, dass du nur die unbesuchten Links meinst?

#MainNavi li a:hover {

Was ist mit Leuten, die die Seite mit der Tastatur bedienen?

Noch zwei andere Anmerkungen:

• hgroup ist kein offizielles Element.
• Verwende keine p-Elemente für den "aktiven" Link sondern zum Beispiel span statt a oder <a> statt <a href=…>

Bis demnächst
Matthias

[MudGuard]

Hi,

#MainNavi li:nth-child(1n) {display: flex; flex: 1.1; justify-content: center; align-items: center; border: 1px dotted yellow;}

wozu hier das n beim nth-child? Sollen wirklich alle li an den Positionen 1, 2, 3, 4, ... betroffen sein?

#MainNavi li:nth-child(2n){display: flex; flex: 1.4; justify-content: center; align-items: center; border: 1px dotted yellow;}

wozu hier das n beim nth-child? Sollen wirklich alle li an den Positionen 2, 4, 6, 8, ... betroffen sein?

#MainNavi li:nth-child(3n), #MainNavi li:nth-child(4n) {display: flex; flex: 1; justify-content: center; align-items: center; border: 1px dotted yellow;}

wozu hier das n beim nth-child? Sollen wirklich alle li an den Positionen 3, 6, 9, 12, ... bzw. 4, 8, 12, 16, ... betroffen sein?

#MainNavi li:nth-child(5n) {display: flex; flex: 2.8; justify-content: center; align-items: center; border: 1px dotted yellow;}

wozu hier das n beim nth-child? Sollen wirklich alle li an den Positionen 5, 10, 15, 20, .. betroffen sein?

Wenn Du genau das 42. child haben willst, dann :nth-child(42), NICHT :nth-child(42n).

cu,
Andreas a/k/a MudGuard

[einsiedler]

hallo @ all,

nun verstehe ich nicht diese (gelb eingezeichnete Höhe?

Wodurch entsteht die? Eigentlich darf die gar nicht entstehen!

seufZ

was ist da falsch?

gruss t.

[Matthias Apsel]

Hallo einsiedler,

was ist da falsch?

flex.

.asidebox {
    flex: 1 1 0;
}

Bis demnächst
Matthias

[einsiedler]

nö, geht nicht.....

.articlebox {
			display: flex;
	
				flex-direction: row;					
				flex-wrap: wrap;
				margin-bottom: 0.4em;

				border: 4px dotted khaki;
		}
		
.asidebox {
			display: flex;
				justify-content: center;
				align-items: center;				
				flex: 1 1 0%;
				padding-top: 0.1em;
				padding-bottom: 0.1em;
				
				border: 4px dotted mediumvioletred;
		}
		
.itembox {
			display: flex;
				flex-direction: column;					
				flex-wrap: wrap;
				flex: 3 1 0%;
				border: 4px dotted mediumspringgreen;
		}

immer noch fehlerhaft!!!!!!! sch.............. sssssssssssssssss...........

gruss t.

[Matthias Apsel]

Hallo einsiedler,

nö, geht nicht.....

Wenn ich die Zeile weglasse, sind auch die Abstände weg. Innenabstände solltest du mit padding realisieren.

asidebox und itembox brauchen kein flex. Für Innenabstände gibt es padding, für das Zentrieren text-align.

Bis demnächst
Matthias

[einsiedler]

grummel

article {	display: flex;
	
			flex-direction: column;				
			flex-wrap: wrap;			
			flex: 2.5;
			
			background-color: rgb(255,255,255);
			background-color: rgba(255,255,255,.22);
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=22)";
			filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=22);
			z-index: 1;
			
			margin-left: 0.9em;
			margin-bottom: 2em;
			padding-top: 0.5em;
			padding-right: 0.1em;
			padding-bottom: 0.5em;
			padding-left: 0.1em;
			
			font-size: 20px;
			font-size: 1.25rem;
			line-height: 100%;
		
		}

.textbox {
			margin-top: 2em;
			margin-bottom: 1.5em;
			padding-top: 0.7em;
			padding-right: 1.2em;
			padding-bottom: 0.7em;
			padding-left: 1.2em;
		}
		
.articlebox {
			display: flex;				
				margin-bottom: 0.4em;

				border: 4px dotted khaki;
		}
		
.asidebox {
			display: flex;
				flex: 1 1 0%;
				justify-content: center;
				border: 4px dotted mediumvioletred;
		}
		
.itembox {
				flex: 8 1 0%;
				border: 4px dotted mediumspringgreen;
		}

<article>
		
					<h3> Tassilo Sturm </h3>
				
					<div class="textbox">
						<li>Geboren in Unna / NRW</li>
						<li>Lebt und arbeitet in Münster / Westf.</li>
						<li>Examen und "Meisterschüler" bei Prof. Ulrich Erben</li>
						<li>Studium an der Hochschule für Bildende Künste / Münster</li>
						<li>Studium der Kunstgeschichte, klass. Archäologie und Ägyptologie</li>  
						<li>an der "Westfälischen Wilhelms Universität" Münster</li>
					</div>
					
					<h4>Preise / Stipendien</h4>
					
					<div class="articlebox">
						<div class="asidebox">2008</div>
						<div class="itembox">		
								<p>Artist in Residence , "Stiftung Künstlerdorf Schöppingen", Schöppingen</p>
						</div>
					</div>
					<div class="articlebox">	
						<div class="asidebox">2005</div>
						<div class="itembox">							
								<p>Artist in Residence , "Cité Internationale des Arts", Paris</p>							
						</div>
					</div>

		</article>

der abstand unterhalb von asidebox und itembox ist immer noch da, wie entsteht der? ich habe nirgendwo margin oder padding eingesetzt?

die beiden boxen ( asidebox und itembox sollen im verhältnis 1:8 sein und der text in asidebox soll mittig sein!) wie anders sonst soll das gehen???????

zur anschauung

dorriiiiieeeee....

gruss t.

[Matthias Apsel]

Hallo einsiedler,

die beiden boxen ( asidebox und itembox sollen im verhältnis 1:8 sein und der text in asidebox soll mittig sein!) wie anders sonst soll das gehen???????

ohne flex für article, mit width: 11,1% für asidebox und mit text-align: center. Gibt es einen Grund für dieses „exakte“ Verhältnis?

Bis demnächst
Matthias

[einsiedler]

hallo,

und ich dachte immer: wenn ich der einen box flex:1; der zweiten box flex:8; mitgebe dann ist dies alles andere als "exakt bemessen" das braucht/soll auch gar nicht so sein (wie man es früher machte) das das eine soundsoviel px das andere soundsoviel px mitbekommt (und alles haargenau bemessen ist!)... das ist doch das gute an flexbox.... seufZ

seufzend t.

[einsiedler]

neeeee.... dann macht er den gleichen MIST!!!!!!!

siehe: demolink

da ist doch grundsätzlich etwas falsch, aber was, dann ist soetwas für solche tabellarischen listen nicht geeignet, oder?

bisher habe ich kein display:block; / display: inline-block oder auch keine position: absolute oder relative gesetzt......

im meinem fall, benötige ich da kein : display table-cell; oder soetwas??????????

wie löst man soetwas elegant???? ich habe einige solcher (ich sag mal) "listen" liste1 liste2 usw.

wie kann man soetwas lösen?????????????

gruss t. seufZend

[Matthias Apsel]

Hallo einsiedler,

neeeee.... dann macht er den gleichen MIST!!!!!!!

Ich schrieb: ohne flex für article.

Warum das exakte Verhältnis?

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Matthias Apsel,

Ich schrieb: ohne flex für article.

und meinte damit display: flex;

Bis demnächst
Matthias

[Matthias Apsel]

Hallo einsiedler,

neeeee.... dann macht er den gleichen MIST!!!!!!!

Ich will dir ja nicht zu nahe treten, aber du solltest dich wirklich mit den Grundlagen beschäftigen. Insbesondere solltest du nicht immer und überall display: flex verwenden, wenn auch bewährte Technologien zielführend sind.

* {
    color: #000000;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

color: #000 ist default, kann weg. Es ist selten eine gute Idee, komplett alle Abstände auf Null zu setzen.

html {
    background: rgba(0, 0, 0, 0) url("../mediaordner/hintergrundbilder/chalkboard.jpg") no-repeat fixed center center / cover ;
    color: #000000;
    display: flex;
    flex-flow: row wrap;
    font-family: "Cabin Sketch",sans-serif;
    font-size: 101%;
    hyphens: auto;
    justify-content: center;
    width: 100%;
    z-index: 0;
}

• warum hier noch mal color: #000;
• wozu display: flex;? Um den body zu zentrieren? html hat nur ein einziges (normalerweise sichtbares) Kindelement, deshalb ist die Angabe von flex-flow sinnfrei.
• Was soll font-size: 101%?
• Wozu die Angabe von z-index?

body {
    background-color: rgba(255, 255, 255, 0.17);
    display: flex;
    flex-flow: column wrap;
    padding-bottom: 1.8em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    width: 83vw;
    z-index: 1;
}

Auch hier ist display: flex nicht notwendig. Du möchtest header und main einfach untereinander, was sie ohne weiters Zutun von selbst machen. Wozu die Angabe von z-index? Damit das body-Element näher am Auge als das HTML-Element liegt? Das macht es von selbst.

Bis demnächst
Matthias

[einsiedler]

DANKE Dir, Matthias!

Ich bin gerade dabei einiges davon umzusetzen, auch darüber nachzulesen, später mehr!

Gruss T.

[Matthias Apsel]

Hallo einsiedler,

Ich hab mal noch eine andere Semantikvariante. Folgendes Minimal-CSS liefert die gewünschte Gestaltung. Fonts und Farben kannst du selbst hinzufügen.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Waldfrieden -- Tassilo Sturm</title>
    
  <style>
  
body {
  width: 83vw;
  margin: 0 auto;
}
ul, li {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
header {
  max-width: 42em;
  margin-bottom: 1em;
}
header ul, h1 {
  display: flex;
  justify-content: space-between;
}
main {
  display: flex;
}
aside {
  flex-grow: 1;
  margin-right: 1em;
}
article {
  flex-grow: 4;
}
h3 {
  margin-top: 0;
}

.stationen {
  display: flex;
  flex-wrap: wrap;
}
dt {
  flex: 1 1 12%
}
dd {
  flex: 8 1 88%;
  margin: 0;
}

h1, header nav, aside, article {
  background: red;
} 

  </style>
  
  
</head>


<body>

  <header>
    <h1>Tassilo Sturm <span>//</span>Rauminstallationen</h1>

    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="work.php"> Arbeiten </a></li>
        <li><span class="MainNavifont"> CV </span></li>
        <li><a href="text_de.html"> Text </a></li>
        <li><a href="imprint_contact.html"> Kontakt & Impressum </a></li>
      </ul>
    </nav>
  </header>
  
  <main>
  
    <aside>
    
      <nav>
        <ul id="SubNavi">
          <li><span class="SubNavifont"> Curriculum&nbsp;Vitae </span></li>
          <li><a href="cv_single_shows.html"> Einzelausstellungen </a></li>
          <li><a href="cv_group_shows.html"> Gruppenausstellungen </a></li>                
        </ul>
      </nav>
      
    </aside>
    
    <article>
    
          <h3> Tassilo Sturm </h3>
        
          <ul class="textbox">
            <li>Geboren in Unna / NRW</li>
            <li>Lebt und arbeitet in Münster / Westf.</li>
            <li>Examen und "Meisterschüler" bei Prof. Ulrich Erben</li>
            <li>Studium an der Hochschule für Bildende Künste / Münster</li>
            <li>Studium der Kunstgeschichte, klass. Archäologie und Ägyptologie</li>  
            <li>an der "Westfälischen Wilhelms Universität" Münster</li>
          </ul>
          
          <h4>Preise / Stipendien</h4>
          
          <dl class="stationen">
            <dt>2008</dt>
            <dd>Artist in Residence , "Stiftung Künstlerdorf Schöppingen", Schöppingen</dd>
            <dt>2005</dt>
            <dd>Artist in Residence , "Cité Internationale des Arts", Paris</dd>
          </dl>

    </article>
  
  </main>

</body>

</html>

Auch das HTML lässt sich noch verbessern. Zum Beispiel ist an der "Westfälischen Wilhelms Universität" Münster kein eigenständiger Listenpunkt.

Bis demnächst
Matthias

[einsiedler]

Vielen Dank Matthias, das klappt soweit auch schon ganz gut.

Siehe: CV

Aber wie meinst Du das mit dem html "verbessern"? Soll ich diesen Listenpunkt an dem vorherigen Listenpunkt anhägen? Wäre das besser? Oder wie meinst Du das?

Soweit ist alles gut und schön!

Doch nun bei der nächsten "Tabelle" ist mir aufgefallen: Was mache ich wenn ich mehrere <dd> Punkte in meiner <dl class="articlebox"> habe????

Siehe: Single Shows

Momentan wird ja der erste <dd> Punkt durch das <dt> nach rechts gedrückt, alle weiteren <dd> Punkte aber nicht!

Wie löse ich das nun?

a) Indem ich der <dt> eine Höhe gebe und so alle weiteren <dd> Punkte nach rechts gedrückt werden! Klingt für mich nicht so gut, weil ich ja auch unterschiedlich viele <dd> Punkte habe könnte!

Und ein "stretch" (was ich brauchen könnte) habe ich ja nur bei flex!

b) Indem ich weiter verschachtele:

Meine idee:

<dl class="articlebox">
        <dt>2008</dt>
        <dt class="itembox">
		<dd>"Fernwärme", dieHO Galerie, Magdeburg</dd>
	        <dd>"Eremitage für Schöppingen", Stiftung Künstlerdorf Schöppingen, Schöppingen</dd>
	        <dd>"Rendezvousprobleme" - Städtische Bühnen, Münster</dd>
        </dt>
</dl>

oder so ähnlich??????

Wie würde man das lösen????

fragend

Gruss t.

[Matthias Apsel]

Hallo einsiedler,

Soll ich diesen Listenpunkt an dem vorherigen Listenpunkt anhägen? Wäre das besser? Oder wie meinst Du das?

Das ist ein Listenpunkt

Was mache ich wenn ich mehrere <dd> Punkte in meiner <dl class="articlebox"> habe????

Siehe: Single Shows

Erstmal ist es EINE dl.

Meine idee:
oder so ähnlich??????

Nein, du kannst das nicht beliebig verschachteln.

Wie würde man das lösen????

dd + dd {
    margin-left: 12%;
}

Bis demnächst
Matthias

[MrMurphy1]

Hallo

Am sinnvollsten erscheint mir eine dl-Liste, in der jeweils ein dt-Element und ein dd-Element wechseln.

Was mache ich wenn ich mehrere <dd> Punkte in meiner <dl class="articlebox"> habe?

Es ist genau so korrekt in ein dd-Element mehrere Absätze zu schreiben, wodurch zusätzlich das CSS vereinfacht würde. Der HTML-Quelltext könnte dann so aussehen:

<dl class="einzelausstellungen">
   <dt>2016</dt>
   <dd>"Aufzeichnungen aus dem Kellerloch", Haus der Stadtgeschichte Kamen, Kamen</dd>
   <dt>2014</dt>
   <dd>"Lichtkasten", Kunststation Delden / M.I.K.C Perron 1, Delden (NL)</dd>
   <dt>2011</dt>
   <dd>
      <p>Silent Space", Cuba Cultur (Münster)</p>
      <p>"Heimathafen", Nachtspeicher23 e.V., (Hamburg)</p>
   </dd>
   <dt>2010</dt>
   <dd>
      <p>"Glück ... absent", Keimzelle Ostbevern</p>
      <p>"Stiegenhausexil", TomA Münster</p>
   </dd>
   <dt>2009</dt>
   <dd>"Refugium Moguntia - Eine Eremitage für Mainz", Kunstverein Walpodenakademie, Mainz</dd>
   <dt>2008</dt>
   <dd>
      <p>"Fernwärme", dieHO Galerie, Magdeburg</p>
      <p>"Eremitage für Schöppingen", Stiftung Künstlerdorf Schöppingen, Schöppingen</p>
      <p>"Rendezvousprobleme" - Städtische Bühnen, Münster</p>
   </dd>
   <dt>2007</dt>
   <dd>"Der Bau" - Rhizom - Büro für Kunstvermittlung, Münster</dd>
   <dt>2006</dt>
   <dd>"Waldfrieden", MARTa-Kapelle / Museum MARTa, Herford</dd>
   <dt>2004</dt>
   <dd>"When it`s cold i`d like to die", Wewerka-Pavillon, Münster</dd>
</dl>

Der Rest dann mit CSS.

Gruss

MrMurphy

[einsiedler]

Guten Abend @ all,

momentan sieht alles gut aus..... siehe: group shows

Doch bei den vielen Listen-Unterpunkten bei Group Shows wurde es haarig.....

Momentan hab ich es so gemacht:

<dl class="articlebox">
	<dt>2013</dt>
		<dd>
			<p>
				"Forum 2013",<br/>
			        Al Hagita, Anne Wissmann, Carol Pilars de Pilar, Dorthe Goeden,<br />
			        Naomi Akimoto, Nora Grunwald, Silke Brösskamp, Sylvia Forstmann,<br />
				Tassilo Sturm, Thomas Fornfeist<br/>
				Burg Vischering, Lüdinghausen
			</p>
			<p>
				"25 Jahre KunstVerein Ahlen - "Künstler im Verein", Kunstverein Ahlen, Ahlen<br />
			</p>
			<p>
				"TWILIGHT ZONE" - Wiederkehr der Schatten - montanaberlin & Gäste<br />  
				Jörn Gerstenberg – Esther Horn - Oliver Krähenbühl - Tassilo Sturm -<br />
				Christian Heilig - Richard Schütz - Nadine Rennert - Markus Vater -<br />
				Marcin Cienski - Alekos Hofstetter / Florian Göpfert,<br/>
									Galerie Nord | Kunstverein Tiergarten, Berlin
			</p>
			<p>
				"Hydra",<br />
				Marcio-André, Ana Gesto, Beate Gördes und Adrienne Brehmer, Yi Zheng Lin,<br />
			        Nuno Margarida (Nuno Oliveira und Guida Chambel), Tassilo Sturm, Eva Wal<br />
				Künstlerforum Bonn, Bonn
			</p>
			<p>
				Offene Ateliers – Förderverein Aktuelle Kunst<br />
				Atelier- und Ausstellungshaus Fresnostrasse / Münster							                                                                      </p>						
		</dd>
</dl>
					
<dl class="articlebox">
	<dt>2011</dt>
		<dd>
			<p>
				"Rendezvous des Amis",<br />
				Esther Horn - Jörn Gerstenberg - Oliver Krähenbühl – Tassilo Sturm,<br />
				Art`otel - Wallstrasse 70 - 73 // Zimmer 401 / 4. Etage // 10179 Berlin-Mitte
			</p>				
			<p>
				"NEW HOME", MIKC / PERRON 1 (Delden) & MTS / Fabrik (Hengelo)
								                                                              </p>						
			<p>
				"Geist ist Geil,<br />
				Sommerausstellung mit Arbeiten aktueller und ehemaliger Stipendiaten<br />
				der Stiftung Künstlerdorf Schöppingen",<br />
				Stiftung Künstlerdorf Schöppingen
			</p>
		</dd>
</dl>

das CSS:

.articlebox {	display: flex;
				flex-wrap: wrap;
				margin: 0; padding: 0;
		}
		
.articlebox p {	
				margin: 0; padding: 0;
				margin-top: 0.1em;
				margin-bottom: 0.8em;
				border: 1px dotted cyan;
		}
		
.articlebox dt {
  flex: 1 1 12%;
  text-align: center;
  margin: 0; padding: 0;
  margin-bottom: 0.8em;
  border: 1px dotted beige;
}
.articlebox dd {
  flex: 8 1 88%;
  margin: 0; padding: 0;
  margin-bottom: 0.8em;
  padding-left: 1em;
  border: 1px dotted beige;
}

Wobei das warscheinlich nicht ganz elegant ist, oder?

siehe: Group Shows

Ich meine, auch schon wegen dem <br /> hinter allen Sätzen, aber mir steht ja nichts mehr zur verfügung, <p> ist auch schon vergeben!

Ich benötige einfach mehr tags (oder wie sich das nennt!) zum strukturieren....

Oder wären doch mehrere <dd> `s angebrachter????

<dl class="articlebox">
	<dt>2013</dt>
		<dd>
			<p>"Forum 2013",<p/>
			<p><p>Al Hagita, Anne Wissmann, Carol Pilars de Pilar, Dorthe Goeden,<p/>
			<p>Naomi Akimoto, Nora Grunwald, Silke Brösskamp, Sylvia Forstmann,<p/>
			<p>Tassilo Sturm, Thomas Fornfeist<p/>
			<p>Burg Vischering, Lüdinghausen<p/>
		</dd>
		<dd>
			<p>"25 Jahre KunstVerein Ahlen - "Künstler im Verein", Kunstverein Ahlen, Ahlen<p/>
		</dd>
		<dd>
			<p>"TWILIGHT ZONE" - Wiederkehr der Schatten - montanaberlin & Gäste<p/>
			<p>Jörn Gerstenberg – Esther Horn - Oliver Krähenbühl - Tassilo Sturm -<p/>
			<p>Christian Heilig - Richard Schütz - Nadine Rennert - Markus Vater -<p/>
			<p>Marcin Cienski - Alekos Hofstetter / Florian Göpfert,<p/>
			<p>Galerie Nord | Kunstverein Tiergarten, Berlin<p/>
		</dd>
			<p>"Hydra",<br />
			<p>Marcio-André, Ana Gesto, Beate Gördes und Adrienne Brehmer, Yi Zheng Lin,<p/>
			<p>Nuno Margarida (Nuno Oliveira und Guida Chambel), Tassilo Sturm, Eva Wal<p/>
			<p>Künstlerforum Bonn, Bonn<p/>
		</dd>
		<dd>
			<p>Offene Ateliers – Förderverein Aktuelle Kunst<p/>
			<p>Atelier- und Ausstellungshaus Fresnostrasse / Münster<p/>						
		</dd>
</dl>

und den einzelnen <dd> `s klassen geben um per CSS daraus einzelne "Blöcke" (bei mir momentan cyan) zu machen?

Gruss t.

[Matthias Apsel]

Hallo einsiedler,

Ich meine, auch schon wegen dem <br /> hinter allen Sätzen, aber mir steht ja nichts mehr zur verfügung, <p> ist auch schon vergeben!

Du kannst ruhig den Browser die Zeilenumbrüche machen lassen. Der weiß unter allen Umständen, wie viel Platz zur Verfügung steht.

Folgendes sähe auch scheiße aus.

Text hier ein automatischer Zeilenumbruch
Wort
Weil du nach "Wort" einen Umbruch zementiert hast, beginnt hier eine neue Zeile, obwohl es nicht nötig wäre.

Ich benötige einfach mehr tags (oder wie sich das nennt!) zum strukturieren....

Nein, du kannst es auch kaputt strukturieren.

Oder wären doch mehrere <dd> `s angebrachter????

Mir scheint es am angebrachtesten, du kümmerst dich um deine Kunst und nimmst ein wenig Geld an die Hand und lässt deine Seite von jemandem machen, der sich damit auskennt oder du besuchst einen Kurs an der VHS und erarbeitest deine Seite gemeinsam mit dem Kursleiter.

Nicht böse gemeint.

Bis demnächst
Matthias

[einsiedler]

Nö, damit geb ich mich nicht zufrieden....

Ich habe irgendwo gelesen das innerhalb von <dd> `s block-level contents erlaubt sind und so habe ich einfach mal ein div hineingepackt:

<dl class="articlebox">
	<dt>2013</dt>
		<dd>						
			<div class="item">
				<p>"Forum 2013",</p>
				<p>Al Hagita, Anne Wissmann, Carol Pilars de Pilar, Dorthe Goeden,</p>
				<p>Naomi Akimoto, Nora Grunwald, Silke Brösskamp, Sylvia Forstmann,</p>
				<p>Tassilo Sturm, Thomas Fornfeist</p>
				<p>Burg Vischering, Lüdinghausen</p>
			</div>
			<div class="item">
				<p>"25 Jahre KunstVerein Ahlen - "Künstler im Verein", Kunstverein Ahlen, Ahlen</p>
			</div>
			<div class="item">
				<p>"TWILIGHT ZONE" - Wiederkehr der Schatten - montanaberlin & Gäste</p>
				<p>Jörn Gerstenberg – Esther Horn - Oliver Krähenbühl - Tassilo Sturm -</p>
				<p>Christian Heilig - Richard Schütz - Nadine Rennert - Markus Vater -</p>
				<p>Marcin Cienski - Alekos Hofstetter / Florian Göpfert,</p>
				<p>Galerie Nord | Kunstverein Tiergarten, Berlin</p>
			</div>
			<div class="item">
				<p>"Hydra",<br />
				<p>Marcio-André, Ana Gesto, Beate Gördes und Adrienne Brehmer, Yi Zheng Lin,</p>
				<p>Nuno Margarida (Nuno Oliveira und Guida Chambel), Tassilo Sturm, Eva Wal</p>
				<p>Künstlerforum Bonn, Bonn</p>
			</div>
			<div class="item">
				<p>Offene Ateliers – Förderverein Aktuelle Kunst</p>
				<p>Atelier- und Ausstellungshaus Fresnostrasse / Münster</p>
			</div>						
		</dd>
</dl>

mein CSS:

.articlebox {	display: flex;
				flex-wrap: wrap;
				margin: 0; padding: 0;
		}
		
.articlebox dt {
  flex: 1 1 12%;
  text-align: center;
  margin: 0; padding: 0;
  margin-bottom: 0.8em;
  border: 1px dotted beige;
}
.articlebox  dd {
  flex: 8 1 88%;
  margin: 0; padding: 0;
  margin-bottom: 0.8em;
  padding-left: 0.6em;
  border: 1px dotted beige;
}

div.item {
  margin: 0; padding: 0;
  margin-bottom: 0.8em;
  border: 1px dotted fuchsia;
}

div.item p {	
				margin: 0; padding: 0;
				margin-top: 0.1em;
				margin-bottom: 0.1em;
				border: 1px dotted cyan;
		}

Es funktioniert und zumindest sagt der Validator nichts schlechtes.....

Warscheinlich ist`s nicht die feine englische Art so........

Nja, für heute, gute n8.....

t.

[Matthias Apsel]

Hallo einsiedler,

Nö, damit geb ich mich nicht zufrieden....

Ich habe irgendwo gelesen das innerhalb von <dd> `s block-level contents erlaubt sind und so habe ich einfach mal ein div hineingepackt:

Du bewegst dich leider schnurstracks wieder in die Richtung, aus der du gekommen bist. Vorher war es Müll, jetzt ist es valider Müll. Sorry für die harten Worte.

Bis demnächst
Matthias

[MrMurphy1]

Hallo

Wie würde man das lösen????

Ein Problem dir zu helfen ist, dass du unsere Lösungen nicht korrekt in HTML / CSS umsetzen kannst. Dir fehlt auch das Wissen, wie Besucher Websites benutzen, was sie erwarten, was sie stört und sogar abschrecken kann.

Deshalb habe ich mal eine Beispiel-Website erstellt, die

• korrektes HTML5 / CSS3 enthält (über Kleinigkeiten kann man sich gerne streiten, zudem ist die Site nicht zu 100% fertig, noch mal deutlich: Es handelt sich um eine Testsite)

• die Besucher viel freundlicher (heller, luftiger) empfängt

• die benutzerfreundlicher ist

• die zugänglicher (barrierefreier) ist

• die die Besucher weniger Zeit kostet

• die durch sinnvolle Zusammenfassungen übersichtlicher ist

• deren Text gut zu lesen ist

• deren Navigation straffer und durchdachter ist

• die Besucher eher zum stöbern einlädt

• die flexibel und responsive ist (bei Bedarf können noch ein paar Prefixe für Flexbox hinzugefügt werden, dafür gibt es Online-Tools die dies in wenigen Sekunden erledigen)

• die durch Verzicht von Firlefanz und die schlichte Eleganz den Blick auf das Wesentliche fördert

und noch einiges mehr.

Hier der Link zu der Seite:

Testseite Rauminstallationen

Gruss

MrMurphy

[einsiedler]

Hallo MrMurphy1,

ich würde Ihnen gerne eine privat PN zusenden. Ist dies möglich?

Gruss der einsiedelnde

[Tabellenkalk]

Hallo,

ich würde Ihnen gerne eine privat PN zusenden. Ist dies möglich?

Das ist ein Fall für Radio Eriwan: im Prinzip ja, praktisch scheitert es daran, dass MisterMörfi nicht angemeldet/registriert ist.

Gruß
Kalk