התחבר | הרשמה | שאלות נפוצות
Anonymous

Easy Question I need help with...

+ פרסם תגובה

2 הודעות עמוד 1 מתוך 1


Easy Question I need help with...

על ידי chadchadders » ג' ינואר 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>
סמל אישי של המשתמש

chadchadders

  • הודעות: 1
  • הצטרף: ג' ינואר 09, 2018 4:16 pm

Re: Easy Question I need help with...

על ידי pavithra.ramesh » ג' פברואר 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.

קוד: בחר הכל
<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>
סמל אישי של המשתמש

pavithra.ramesh

  • הודעות: 9
  • הצטרף: ג' פברואר 06, 2018 10:50 am


+ פרסם תגובה

עמוד 1 מתוך 1