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

Tabellen Zelle von unten nach oben füllen

Werbung:
Bitte erklär dich mal deutlicher. Von unten nach oben? Was? Farbverlauf, Animation?
 
Werbung:
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)
 
Werbung:
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 ?
 
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 ;)
 
Werbung:
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.
 
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
 
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... ;)
 
Werbung:
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
 

Anhänge

  • screen_1.PNG
    screen_1.PNG
    1,3 KB · Aufrufe: 8
damit kann man doch arbeiten :p

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 ;)
 
Zuletzt bearbeitet:
damit kann man doch arbeiten :p

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:
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>
 
Werbung:
Versuchs mal so:

HTML:
<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>
 
Zurück
Oben