• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mein CSS Code macht mir zu schaffen.

Status
Für weitere Antworten geschlossen.
E

erhankarakoc

Neues Mitglied
Hallo liebe Freunde.
Ich habe diese Datei runtergeldaen:

http://www.neusser-marktplatz.de/nema_scripts/download-counter/count.php?id=5

Das ist einTabulator. Ich wollte nun, dass die Hintergrundfarben der Tabs so sind wie ich es will.

Mein Ziel war es, wenn Tab aktiv ist, dann soll #f2f2f2 als hintergrund sein.
Wenn ich über etwas inaktives hoover'e, dann soll dessen hintergrund #627AAD sein. Und die schrift weiss. Ansonsten die graue schrift. Und ein Tab im Hintergrund einfach weiss.
Ich hab jede Kombination ausprobiert. Aber schaffe es irgendwie nicht :(
Kann mir da einer helfen??

Code: 
.ispmenu {
    background-color: #ffffff;
    color: #333333;
    height: 24px;
    width: 850px;
}
.ispmenu ul {
    MARGIN: 0px 0px 0px 0px;
    PADDING: 0px 0px 0px 0px;
    list-style: none;
    text-align: left;

}
.ispmenu li {
    MARGIN: 0px 2px 0px 0px;
    PADDING: 0px 0px 0px 0px;
    float: left;
    line-height: 24px;


}
.ispmenu li a {
    color: #333333;
    text-decoration: none;
    MARGIN: 0px 0px 0px 0px;
    padding: 4px 5px 6px 5px;
    border-left: 1px solid #aab2bc;
    border-right: 1px solid #aab2bc;
    border-top: 1px solid #aab2bc;

    
}
.ispmenu li a:hover {
    border-left: 1px solid #aab2bc;
    border-right: 1px solid #aab2bc;
    border-top: 1px solid #aab2bc;
    background-color: #627AAD;
    color: #FFFFFF;
    position: relative;
}
.ispmenu li a.tabactive {
    border-left: 1px solid #aab2bc;
    border-right: 1px solid #aab2bc;
    border-top: 1px solid #aab2bc;
    background-color: #f2f2f2;
    position: relative;
}
.ispmenu li a.tabinactive {
    color: #333333;
    text-decoration: none;
    MARGIN: 0px 0px 0px 0px;
    padding: 4px 5px 6px 5px;
    border-left: 1px solid #aab2bc;
    border-right: 1px solid #aab2bc;
    border-top: 1px solid #aab2bc;
    background-color: #ffffff;

}
.isptab{
    BORDER-RIGHT: #aab2bc 1px solid;
    BORDER-BOTTOM: #aab2bc 1px solid;
    BORDER-LEFT: #aab2bc 1px solid;
    width: 829px;
    text-align: left;
    padding: 20px 0px;
    font-size: 12px;
    margin-bottom: 5px;
    background-color: #f2f2f2;
    position: absolute;
    display: none;
}
.tabon{
    position: absolute;
    display: block;

}
 
Werbung:
versuch es mal mit

Code: 
a:hover { background-color: #627AAD; color: #FFFFFF; }
a:active { background-color:#f2f2f2; }

Gruß
Loon3y
 
Werbung:
Achja, ich hab vergessen, was das eigentlich Problem ist :)
Wenn ich einmal auf die Tabs geklickt hab, funktioniert das hover nicht mehr!
Also wenn ich beim inaktiven tab erst einmal hoover'e, wird es blau.
Hab ich ein Tab gewechselt, also einmal geklickt, funktioniert das blaue nicht mehr?
 
ohne, das ich es mir angeschaut habe...

die breite legst du mit..

width:..px;

fest.


Liebe Grüße
icon12.gif


iplay
 
Werbung:
Danke dir,,
Das wusste ich zwar auch,
Aber wo soll das in CSS einfügen, in meinem Beispiel`?
Es ist ja auch so, dass einige tabs größer, andere kleiner sind,,??
 
CSS-Angaben schreibst Du am besten in ein externes Stylesheet.
Um gleiche Tags mit verschiedenen Bedeutungen zu identifizieren, und um diesen Tags unterschiedliche Eigenscahften zu verpassen, gibt es die Selektoren. So steht z.B. "h1#header span" für ein Element span, das irgendwo unterhalb (im Sinne von innerhalb) eines h1 mit der ID "header" steht. Das würde sich nicht auf ein span außerhalb dieses h1 beziehen und auch nicht innerhalb eines h2 mit der ID "header". Da gibt es zahlreiche Möglichkeiten.
Außerdem kannst Du auch IDs (eindeutige Namen auf einer Seite) und Klassen vergeben, mit deren Hilfe Du die Elemente auseinande rhalten kannst. Eine ID habe ich im Beispiel oben schon vergeben.
 
Danke dir Effchen,,
Ich habe oben einen Link angegeben,, Wenn ihr euch das mal anschaut seht ihr was ich meine,, Ein externer stylesheet ist ja schon vorhanden,,
Ich will speziell in diesem Beispiel die Breite der Tabs eingeben,,?
 
Werbung:
ich persönlich mag mir nicht erst was runterladen.
Hast du den nicht nen besseren link, wo man nichts runterladen muss um das erbenis zu sehen?

Liebe Grüße
icon12.gif


iplay
 
ok, noch mal langsam.
Du hast dir bestimmt das script von der seite gezogen. Richtig?

Wenn ja, ok.

Du willst jetzt, das die Reiter (so heißen die dinger richtig) so breit sind wie das gesamte feld richtig? oder nicht?

Liebe Grüße
icon12.gif


iplay
 
Werbung:
ok. Ich versteht dein problem.
So wie es aussieht bin ich auch zu blöd die breite festzulegen. Ich habe mir auch die datei mal runtergeladen. Aber die wollte nicht das machen, was ich will. Vielleicht gibt es ja noch klügere leute hier (bestimmt :wink:).

Noch mal kurz zur erklärung für andere: Wenn man die namen der Reiter ändert, passen sich die Reiter automatisch an. egal ob man ne breite gibt oder nicht. Frage jetzt, warum?

die css datei ist ja schon da. hier jetzt noch die html datei dazu.


Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html lang="de"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>ISP Tabulator Menu with 1 changing Menu</title>

<meta name="description" content="Tabulator Men&uuml; mit CSS
und Javascript. ISP Tab menu - presented by
www.neusser-marktplatz.de">

<link href="isptab.css" rel="stylesheet" type="text/css" media="screen">

<script type="text/javascript" language="javascript" src="isptab.js"></script>

</head>

<body>

<h2>ISP Tab 1.0 - Example with 1 changing Menu (css and js in external files)</h2>


<!--Start of the ISP Tabmenu1 -->

<div class="ispmenu">

<ul id="tabmenu">

<li><a id="tab1" href="#" onmouseover="isptab('tabmenu','1')">ich bin hier</a></li>

<li><a id="tab2" href="#" onmouseover="isptab('tabmenu','2')">da</a></li>

<li><a id="tab3" href="#" onmouseover="isptab('tabmenu','3')">buh</a></li>

<li><a id="tab4" href="#" class="tabactive" onmouseover="isptab('tabmenu','4')">Tab 4</a></li>

</ul>

</div>

<!--End of the ISP Tabmenu1 -->

<!--Start ISP Tab 1 -->

<div id="tabcontent1" class="isptab">Tab1 <a
href="http://www.neusser-marktplatz.de/">Neusser Marktplatz, die
Online Seite aus Neuss</a></div>

<!--End ISP Tabs 1-->


<!--Start ISP Tab 2-->

<div id="tabcontent2" class="isptab">Tab2 <a
href="http://www.neusser-marktplatz.de/">Neusser Marktplatz, die
Online Seite aus Neuss</a></div>

<!--End ISP Tabs 2 -->



<!--Start ISP Tab 3-->

<div id="tabcontent3" class="isptab">Tab3 <a
href="http://www.neusser-marktplatz.de/">Neusser Marktplatz, die
Online Seite aus Neuss</a></div>

<!--End ISP Tabs 3-->



<!--Start ISP Tab 4-->

<div id="tabcontent4" class="isptab tabon">Tab4 <a
href="http://www.neusser-marktplatz.de/">Neusser Marktplatz, die
Online Seite aus Neuss</a></div>

<!--End ISP Tab 4-->



<br><br><br>



<p>ISP Tab 1.0 ist ein Tabulator Menu in Zusammenspiel von CSS und Javascript.</p>

<p>ISP Tab 1.0 funktioniert nur bei den neueren Browser Generationen </p>

<p>Internet Exploer >= 6,  Netscape 7 und Firefox 2.0</p>



<p>Die Style Anpassung erfolgt im isptab.css File. Hier lassen
sich Farbe, Gr&ouml;&szlig;e und Border entsprechend
einstellen.</p>

<p>Im File isptab.js m&uuml;ssen die Schleifenfunktionen
einsprechen der Tabs und Anzahl der Men&uuml;s angepasst
werden.</p>



<p>Viel Spa&szlig; mit dem kleinen Tabulator Menu Script.</p>

<p>Joachim Patten</p>



</body>

</html>
Es würde mich jetzt auch mal interessieren, wie man die breite festlegen kann, ohne, dass er sich automatisch anpasst.

Liebe Grüße
icon12.gif


iplay
 
Werbung:
<a> ist ein inline-Element.
Mit width kannst du deshalb nichts erreichen.
Wenn du .ispmenu a display:block gibst, kannst du width verwenden.
line-height für <li> kannst du dann entfernen.


Ich würde dieses ein Menü nicht empfehlen.
<li> hat eine feste Höhe in px.
Es sieht deshalb nur in einer bestimmten Schriftgröße gut aus.
 
Danke für deine Antwort ;)
Ein paar Freunde sagten auch, dass das nicht zu empfehlen ist,,
Kann mir jemand ne andere Alternative empfehlen?
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben