zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Tabs

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.03.2012, 17:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.03.2012
Beiträge: 7
SoontirFel befindet sich auf einem aufstrebenden Ast
Standard CSS Tabs

Hallo zusammen,

ich möchte gerne auf meiner Website Textboxen einfügen, die durch tabs zu erreichen sind. Da ich damit erfolgreich war dachte ich das Problem sei erledigt...

Nun das Problem: Folgender XHTML und CSS code funktionieren in Safarie, Firefox und Chrome - nur der IE8 stellt die Tabs untereinander, anstelle von übereinander dar.

Hat jemand eine Idee wie ich das lösen kann? und wo ich gerade dabei bin... evtl. auch wie man das W3C konform umschreibt (die :target klasse ist ja nicht mehr conform, hab aber so nichts anderes finden können was funktionierte..) Das muss aber nicht sein, wenn es halt so ist muss ich damit leben.

Erst der HTML code:
HTML-Code:
<div class="picture">
  		<div class="tabs">
  			<div id="tab1">
  				<a href="#tab1">Teil 1</a>
   				<div><p> Hier steht jetzt mal was </p></div>
  			</div>
			<div id="tab2">
   				<a href="#tab2">Teil 2</a>
   				<div><p> Und hier was anderes </p></div>
  			</div>
 		</div>
	</div>
nun der CSS code
HTML-Code:
div.tabs { 
  height: 370px;        /* No height: can grow if :target doesn't work */
  position: relative;		/* Establish a containing block */
  line-height: 1;		/* Easier to calculate with */
  z-index: 0}			/* So that we can put other things behind */
div.tabs > div {
  display: inline}		/* We want the buttons all on one line */
div.tabs > div > a {
  color: white;			/* Looks more like a button than a link */
  background: #B3B3B3;		/* Active tabs are light gray */
  padding: 0.2em;		/* Some breathing space */
  border: 0.1em outset #B1B1B1;	/* Make it look like a button */
  border-bottom: 0.1em solid #B3B3B3} /* Visually connect tab and tab body */
div.tabs > div:not(:target) > a {
  border-bottom: none;		/* Make the bottom border disappear */
  background: #999}		/* Inactive tabs are dark gray */
div.tabs > div:target > a,	/* Apply to the targeted item or... */
:target #default2 > a {		/* ... to the default item */
  border-bottom: 0.1em solid #B3B3B3; /* Visually connect tab and tab body */
  background: #B3B3B3;}		/* Active tab is light gray */
div.tabs > div > div {
  background: #B3B3B3;		/* Light gray */
  width: 410px;
  z-index: -2;			/* Behind, because the borders overlap */
  left: 0; top: 1.3em;		/* The top needs some calculation... */
  bottom: 0; right: 0;		/* Other sides flush with containing block */
  border: 0.1em right #B1B1B1;}	/* 3D look */
div.tabs > div:not(:target) > div { /* Protect CSS1 & CSS2 browsers */
  position: absolute }		/* All these DIVs overlap */
div.tabs > div:target > div, :target #default2 > div {
  position: absolute;		/* All these DIVs overlap */
  z-index: -1}			/* Raise it above the others */
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.03.2012, 18:50
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Der IE8 versteht weder :target noch :not(), du brauchst also Modernizr oder ähnliches um ihm das beizubringen.
Zitat:
Zitat von SoontirFel Beitrag anzeigen
die :target klasse ist ja nicht mehr conform
Ach ja? Ist mir neu, da ham die sich beim W3C wohl geirrt http://www.w3.org/TR/selectors/#target-pseudo

Geändert von cebito (06.03.2012 um 18:55 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.03.2012, 18:55
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.821
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von SoontirFel Beitrag anzeigen
und wo ich gerade dabei bin... evtl. auch wie man das W3C konform umschreibt (die :target klasse ist ja nicht mehr conform, hab aber so nichts anderes finden können was funktionierte..)
Die :target-Pseudoklasse ist sehr wohl konform.

Das target-Attribut bei a-Elementen (in HTML und XHTML) ist hingegen ein unsinniges Relikt aus der Vergangenheit.

Da der IE9 :target beherrscht und IE8 an Verbreitung verliert, kannst du darüber nachdenken, für IE8 JavaScript zu verwenden. Eine CSS-basierte Lösungen sehe ich hier nicht wirklich.

Überlege dir, ob du wirklich 4 div-Elemente ineinander verschachteln musst.

Zitat:
Zitat von SoontirFel Beitrag anzeigen
nun der CSS code
Sieht kompliziert aus, habe ihn mir jetzt nicht genauer angeschaut.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
  #4 (permalink)  
Alt 06.03.2012, 19:17
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Ich vermute, dass Du den Code übernommen hast - es sei denn, dass Du Deine Kommentare auf englisch verfasst. Wie dem auch sei, es ist wohl nicht verkehrt, eine Aufstellung zur Verfügung zu haben, in der kurz und bündig die CSS-Fähigkeiten der Browser und ihrer Versionen aufgelistet sind.

Eine solche Liste findest Du zum Beispiel bei PPK: CSS contents and browser compatibility

Mit :target-Umsetzungen für Deine Zwecke hat sich Stu Nicholls intensiv beschäftigt. Stöber' mal ein bisschen auf seinen Sites:

cssplay.co.uk CSS pur
und
stunicholls.com CSS plus Javascript
Mit Zitat antworten
  #5 (permalink)  
Alt 06.03.2012, 19:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.03.2012
Beiträge: 7
SoontirFel befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von gato Beitrag anzeigen

Das target-Attribut bei a-Elementen (in HTML und XHTML) ist hingegen ein unsinniges Relikt aus der Vergangenheit.
Ah super - schön wenn sich Probleme von alleine Lösen , da habe ich wohl das alte target-Attribut mit dem :target gleichgesetzt

Zitat:
Zitat von gato Beitrag anzeigen
Die :target-Pseudoklasse ist sehr wohl konform.

Da der IE9 :target beherrscht und IE8 an Verbreitung verliert, kannst du darüber nachdenken, für IE8 JavaScript zu verwenden. Eine CSS-basierte Lösungen sehe ich hier nicht wirklich.
Da ich sowas noch nie gemacht habe meine Frage: Wie sage ich dem IE 8, dass er eine Javascript Version nehmen soll? Bzw. Wenn ich das ganze schon in JavaScript machen muss. Wie sage ich dem Browser, das er JavaScript nehmen soll und bei deaktiviertem Javascr. die CSS Version?

Geändert von SoontirFel (06.03.2012 um 19:44 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 06.03.2012, 19:39
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.821
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von SoontirFel Beitrag anzeigen
Da ich sowas noch nie gemacht habe meine Frage: Wie sage ich dem IE 8, dass er eine Javascript Version nehmen soll?
Mit Conditional Comments oder Conditional Compilation (ebenfalls auf der Seite beschrieben.

Zitat:
Zitat von SoontirFel Beitrag anzeigen
Bzw. Wenn ich das ganze schon in JavaScript machen muss. Wie sage ich dem Browser, das er JavaScript nehmen soll und bei deaktiviertem Java die CSS Version?
Belasse die CSS-Variante und sag einfach IE8 und älter, dass Sie zusätzlich die JS-Variante verwenden sollen.

P.S. Java und JavaScript haben soviel gemeinsam wie Bär und Bärlauch.
Mit Zitat antworten
  #7 (permalink)  
Alt 06.03.2012, 20:51
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.375
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von gato Beitrag anzeigen
P.S. Java und JavaScript haben soviel gemeinsam wie Bär und Bärlauch.
Beide sind braun, brüllen, haarig und schmecken nach bär? :P *scnr*
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #8 (permalink)  
Alt 06.03.2012, 21:07
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Zitat:
Zitat von Thielo Beitrag anzeigen
Beide sind braun, brüllen, haarig und schmecken nach bär?
Nein, das sind die Gemeinsamkeiten von Bär und Werwolf.
Die Gemeinsamkeiten von Werwolf und Bärlauch liegen bei der Vergrämung von Vampiren.
__________________
MfG
Jens
Mit Zitat antworten
  #9 (permalink)  
Alt 07.03.2012, 14:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.03.2012
Beiträge: 7
SoontirFel befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von gato Beitrag anzeigen
Mit Conditional Comments oder Conditional Compilation (ebenfalls auf der Seite beschrieben.
Funktioniert super - Danke vielmals.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 22.10.2012, 14:03
Neuer Benutzer
neuer user
 
Registriert seit: 26.09.2006
Beiträge: 9
chevron08 befindet sich auf einem aufstrebenden Ast
Standard

Hi,
ich habe hier mal ein Problem an dem ich nicht weiterkomme.
ich muss 2-3 verschiedene Suchformulare anzeigen lassen, diese sollen in TABs aufrufbar sein. Ich habe mir auch schon etwas zusammen gebastelt welches im FF super ausschaut aber der IE mal wieder dazwischen schiesst.

hier mein script bzw. konstrukt:
Unbenannt

Im IE zeigt der mir die TABs nicht und dafür die checkboxen
hat jemand einen Rat?

PHP-Code:
<style type="text/css">
.tabs {
      clear: both;
    margin: 25px 0 0;
    min-height: 370px;
    position: relative;
}
.tab {
  float: left;
}
.tab label {
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: #CEE7F3;
  right: 0;
  bottom: 0;
  padding: 0px;
  border: 1px solid #ccc; 
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}
</style>
<div class="tabs">
    
   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Schiffsuche</label>
       
       <div class="content">
          <?php require_once('http://www.kreuzfahrtschnaeppchen.com/Cruisepool/xml/schiff_suche.php'); ?>
       </div> 
   </div>
    
   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Gebietsuche</label>
       
       <div class="content">
           
           <?php require_once('http://www.kreuzfahrtschnaeppchen.com/Cruisepool/xml/gebiet_suche.php'); ?>
       </div> 
   </div>
    
    
    
</div>
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
tabs regisrtierkarte

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
IE 6 erkennt seine CSS Datei nicht Perelina (X)HTML 4 07.08.2009 18:56
MYspace mehr als nur CSS oder ? Vinceone CSS 0 12.07.2007 02:21
Active Tabs mit CSS auch bei dynamischer Seiteneinbindung? Midnight CSS 5 29.05.2007 18:44
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 08:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 11:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:32 Uhr.