I need help to make table borders invisible. Already read some other answers to similar questions, but I wasn't able to solve the problem.
This is the code generated by Frontpage 2003:
<html>
<head>
<meta http-equiv="Content-Language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>FOCCoF</title>
</head>
<body bgcolor="#666666"> <center>
<table border="0" bgcolor="#FFFFFF" bordercolorlight="#000000" bordercolordark="#000000" width="991" height="496">
<!-- MSTableType="layout" -->
<tr>
<td height="360" width="981" bgcolor="#000000" valign="top">
<p align="justify">
<img border="0" src="gendat/banner.gif" width="981" height="114"></p>
<p align="justify">
<span style="vertical-align: middle">
<font face="Lucida Console" size="2"><b>
<span style="background-color: #FF0000"> [</span></b><span style="background-color: #FF0000"><a style="color: #000000" href="index.htm"><u>Inicio</u></a><b>]
- [</b><a style="color: #000000" href="p1/p1.htm"><u>Lineamientos</u></a><b>]
- [</b><u><a style="color: #000000" href="p2/p2.htm">Comunicados</a></u><b>]
- [</b><u><a style="color: #000000" href="p3/p3.htm">Documentos</a></u><b>]
- [</b><u><a style="color: #000000" href="p4/p4.htm">Agenda
Antirrepresiva</a></u><b>] - [</b><u><a style="color: #000000" href="p5/p5.htm">Biblioteca</a></u><b>]
- [</b><a style="color: #000000" href="p6/p6.htm">Multimedia</a><b>]</b></span><b><span style="background-color: #FF0000"> <img border="0" src="gendat/fill.gif" width="17" height="10"></span></b></font></span></p>
<p align="center">
<img border="0" src="gendat/foccof.gif" width="530" height="200"></p>
<p align="justify">
<font face="Lucida Console" color="#FFFFFF" size="2">El FOCCoF, Frente
Organizado contra el Código de Faltas, es un frente de organizaciones y
compañerxs no agrupadxs que surge allá por el 2012 como una herramienta
para enfrentar el intento de reforma del Código de Faltas que quería
impulsar el gobierno provincial, presidido por Unión por Córdoba. Si
bien en ese momento el frente nos aglutinaba bajo esa coyuntura
específica, y con un arco amplio de organizaciones del campo popular,
con el correr del tiempo el avance represivo tanto a nivel provincial
como nacional fueron modificando nuestros objetivos y estrategias de
lucha, para llegar a lo que somos hoy.</font></p>
<p align="justify"><font face="Lucida Console" color="#FFFFFF" size="2">
Actualmente al FOCCoF lo vamos construyendo La Brújula Barrial,
Cogollos, el Encuentro de Organizaciones, Cauce en COB La Brecha y Ammar,
junto con compañerxs no agrupadxs. Siempre abierto a todxs aquellas
organizaciones y personas que se quieran sumar a esta lucha que damos
día a día para frenar el avance represivo que vivimos en nuestra
actualidad.</font></p>
<p align="justify">
</p>
</td>
</tr>
</table>
<p align="justify">
<span style="background-color: #666666"> </span><font face="Lucida Console"><b><font size="2"><span style="background-color: #FF0000">[</span></font></b><span style="background-color: #FF0000"><font size="2"><a style="color: #000000" href="py/py.htm"><u>Links</u></a></font><b><font size="2">]</font></b></span></font><span style="background-color: #666666">
</span><font face="Lucida Console"><b><font size="2">
<span style="background-color: #666666"> </span></font></b></font><span style="background-color: #666666">
</span><span style="vertical-align: middle; background-color:#FF0000">
<font face="Lucida Console" size="2"><b>[</b><a style="color: #000000" href="px/px.htm"><u>Contacto</u></a></font></span><span style="vertical-align: middle"><font face="Lucida Console" size="2"><b><span style="background-color: #FF0000">]</span></b></font></span><span style="background-color: #666666">
</span></p>
</center>
<p align="justify"> </p>
</body>
</html>
Thank you very much.
I'm not exactly sure what you mean. But.. If you mean the white 'border', this isn't a border. It's the backgroundcolor of the table.
Just change the table element to:
<table width="991" height="496">
Let me know if this worked out for you.
Related
I'm trying to personalize the reset password email template from firebase.
It should look something like this:
but instead it looks like this:
I've tried with the tag but that didn't work so i individually put the style in ach element, it kinda worked for like one email, but now is completely broken, seems like it isn't reading the flow-direction: column, but seeing it in the browser the styling looks fine, someone knows what is happening?
here is the code i'm puting in the message
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recover Password Email</title>
</head>
<body style="font-family: 'Poppins', sans-serif;box-sizing: border-box;margin: 0;padding: 0;background: #fff; display: flex; flex-direction: column;justify-content: center;align-items: center;height: 100vh;text-align: center;">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;700;800&display=swap" rel="stylesheet">
<img src="https://tutorstripe.netlify.app/image.svg" alt="Fingerprint Icon" style="width: 100%;max-width: 70px;margin: 0 auto;"/>
<h1 style="font-size: 2rem;font-weight: 700;margin: 0;padding: 0;color: #486EFF;margin-top: 1rem;margin-bottom: 1rem;">¡Hola, Lucas!</h1>
<p class="message" style="font-size: 0.75rem;font-weight: 400;padding-left: 8vw;padding-right: 8vw;color: #000;margin-top: 1rem;margin-bottom: 1rem;">
Recibes este correo porque nos notificaron que olvidaste tu contraseña, desafortunadamente nosotros tampoco sabemos cuál es tú contraseña 😵, toda la información sensible que recibimos de ti esta encriptada 🔒 para mantenerte seguro.
<br><br>
Pero no hay de qué preocuparse 😅, para recuperar el acceso a tú cuenta puedes cambiar la contraseña y podrás seguir usando nuestra aplicación de inmediato
</p>
<p class="warning" style="font-size: 0.6rem;font-weight: 500;padding-left: 8vw;padding-right: 8vw;color: #000;margin-top: 1rem;margin-bottom: 1rem;">
🚩 Si tú no solicitaste restablecer tu contraseña puedes ignorar este correo 🚩
</p>
<button onclick="window.open('%LINK%')" style="padding: 0.5rem 2rem;border-radius: 0.25rem;background-color: #486EFF;margin-top: 1rem;margin-bottom: 1rem;cursor: pointer;outline: none;border: none;color: #fff;font-size: 0.9rem;font-family: 'Poppins';font-weight: 600;">
Cambiar contraseña
</button>
<h3 style="font-size: 0.7rem;font-weight: 500;margin: 0;padding: 0;color: #000;margin-top: 1rem;margin-bottom: 1rem;text-decoration: underline;">Attentamente</h3>
<h2 style="font-size: 0.75rem;font-weight: 600;margin: 0;padding: 0;color: #486EFF;margin-top: -0.8rem;margin-bottom: 1rem;">El frutifantástico equipo de Tutor</h2>
<br><br><br>
<div class="footer" style="background: #486EFF;width: 100vw;display: flex;flex-direction: column;justify-content: center;align-items: center;color: #fff;position: fixed;bottom: 0;">
<p class="copyright" style="font-size: 0.6rem;font-weight: 300;margin: 0;padding: 0;color: #fff;margin-top: 1rem;margin-bottom: -1rem;">© 2022 Tutor. Todos los derechos reservados</p>
<h4 style="font-size: 0.8rem;font-weight: 700;opacity: 0.6;">Tutor</h6>
</div>
</body>
</html>
HTML Email doesn't support a lot of modern CSS such as flex, nor SVG images.
Check https://caniemail.com for what you can use.
You also can't use JavaScript - change the onclick event to a URL.
You can use divs for single column layouts, but you will still need one outer table for Outlook as that doesn't support max-width and doesn't work well with divs in general.
Outer structure example:
<div style="max-width:600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
..Content here..
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
Looks like you need a primer to HTML Email, or perhaps a framework if you didn't want to think too hard, and I'd recommend this page of resources: https://emailresourc.es/#code-frameworks
How can I make the text following the pictures have the same width as the picture in this table? (between the red lines shown in the picture). I tried width property with CSS but it didn't work.
In the same context, how can I enforce the same height for all cells as well?
<table>
<tr>
<td>
<img src="https://picsum.photos/200/300?v=1" alt="picture not available" height="200" width="300">
</td>
<td>
<img src="https://picsum.photos/200/300?v=2" alt="picture not available" height="200" width="300">
</td>
<td>
<img src="https://picsum.photos/200/300?v=3" alt="picture not available" height="200" width="300">
</td>
</tr>
<tr>
<td>
<a href="page1.html">
<h3>Vaccin covid-19 en 2021 ?</h3>
</a>
<p>
Avec covid-19, c'est necessaire de nous immuniser ! On a une nouvelle collection des complements alimentaires qui sont benefiques et riches en vitamines !
<a href="page1.html">
<h2>Read more ...</h2>
</a>
</p>
</td>
<td>
<a href="page2.html">
<h3>Nouveaux : complements alimentaires pour vous immuniser !</h3>
</a>
<p>
Avec covid-19, c'est necessaire de nous immuniser ! On a une nouvelle collection des complements alimentaires qui sont benefiques et riches en vitamines !
<a href="page2.html">
<h2>Read more ...</h2>
</a>
</p>
</td>
<td>
<a href="page3.html">
<h3>Marathon sponsorisé par E-Pharma</h3>
</a>
<p>
Venez pour le marathon de 28/12/2020 ou on va faire beaucoup d'activites de sensibilisation contre la maladie de cancer de seins ! Vous etes bienvenues !
<a href="page3.html">
<h2>Read more ...</h2>
</a>
</p>
</td>
</tr>
</table>
Use max-width in a and p tag to set same width as image
td a,
td p{
max-width: 300px;
text-align:center;
margin: 0 auto;
}
td a {
display: block;
}
<table>
<tr>
<td>
<img src="https://via.placeholder.com/300" alt="picture not available" height="200" width="300">
</td>
<td>
<img src="https://via.placeholder.com/300" alt="picture not available" height="200" width="300">
</td>
<td>
<img src="https://via.placeholder.com/300" alt="picture not available" height="200" width="300">
</td>
</tr>
<tr>
<td>
<h3>Vaccin covid-19 en 2021 ?</h3>
<p>
Avec covid-19, c'est necessaire de nous immuniser ! On a une
nouvelle collection des complements alimentaires qui sont benefiques
et riches en vitamines !
<h2>Read more ...</h2>
</p>
</td>
<td>
<h3>Nouveaux : complements alimentaires pour vous immuniser !</h3>
<p>
Avec covid-19, c'est necessaire de nous immuniser ! On a une
nouvelle collection des complements alimentaires qui sont benefiques
et riches en vitamines !
<h2>Read more ...</h2>
</p>
</td>
<td>
<h3>Marathon sponsorisé par E-Pharma</h3>
<p>
Venez pour le marathon de 28/12/2020 ou on va faire beaucoup d'activites
de sensibilisation contre la maladie de cancer de seins !
Vous etes bienvenues !
<h2>Read more ...</h2>
</p>
</td>
</tr>
</table>
I'm supposed to reproduce the image below, and I was doing great so far, but can't seem to align my images well, and can't set up the top menu properly.
I should also be able to "paint" the image background green, but have no idea how to do so.
How can I achieve that?
body {
background-color: #dff0d8;
}
h1 {
background-color: green;
}
#outros {
background-color: black;
}
#texto1 {
float: left;
width: 30%;
}
#texto2 {
float: left;
width: 30%;
}
#texto3 {
float: left;
width: 30%;
}
img {
border-radius: 10%;
}
#preto {
background-color: green;
}
<link href="//www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<h2 id="outros">
<font color="white">
<div id="preto">Home</div>Museus <br/> Monumentos <br/> Restaurantes </font>
</h2>
<h1>
<font color="white"> A cidade de Lisboa </font>
</h1>
<div id="texto1">
<h3> Introdução </h3>
<p>
Lisboa GCTE é a capital de Portugal e a cidade mais populosa do país. Tem uma população de 506 892 habitantes, dentro dos seus limites administrativos. Na Área Metropolitana de Lisboa, residem 2 821 697 pessoas (2011), sendo por isso a maior e mais populosa
área metropolitana do país. Lisboa é o centro político de Portugal, sede do Governo e da residência do chefe de Estado. É o "farol da lusofonia" (Daus): a Comunidade dos Países de Língua Portuguesa (CPLP) tem a sua sede na cidade. É ainda a capital
mais a ocidente do continente europeu na costa atlântica.
</p>
</div>
<div id="texto2">
<h3> Globalidade </h3>
<p>Lisboa é considerada como cidade global devido à sua importância em aspectos financeiros, comerciais, mediáticos, artísticos, educacionais e turísticos. É um dos principais centros económicos do continente europeu, graças a um progresso financeiro crescente
favorecido pelo maior porto de contentores da costa atlântica da Europa e mais recentemente pelo Aeroporto Humberto Delgado, que recebe mais de 20 milhões de passageiros anualmente (2015). Lisboa conta com uma rede de auto-estradas e um sistema de
ferrovias de alta velocidade (Alfa Pendular), que liga as principais cidades portuguesas à capital.
<br/> A cidade é a sétima mais visitada do sul da Europa, depois de Istambul, Roma, Barcelona, Madrid, Atenas e Milão, com 1 740 000 de turistas em 2009, tendo em 2014 ultrapassado a marca dos 3,35 milhões. A nível global, Lisboa foi a 35.ª cidade
com maior destino turístico em 2015, cerca de 4 milhões de visitantes. Em 2015, foi considerada a 11.ª cidade turística mais popular, à frente de Madrid, Rio de Janeiro, Berlim e Barcelona.
</p>
</div>
<div id="texto3">
<h3> Riqueza </h3>
<p>
A região de Lisboa é a mais rica do país, com um PIB PPC per capita de 26 100 euros (4,7% maior do que o PIB per capita médio da União Europeia). A sua área metropolitana é a vigésima mais rica do continente, com um PIB-PPC no valor de 58 mil milhões
de euros, o que equivale a cerca de 35% do PIB-PPC total do país. Lisboa ocupa o 122.º lugar entre as cidades com maiores receitas brutas do mundo.
</br> A maioria das sedes das multinacionais instaladas em Portugal encontram-se na região de Lisboa, a nona cidade do mundo com maior número de conferências internacionais.
</p>
</div>
<div id="zonafoto">
<div id="img1" style="float:left">
<img src=https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Torre_de_Bel%C3%A9m_-_Lisboa_Portugal.jpg/800px-Torre_de_Bel%C3%A9m_-_Lisboa_Portugal.jpg width=479px height=330px></div>
<div id="img2" style="float:center">
<img src=http://municipiosefreguesias.pt/files/20141111021430_vascodagama.jpg width=479px height=330px></div>
<div id="img3" style="float:right">
<img src=http://turismo.culturamix.com/blog/wp-content/gallery/praca-do-comercio/praca-do-comercio-11.jpg width=479px height=330px></div>
</div>
For the menu try this:
HTML:
<div id="outros">
<ul>
<li id="preto"><h2>Home</h2></li>
<li><h2>Museus</h2></li>
<li><h2>Monumentos</h2></li>
<li><h2>Restaurantes</h2></li>
</ul>
</div>
CSS:
#outros {
background-color: black;
color: white;
margin-left: -40px;
}
#outros li {
display: inline-block;
padding: 5px 20px;
}
So,I'm struggling to solve a strange thing that happens in my html code.
I've been trying to do this for 3 days or maybe more but I simply cannot find out the 'problem'.
.variola {
max-width: 100%;
margin-top: 0.5em;
margin-bottom: 1em;
-webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 0px 20px;
background: white;
border: 1px solid #CCC;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
padding: 8px;
"
}
</style> <style> .cerculet {
display: block;
font-size: 120%;
line-height: 145%;
width: 1.6em;
height: 1.6em;
text-align: center;
border-radius: 50%;
background-color: black;
color: white;
white-space: nowrap;
}
</style> <style> .introducere {
display: table-cell;
vertical-align length: 5;
padding-left: 3em;
padding-top: 0.1em;
}
<!DOCTYPE html>
<html>
<head>
<!-- Aici va fi scris orice cod CSS pentru ca ulterior sa fie "preluat" intr-un
mod indirect de catre codul HTML pentru imbogatirea paginii web. -->
<title>10 cele mai periculoase boli care au facut istorie</title>
</head>
<body>
10 cele mai periculoase boli care au facut istorie
<!-- Tot codul de la tag-ul "body" deschis pana la "body" inchis este strict
codul pentru pagina web.Cei in head sub tag-ul "style" este cod in CSS si
nu va aparea in pagina web,ci va "imbogati" intr-un mod indirect codul html -->
<p style="text-align: left">
<img align="absmiddle" src="http://s2.postimg.org/6zkw8piph/Time.png">26-Martie-2015
<!-- " " este un cod important folosit pentru a crea un blank(spatiu alb)
intre 2 caractere -->
<img align="absmiddle" src="http://s29.postimg.org/tkzbm9nwz/Domeniu.png">Biologie
<br>
<img align="absmiddle" src="http://s22.postimg.org/k7tec39x9/Tags.png">Tags: Pandemii, cele mai periculoase</p>
<hr noshade size="2" style="text-align: left" width="47%">
<br>
<!-- Cu ajutorul tag-ului "hr" se pot introduce linii in pagina web.
"noshade" inseamna ca linia nu o sa aiba contur. -->
<h2></h2>
<div class="cerculet">
<div>
<h2>1 </h2>
<div>
<h2>
<big style="font-weight: bold">A ucis mai mult de 300 de
milioane de oameni<br>
din intreaga lume in secolul al XX-lea si pe cei<br>
mai multi locuitori nativi ai Americii.</big>
<!-- Exact ceea ce spuneam mai sus:codul CSS va fi "preluat" indirect din "head"
si va fi introdus in codul html,combinand cele 2 limbaje. -->
<!-- :-) --></h2>
</div>
</div>
</div>
<br>
<div>
Variola(cunoscuta si sub numele latin "Variola" sau "Variola vera") este o boala contagioasa
<br>unica oamenilor.Variola este cauza fie de virusul numit Variola Major,fie de cel numit Variola
<br>minor.Forma mai letala,V. Major,are o mortalitate de 30-35%,pe cand V. Minor este o forma
<br>mai usoara a bolii numita alastrim si ucide ~1% din victimele sale.Efectele secundare
<br>de termen lung pentru supravietuitori includ cicatrici pe piele.Alte efecte secundare ocazionale
<br>includ orbire datorita ulcerului de cornee si infertilitate la persoanele de sex masculin.
</div>
<!-- Tag-ul "br" sectioneaza textul nostru din pagina web in paragrafe. -->
<br>
<br>
<div>
<b>Variola a ucis aproximativ 60 de milioane de europeni,</b> incluzand cinci monarhi
<br>care conduceau Europa in secolul al XVIII-lea.Pana la 30% din cei infectati,80% fiind copii sub 5
<br>ani,au murit datorita acestei boli si inca o treime din supravietuitori au devenit orbi.
</div>
<br>
<br>
<div>
Cat despre tarile din America,dupa primul contact cu europenii si africanii,unii au crezut ca rata
<br>de mortalitate de 90-95% a populatiei native din Lumea Noua a fost cauza de boala Lumii Vechi.
<br>Se suspecteaza ca variola a fost principalul vinovat si raspunzator pentru uciderea a aproape toti
<br>locuitorii nativi ai Americii.In Mexic,cand aztecii s-au angajat in rascoala impotriva lui Cortés,
<br>depasiti numeric,spaniolii au fost fortati sa fuga.In timpul luptei,un soldat spaniol purtator de
<br>variola a murit.Dupa lupta,aztecii au contractat virusul din cadavrele invadatorilor.Cand Cortés
<br>s-a intors in capitala,variola a devastat populatia azteca.A ucis o mare parte din armata azteca,
<br>imparatul si 25% din populatia normala.Ulterior,Cortés a infrant cu usurinta aztecii si a intrat in
<br>Tenochtitlán unde a aflat ca variola a ucis mai multi azteci decat au ucis tunurile.
</div>
<br>
<br>
<div>
Variola a fost responsabila pentru aproximativ 300-500 de milioane de decese in secolul al XX-lea.
<br>Nu mai tarziu de 1967, Organizatia Mondiala a Sanatatii (OMS) a estimat ca 15 milioane de persoane
<br>au contractat virusul si ca alte doua milioane au murit in acel an.Dupa campanii de vaccinare incheiate
<br>cu succes in timpul secolelor XIX si XX,OMS-ul a oficializat eradicarea variolei in 1979.Pana in ziua de
<br>astazi,variola este singura boala infectioasa care a fost complet eradicata din natura.
</div>
<img class="variola" src="http://s3.postimg.org/cb0l49sw3/Variola.jpg" style="position:absolute; left:150px;">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="cerculet">
<div style="font-family: Cambria; font-size: 120%">
2
</div>
</div>
<!-- Aici am folosit CSS-ul pentru a da un stil imaginii urmat de codul
html specific imaginii "style="position...." pentru a aseza imaginea in pozitia
dorita de mine -->
</body>
</html>
As you can see, after the number 1(colored in black,in a circle),there's a LOT of space that I don't want.
The alignment is not good too.I used lots of   and <br>'s just because I can't find a way to put the text immediately after the number 1. I'm trying to make a "site" for a school project and I am allowed to see other sites to "inspire" myself.You can check http://www.oddee.com/item_90608.aspx
and see what I'm trying to "copy" in some kind of way.
Please help.
In short, you want to float: left the number/circle so that the content wraps around it. You also have several unnecessary elements and, like you mentioned, unnecessary elements - below, I've cleaned the example down to a bare-bones working example.
.cerculet {
display: block;
}
.cerculet:after {
display: block;
clear: both;
content: ' ';
}
.cerculet p{
font-weight: bold;
}
.cerculet h2{
font-size: 120%;
line-height: 145%;
width: 1.6em;
height: 1.6em;
text-align: center;
border-radius: 50%;
background-color: black;
color: white;
white-space: nowrap;
float: left;
margin-right: 15px;
}
<div class="cerculet">
<h2>1 </h1>
<p>A ucis mai mult de 300 de milioane de oameni din intreaga lume in secolul al XX-lea si pe cei mai multi locuitori nativi ai Americii.
</p>
</div>
<p>Variola(cunoscuta si sub numele latin "Variola" sau "Variola vera") este o boala contagioasa unica oamenilor.Variola este cauza fie de virusul numit Variola Major,fie de cel numit Variola minor.Forma mai letala,V. Major,are o mortalitate de 30-35%,pe cand V. Minor este o forma mai usoara a bolii numita alastrim si ucide ~1% din victimele sale.Efectele secundare de termen lung pentru supravietuitori includ cicatrici pe piele.Alte efecte secundare ocazionale includ orbire datorita ulcerului de cornee si infertilitate la persoanele de sex masculin.
</p>
<p><b>Variola a ucis aproximativ 60 de milioane de europeni,</b> incluzand cinci monarhi care conduceau Europa in secolul al XVIII-lea.Pana la 30% din cei infectati,80% fiind copii sub 5 ani,au murit datorita acestei boli si inca o treime din supravietuitori au devenit orbi.
</p>
i use the following code to put text beside image:
<div style="display:inline-block;vertical-align:bottom">
<p><img src="CIMA/CimaMetanoia.png" alt="Cool" height="50%" width="50%" /></p>
</div>
<div style="display:inline-block;">
<p class="text">
<div> <font color="#d54646"><b>MOVIDA</b> es un ministerio christiano, latino, internacional <br> e interdenominacional con el propósito de: </font> <br><br> </div>
<div> <b><font color="#2089a4">DESAFIAR</font></b> <br>al joven christiano a una entrega total a Dios y a crecer en su relación con El.<br><br> </div>
<div> <b><font color="#2089a4">PROVEERLE</font></b> <br> herramientas para que descubra sus dones y talentos.<br><br> </div>
<div> <b><font color="#2089a4">MOTIVARLO</font></b> <br> a un servicio comprometido en su iglesia local y movilizarlo a las misiones mundiales.<br> </div>
</p>
</div>
However, even if i change the size of my image, it is always above the text... why?
Finally i used the template "initializr" (see google), because it makes all responsive too, which i needed! thank you all anyway!
you might try adding the position property to the image
so, in this case,
image{position:fixed , absolute , relative; top:50%; left:50%;}
or this may work as well:
<div>
<image></image>
<p></p>
</div>
A commenter asked that I work with your code only. So, here's a solution using your code, to make the 2 divs sit next to each other.
<div style="float: left; width: 49%;">
<p><img alt="Cool" src="http://placehold.it/350x150" height="50%" width="50%" /></p>
</div>
<div style="float: right; width: 49%;">
<p class="text">
<div> <font color="#d54646"><b>MOVIDA</b> es un ministerio christiano, latino, internacional <br> e interdenominacional con el propósito de: </font> <br><br> </div>
<div> <b><font color="#2089a4">DESAFIAR</font></b> <br>al joven christiano a una entrega total a Dios y a crecer en su relación con El.<br><br> </div>
<div> <b><font color="#2089a4">PROVEERLE</font></b> <br> herramientas para que descubra sus dones y talentos.<br><br> </div>
<div> <b><font color="#2089a4">MOTIVARLO</font></b> <br> a un servicio comprometido en su iglesia local y movilizarlo a las misiones mundiales.<br> </div>
</p>
</div>
EDITED
Below I've posted code that in my mind is better formatted for your solution. Just wanted to offer up some alternatives.
<style type="text/css">
.left {
float: left;
width: 50%;
height: 50%;
}
.left img {
width: 100%;
height: 100%;
}
.right {
float: right;
}
.movida strong {
color: #d54646;
}
.common strong {
color: #2089a4;
}
.text strong {
display: block;
font-weight: bold;
}
</style>
<div class="left">
<p><img src="CIMA/CimaMetanoia.png" alt="Cool" /></p>
</div>
<div class="right">
<p class="text">
<div><span class="movida"><strong>MOVIDA</strong>es un ministerio christiano, latino, internacional e interdenominacional con el propósito de:</span></div>
<div><span class="common"><strong>DESAFIAR</strong>al joven christiano a una entrega total a Dios y a crecer en su relación con El.</span></div>
<div><span class="common"><strong>PROVEERLE</strong>herramientas para que descubra sus dones y talentos.</span></div>
<div><span class="common"><strong>MOTIVARLO</strong>a un servicio comprometido en su iglesia local y movilizarlo a las misiones mundiales.</span></div>
</p>
</div>
The text is pushed below the image because the combined width of the two container divs is wider than the page, so it pushes the second div below the first one:
<div style="display:inline-block;vertical-align:bottom;width:200px;">
http://jsfiddle.net/3Luby/