Tabellenwerte erst sichtbar beim Maus drüberfahren?

3 Antworten

Dein HTML sieht ziemlich zerschossen aus.

  • Der link-Tag gehört in den head
  • Du hast für den link-Tag eine SASS-Datei verlinkt. Aber hast du denn auch ein Tool integriert, welches die Datei für dich in CSS übersetzt? Der Browser übersetzt es so nicht automatisch für dich und der Mimetype wäre an dieser Stelle auch noch falsch, SASS sollte (meines Wissens nach) text/x-sass oder text/x-scss haben.
  • Der body-Tag gehört mitsamt seiner Kindelemente in das html-Tag, welches du zu früh (und zu oft) schließt
  • Der schließende Tag für das caption-Element ist unvollständig

Zu deinem Problem:

Ich stelle an dieser Stelle zwei mögliche Lösungen vor.

a) Du fügst jedes Element, welches initial nicht sichtbar sein soll, in ein span-Tag ein:

<td><span>some text</span></td>

und setzt dessen Sichtbarkeit:

td span { visibility: hidden; }

Über die Pseudoklasse :hover wird der Zustand wieder geändert, so lange die Maus über dem td-Element liegt.

td:hover span { visibility: visible; }

b) Du wechselst die Schriftfarbe:

td { color: transparent; }
td:hover { color: black; }

Ich habe meine Beispiele nun stets auf das td-Element bezogen. Wenn du aber andere Elemente auswählen möchtest, brauchst du ja nur den Selektor etwas zu ändern.

th:hover {
  display: block;
}

In Mitte verschieben (HTML5)?

Hey, ich habe eine Frage!

Ich habe was mit HTML5 und CSS geschrieben und kriege etwas nicht in die Mitte.

HTML5:

<div id="Telefon">

<a align="center" id="Kontaktieren" href="tel:">Kontaktieren sie uns!</a>

</div>

und hier der CSS:

#Kontaktieren {
	display: block;
	margin-top: 1050px;
	width: 200px;
	height: 50px;
	background: #e2e2e2;
	border: 1px solid #e2e2e2;
	border-radius: 5px;
	width: 200px;
	height: 50px;
	color: #222;
	font-family: Arial;
	margin-left: 5px;
	font-size: 20px;
	width: 200px;
	height: 50px;
	line-height: 50px;
}

Kontaktieren:hover {

color: white;
border: 1px solid #222;
border-radius: 5px;
background: #222;
}

Mit padding-left: ...;

margin-left: ...;

align: center;

text-align: center;

funktioniert es nicht?

...zur Frage

Warum funktioniert dieser Code nicht innerhalb eines Containers?

Dieser Code macht einen "frosted-glass-Effekt". Er funktioniert auch super, aber sobald ich den gestylten div container in einen anderen div-container oder zwischen <form>-Elemente lege, funktioniert er nicht mehr, sprich der Effekt geht verloren. An was liegt das?

#headlines {

width: 630px; 
margin-left: 5%; 
text-align: center;
padding-top: 20px; 
border: 0; 
background: inherit; 
position: relative; 
border-radius: 10px; 
float: left; 
overflow: hidden; 
font-family: 'Rajdhani', sans-serif; 
background-color: #DCDCDC; 
font-size: 60px; 
margin-top: 8%; 
height: 110px;    

}



headlines:after {

content: '';
width: 730px;
padding-top: 30px;
position: absolute;
font-family: Arial, Helvetica;
margin-top: 5%;
height: 140px;
background: inherit;
left: -100px;
 left position
 right: 0;
 top: -50px;  
 top position 
 bottom: 0;
box-shadow: inset 0 0 0 200px rgba(255,255,255,0.2);
 filter: blur(10px);
 
}
...zur Frage

Welche Webtechnologie kann ich für mein Projekt nutzen?

Hi ich habe nur grundlegende Kentnisse in HTML CSS und javascript.

Ich will ein Projekt starten das so funzen soll:

Der Benutzer A klickt auf einen Pixel. Der Pixel färbt sich rot. Wenn Benutzer B auf die Website geht dann sieht er den roten Pixel.

Das soll aber serverseitig so programmiert sein, dass da meinetwegen 15.000 Leute parallel Pixel anklicken können. Also was brauche ich da für einen Server und welche Technologie soll ich dafür nutzen? Node.js vllt? Oder HTML5?

...zur Frage

Wie kann ich meine Subnavigation in CSS zentrieren?

Moin! :)

Ich würde gerne meine Subnavigation, die sich am linken Bildrand befindet, zentrieren. Leider klappt das bei mir nicht so wirklich und hoffe, dass mir jemand helfen kann.

Vielen Dank im Vorraus! :)

Mein HTML-Code: https://pastebin.com/e2zyBvyy

body, html {
    background: #F4A460;
    margin: 0;
    padding: 0;
    font-size: 62.5%;
}

div#subnavigation {
    background: #8A4B08;
    position: fixed;
    top: 0;
    width: 166px;
    text-align: center;
    transition: 200ms all;
    height: 100%;
}

div#subnavigation nav#sub {
    display: inline-block;
}

div#subnavigation nav#sub ul {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    position: relative;
    vertical-align: middle;
    transition: all 300ms;
}

div#subnavigation nav#sub ul li {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    position: relative;
    transition: all 300ms;
}

div#subnavigation nav#sub ul li a {
    display: inline-block;
    padding: 2.17rem;
    float: left;
    min-width: 12rem;
    text-align: center;
    font-size: 2rem;
    color: #000000;
    margin: 0 1px 0 0;
    text-decoration: none;
    background: #deb887;
    font-weight: 300;
    transition: all 300ms;
    font-family: 'Source Sans Pro', sans-serif;
    border-bottom: 1px solid #8A4B08;
}

div#subnavigation nav#sub ul li:hover > a {
    background: #FFD39B;
}
...zur Frage

Zeilen,Spalten in einer Tabelle bei HTML einfügen?

Ich habe schon begonnen eine Tabelle zu erstellen, aber bei mir gibt es keine Zeilen und Spalten. Meine HTML-Seite sieht so aus:

 <table>
    <tr>
     <th>Namen</th>
     <th> Zensuren</th>
    </tr>
    <tr>
     <td>E.Schutter </td>
     <td>5+</td>
    </tr>
    <tr>
     <td>D.Schlitter</td>
     <td>3-</td>
     </tr>
     <tr>
      <td>W.Sebastian</td>
      <td>1</td>
      </tr>
   </table>

Könnt ihr mir bitte sagen was ich machen muss, damit die Tabelle Zeilen und Spalten kriegt(Body und head und so habe ich auch drauf).

...zur Frage

Wie kann ich das Bild beim Überfahren mit der Maus ändern?

Hallo liebe Leute,

ich mache momentan ein Praktikum und habe eine Aufgabe bekommen, zu der ich zwar viel gegoogelt, aber leider keine Lösung hinbekommen habe.

Vielleicht könnt ihr mir dabei helfen?

Die Aufgabe lautet:

Beim Überfahren des Frosches mit dem Mauszeiger springt der Frosch auf den Boden. Wenn man auf das Podest klickt, dann sitzt er wieder oben auf seinem Podest.

Der HTML-Code:

<form>
  <div>
    <input id="podest" type="button" value="zurück"/>
  </div>
  <div id="frosch">
    <img alt="" border="0" height="136" src="frosch.png" width="150"/>
  </div>
</form>

Der CSS-Code:

body {
  background-color: white;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 15pt;
  color: green;
}

#frosch {
  position: absolute;
  bottom: 330px;
  left: 200px;
}

#podest {
  position: absolute;
  bottom: 0px;
  left: 200px;
  height: 350px;
  width: 150px;
  background-color: orange;
  color: white;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 20pt;
}

Das soll also mit JavaScript gemacht werden.

Vielen Dank im Voraus!

MfG

...zur Frage

Was möchtest Du wissen?