max1761995
Neues Mitglied
Hallo zusammen,
ich möchte gerne eine tabelle zelle (<td>) von unten nach oben rot färben.
Wie macht man das?
mfg
Max
ich möchte gerne eine tabelle zelle (<td>) von unten nach oben rot färben.
Wie macht man das?
mfg
Max
Follow along with the video below to see how to install our site as a web app on your home screen.
Anmerkung: This feature currently requires accessing the site using the built-in Safari browser.
dies färbt es langsam ein, ich möchte jedoch, dass die farbe konstant die gleiche sichtbarkeit hat und von unten reinfliesstich 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)
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 mussNaja... 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 ;)
so siehts aus , wie im anhang,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... ;)
funktioniert mit der bewegung, jedoch nimmt es den ganzen bildschirm ein ..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 ;)
<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>
<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>