Seite 2 von 2 ErsteErste 12
Ergebnis 21 bis 28 von 28
  1. #21
    deaktivierter Nutzer
    deaktiviertes Benutzerkonto

    (Threadstarter)

    Standard Re: [gelöst] Teilbereich einer Seite neu laden ohne Ajax?

    Ich wollte Kugelfisch (und andere Spezialisten) fragen, ob es einen Workaround (Ohne JS versteht sich) gibt, damit man über zumindest eine Ebene hinaus kommt. Um die Tabelle muss ich ein <fieldset> machen, weil das dann einfach wirklich besser aussieht wenn man mit <legend> die Rubrikenüberschrift macht. Mit einem Tabellen <th>-Element ist das halt nur halb so schön.

    Außerdem würde mich interessieren, ob man das Szenario auch mit Hyperlinks machen kann, statt mit Radio-Buttons?

    Hier mal ein Codeausschnitt, der verdeutlicht welche Ebenen ich nutze:
    HTML-Code:
    <form action="test.html" method="post" enctype="text/plain">
    	<input type="radio" name="test" value="Tab 1" id="tab1" checked="checked" /> Tab 1
    	<input type="radio" name="test" value="Tab 2" id="tab2" /> Tab 2
    
    		<table>
    			<tr>
    				<th style="width:50%"><a href="#">Tab 1</a></th><th><a href="#">Tab 2</a></th>
    			</tr>
    		</table>
    				
    <!-- Anfang Rubrik 1 -->
    <div id="rubrik1">
    	<fieldset class="1_form">
    		<legend>Rubrik 1</legend>
    		<table>
    			<tr>
    				<td style="width:100px">XXX</td><td>YYY</td>
    			</tr>
    			<tr>
    				<td>AAA</td><td>BBB</td>
    			</tr>
    		</table>
    	</fieldset>
    </div>
    <!-- Ende Rubrik 1 -->
    <!-- Anfang Rubrik 2 -->
    [...]
    Ich hoffe wirklich, dass der Standard bald verabschiedet wird und dann in die Browser implementiert wird. Ist das erste mal, dass ich auf eine Funktion warte, weil ich sie dringend brauche und dann auch direkt nutzen werde *g
    Geändert von Cyperfriend (16. 06. 2013 um 15:35 Uhr)

  2. #22
    ex-Moderator Avatar von Kugelfisch23
    Registriert seit
    Oct 2007
    Beiträge
    18.640
    Danksagungen
    448

    Standard Re: [gelöst] Teilbereich einer Seite neu laden ohne Ajax?

    In dieser Richtung - sich von einer höheren auf eine untergeordnete Ebene zu beziehen - ist das ohne Weiteres möglich, zum Beispiel:
    Code:
    #tab1:not(:checked) ~ #rubrik1 .1_form
    Auch wäre möglich, das übergeordnete div-Element abhängig vom Status der Radio-Buttons ein- oder auszublenden:
    Code:
    #tab1:not(:checked) ~ #rubrik1
    Eine Alternative wäre in deinem Beispiel auch das weglassen des div-Elements #rubrik1, da form-Elemente beliebige Block-Elemente - auch fieldset-Elemente - enthalten dürfen.

    Beachte jedoch, dass du das Markup nicht anhand der gewünschten Darstellung wählen solltest, sondern anhand semantischer Überlegungen. Insbesondere scheint mir fraglich, ob du mit deiner Tabelle tatsächlich tabellarische Daten darstellen möchtest; wenn nicht, wäre ggf. eine Liste oder aufeinander folgende Elemente die passendere Wahl.
    Für diesen Beitrag bedankt sich Cyperfriend

  3. #23
    deaktivierter Nutzer
    deaktiviertes Benutzerkonto

    (Threadstarter)

    Standard Re: [gelöst] Teilbereich einer Seite neu laden ohne Ajax?

    Und wie schaut es mit Links aus, also <a href>-Elementen? Gibt es da auch eine Möglichkeit oder geht das Gewünschte nur mit Formularen? Ich will halt eine Art Tab-Menü. Beim Wechseln der Tabs muss nichts gepsichert werden, da es kein Formular gibt. (Bislang habe ich an der entsprechenden Codestelle nur ein <form>-Element eingebaut, damit der Wechsel funktioniert.) Ich lese eben die Datenbank komplett aus und will die Ausgabe der Übersicht wegen eben in zwei eigenen Darstellungen anzeigen.

  4. #24
    ex-Moderator Avatar von Kugelfisch23
    Registriert seit
    Oct 2007
    Beiträge
    18.640
    Danksagungen
    448

    Standard Re: [gelöst] Teilbereich einer Seite neu laden ohne Ajax?

    Ja, über die :target-Pseudoklass ist ein ähnliches, sogar flexibleres Verhalten möglich: Weise den Elementen, welche du verstecken möchtest, jeweils eine ID zu, z.B. `foo1` und `foo2` und setze Links auf entsprechende Fragment Identifier, z.B. `#foo1` und `#foo2`. Die :target-Pseudoklasse trifft nun auf dasjenige Element zu, dessen ID im Fragment Identifier genannt ist. Beispiele dazu finden sich z.B. unter http://www.sitepoint.com/css3-tabs-u...rget-selector/ oder http://css-tricks.com/css3-tabs/.

  5. #25
    deaktivierter Nutzer
    deaktiviertes Benutzerkonto

    (Threadstarter)

    Standard Re: [gelöst] Teilbereich einer Seite neu laden ohne Ajax?

    Ich habe mir eben das Beispiel von http://dontknow.me/at/?http://css-tricks.com/css3-tabs/ angeguckt und nachgebaut. Ziemlich viel Code wenn du mich fragst und auch recht schlecht kommentiert. Es wird nur grob gesagt was der Codeblock macht. Ich habe mir angewöhnt fast jede Zeile zu kommentieren, damit ich auch in zwei Tagen noch weis warum ich welche Zeile geschrieben habe und welchen Effekt sie verursacht.

    Bei deinem Radio-Button-Code hat mir gefallen, dass wenige Zeilen Code bereits den Effekt erbrachten den ich wollte und der Code ist total nachvollziehbar. Selbst wenn man das schmückende Beiwerk in dem Beispiel mal außer Acht lässt ist das Beispiel (für mich) nur schwer verständlich.

    Kurze Frage OT: Kann man die Elemente <article> und <selection> als Alternativen zu <div>-Elementen ansehen, die man nur deshalb verwendet, damit man einzelne Bereiche leichter mit CSS ansteuern kann und sich nicht mit haufenweise <div>s und darin enthaltene ids und classes rumschlagen muss? So habe ich das jedenfalls verstanden.

  6. #26
    ex-Moderator Avatar von Kugelfisch23
    Registriert seit
    Oct 2007
    Beiträge
    18.640
    Danksagungen
    448

    Standard Re: [gelöst] Teilbereich einer Seite neu laden ohne Ajax?

    http://css-tricks.com/css3-tabs/ linkt am Ende auf http://css-tricks.com/examples/CSSTabs/, wo mehrere alternative Ansätze präsentiert werden. Sofern du keine zusätzlichen Features wie die Hervorhebung des aktuellen Tabs benötigst, dürfte Beispiel 1 (welches auch im ersten Teil des Artikels beschrieben wird) die einfachste Lösung sein. Dessen Markup ist vergleichsweise simpel und nachvollziehbar.

    section- und article-Elemente sind in HTML5 spezifiziert. Der entscheidende Unterschied zu div-Elementen ist, dass sie semantisch eine andere Bedeutung haben, siehe auch http://www.w3.org/TR/html5/sections....rticle-element und http://www.w3.org/TR/html5/sections....ection-element. Während das div-Element ein generisches Container-Element ohne semantische Bedeutung ist, zeichnen das section- und article-Element bestimmte Teile eines Dokuments aus.

    Darüber, ob in http://www.sitepoint.com/css3-tabs-u...rget-selector/ die section- und article-Elemente korrekt verwendet wurden, liesse sich streiten. Meines Erachtens hängt das vom konkreten Inhalt der Tabs ab. Im Zweifelsfall wären div-Elemente vorzuziehen (ebenso, wenn du HTML 4.01 oder XHTML 1.0 statt HTML5 einsetzt).

  7. #27
    deaktivierter Nutzer
    deaktiviertes Benutzerkonto

    (Threadstarter)

    Standard Re: [gelöst] Teilbereich einer Seite neu laden ohne Ajax?

    Ich habe das absolute Minimum zusammengebaut. Sämtlicher Formatierungskram ist raus.

    HTML-Code:
    <!DOCTYPE HTML>
    <html lang="de">
    	<head>
    		<meta charset="UTF-8">
    		<title>Tabs</title>
    		<style type="text/css">
    			.tabbed-area div div {
    				background: red;
    				position: absolute;
    			}
    			
    			#box-one:target, #box-two:target, #box-three:target {
    				z-index: 1;
    			}
    			</style>
    	</head>
    
    	<body>
    		<!-- Anfang Umrandung -->
    		<div class="tabbed-area">
    			<!-- Anfang Navigation -->
    			<div>
    				<a href="#box-one">Tab 1</a>
    				<a href="#box-two">Tab 2</a>
    				<a href="#box-three">Tab 3</a>
    			</div>
    			<!-- Ende Navigation -->
    			
    			<!-- Anfang Inhalt -->
    			<div class="box-wrap">
    				<!-- Anfang Box 1 -->
    				<div id="box-one">
    					Das ist Box 1
    				</div>
    				<!-- Ende Box 1 -->
    				<!-- Anfang Box 2 -->
    				<div id="box-two">
    					Das ist Box 2
    				</div>
    				<!-- Ende Box 2 -->
    				<!-- Anfang Box 3 -->
                    <div id="box-three">
    					Das ist Box 3
    				</div>
    				<!-- Ende Box 3 -->
    			</div>
    			<!-- Ende Inhalt -->
    		</div>	
    		<!-- Ende Umrandung -->
    	</body>
    </html>
    Warum man allerdings einen Hintergrund setzen muss erschließt sich mir nicht. Lässt man das weg, liegen alle Inhalte übereinander.

    Allerdings finde ich dein Beispiel mit dem Formular immer noch am genialsten. Ein Pendant dazu wäre schöner gewesen.
    HTML-Code:
    <style type="text/css">
    	#tab1:not(:checked) ~ #form1,
    	#tab2:not(:checked) ~ #form2 {
    		display:none;
    	}
    </style>

  8. #28
    ex-Moderator Avatar von Kugelfisch23
    Registriert seit
    Oct 2007
    Beiträge
    18.640
    Danksagungen
    448

    Standard Re: [gelöst] Teilbereich einer Seite neu laden ohne Ajax?

    Zitat Zitat von Cyperfriend Beitrag anzeigen
    Warum man allerdings einen Hintergrund setzen muss erschließt sich mir nicht. Lässt man das weg, liegen alle Inhalte übereinander.

    Allerdings finde ich dein Beispiel mit dem Formular immer noch am genialsten. Ein Pendant dazu wäre schöner gewesen.
    Ein direktes Äquivalent existiert nicht, da man nicht davon ausgehen kann, dass der Fragment Identifier immer - insbesondere dann, wenn ein Besucher die Seite zum ersten Mal besucht - vorhanden sein und auf ein Element referenzieren wird. Eine Regel wie
    Code:
    .tabbed-area div div:not(:target) { display: none }
    würde in diesem Fall dazu führen, dass keines der Tabs angezeigt angezeigt wird. Deshalb der vergleichsweise umständliche Ansatz, die Tab-Inhalte durch absolute Positionierung übereinander zu legen - dann ist in jedem Fall ein Tab sichtbar.

    Bei Radio-Buttons eines Formulars stellt sich das Problem nicht, da über die checked-Eigenschaft festgelegt werden kann, welcher Button zu Beginn ausgewählt ist.

  9.  
     
     
Seite 2 von 2 ErsteErste 12

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •