HTML i CSS... jak zrobić prostokąt z napisem?

Dla specjalistów Webmastering
#1

Szukam sposobu… pewnie to banalnie proste.

Jak zrobić aby wysokość czerwonego pola wynosiła np: 40px, a jego szerokość była na 100% dostepnego pola. Na tym prostokącie biały napis, w formie linku.

Pomoże ktoś ?

#2

#3

tekst nie jest wyśrodkowany.

A jak zrobić przy okazji aby najechanie na link powodowało zmianę jego koloru ?

#4

https://www.w3schools.com/cssref/sel_hover.asp
http://www.kurshtml.edu.pl/css/wskazanie_myszka,pseudoklasy.html

https://www.w3schools.com/cssref/pr_text_text-align.asp
http://www.kurshtml.edu.pl/css/wyrownanie,tekst.html

#5

Moja propozycja: definicja stylów

.red-box {
  width: 100%;
  height: 24px;
  padding: 8px 0; 
  background-color: red;
  text-align: center;
}

.red-box a {
  color: #fff; 
  font: bold 16px / 1 'Verdana';
  text-decoration: none;
}

.red-box a:hover {
  opacity: .8;
}
1 polubienie