Avatar billede jonasclub-p Nybegynder
23. juli 2012 - 12:46 Der er 16 kommentarer og
1 løsning

Skift tekstfarve og baggrundsfarve når musen køre over (CSS)

Hej eksperter

Jeg er relativ ny i CSS og sidder med nogle problemer. Jeg har lavet denne side http://www.murermester-henriksen.dk/Test/

Der er to "bokse" på siden. Hver boks indeholder et billede, en stor tekst og en brød tekst. Jeg har lavet hver boks ved at oprettet et div tag som indeholder tre andre div tag. Du kan se den komplette html fil ved at se kilde koden på siden. Det er intentionen at der skal oplistes en masse bokse under hinanden (som hver indeholder billede, en stor tekst og en brød tekst)

Mit problem:
Side skal virke på følgende måde: Når man køre musen henover en af boksene skal baggrunde skrift til en blå farve og teksten skal skifte til hvid farve. Lige nu virker det med at baggrundsfarven skifter til blå men teksterne vil ikke skifte til grøn. Hvad er det jeg gør galt og hvordan skal min CSS fil se ud. Herunder er den CSS vil jeg bruger

Det skal pointeres at problemet IKKE må løses med JavaScript.






.Group
{
  overflow: auto; 
  margin: 15px auto 15px auto;
  padding-bottom: 15px;
  width: 950px;
  border: 1px solid #b2aaa4;
}

.Header
{
    overflow: auto;
    width: 950px;
    border-bottom: 1px solid #b2aaa4;
    font-family: Kulturista SemiBold;
    font-style: normal;
    font-size: 18px;
    text-align: center;
    padding: 5px 0px 5px 0px;
    background-color: #e6e2df;
    color: #b2aaa4;
}

.Box
{
    width: 920px;
    min-height: 158px;
    overflow: auto;
    margin: 15px auto 0px auto;
    border: 1px solid #b2aaa4;
    font-family: Kulturista SemiBold;
    font-style: normal;
    font-size: 12px; 
    background-color: #e6e2df;
}

.BoxPicture
{
    float: left;
    width: 254px;
    height: 126px;
    margin-top: 15px;
    margin-left: 15px;
    border: 1px solid #b2aaa4;
}

.BoxText
{
    float : left;
    width: 617px;
    height: auto;
    margin-top: 15px;
    margin-left: 15px;
    font-family: Kulturista;
    font-style: normal;
    font-size: 18px; 
    padding: 0px 0px 0px 0px;
    color: #b2aaa4;
}

.BoxDescriptionText
{
    color: #b2aaa4;
    float : left;
    width: 617px;
    height: auto;
    margin-left: 15px;
    font-family: Kulturista;
    font-style: normal;
    font-size: 12px; 
}


.Box:hover
{
    background-color: #0054f2 ;
    color: Green; 
}
Avatar billede keysersoze Guru
23. juli 2012 - 13:15 #1
color på BoxDescriptionText overskriver hvad du sætter på Box - så flyt farven ud på netop Box i stedet for både BoxDescriptionText og BoxText
Avatar billede jonasclub-p Nybegynder
23. juli 2012 - 13:41 #2
Mange tak for det. Du får pointene.

Jeg har lige et ekstra lille spørgsmål jeg håber du vil svare på.

Jeg vil gerne lave hele min box til et link. Forstået på den måde at lige meget hvor man trykker på en af boksene så bliver man sendt til en hjemmeside. Jeg har prøvet at gøre dette ved at ligge hele min div boks ind i et "a href" tag. Det virker også problemet er bare at der kommer en blå kandt rundt om billedet i boksen. Hvordan fjerner jeg denne kant og hvor skal jeg placerer det kode der fjerner denne blå kant om billedet
Avatar billede htx98i17 Professor
23. juli 2012 - 14:55 #3
Border: 0px;
Avatar billede keysersoze Guru
23. juli 2012 - 15:51 #4
Mere præcist

a img
{
  border: 0;
}

Noget helt andet er så at medmindre du laver HTML5 så er et block-element, altså din div, ikke tilladt inden i a-elementet.
Avatar billede olebole Juniormester
23. juli 2012 - 16:43 #5
<ole>

#4: Det er heller ikke tilladt i HTML5.

I linjen:

font-family: Kulturista SemiBold;

- skal der apostroffer rundt om skriftnavnet - og så bør der angives flere skrifte. Der er mange brugere, som ikke har den skrift installeret

/mvh
</bole>
Avatar billede keysersoze Guru
23. juli 2012 - 16:56 #6
#5: kan du henvise til hvor det står angivet - modsat ved HTML4 kan jeg ikke umiddelbart finde skrevet at det skulle være ulovligt ligesom validator.w3.org heller ikke melder fejl som når en HTML4 DOCTYPE angives?
Avatar billede olebole Juniormester
23. juli 2012 - 17:39 #7
Jo, validatoren melder fejl ved både HTML4.01 og HTML5  =)
Avatar billede olebole Juniormester
23. juli 2012 - 17:43 #8
Sorry, my bad (eller W3C's)! Andre inline elementer må ikke indeholde et block element i HTML5 - et A element må åbenbart gerne. Måske, det er blevet gjort til et inline-block element(?)
Avatar billede olebole Juniormester
23. juli 2012 - 17:51 #9
Hmmm ... content modellen er lavet om på dette felt. Man påstår, det er en forenkling, men udfra hvad jeg indtil nu har læst, virker det som et tibageskridt - på flere områder med sparsom logik  :o|
Avatar billede keysersoze Guru
23. juli 2012 - 17:55 #10
Jeg går ud fra at validatoren alligevel ikke meldte fejl?

well - man kan vel vende det om og sige, at når du bare kan lægge et inline-element ind i A og style det til at være block kan man lige så godt tillade block fra start. Men ellers er jeg enig :)
Avatar billede jonasclub-p Nybegynder
23. juli 2012 - 20:35 #11
Mange tak for alle kommentarerne

I skriver at det jeg har gjort er "ulovligt". Hvordan skal min kode se ud hvis jeg gerne vil have min boks med de tre div elementer til at fungere som et link når man trykker et vilkårligt sted på boksen.

Det skal fungere på den måde at lige meget hvor jeg trykke på boksen skal den sende en videre til en hjemmeside adresse.

Hvordan skal koden se ud og skal selve "link funktionaliteten" laves i HTML filen (som jeg har gjort nu) eller i CSS filen ??
Avatar billede olebole Juniormester
23. juli 2012 - 20:37 #12
Jo, det gjorde den, hvorfor jeg skrev, som jeg gjorde. Jeg testede dog ikke med et A, men med et SPAN. Det giver fejl, men det gør et A element ikke.

Nej, det er to fundamentalt forskellige koncepter. Det ene handler om, hvad HTML-parseren skal forvente at møde - det andet om styling med CSS. Det giver faktisk helt god mening, at der er forskel på de to, men W3C's argument er, at det er for svært at lære/overskue. Det er desværre ikke altid højeste fællesnævner, der vinder  =)
Avatar billede olebole Juniormester
23. juli 2012 - 20:37 #13
#12 var svar på #11  =)
Avatar billede olebole Juniormester
23. juli 2012 - 20:38 #14
Vrøvl! #12 var svar på #10!  :D
Avatar billede htx98i17 Professor
23. juli 2012 - 21:10 #15
#11
Du skal prøve at læse følgende og så kan du lave det du spørger om
http://w3schools.com/css/css_navbar.asp
Avatar billede jonasclub-p Nybegynder
23. juli 2012 - 23:13 #16
htx98i17 - De eksempler der er nævnt i dit link vedr. menuer opbygget af UL-tag og LI-tag. I mit tilfælde skal jeg omkranse 4 DIV-tag og få dem til at virke som et link så problemstillingen er lidt noget andet.

Er det ikke rigtigt forstået ?
Avatar billede olebole Juniormester
23. juli 2012 - 23:28 #17
Det er (som sædvsnligt med w3schools.com) en misforståelse at bruge float til det formål. Det bør løses med display:inline-block i stedet. Property'en float er derimod helt fin, når der skal laves tekstomløb omkring et billede
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester