Problem mit :target

moon-walker · #1 (**permalink**) 27.08.2012, 20:29

Guten Abend,

Ich bins nochmal, und hänge schon wieder fest.. :-/

Diesmal bei einem auf- und zuklappenden Menü mit der Pseudoklasse :target.

Den Aufklapp-Boxen tabbox-1 und tabbox-2 habe ich
padding-top: 2em und margin-top: -2em; gegeben, damit beim Anklicken der tabs diese nicht nach oben aus dem Bildschirm heraus verschwinden.

Um ein Springen der Tab-Boxen bei unterschiedlich langem Inhalt zu verhindern, habe ich diesen noch
padding-bottom: 900px und margin-bottom: -900px; gegeben.

Jetzt rutscht beim Anklicken eines tabs die komplette Tab-Box nach oben, und bleibt auch dort, egal wie groß der Inhaltstext des jeweiligen tabs ist. Das ist auch so gewollt.

Was aber nicht gewollt ist, ist der jetzt entstandene große freie Bereich unter der Zeile "last text". Dort sollte eigentlich die Seite zu Ende sein.

Hat jemand bitte einen Tip für mich, wie ich das Problem beheben könnte?
Ein zusätzliches "overflow: hidden" bewirkt leider nichts.

Gruß,
moonwalker

HTML-Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tabs test</title>

<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
	}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

#wrapper {
    max-width: 600px;
    min-width: 350px;
    margin: auto;
    border: 5px solid green;
}

.tabbox-1,
.tabbox-2 {
    height: auto;
    display: block;
    margin: 1em 0;  
    padding-bottom: 900px;  
    margin-bottom: -900px;
    border: 3px solid #0f0;
    }

.tab-all {
    padding-top: 2em;  
    margin-top: -2em;
    background-color: #ddd; 
    border: 3px solid; 
    }

.tabbox-1 > ul li ,
.tabbox-2 > ul li {
    display: inline;
    }

.tabbox-1 > ul a,
.tabbox-2 > ul a {
    padding: 10px;
    border: 2px outset #bbb;
    }

.tabbox-1 > ul a:hover,
.tabbox-2 > ul a:hover {
    background: #ccc;
    }

.tabbox-1 > div,
.tabbox-2 > div {
    display: none;
    padding: 1em; 
    
    overflow: hidden;   
    border: 3px solid red;

    }
.tabbox-1 > div:target,
.tabbox-2 > div:target  {
    display: block;
    }


</style>
</head>

<body>

<div id="wrapper">

<h1>test mit :target</h1>

<p>hier steht text</p>
<p>hier steht text</p>
<p>hier steht text</p>
<p>hier steht text</p>
<p>hier steht text</p>
<p>hier steht text</p>
<p>hier steht text</p>
<p>hier steht text</p>
<p>hier steht text</p>
<p>hier steht text</p>
<p>hier steht text</p>
<p>hier steht text</p>
<p>hier steht text</p>
<p>hier steht text</p>


<div class="tabbox-1">

    <ul>
        <li><a href="#tab1">Tab 1</a>
        <li><a href="#tab2">Tab 2</a>
        <li><a href="#tab3">Tab 3</a>
        <li><a href="#tab4">zu</a>
    </ul>

    <div id="tab1" class="tab-all">
        <h2>Seite 1</h2>
            Dies ist ein Blindtext. <br>
            Dieser Text ist nicht daf&uuml;r vorgesehen, den Betrachter in die
            Welt der Dunkelheit zu f&uuml;hren, sondern daf&uuml;r, einfach etwas
            Leeres mit etwas Inhaltlosem zu f&uuml;llen. <br>
            Dies ist und bleibt also ein sinnloser Blindtext ohne Sinn und Zweck.
    </div>


    <div id="tab2" class="tab-all">
    <h2>Seite 2</h2>
    <p>Anderer Text f&uuml;r Seite 2. </p>
    </div>


    <div id="tab3" class="tab-all">
        <h2>Seite 3</h2>
            <p>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>
   
</p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<p>
   
</p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.<p>
   
</p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet
doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.<p>
   
</p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis.<p>
   
</p>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, At accusam
aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed
tempor et et invidunt justo labore Stet clita ea et gubergren, kasd
magna no rebum. sanctus sea sed takimata ut vero voluptua. 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.<p>
   


    </div>

    <div id="tab4" class="tab-all">

    <!--<h2>Seite 4</h2>
    <p></p> -->
    </div>

</div>



<p>hier steht noch mehr text</p>
<p>hier steht noch mehr text</p>
<p>hier steht noch mehr text</p>
<p>hier steht noch mehr text</p>
<p>hier steht noch mehr text</p>




<div class="tabbox-2">

    <ul>
        <li><a href="#tab-a">Galerie a</a>
        <li><a href="#tab-b">Galerie b</a>
        <li><a href="#tab-c">Galerie c</a>
        <li><a href="#tab-d">zu</a>
    </ul>

    <div id="tab-a" class="tab-all">
        <h2>Seite a</h2>
            <p>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>
   
</p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<p>
   
</p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis.<p>
   

    </div>


    <div id="tab-b" class="tab-all">
    <h2>Seite b</h2>
    <p>Anderer Text f&uuml;r Seite 2. </p>
    </div>


    <div id="tab-c" class="tab-all">
        <h2>Seite c</h2>
    <p>Inline Images: <img src="/img/test1.png"><img src="/img/test2.png"><img src="/img/test3.png">
            <img src="/img/test4.png"><img src="/img/test5.png"><img src="/img/test1.png">
            <img src="/img/test2.png"><img src="/img/test3.png"><img src="/img/test4.png">
            <img src="/img/test5.png"></p>
    </div>

    <div id="tab-d" class="tab-all">    
    </div>

</div>


<p>noch ein anderer text</p>
<p>noch ein anderer text</p>
<p>noch ein anderer text</p>
<p>noch ein anderer text</p>
<p>last text</p>


</div>

</body>
</html>

moon-walker · #2 (**permalink**) 03.09.2012, 18:32

Hallo,

Ich suche eine Möglichkeit, Aufklapptexte ohne Javascript auch für die IEs < 9 zu realisieren. Für die guten Browser verwende ich dafür die Pseudoklasse :target
Beispiel hier:

HTML-Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tabs test</title>

<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
        }

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

#wrapper {
    max-width: 600px;
    min-width: 350px;
    margin: auto;
    border: 5px solid green;
}

.tabbox {
    height: auto;
    display: block;
    margin: 1em 0;
    padding-bottom: 900px;
    margin-bottom: -900px;
    border: 3px solid #0f0;
    }

.tab-all {
    padding-top: 2em;
    margin-top: -2em;
    background-color: #ddd;
    border: 3px solid;
    }

.tabbox > ul li {
    display: inline;
    }

.tabbox > ul a {
    padding: 10px;
    border: 2px outset #bbb;
    }

.tabbox > ul a:hover {
    background: #ccc;
    }

.tabbox > div {
    display: none;
    padding: 1em;
    overflow: hidden;
    border: 3px solid red;
    }

.tabbox > div:target  {
    display: block;
    }

h2 { margin-top: 30px; }

</style>
</head>

<body>

<div id="wrapper">

<h1>test mit :target</h1>

<p>hier steht text</p>
<p>hier steht text</p>
<p>hier steht text</p>
<p>hier steht text</p>
<p>hier steht text</p>


<div class="tabbox">

    <ul>
        <li><a href="#aufklapp1">Tab 1</a>
        <li><a href="#aufklapp2">Tab 2</a>
        <li><a href="#aufklapp3">Tab 3</a>
        <li><a href="#aufklapp4">zu</a>
    </ul>


    <div id="aufklapp1" class="tab-all">
        <h2>Seite 1</h2>
         <p>   Dies ist ein Blindtext. <br>
            Dieser Text ist nicht daf&uuml;r vorgesehen, den Betrachter in die
            Welt der Dunkelheit zu f&uuml;hren, sondern daf&uuml;r, einfach etwas
            Leeres mit etwas Inhaltlosem zu f&uuml;llen. <br>
            Dies ist und bleibt also ein sinnloser Blindtext ohne Sinn und Zweck.</p>
    </div>



    <div id="aufklapp2" class="tab-all">
        <h2>Seite 2</h2>
        <p>Anderer Text f&uuml;r Seite 2. </p>
    </div>



    <div id="aufklapp3" class="tab-all">
        <h2>Seite 3</h2>
        <p>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>

        </p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
            molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
            eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
            zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
            dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<p>

    </div>



    <div id="aufklapp4" class="tab-all">
    <!--<h2>Seite 4</h2>
    <p></p> -->
    </div>

</div>



<p>hier steht noch mehr text</p>
<p>hier steht noch mehr text</p>
<p>hier steht noch mehr text</p>
<p>hier steht noch mehr text</p>
<p>hier steht noch mehr text</p>
<p>noch ein anderer text</p>
<p>noch ein anderer text</p>
<p>noch ein anderer text</p>
<p>noch ein anderer text</p>
<p>last text</p>


</div>

</body>
</html>

CSS-Popups, so wie hier
Pure CSS Popups
kann ich für die IEs nicht benutzen, da dort der Aufklapptext absolut positioniert wird.
Mit absolute würde sonst der Aufklapptext den Inhalt unterhalb der Links überlagern.

Stu Nicholls Beispiel
Stu Nicholls | CSSplay | Show me some more
kommt schon näher heran, nur sollen die Aufklapptexte alle ganz links beginnen, so wie in meinem Code mit :target.

Kann mir einer von euch bitte einen Tipp geben, wie ich das machen könnte, daß der Aufklapptext über die volle Breite geht und den unteren Text wegschiebt und nicht überlagert?

Gruß,
moonwalker

gato · #3 (**permalink**) 03.09.2012, 19:05

Zum ersten Problem:
Den unteren Abstand hast du selbst erzeugt (dieses komische Spiel mit margin/padding), dagegen kannst du nichts machen außer ihn selbst wieder zu entfernen.
Eine alternative Lösung wäre, .tabbox eine feste Höhe und overflow: scroll; zu geben.

Zum zweiten Problem:
Ohne JavaScript ist das nicht halbwegs benutzerfreundlich machbar.
Stu nutzt im zweiten Beispiel ebenfalls JavaScript (nur hat er es dennoch geschafft, die Seite benutzerunfreundlich zu machen).

P.S. Dein Markup enthält ein paar Fehler, z.B. hast du teilweise <p> und </p> vertauscht.

moon-walker · #4 (**permalink**) 05.09.2012, 03:27

Guten Morgen

Zitat:

P.S. Dein Markup enthält ein paar Fehler, z.B. hast du teilweise <p> und </p> vertauscht.

Danke, ist korrigiert.

Zitat:

Zitat von gato

Zum ersten Problem:
Den unteren Abstand hast du selbst erzeugt (dieses komische Spiel mit margin/padding), dagegen kannst du nichts machen außer ihn selbst wieder zu entfernen.

Wenn ich das nicht mache, springen die Tabs hoch und runter, je nach Länge des jeweiligen Aufklapptextes.

Zitat:

Eine alternative Lösung wäre, .tabbox eine feste Höhe und overflow: scroll; zu geben.

Meine Aufklapptexte haben, wie im Beispiel angegeben, sehr unterschiedlich großen Inhalt.
Ich hätte bei fester Höhe entweder große Freiflächen oder ständig 2 vertkale Scrollbalken, was beides nicht schön aussieht.

Zitat:

Zum zweiten Problem:
Ohne JavaScript ist das nicht halbwegs benutzerfreundlich machbar.

so schnell gebe ich die Hoffnung nicht auf, und habe auch im Forum schon etwas gefunden.

Was haltet ihr grundsätzlich von dieser Lösung?

http://xhtmlforum.de/65088-workaroun...tml#post497510

Ganz unten ist eine Datei verlinkt, die "Aufklapp für alle" genannt wird.
Das funktioniert in allen meinen Browsern. Jetzt mußte ich nur noch die Tabs, bzw die Fahnen, in die Horizontale bekommen. Dazu habe ich noch

HTML-Code:

li { 
    float: left; 
    width: 150px;
     white-space: nowrap; }

eingefügt und die position:relatives herausgenommen.

Das Problem zeigt sich nun aber beim Klicken auf einen Tab.
Der Aufklapptext fängt an der Position des entsprechenden tabs an, anstatt ganz links, und ist auch nur so breit wie das elternelement, also li.
Läßt sich das irgendwie umgehen?
also so ähnlich wie bei einem drop-line-Menü.
bsp: Stu Nicholls | CSSplay | Validating drop line cross-browser menu
Dort ist die ul des submenüs ja auch breiter als sein elternelement, also der entsprechende Link des Hauptmenüs.
Ich schaffe es aber leider nicht, das auf meinen Code anzuwenden.

Kann vielleicht jemand mir einen Hinweis geben?

Gruß

Testcode, bei dem ich in gabys markup nur die Bilder und den Aufklapptext ausgetauscht habe:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title> - 1128x1024 [337x694]</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">



<style type="text/css">

body  {
   font-family: Verdana, sans-serif;
   font-weight: bold;
   font-size: 100%;
   color: red;
   background-color: AliceBlue  }

#ueberschrift  {
   width: 47em; }

.menu {
   position: relative;   
   font-size: 1em;
   margin: 30px 0 0 10px;
    border: 3px dashed black; }
	
li { 
    float: left; 
    width: 155px;
     white-space: nowrap; }
	

a {
   width:99px;
   text-decoration: none;
    }

a:link {  }

a:visited {   }

a:hover {
   border: none; }  /* der IE-6 braucht fuer showcase entweder 'border' oder 'background'

*/



a img  {
   height: 44px;
   width: 111px;
   border: none;  }

.menu span {display: none}

.menu span:target {
   display: block;
   /*position: relative;*/
   top: 2px;
   left: 1px;
   width: 105px;  
    width: 100%;
   padding: 11px;
   background-color: lemonchiffon;
   border: 4px red solid; }




/* ab hier workaround f&uuml;r die IEs */

a:active .showcase_zu,
a:focus .showcase_zu {  }


a .showcase,
a:hover .showcase {
   display: none\9; }

a:active .showcase,
a:focus .showcase {
   display: block\9;
   /* position: relative\9; */
   top: 2px\9;
   left: 1px\9;
   width: 100px\9;
   padding: 11px\9;
   background-color: lemonchiffon\9;
   border: 4px blue solid\9;
    }



</style>

</head>

<body>
<!-- CCs für alle IEs -->
<!--[if IE]> Ich bin ein IE <![endif]-->

<!-- CCs für alle Nicht-IEs -->
<!--[if !IE]><!--> Wir sind die guten Browser <!--<![endif]-->




<ul class="menu">

   <li><a href="#aufklapp-1"><img src="http://www.visreal-online.de/images/categories/deutschland_visreal.gif" alt="deutsch">
       <!--[if !IE]><!--> <span id="aufklapp-1" class="showcase"> <!--<![endif]-->
       <!--[if IE]> <span     class="showcase"> <![endif]-->
                 <p>   Dies ist ein Blindtext. 
            Dieser Text ist nicht daf&uuml;r vorgesehen, den Betrachter in die
            Welt der Dunkelheit zu f&uuml;hren, sondern daf&uuml;r, einfach etwas
            Leeres mit etwas Inhaltlosem zu f&uuml;llen. 
            Dies ist und bleibt also ein sinnloser Blindtext ohne Sinn und Zweck.</p>
        </span></a></li>


 <li><a href="#aufklapp-3"><img src="http://www.visreal-online.de/images/categories/europa_kat_bild.gif" alt="franzoesisch">
       <!--[if !IE]><!--> <span id="aufklapp-3" class="showcase"> <!--<![endif]-->
       <!--[if IE]> <span     class="showcase"> <![endif]-->
                 <p>Anderer Text f&uuml;r Seite 2. </p>
        </span></a></li>


   <li><a href="#aufklapp-2"><img src="http://www.visreal-online.de/images/categories/kat_flag_s-h.gif" alt="englisch">
       <!--[if !IE]><!--> <span id="aufklapp-2" class="showcase"> <!--<![endif]-->
       <!--[if IE]> <span     class="showcase"> <![endif]-->
                 <p>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>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
            molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
            eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
            zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
            dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </span></a></li>

</ul>

<br style="clear: both">

<p>hier steht noch mehr text</p>
<p>hier steht noch mehr text</p>
<p>hier steht noch mehr text</p>
<p>hier steht noch mehr text</p>
<p>hier steht noch mehr text</p>
<p>noch ein anderer text</p>
<p>noch ein anderer text</p>
<p>noch ein anderer text</p>
<p>noch ein anderer text</p>
<p>last text</p>


</body>
</html>

gato · #5 (**permalink**) 05.09.2012, 19:10

Zitat:

Zitat von moon-walker

Wenn ich das nicht mache, springen die Tabs hoch und runter, je nach Länge des jeweiligen Aufklapptextes.

Ich weis. Ich sage dir nur, dass du die Wahl hast, was dir wichitger ist: kein Springen oder kein Abstand.

Zitat:

Zitat von moon-walker

Ich hätte bei fester Höhe entweder große Freiflächen oder ständig 2 vertkale Scrollbalken, was beides nicht schön aussieht.

Das Springen der Inhalte ist dagegen nur ein paar ms lang sichtbar

Aber ohne Springen ist schon besser, mMn.

Zitat:

Zitat von moon-walker

Was haltet ihr grundsätzlich von dieser Lösung?

Für längere Inhalte ungeeignet, weil sich der Inhalt nicht auf einfache Weise kopieren lässt. Zudem verschwindet der Inhalt im IE wieder, sobald du woanders hinklickst.

Zitat:

Zitat von moon-walker

Der Aufklapptext fängt an der Position des entsprechenden tabs an, anstatt ganz links, und ist auch nur so breit wie das elternelement, also li.
Läßt sich das irgendwie umgehen?

Indem du die Breite des Kindelements erhöhst (z.B. selbe Breite wie das Großelternelement).
Mit seitlichem negativen margin auf die Kindelemente, kannst du sie dann an die richtige Position verschieben. Du musst nur wissen, um wie viel du verschieben musst (um die Breite der Navigationspunkte).

Zitat:

Zitat von moon-walker

Dort ist die ul des submenüs ja auch breiter als sein elternelement, also der entsprechende Link des Hauptmenüs.
Ich schaffe es aber leider nicht, das auf meinen Code anzuwenden.

Nun, dort wird absolute Positionierung verwendet, das macht im Grunde das Selbe wie mein Vorschlag, ist aber für größere Inhalte eher ungeeignet, wenn darauf noch weitere Inhalte folgen.

moon-walker · #6 (**permalink**) 06.09.2012, 16:42

Zitat:

Zitat von gato

Mit seitlichem negativen margin auf die Kindelemente, kannst du sie dann an die richtige Position verschieben. Du musst nur wissen, um wie viel du verschieben musst (um die Breite der Navigationspunkte).

Das habe ich jetzt gemacht mit

Code:

span#aufklapp-1 {
    margin-left: 0px; }

span#aufklapp-2 {
    margin-left: -150px; }

span#aufklapp-3 {
    margin-left: -300px; }

Danke für den Tip.

Zitat:

Nun, dort wird absolute Positionierung verwendet, das macht im Grunde das Selbe wie mein Vorschlag, ist aber für größere Inhalte eher ungeeignet, wenn darauf noch weitere Inhalte folgen.

Genau aus diesem Grund kann ich ja position: absolute nicht verwenden.
Leider, sonst wäre es einfacher. :-/

Zitat:

Indem du die Breite des Kindelements erhöhst (z.B. selbe Breite wie das Großelternelement).

Das Großelternelement ist ul, und das hat standardmäßig eine Breite von 100%, was auch so sein soll.
Dem span, also der Box, in der der Aufklapptext enthalten ist, hatte ich ja schon eine Breite von 100% gegeben.
Nur richtet sich diese Breite nach dem Elternelement.
Das ist li, und hat 150px Breite.

Wie erreiche ich es denn, daß auch das span über die volle Breite geht, also so breit wird wie ul?

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title> - 1128x1024 [337x694]</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">



<style type="text/css">

body  {
   font-family: Verdana, sans-serif;
   font-weight: bold;
   font-size: 100%;
   color: red;
   background-color: AliceBlue  }

ul {
    margin: 0;
   padding: 0;
   list-style: none;
   }

#ueberschrift  {
   width: 47em; }

ul.menu {
   flooat: left;
   position: relative;   
   font-size: 1em;
   margin: 30px 0 0 10px;
    border: 3px dashed black; }
	
li { 
    float: left; 
    width: 150px;
     }
	

a {
   width:100px;
   text-decoration: none;
   border: 1px solid;
    }

a:link {  }

a:visited {   }

a:hover {
   border: none; }  /* der IE-6 braucht fuer showcase entweder 'border' oder 'background'

*/


#aufklapp-1 {
    margin-left: 0px; }

span#aufklapp-2 {
    margin-left: -150px; }

#aufklapp-3 {
    margin-left: -300px; }



a img  {
   height: 50px;
   width: 100px;  }

.menu span {display: none}

.menu span:target {
   display: block;   
   width: 105px;  
    width: 100%;
   padding: 11px;
   background-color: lemonchiffon;
   border: 4px red solid; }




/* ab hier workaround fuer die IEs */

a:active .showcase_zu,
a:focus .showcase_zu {  }


a .showcase,
a:hover .showcase {
   display: none\9; }

a:active .showcase,
a:focus .showcase {
   display: block\9;
   /* position: relative\9; */
   top: 2px\9;
   left: 1px\9;
   width: 100px\9;
   padding: 11px\9;
   background-color: lemonchiffon\9;
   border: 4px blue solid\9;
    }



</style>

</head>

<body>
<!-- CCs für alle IEs -->
<!--[if IE]> Ich bin ein IE <![endif]-->

<!-- CCs für alle Nicht-IEs -->
<!--[if !IE]><!--> Wir sind die guten Browser <!--<![endif]-->




<ul class="menu">

   <li><a href="#aufklapp-1"><img src="http://www.visreal-online.de/images/categories/deutschland_visreal.gif" alt="deutsch">
       <!--[if !IE]><!--> <span id="aufklapp-1" class="showcase"> <!--<![endif]-->
       <!--[if IE]> <span     class="showcase"> <![endif]-->
                 <p>   Dies ist ein Blindtext. 
            Dieser Text ist nicht daf&uuml;r vorgesehen, den Betrachter in die
            Welt der Dunkelheit zu f&uuml;hren, sondern daf&uuml;r, einfach etwas
            Leeres mit etwas Inhaltlosem zu f&uuml;llen. </p>
        </span></a></li>


 <li><a href="#aufklapp-2"><img src="http://www.visreal-online.de/images/categories/europa_kat_bild.gif" alt="franzoesisch">
       <!--[if !IE]><!--> <span id="aufklapp-2" class="showcase"> <!--<![endif]-->
       <!--[if IE]> <span     class="showcase"> <![endif]-->
                 <p>Anderer Text f&uuml;r Seite 2. </p>
        </span></a></li>


   <li><a href="#aufklapp-3"><img src="http://www.visreal-online.de/images/categories/kat_flag_s-h.gif" alt="englisch">
       <!--[if !IE]><!--> <span id="aufklapp-3" class="showcase"> <!--<![endif]-->
       <!--[if IE]> <span     class="showcase"> <![endif]-->
                 <p>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>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
            molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
            eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
            zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
            dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </span></a></li>
		
		

</ul>

<br style="clear: both">

<p>hier steht noch mehr text</p>
<p>hier steht noch mehr text</p>
<p>noch ein anderer text</p>
<p>noch ein anderer text</p>
<p>last text</p>


</body>
</html>

Ich habe da noch eine Frage zu gabys Code, den ich kopiert habe:
Was bedeutet den das "\9" in den letzten Selectoren?

Gruß
moonwalker

gato · #7 (**permalink**) 06.09.2012, 17:05

Zitat:

Zitat von moon-walker

Danke für den Tip.

Nebenbei: Das span vor der Raute ist überflüssig

Zitat:

Zitat von moon-walker

Wie erreiche ich es denn, daß auch das span über die volle Breite geht, also so breit wird wie ul?

Hmm, ich hatte übersehen, dass du deine breite dynamisch erzeugst.
Mit den Angaben min- und max-width für span mit den selben Werten wie für #wrapper kommst du aber schon mal einen Schritt weiter.

Zitat:

Zitat von moon-walker

Ich habe da noch eine Frage zu gabys Code, den ich kopiert habe:
Was bedeutet den das "\9" in den letzten Selectoren?

Das ist ein CSS-Hack. Die Eigenschaft wird dadurch nur vom Internet Explorer verwendet.

Allerdings solltest du diesen Hack nicht verwenden, da das CSS fehlerhaft ist, auch in aktuellen IEs zur Anwendung kommt (in der Regel sind Sonderregeln nur für IE7 und älter erforderlich), und mit Conditional Comments eine wesentlich effektiviere und sauberere Methode besteht, einzelne IEs anzusprechen.

moon-walker · #8 (**permalink**) 06.09.2012, 19:26

Zitat:

Zitat von gato

Nebenbei: Das span vor der Raute ist überflüssig

stimmt, ich habe es wieder gelöscht.

Zitat:

Das ist ein CSS-Hack. Die Eigenschaft wird dadurch nur vom Internet Explorer verwendet.

Ahh, danke.

Das war mir total neu.
Ich hätte dann doch lieber den Starhack verwendet.

Zitat:

Allerdings solltest du diesen Hack nicht verwenden, da das CSS fehlerhaft ist, auch in aktuellen IEs zur Anwendung kommt (in der Regel sind Sonderregeln nur für IE7 und älter erforderlich),

der IE-8 kommt mit :target aber auch noch nicht zurecht.

Zitat:

und mit Conditional Comments eine wesentlich effektiviere und sauberere Methode besteht, einzelne IEs anzusprechen.

Okay, dann nehme ich die CCs für alle IEs < 9.
Danke für den Tip.

Zitat:

Hmm, ich hatte übersehen, dass du deine breite dynamisch erzeugst.
Mit den Angaben min- und max-width für span mit den selben Werten wie für #wrapper kommst du aber schon mal einen Schritt weiter.

Leider nicht.
Damit

Code:

.menu span:target {
   display: block; 
   max-width: 900px;
   min-width: 600px;
   padding: 11px;
   background-color: lemonchiffon;
   border: 4px red solid; 
}

wird nur die Mindesbreite eingehalten, sonst nichts.

Ich sehe auch gerade, daß die Angaben

Code:

#aufklapp-1 {
    margin-left: 0px; }

#aufklapp-2 {
    margin-left: -150px; }

#aufklapp-3 {
    margin-left: -300px; }

Im IE8 überhaupt nichts bewirken.
Die Klapptexte beginnen nach wie vor direkt unterhalb des jeweiligen Links.

Gruß,
moonwalker

geänderter Code:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title> - 1128x1024 [337x694]</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">



<style type="text/css">

body  {
   font-family: Verdana, sans-serif;
   font-weight: bold;
   font-size: 100%;
   color: red;
   background-color: AliceBlue  }

ul {
    margin: 0;
   padding: 0;
   list-style: none;
   }

#ueberschrift  {
   width: 47em; }

ul.menu {
   flooat: left;
   position: relative;   
   font-size: 1em;
   margin: 30px 0 0 10px;
    border: 3px dashed black; }
	
li { 
    float: left; 
    width: 150px;
     }
	

a {
   width:100px;
   text-decoration: none;
   border: 1px solid;
    }

a:link {  }

a:visited {   }

a:hover {
   border: none; }  /* der IE-6 braucht fuer showcase entweder 'border' oder 'background'

*/


#aufklapp-1 {
    margin-left: 0px; }

#aufklapp-2 {
    margin-left: -150px; }

#aufklapp-3 {
    margin-left: -300px; }



a img  {
   height: 50px;
   width: 100px;  }

.menu span {display: none}

.menu span:target {
   display: block; 
   max-width: 900px;
   min-width: 600px;
   padding: 11px;
   background-color: lemonchiffon;
   border: 4px red solid; 
}

</style>




<!--[if IE<9]> 
/* ab hier workaround fuer die IEs */
   <style type="text/css"> 

	a:active .showcase_zu,
	a:focus .showcase_zu {  }
	
	
	a .showcase,
	a:hover .showcase {
	   display: none; }
	
	a:active .showcase,
	a:focus .showcase {
	   display: block;	  
	   max-width: 900px;
           min-width: 600px;
	   padding: 11px\
	   background-color: lemonchiffon;
	   border: 4px blue solid;
		}
    </style>
<![endif]-->	





</head>

<body>
<!-- CCs für alle IEs -->
<!--[if IE]> Ich bin ein IE <![endif]-->

<!-- CCs für alle Nicht-IEs -->
<!--[if !IE]><!--> Wir sind die guten Browser <!--<![endif]-->




<ul class="menu">

   <li><a href="#aufklapp-1"><img src="http://www.visreal-online.de/images/categories/deutschland_visreal.gif" alt="deutsch">
       <!--[if !IE]><!--> <span id="aufklapp-1" class="showcase"> <!--<![endif]-->
       <!--[if IE]> <span     class="showcase"> <![endif]-->
                 <p>   Dies ist ein Blindtext. 
            Dieser Text ist nicht daf&uuml;r vorgesehen, den Betrachter in die
            Welt der Dunkelheit zu f&uuml;hren, sondern daf&uuml;r, einfach etwas
            Leeres mit etwas Inhaltlosem zu f&uuml;llen. </p>
        </span></a></li>


 <li><a href="#aufklapp-2"><img src="http://www.visreal-online.de/images/categories/europa_kat_bild.gif" alt="franzoesisch">
       <!--[if !IE]><!--> <span id="aufklapp-2" class="showcase"> <!--<![endif]-->
       <!--[if IE]> <span     class="showcase"> <![endif]-->
                 <p>Anderer Text f&uuml;r Seite 2. </p>
        </span></a></li>


   <li><a href="#aufklapp-3"><img src="http://www.visreal-online.de/images/categories/kat_flag_s-h.gif" alt="englisch">
       <!--[if !IE]><!--> <span id="aufklapp-3" class="showcase"> <!--<![endif]-->
       <!--[if IE]> <span     class="showcase"> <![endif]-->
                 <p>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>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
            molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
            eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
            zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
            dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </span></a></li>
		
		

</ul>

<br style="clear: both">

<p>hier steht noch mehr text</p>
<p>hier steht noch mehr text</p>
<p>noch ein anderer text</p>
<p>noch ein anderer text</p>
<p>last text</p>


</body>
</html>

gato · #9 (**permalink**) 06.09.2012, 20:15

Zitat:

Zitat von moon-walker

Ahh, danke.

Das war mir total neu.
Ich hätte dann doch lieber den Starhack verwendet.

Kennen ist ok, verwenden lieber nicht, wenn es nicht erforderlich ist

Zitat:

Zitat von moon-walker

der IE-8 kommt mit :target aber auch noch nicht zurecht.

Das ist eine der Ausnahmen, die die Regel bestätigen (eine andere sind komplexe Berechnungen mit max-width).

Zitat:

Zitat von moon-walker

Leider nicht.
Damit [...] wird nur die Mindesbreite eingehalten, sonst nichts.

Ich sprach von einem Schritt, noch nicht vom Ziel.

Zitat:

Zitat von moon-walker

Ich sehe auch gerade, daß die Angaben [...] Im IE8 überhaupt nichts bewirken.

Tut mir leid, du bist etwas übereifrig und machst Leichtsinnsfehler.

<!--[if IE<9]> ist doppelt falsch; in deinem Fall musst du <!--[if IE]> schreiben (denn der Rest des Quelltextes ist ebenfalls darauf ausgelegt, in allen IEs zur Anwendung zu kommen); die richtige Formulierung deines (falschen) Statements wäre <!--[if lt IE 9]> oder <!--[if lte IE 8]>. Siehe Conditional Comments.

Zudem sind im CSS noch weitere Fehler enthalten (beachte, dass Fehler innerhalb von Conditional Comments, von einem CSS-Validator nicht berücksichtigt werden).

Zitat:

Zitat von moon-walker

Die Klapptexte beginnen nach wie vor direkt unterhalb des jeweiligen Links.

Du solltest in der Lage sein, zu erkennen, warum im IE die genannten Regeln nicht angewendet werden. Der IE erhält anderen HTML-Quelltext als andere Browser.

moon-walker · #10 (**permalink**) 06.09.2012, 21:48

Zitat:

Zitat von gato

Ich sprach von einem Schritt, noch nicht vom Ziel.

In dem Code von gaby klappt dein Vorschlag mit min-width und max-width, weil dort die LIs, also die Elternelemente von dem span, 100% breit sind.
Bei mir sind sie aber nur 150px, weil da die LIs in einer Reihe stehen. Somit kommt max-width:900px leider nicht zum Zug.

Zitat:

Tut mir leid, du bist etwas übereifrig und machst Leichtsinnsfehler.

Oh Mist, das kommt sicher daher, weil ich schon so lange darüber brüte und herumprobiere. :-/

Zitat:

Zudem sind im CSS noch weitere Fehler enthalten (beachte, dass Fehler innerhalb von Conditional Comments, von einem CSS-Validator nicht berücksichtigt werden).

ist korrigiert, danke.

Zitat:

Du solltest in der Lage sein, zu erkennen, warum im IE die genannten Regeln nicht angewendet werden. Der IE erhält anderen HTML-Quelltext als andere Browser.

Das funktioniert jetzt, daß alle Klapptexte auch im IE links anfangen.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title> - 1128x1024 [337x694]</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">



<style type="text/css">

body  {
   font-family: Verdana, sans-serif;
   font-weight: bold;
   font-size: 100%;
   color: red;
   background-color: AliceBlue  }

ul {
    margin: 0;
   padding: 0;
   list-style: none;
   }

#ueberschrift  {
   width: 47em; }

ul.menu {
   flooat: left;
   position: relative;   
   font-size: 1em;
   margin: 30px 0 0 10px;
    border: 3px dashed black; }
	
li { 
    float: left; 
    width: 150px;
     }
	

a {
   width:100px;
   text-decoration: none;
   border: 1px solid;
    }

a:link {  }

a:visited {   }

a:hover {
   border: none; }  /* der IE-6 braucht fuer showcase entweder 'border' oder 'background'

*/


#aufklapp-1,
.showcase-1 {
    margin-left: 0px; }

#aufklapp-2,
.showcase-2 {
    margin-left: -150px; }

#aufklapp-3,
.showcase-3 {
    margin-left: -300px; }



a img  {
   height: 50px;
   width: 100px;  }

.menu span {display: none}

.menu span:target {
   display: block; 
   max-width: 900px;
   min-width: 600px;
   padding: 11px;
   background-color: lemonchiffon;
   border: 4px red solid; 
}

</style>




<!--[if IE]>
/* ab hier workaround fuer die IEs */
   <style type="text/css"> 

	a:active .showcase_zu,
	a:focus .showcase_zu {  }
	
	
	a .showcase,
	a:hover .showcase {
	   display: none;
	   max-width: 900px;
      min-width: 600px; }
	
	a:active .showcase,
	a:focus .showcase {
	   display: block;	  
	   padding: 11px;
	   background-color: lemonchiffon;
	   border: 4px blue solid;
		}
    </style>
<![endif]-->	





</head>

<body>
<!-- CCs für alle IEs -->
<!--[if IE]> Ich bin ein IE <![endif]-->

<!-- CCs für alle Nicht-IEs -->
<!--[if !IE]><!--> Wir sind die guten Browser <!--<![endif]-->




<ul class="menu">

   <li><a href="#aufklapp-1"><img src="http://www.visreal-online.de/images/categories/deutschland_visreal.gif" alt="deutsch">
       <!--[if !IE]><!--> <span id="aufklapp-1" class="showcase"> <!--<![endif]-->
       <!--[if IE]> <span     class="showcase showcase-1"> <![endif]-->
                 <p>   Dies ist ein Blindtext. 
            Dieser Text ist nicht daf&uuml;r vorgesehen, den Betrachter in die
            Welt der Dunkelheit zu f&uuml;hren, sondern daf&uuml;r, einfach etwas
            Leeres mit etwas Inhaltlosem zu f&uuml;llen. </p>
        </span></a></li>


 <li><a href="#aufklapp-2"><img src="http://www.visreal-online.de/images/categories/europa_kat_bild.gif" alt="franzoesisch">
       <!--[if !IE]><!--> <span id="aufklapp-2" class="showcase"> <!--<![endif]-->
       <!--[if IE]> <span     class="showcase  showcase-2"> <![endif]-->
                 <p>Anderer Text f&uuml;r Seite 2. </p>
        </span></a></li>


   <li><a href="#aufklapp-3"><img src="http://www.visreal-online.de/images/categories/kat_flag_s-h.gif" alt="englisch">
       <!--[if !IE]><!--> <span id="aufklapp-3" class="showcase"> <!--<![endif]-->
       <!--[if IE]> <span     class="showcase  showcase-3"> <![endif]-->
                 <p>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>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
            molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
            eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
            zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
            dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </span></a></li>
		
		

</ul>

<br style="clear: both">

<p>hier steht noch mehr text</p>
<p>hier steht noch mehr text</p>
<p>noch ein anderer text</p>
<p>noch ein anderer text</p>
<p>last text</p>


</body>
</html>

Aber die Sache mit der Maximalbreite kriege ich immer noch nicht in den Griff und habe auch echt keine Idee mehr dazu.

Gruß

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Design zu CSS/HTML verarbeiten - Problem häufen sich.	Grafikamateur	CSS	2	06.08.2007 09:57
Problem mit WordPress und dem Bilder Upload	Maxefix	Serveradministration und serverseitige Scripte	0	19.12.2006 14:58
Problem bei Div's - zwei mal das gleiche und doch nicht ...	Niriel	CSS	10	09.06.2005 17:39
Problem mit einem CSS Layout	nARC	CSS	20	21.05.2005 06:28
Problem mit Background-Color im FireFox	to.ni	CSS	2	31.08.2004 11:13