CSS geeft geen reactie meer ?

[jmignolet]

Hoi,

Moet voor school een website maken over een onderwerp naar keuze. Nu, ik zit te werken met images en ghost buttons. Allemaal goed en wel, het lukt me.

Ik copy paste telkens mijn code, enkel de top veranderde ik om de button lager te houden bij de bijhorende afbeeldingen. De ghost button houdt in " Meer info ".

Tot mijn laatste 2 afbeeldingen. Daar zie ik mijn 2 afbeeldingen mooi naast elkaar hoe ik het wil, maar mijn ghost button geeft geen reactie. Daarmee bedoel ik, ik spreek de juist class aan, maar hij reageert niet. Het blijft een simpele link " Meer info " in het blauw & onderlijnd.

Ik dacht dus even, okay whatever, ik ga even door naar mijn footer ( ik kwam net op het einde van mijn pagina ) en daar wil ik de achtergrondkleur veranderen naar het zwart, en nogmaals, er gebeurt niets.

Wat doe ik verkeerd?

Hieronder stukje code :

HTML:

<section>
<p class="titel_artikel">charme</p><br/>

<p class="info">passie & schoonheid</p>
<img class="firstImage" src="images/charme1.jpg" alt="Fiat 500"/>
<img class="secondImage" src="images/charme2.jpg" alt="Vespa"/>
<table>
<tr>
<td><a class="meerInfo_charme" href="charme.html">MEER INFO</a></td>
</tr>
</table>
</section>

CSS:

.meerInfo_charme{
display: inline-block;
width: 200px;
padding: 8px;
color: #ffffff;
border-width: 1px;
border-style: solid;
border-color: #ffffff;
text-align: center;
outline: none;
text-decoration: none;
position: absolute;
top: 2900px;
margin-left: 350px;
font-family: "Open Sans", "Arial", "Sans-serif";
font-size: 1.5em;
letter-spacing: 3px;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}

.meerInfo_charme:link{
color: white;
background-color: none;
text-decoration: none;
}

.meerInfo_charme:visited{
color:white;
background-color:none;
}

.meerInfo_charme:hover{
color:white;
background-color: #4ca67f;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}

.meerInfo_charme:focus{
color:white;
background-color: #4ca67f;
}

.meerInfo_charme:active{
color:white;
background-color:#4ca67f;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;

Dit is dus exact dezelfde lijnen aan code die ik heb gebruikt voor mijn andere afbeeldingen gekoppeld met de ghost buttons en het werkt. Maar dit niet.. Ik spreek toch mijn class goed aan ?

[posttoast]

Sowieso sluit je je laatste niet af met een }, maar zet je code even tussen code-blokken hier. Dan is het wat beter leesbaar

[jmignolet]

posttoast schreef op zondag 31 mei 2015 @ 10:57:
Sowieso sluit je je laatste niet af met een }, maar zet je code even tussen code-blokken hier. Dan is het wat beter leesbaar

Oei zag ik ook net, maar momenteel verandert het niets.

code:

<section>
<p class="titel_artikel">charme</p><br/>

<p class="info">passie & schoonheid</p>
<img class="firstImage" src="images/charme1.jpg" alt="Fiat 500"/>
<img class="secondImage" src="images/charme2.jpg" alt="Vespa"/>
<table>
<tr>
<td><a class="meerInfo_charme" href="charme.html">MEER INFO</a></td>
</tr>
</table>
</section>

code:

.meerInfo_charme{
display: inline-block;
width: 200px;
padding: 8px;
color: #ffffff;
border-width: 1px;
border-style: solid;
border-color: #ffffff;
text-align: center;
outline: none;
text-decoration: none;
position: absolute;
top: 2900px;
margin-left: 350px;
font-family: "Open Sans", "Arial", "Sans-serif";
font-size: 1.5em;
letter-spacing: 3px;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}

.meerInfo_charme:link{
color: white;
background-color: none;
text-decoration: none;
}

.meerInfo_charme:visited{
color:white;
background-color:none;
}

.meerInfo_charme:hover{
color:white;
background-color: #4ca67f;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}

.meerInfo_charme:focus{
color:white;
background-color: #4ca67f;
}

.meerInfo_charme:active{
color:white;
background-color:#4ca67f;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}

[TI_Observer]

je code is ook niet helemaal dry

[ Voor 61% gewijzigd door TI_Observer op 31-05-2015 11:06 ]

[jmignolet]

sheez88 schreef op zondag 31 mei 2015 @ 11:06:
je code is ook niet dry, en waarom zouden wij jou huiswerk doen? je leert er niets van

Wat bedoel je met dry ?

Ah ja, want als je me even helpt met het onderzoeken van die ENE code, heb je heel mijn huiswerk gemaakt ? Reageert er gewoon niet op als je een nutteloze bijdrage levert.

[Mavamaarten]

Heb je je stylesheet wel gelinkt?
Wat ook wel eens wil helpen is Ctrl + F5, misschien heeft je browser een oude versie van je css in zijn cache.

[ Voor 60% gewijzigd door Mavamaarten op 31-05-2015 11:11 ]

[jmignolet]

Mavamaarten schreef op zondag 31 mei 2015 @ 11:09:
Heb je je stylesheet wel gelinkt?

Jup, aangezien de rest van mijn webpagina opgemaakt zijn via die stylesheet. Het is enkel die laatste lijnen code waarbij hij niets wil opmaken.

En dus ook mijn footer niet die zich onder die lijnen code bevindt.

[TI_Observer]

jmignolet schreef op zondag 31 mei 2015 @ 11:08:
[...]


Wat bedoel je met dry ?

Ah ja, want als je me even helpt met het onderzoeken van die ENE code, heb je heel mijn huiswerk gemaakt ? Reageert er gewoon niet op als je een nutteloze bijdrage levert.

nou mister smartass, je hebt position absolute met een top waarde van 2900px (valt dus buiten de pagina) en zowel je text als border color is white (je kan de button dus alsnog niet zien) en dry betekent Dont Repeat Yourself (zoek dat maar zelf op)

[Hahn]

Ik volg nog steeds niet helemaal wat je probeert te bereiken. En verder zie ik heel veel keer dezelfde kleuren gebruikt worden, waardoor het niet zo gek is dat er niks verandert als je van wit naar wit gaat.

Plus dat je nogal inconsistent bent, ene keer '#ffffff', andere keer 'white', etc.

[jmignolet]

sheez88 schreef op zondag 31 mei 2015 @ 11:14:
[...]


nou mister smartass, je hebt position absolute met een top waarde van 2900px (valt dus buiten de pagina) en zowel je text als border color is white (je kan de button dus alsnog niet zien) en dry betekent Dont Repeat Yourself (zoek dat maar zelf op)

Heb de top-waarde al een paar keer willen veranderen, maar aangezien mijn <a> link niet opgemaakt wordt, zelfs niet met een border rondom maar enkel tekst, onderlijnd in het blauw, maakt mijn top waarde niets uit. Right ?

Het maakt het me niet makkelijk, maar mijn button wordt groen wanneer ik erover gaat, waardoor ik hem wél kan vinden. Maar nogmaals, het maakt niet uit, mijn link wordt niet opgemaakt dus ik heb helemaal geen border.

Bedankt voor de info over dry. Mijn excuses dat dit mijn eerste ervaring is met HTML & CSS.

[TI_Observer]

zal ik het dan maar op een zilveren schaal aan je geven?

code:

.meerInfo_charme{
display: inline-block;
width: 200px;
padding: 8px;
color: red;
border-width: 1px;
border-style: solid;
border-color: red;
text-align: center;
outline: none;
text-decoration: none;
font-family: "Open Sans", "Arial", "Sans-serif";
font-size: 1.5em;
letter-spacing: 3px;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}

.meerInfo_charme:link{
color: green;
background-color: none;
text-decoration: none;
}

.meerInfo_charme:visited{
color:white;
background-color:none;
}

.meerInfo_charme:hover{
color:white;
background-color: #4ca67f;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}

.meerInfo_charme:focus{
color:white;
background-color: #4ca67f;
}

.meerInfo_charme:active{
color:white;
background-color:#4ca67f;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;

En nee, ik heb hem niet dry gemaakt, maar nu zie je de button iig

[ Voor 3% gewijzigd door TI_Observer op 31-05-2015 11:19 ]

[b2vjfvj75gjx7]

https://jsfiddle.net/uhq79ua8/2/

HTML:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <title>foo</title>

<style type="text/css">

.meerInfo_charme{
display: inline-block;
width: 200px;
padding: 8px;
color: #ffffff;
border-width: 1px;
border-style: solid;
border-color: #ffffff;
text-align: center;
outline: none;
text-decoration: none;
margin-left: 350px;
margin-top:25px;
font-family: "Open Sans", "Arial", "Sans-serif";
font-size: 1.5em;
letter-spacing: 3px;
transition: background-color 0.2s ease-out, color 0.2s ease-out;
background:#666;

}

.meerInfo_charme:link{
color: white;
background-color: none;
text-decoration: none;
}

.meerInfo_charme:visited{
color:white;
background-color:none;
}

.meerInfo_charme:hover{
color:white;
background-color: #4ca67f;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}

.meerInfo_charme:focus{
color:white;
background-color: #4ca67f;
}

.meerInfo_charme:active{
color:white;
background-color:#4ca67f;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;}
</style>

</head>

<body style="background:#dadada;">

<section>
<p class="titel_artikel">charme</p><br/>

<p class="info">passie &amp; schoonheid</p>
<img class="firstImage" src="http://lorempixel.com/400/200/" alt="Fiat 500"/>
<img class="secondImage" src="http://lorempixel.com/400/200/" alt="Vespa"/>
<table>
<tr>
<td><a class="meerInfo_charme" href="charme.html">MEER INFO</a></td>
</tr>
</table>
</section>

</body>
</html>

[jmignolet]

sheez88 schreef op zondag 31 mei 2015 @ 11:18:
zal ik het dan maar op een zilveren schaal aan je geven?

code:

code

En nee, ik heb hem niet dry gemaakt, maar nu zie je de button iig

Wel dat is het nu net. Ik heb je code copy paste , maar er verandert niets op mijn webpagina na het refreshen.

Meer info blijft gewoon onder mijn afbeelding & voordoet zich als klassieke link

[jmignolet]

Oké, heb het gevonden ! Toch bedankt voor de hulp ! :-)

[Ramon]

De positie van je button aanpassen dmv top is sowieso niet echt handig. Beter is om gewoon padding/margin te gebruiken om de button relatief aan een bovenliggend element te positioneren.

[drogeworst]

voor tekst in een link die je niet wil laten zien gebruik je text-indent:-9999px

verder schort hier nog wel wat aan. ik kan mij niet voorstellen dat alle browsers hetzelfde resultaat laten zien.