Reiter in Karteikarten - Verbindung mit Inhalt

conny_r

Hallo zusammen,

ich möchte gerne Reiter in Karteikartenoptik erstellen.
Vom Prinzip her wie hier: http://www.concona.de/shop/side-by-side/weinlicht.htm

Leider weiß ich nicht genau, wie dies in html umzusetzen ist.

Ein paar Anregungen zu den stylesheets habe ich im Netz gefunden - aber es hat leider noch nicht richtig geklappt. Speziell die Verbindung mit dem Inhalt.

Es mit Frames zu lösen geht glaub nicht. Da dieser Part in eine Artikelansicht in einem shop eingebunden werden soll. Ich habe also genau ein html Feld um alles einzugeben.

Danke schon mal für eure Hilfe

Grüße
Conny

synaptic

naja genau genommen is des ne kombination aus mehreren divs, die alle die gleiche position haben und nem javascript, was für das einblenden sorgt..
ich hatte des mal gecodet, aber die file net mehr gefunden...

wo liegen denn genau deine probleme? was haste bisher hinbekommen?

conny_r

Guten Morgen,

also ich habe bisher hinbekommen, dass die Reiter oben in der Karteikartenoptik da sind.
Aber was überhaupt nicht geklappt hat, dass wenn man auf Reiter 1 klickt, der Text von Reiter 1 kommt und wenn man auf Reiter 2 klickt, dass dann eben der Text von 2 kommt.
also ich weiß auch gar nicht, wie oder mit welchem Befehl ich den Text von Reiter 1 und 2 eingebe....????????
Wäre toll, wenn du mir helfen könntest - habe schon soooo viel nun im netz gesucht

Grüße

sejuma

Sieh mal, ob dir diese Anleitung weiterhilft.

synaptic

conny gib mal an quelltext, was du bisher hast..
und es geht doch um karteireiter?? oder gehts um nen menü, wie sejuma verlinkt hat?

synaptic

doppelpost zur kenntlichmachung neuer informationen...

da es einfacher is auf fix was neues zu schrieben als sich durch fremden code zu wühlen.. hier mal ein basis-beispiel.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de">
<head>
<title></title>
<style type="text/css">
#reiterWrap{
    height:30px;
    width:590px;
    border: 1px solid black;
    padding-left:10px;
    margin-left:35px;
}
.karteiReiter{
    float:left;
    width:135px;
    height:20px;
    margin: 5px 10px 5px 0;
    text-align:center;
    border: 1px dotted #990000;
}


#kartenWrap{
    border:1px solid green;
    width:800px;
    height:450px;
}
.karte{
    position:absolute;
    width:750px;
    height:400px;
    margin:25px;
    border: 1px dashed blue;
    background:#fff;
    z-index:0;
}
.active{
    z-index:1;
}


.clear{
    clear:both;
}


</style>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>


<script type="text/javascript">
    function setActive(obj){
        $('.active').removeClass('active');
        obj.addClass('active');
    }
    function getKarte(obj){
        var objID = obj.attr('id')+"";
        var number = parseInt(objID);
        setActive($('#karte'+number));
    }

    $(document).ready(function(){
        $('.karteiReiter').click(function(){
            getKarte($(this));
        });
    });
</script>


<body>
    <div id="reiterWrap">
        <div class="karteiReiter" id="1reiter"><a href="javascript:void(0);">testlink1</a></div>
        <div class="karteiReiter" id="2reiter"><a href="javascript:void(0);">testlink2</a></div>
        <div class="karteiReiter" id="3reiter"><a href="javascript:void(0);">testlink3</a></div>
        <div class="karteiReiter" id="4reiter"><a href="javascript:void(0);">testlink4</a></div>
    </div>
    <div id="kartenWrap">
        <div class="karte active" id="karte1">karte 1</div>
        <div class="karte" id="karte2">karte 2</div>
        <div class="karte" id="karte3">karte 3</div>
        <div class="karte" id="karte4">karte 4</div>
    </div>
</body>
</html>

Alles anzeigen

conny_r

Super - danke dir. Das probiere ich später gleich aus....

Wirklich 1000 Dank
conny

conny_r

Du hast mir echt super geholfen. Das Layout sieht nun schon richtig gut aus.

2 Fragen habe ich allerdings noch:

Wie kann ich ändern, dass die Schrift oben in den Reitern nicht unterstrichen ist?
mit text-decoration:none geht es leider nicht

und wie kann ich den aktiven Reiter oben farblich kennzeichnen?
also entweder die Schrift in einer anderen Farbe oder den Hintergrund anders farbig?

danke & viele grüße
conny

synaptic

Code

.karteiReiter a{
text-decoration:none; 
}

sollte fruchten

und

für deine zweie frage müssteste ne neue klasse machen die den aktioven zustand bringt und dann das script anpassen..

schreib ma hier die styles für den aktiven reiter hin, dann schau ich mal ob ich das heute abend hinbekomme oder evtl über den tag verteilt

conny_r

jup... fruchtet, supi... :):) Danke

Bei dem aktiven Reiterchen sollte das Reiterchen selbst oben (also nicht die ganze Karte) einfach mit grauem Hintergrund sein:
background-color:#808080

Der Rest (Reiter) im vom Layout so - weiß nicht ob das wichtig ist...
#reiterWrap{
height:25px;
width:720px;
border:0px solid gray #808080;
border-bottom:0px solid gray #808080;
padding-left:0px;
padding-top: 0px;
margin-left:0px;
color:#808080;
font-size:10pt;
font-family:arial,verdana, sans-serif;
line-height:1.5;
font-weight:lighter;
word-spacing:0.5em;
}
.karteiReiter{
float:left;
width:150px;
height:25px;
margin: 0px 3px 0px 0px;
text-align:left;
border: 1px dashed gray #808080;
padding-left:10px;
border-bottom:0px

Ich danke dir
conny

conny_r

upsss.... Denkfehler...
alles im gleichen grau gibt ja ne schöne graue Suppe und der Reitername ist gar nicht mehr zu lesen... na sehr clever von mir...

viell. lieber so:
background-color:#E0E0E0
color:#494949;
font-size:10pt;
font-family:arial,verdana, sans-serif;
line-height:1.5;
font-weight:lighter;
word-spacing:0.5em

dann müsste der Hintergrund hellgrau sein, Schrift dunkelgrau

grüße
conny

synaptic

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de">
<head>
<title></title>
<style type="text/css">
#reiterWrap{
    height:25px;
    width:720px;
    border:0px solid gray #808080;
    border-bottom:0px solid gray #808080;
    padding-left:0px;
    padding-top: 0px;
    margin-left:0px;
    color:#808080;
    font-size:10pt;
    font-family:arial,verdana, sans-serif;
    line-height:1.5;
    font-weight:lighter;
    word-spacing:0.5em;
}
.karteiReiter{
    float:left;
    width:150px;
    height:25px;
    margin: 0px 3px 0px 0px;
    text-align:left;
    border: 1px dashed gray #808080;
    padding-left:10px;
    border-bottom:0px
}


#kartenWrap{
    border:1px solid green;
    width:800px;
    height:450px;
}
.karte{
    position:absolute;
    width:750px;
    height:400px;
    margin:25px;
    border: 1px dashed blue;
    background:#fff;
    z-index:0;
}
.activeReiter{
    background-color:#808080;
}
.active{
    z-index:1;
}


.clear{
    clear:both;
}


</style>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>


<script type="text/javascript">
    function setActive(obj){
        $('.active').removeClass('active');
        $('.activeReiter').removeClass('activeReiter');
        obj.addClass('active');
    }
    function getKarte(obj){
        var objID = obj.attr('id')+"";

        var number = parseInt(objID);
        setActive($('#karte'+number));
        obj.addClass('activeReiter');
    }

    $(document).ready(function(){
        $('.karteiReiter').click(function(){
            getKarte($(this));
        });
    });
</script>


<body>
    <div id="reiterWrap">
        <div class="karteiReiter" id="1reiter"><a href="javascript:void(0);">testlink1</a></div>
        <div class="karteiReiter" id="2reiter"><a href="javascript:void(0);">testlink2</a></div>
        <div class="karteiReiter" id="3reiter"><a href="javascript:void(0);">testlink3</a></div>
        <div class="karteiReiter" id="4reiter"><a href="javascript:void(0);">testlink4</a></div>
    </div>
    <div id="kartenWrap">
        <div class="karte active" id="karte1">karte 1</div>
        <div class="karte" id="karte2">karte 2</div>
        <div class="karte" id="karte3">karte 3</div>
        <div class="karte" id="karte4">karte 4</div>
    </div>
</body>
</html>

Alles anzeigen

so sollte es klappen...

conny_r

wow, du bist ja turbo schnell
klappt super so
danke

:):)

synaptic

öhh nee ich war zufällig kurz nach dir hier.. bin eben erst nach hause gekommen und wusste ja was zu tun is, aber lieber code ich sowas auf fix, statt ewig zu erklären was wo genau mit welchen parametern aufgerufen wird
hab halt nur keine zeit mich lange mit so dingern zu beschäftigen.. als am stück, sowas mach ich immer nur in kleineren pausen übern tag verteilt

aber freut mich, dass du zufrieden bist

conny_r

Hey,

funktioniert alles super - echt klasse.

Habe noch eine Frage:
geht es, dass der erste Reiter oben immer gleich schon grau hinterlegt ist?
also nicht erst durch anklicken?
irgendwie als default wert beim öffnen?

Danke
Conny

synaptic

ja klar, gib dem ersten reiter einfach mal das hier:

class="karteiReiter activeReiter"

conny_r

cool!!!!!!!!!!!! Perfekt

synaptic

nichts zu danken, ich freu mich, wenn ich freundlichen menschen helfen kann

Tags