Connexion | Inscription | FAQ
Anonymous

Easy Question I need help with...

+ Publier une réponse

2 messages Page 1 sur 1


Easy Question I need help with...

par chadchadders » Mar Jan 09, 2018 4:19 pm

Hello all - new to HTML and css - why can I not get the "brochure download" text to the right and centre of the little image icon? I'd also like to remove the underline and change the colour and font. Nothing I direct at it using the CSS seems to be working...

Working example below:

<html>
<head>

<style type="text/css">

p.brouchure download {
vertical-align: middle;
text-decoration: none;
font-size: 200%}
</style>
</head>


<body>
<a download="GLV-11.pdf" href="https://drive.google.com/uc?export=download&id=1IzZeCDoRRMRudo3egijFimr6eJaHgMAm">

<img src="https://drive.google.com/uc?export=download&id=1Rh5twX_t1vEQf198L4le5qCzg8KGxfbc"
alt="Brochure Download">

<p class="brochure download"> Brochure Download </p>

</a>

</body>

</html>
Avatar de l’utilisateur

chadchadders

  • Messages: 1
  • Inscrit le: Mar Jan 09, 2018 4:16 pm

Re: Easy Question I need help with...

par pavithra.ramesh » Mar Fév 13, 2018 11:00 am

Hi,

I tried to fix it. You can see it here. https://codepen.io/pavithraramesh/pen/mXwoYR

I put the link insiide a container and gave it a width. Then aligned the image and text inside the container.

If you can't understand how I did this, please let me know. I will explain further.

Regards,

Pavithra Ramesh
Spidergems



The code is here if you don't want to open the pen in the codepen.

Code: Tout sélectionner
<html>
<head>
<style>
div.box{
  padding:10px;
  border: 1px solid #ccc;
  width: 14em;
  text-align:center
}

a {
  text-decoration: none;
  color: #0673C1;
  font: bold 16px arial; 
}
</style>

</head>


<body>
<div class="box">
<a download="GLV-11.pdf" href="https://drive.google.com/uc?export=download&id=1IzZeCDoRRMRudo3egijFimr6eJaHgMAm">

<img src="https://drive.google.com/uc?export=download&id=1Rh5twX_t1vEQf198L4le5qCzg8KGxfbc"
alt="Brochure Download">

<p class="brochure download"> Brochure Download </p>
</a>
 
</div>

</body>

</html>
Avatar de l’utilisateur

pavithra.ramesh

  • Messages: 9
  • Inscrit le: Mar Fév 06, 2018 10:50 am


+ Publier une réponse

Page 1 sur 1