Tabellen Zelle von unten nach oben füllen

[max1761995]

Hallo zusammen,
ich möchte gerne eine tabelle zelle (<td>) von unten nach oben rot färben.
Wie macht man das?
mfg
Max

 

[pax]

Bitte erklär dich mal deutlicher. Von unten nach oben? Was? Farbverlauf, Animation?

 

[max1761995]

eine animation, dass sich der "kasten", langsam von schwarz auf rot färbt, und das von unten nach oben...

 

[Flemli200]

Was genau meinst du mit Kasten?
Die border der Tabelle?
Die einzelnen Felder?

 

[max1761995]

das "<td>"

 

[Flemli200]

ich weiß nicht genau, ob das mit CSS möglich ist.
Allerdings kannst du - für alle, welche JS aktiviert haben - die Funktion mit Jquery recht easy umsetzen.

var table = $("table tr");
var anzahl_td = $("td", table).length;
for(i=anzahl_td; i == 0; i--){
$("td", table).animate({backgroundColor: "red"});
}

habs nicht getestet... aber theoretisch könnte das so klappen ;)
(bin mir mit dem count der tds nicht ganz sicher)

 

[max1761995]

ich weiß nicht genau, ob das mit CSS möglich ist.
Allerdings kannst du - für alle, welche JS aktiviert haben - die Funktion mit Jquery recht easy umsetzen.

var table = $("table tr");
var anzahl_td = $("td", table).length;
for(i=anzahl_td; i == 0; i--){
$("td", table).animate({backgroundColor: "red"});
}

habs nicht getestet... aber theoretisch könnte das so klappen ;)
(bin mir mit dem count der tds nicht ganz sicher)

dies färbt es langsam ein, ich möchte jedoch, dass die farbe konstant die gleiche sichtbarkeit hat und von unten reinfliesst
hat noch jemand eine vorschlag ?

 

[szapi]

Suchst du diese Funktion? Allerdings im IE erst ab Version 10:

http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder/linear-gradient()

 

[Flemli200]

Naja... so wie ich ihn verstanden habe, möchte er td für td von unten nach oben in rot einfaden.
Kein Verlauf, sondern einfach einen nach dem anderen aktivieren.

Mit einer kleinen Anpassung meines Codes würde das auch einfach funktionieren.

Interessant wäre vllt noch warum? Also... wofür er die Funktion braucht ;)

 

[scbawik]

Naja... so wie ich ihn verstanden habe, möchte er td für td von unten nach oben in rot einfaden.
Kein Verlauf, sondern einfach einen nach dem anderen aktivieren.

Mit einer kleinen Anpassung meines Codes würde das auch einfach funktionieren.

Interessant wäre vllt noch warum? Also... wofür er die Funktion braucht ;)

Ich verstehe es eher wie eine Progress bar.
zB ein Child (background: red) mit height 0% - 100%

Aber wenn überhaupt schon von Tabellen die Rede ist, mag ich keine konkrete Lösung abgeben.

 

[max1761995]

Naja... so wie ich ihn verstanden habe, möchte er td für td von unten nach oben in rot einfaden.
Kein Verlauf, sondern einfach einen nach dem anderen aktivieren.

Mit einer kleinen Anpassung meines Codes würde das auch einfach funktionieren.

Interessant wäre vllt noch warum? Also... wofür er die Funktion braucht ;)

es geht um ein menu, das ich nachbauen muss

besser mit einer liste lösen ?

es geht nur jeweils um 1 td

 

[Flemli200]

Kannst du uns nähere Informationen zu dem Thema geben.
Vllt ein Screenshot von dem was du nachbauen sollst/musst?
Menüs würde ich immer mit einer Liste lösen... ;)

 

[max1761995]

Kannst du uns nähere Informationen zu dem Thema geben.
Vllt ein Screenshot von dem was du nachbauen sollst/musst?
Menüs würde ich immer mit einer Liste lösen... ;)

so siehts aus , wie im anhang,
jetz soll die farbe bei hover die im moment im border ist, die ganze fläche einnehmen. (aber stück für stück, wie ein slider)

wie mache ich das?
mfg

 

[Flemli200]

damit kann man doch arbeiten

CSS:
a{
display:inline-block;
background:#e4e4e4;
position:relative;
padding:2px 5px;
border-bottom: 2px solid red;
text-decoration: none;
color: #000;
}
a>span{
position:relative;
}

a::before{
content:'';
background:red;
position:absolute;
left:0;
bottom:0;
width:100%;
height:0%;
-webkit-transition:height .3s ease-out;
}
a:hover::before{
height:100%;
}

HTML:
<a href="#"><span>LinkTitel</span></a>


Sollte so funzen ;)

 

[max1761995]

damit kann man doch arbeiten

CSS:
a{
display:inline-block;
background:#e4e4e4;
position:relative;
padding:2px 5px;
border-bottom: 2px solid red;
text-decoration: none;
color: #000;
}
a>span{
position:relative;
}

a::before{
content:'';
background:red;
position:absolute;
left:0;
bottom:0;
width:100%;
height:0%;
-webkit-transition:height .3s ease-out;
}
a:hover::before{
height:100%;
}

HTML:
<a href="#"><span>LinkTitel</span></a>


Sollte so funzen ;)

funktioniert mit der bewegung, jedoch nimmt es den ganzen bildschirm ein ..

mein code:

<style type="text/css">
#list_one{
    width: 95%;

}
#list_one li{
    list-style: none;
    display: inline;
}

li>span{
    /*position: relative;*/
}

#list_one li::before{
    content:'';
    background:red;
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:0%;
    -webkit-transition:height .3s ease-out;
}
#list_one li:hover::before{
    height:100%;
}

#home_point{
    background-color: #001155 ;
    color: white;
    padding: 10px;
    border-bottom: 4px solid #001155;
}
#mng_point{
    border-bottom: 4px solid #d25f3e;

}

#tech_point{
    border-bottom: 4px solid #6ac087;
}

#tech_point:hover{
    color: white;

}

.other_point{
    background-color: #f0f0f0;
    padding: 10px;
    margin-left: 5px;
}


</style>
<ul id="list_one">
        <li id="home_point">
            Home
        </li>
        <li id="mng_point" class="other_point">
            <span>test</span>
        </li>
        <li id="tech_point"class="other_point">
            test
        </li>
        <li class="other_point">
            test
        </li>
        <li class="other_point">
            test
        </li>
        <li class="other_point">
            test
        </li>
        <li class="other_point">
            test
        </li>
    </ul>

 

[Flemli200]

Versuchs mal so:

<style type="text/css">
#list_one{
    width: 95%;
}
#list_one li{
    list-style: none;
    display: inline;
}
<!--/* Link */-->
a{
    display:inline-block;
    background:#f0f0f0;
    position:relative;
    padding: 10px;
    text-decoration: none;
    color: #000;
}
a>span{
    position:relative;
}

<!--/* Element 1 */-->
#tech_point > a{
    border-bottom: 4px solid #6ac087;
}
#tech_point > a::before{
    content:        '';
    background:        #6ac087;
    position:        absolute;
    left:            0;
    bottom:            0;
    width:            100%;
    height:            0%;
    -webkit-transition:height .3s ease-out;
}
#tech_point > a:hover::before{
    height:            100%;
}

<!--/* Element 2 */-->
#mng_point > a{
    border-bottom:     4px solid #d25f3e;
}
#mng_point > a::before{
    content:        '';
    background:        #d25f3e;
    position:        absolute;
    left:            0;
    bottom:            0;
    width:            100%;
    height:            0%;
    -webkit-transition:height .3s ease-out;
}
#mng_point > a:hover::before{
    height:            100%;
}
<!--/* sonstige Elemente */-->
#home_point{
    background-color: #001155 ;
    color: white;
    padding: 10px;
    border-bottom: 4px solid #001155;
}
<!--/* Class */-->
.other_point{
    margin-left: 5px;
}
</style>
<ul id="list_one">
        <li id="home_point">
            Home
        </li>
        <li id="mng_point" class="other_point">
            <a href="?"><span>Marketing</span></a>
        </li>
        <li id="tech_point" class="other_point">           
            <a href="?"><span>Test</span></a>
        </li>
        <li class="other_point">
            Bürokratie
        </li>
        <li class="other_point">
            Marketing
        </li>
        <li class="other_point">
            Finanzen
        </li>
        <li class="other_point">
            Gründung
        </li>
    </ul>

 

[max1761995]

hat funktioniert