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
Related
Trying out Mjml and ran into this problem where I am not able to place the border border exactly where it needs to be for my table to work. It is a bit DYI but it is the only way I have made it work so far with Outlook. My question is that can I somehow control the exact positioning of the border so I can align it perfectly to the image?
I will post my code below in MJML:
This is where I am able to get to this: image of the problem
Outlook version, god help me here: Outlook Html
<mj-wrapper>
<mj-section background-color="#fff">
<mj-column>
<mj-table>
<tr>
<td style="padding:0px 0px 0px 0px;">
<img src="./img/haut#2x.png" alt="couple-img" />
</td>
</tr>
<tr style="border-left: 2px solid #702b7e;">
<td align="center" style="padding:0px 40px 0px 40px;">
<span style="font-family:Arial-BoldMT;font-size:18px;color:#702b7e;"> LE TÉMOIGNAGE </span> <br /> <br />
<span style="font-family:Arial-BoldMT;font-size:16px;color:#6f6f6f;">Je vous présente Laure et Mathieu ! </span> <br />
<span style="font-size:15px;color:#6f6f6f;">Ils viennent d’acheter un tout nouveau chauffe-eau thermodynamique et nous racontent comment il change leur vie, surtout à l’heure du bain avec leur trois enfants !
Et en plus d’être plus écologique, il se révèle plus économique… mais je vais les laisser vous en parler
</span> <br /> <br />
<button style="border: 0;padding:18px;background-color:#7a2182;color:white;border-radius:26px;font-size:14px;">
DÉCOUVRIR TOUS LES BÉNÉFICES
</button>
</td>
<td>
</td>
<td align="center">
</td>
<td>
</td>
</tr>
<tr>
<td>
<img src="./img/bas#2x.png" alt="" />
</td>
</tr>
</mj-table>
</mj-column>
</mj-section>
</mj-wrapper>
The fact is that Outlook uses Word for rendering message bodies. For example, the span element supports a smaller subset of Word–supported cascading style sheets, defined by the term CORE. Read more about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.
I got a problem with html validator it show me errors on "row x of a row group established by a tbody element has no cells beginning on it"
I'm beginner and I don't really understand why this isn't correct and how to fix it..
Here's the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style_responsive.css">
<link href="fontawesome/css/all.css" rel="stylesheet">
<title>La note enchantée</title>
</head>
<body>
<header>
<a href="index.html">
<h1>ohmyfood</h1>
</a>
</header>
<h2 id="note_title">La note enchantée</h2>
<div id="note_corps">
<p class="note_title_img"><img src="img/note.png" alt="note"></p>
<p class="note_title">La note enchantée</p>
<div id="note_font">
<p class="sub_notemenu_title"><img src="img/note_bar.png" alt="notebar" class="note_bar1"><span class="underline_note_entree">Prélude</span><img src="img/note_bar.png" alt="notebarturn" class="note_bar_turn1"></p>
<table>
<tr><td>Ravioles de foie gras accompagnés de leur crème à la truffe</td> <td>98€</td></tr>
<tr><td>Caviare osciètre sur blini à la farine de blé noir</td> <td>115€</td><tr>
<tr><td>Homar et espuma de potiron mariné aux zests d'orange</td> <td>89€</td><tr>
<tr><td>Foie gras de canard cuit entier, confiture de figue et pain toasté</td> <td>105€</td></tr>
</table>
<p class="sub_notemenu_title"><img src="img/note_bar.png" alt="notebar" class="note_bar2"><span class="underline_note_plat">Point d'orgue</span><img src="img/note_bar.png" alt="notebarturn" class="note_bar_turn2"></p>
<table>
<tr><td>Noix de coquilles Saint-Jacques sur lit de purée de céleri-rave</td> <td>102€</td></tr>
<tr><td>Langoustine poêlée, purée de patate douce</td> <td>205€</td><tr>
<tr><td>Mijoté de queue de boeuf et riz sauvage aux zests de citron</td> <td>169€</td><tr>
</table>
<p class="sub_notemenu_title"><img src="img/note_bar.png" alt="notebar" class="note_bar3"><span class="underline_note_dessert">Mouvement final</span><img src="img/note_bar.png" alt="notebarturn" class="note_bar_turn3"></p>
<table>
<tr><td>Macaron noisette et chocolat, glace au caramel brun et sel de Guérande</td></tr>
<tr><td>Baba au rhum revisité avec son coulis de citron</td><tr>
<tr><td>Tarte au citron meringuée destructurée</td><tr>
</table>
</div>
<p class="note_pied"><img src="img/note.png" alt="note">La note enchantée</p>
</div>
<footer>
<div id="infos">
<a class="mentions_legales" href="mentions_legales.html">Mentions légales</a>
<a class="contactez_nous" href="mailto:ohmyfood#gmail.com">Contactez-nous</a>
</div>
</footer>
</body>
</html>
I know this might be staring at me right in the face, but I can't quite pin-point what might be causing my problem. I have a footer and an iframe that aren't playing nice together. My footer is sitting on top of my iframe. I need my footer to sit at the bottom of my page, just like all of my other pages, and stay there, regardless if a user scrolls up and down. Just need it to stay at the bottom. I'm not quite sure if its a positioning issue, a div issue, if it's the footer's problem, or the iframe's problem. I'm guessing it's the footer's problem, but the footer is placed where I need it on all of my other pages. That's what's confusing me. Still new to web page design, so I'm still wrapping my head around positioning properties and what not. Here is what I have:
CSS:
/*BODY*/
html, body {
background:White;
font-family:Segoe UI;
width:100%;
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height: 100%;
position:relative;
}
#body {
padding:10px;
padding-bottom:460px;
}
.footer1 {
background-color:#494949;
display:inline-block;
width:100%;
height:360px;
position:absolute;
bottom:100px;
left: 0;
}
.footer2 {
background-color:black;
display:inline-block;
width:100%;
height:100px;
/*margin-top:0px;*/
position:absolute;
bottom:0;
left:0;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Pagina De Informacion General</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
<meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="CaseTypes/style.css" type="text/css" media="screen"/>
<script src="/NewWebTest/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<!--HEADER-->
<div id="header">
</div>
<!--PAGE TITLE-->
<div id="pageTitle">
Pagina De Informacion General
</div>
<!--NAVIGATION MENU-->
<div id="navigation">
</div>
<br/>
<div id="body" style="height:100%">
<div style="height: 532px">
<div id="openingImage">
<img src="../images/Blended Courthouse JPG Less Opacity.jpg" alt="Courthouse" height="274" width="1271"/>
</div>
<!--DIV LEFT: ANNOUNCEMENTS-->
<div id="annouceDiv">
<div class="sectionHeader">
   Ubicación Central
</div>
<br/>
<div class="announceSection" style="text-align:center">
Pima County Consolidated Justice Court<br/>
240 N. Stone Avenue, segundo piso<br/>
Tucson, AZ 85701<br/>
(520) 724-3171 <br/><br/>
Para obtener información sobre estacionamiento, visite el sitio web de la Ciudad de Tucson:<br/>
City of Tucson Downtown Parking
</div>
<!--SECTION DIVIDER IMAGE-->
<div class="breakImageDiv">
<img src="../images/EchoPet_Line_Break_PNG.png" class="breakImagePic" alt="Divider"/>
</div>
</div>
<div id="annouceDiv">
<div class="sectionHeader">
   Horario y Cierre por Dias Festivos
</div>
<br/>
<div class="announceSection" style="text-align:center">
Lunes a Viernes, 8:00 a.m. to 5:00 p.m., excepto días festivos<br/>
<table style="margin:auto; width:100%">
<tr>
<td>Año Nuevo</td>
<td>Día del Obrero</td>
</tr>
<tr>
<td>Día de Martin Luther King</td>
<td>Día del Armisticio</td>
</tr>
<tr>
<td>Día de los Presidentes</td>
<td>Día de Acción de Gracías</td>
</tr>
<tr>
<td>Día de los Caídos</td>
<td>Día despues de Acción de Gracías</td>
</tr>
<tr>
<td>Día de la Independencia</td>
<td>Navidad</td>
</tr>
</table>
</div>
<!--SECTION DIVIDER IMAGE-->
<div class="breakImageDiv" style="width: 100%">
<img src="../images/EchoPet_Line_Break_PNG.png" alt="Divider" style="width:100%" height="39"/>
</div>
</div>
</div>
<div style="float:left; width:100%">
<div id="annouceDiv" style="width:100%">
<div class="sectionHeader" style="margin-right:60px">
   Plano
</div>
<br/>
<div class="announceSection" style="text-align:center; margin-right:60px">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3375.2154892306807!2d-110.97141080000001!3d32.22536379999999!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86d6711e54972b5f%3A0x655603b7f78ec698!2s240+N+Stone+Ave%2C+Tucson%2C+AZ+85701!5e0!3m2!1sen!2sus!4v1422889378316"
width="95%" height="450" postion="relative" bottom="460px" frameborder="0" style="border:0">
</iframe>
</div>
<!--SECTION DIVIDER IMAGE-->
<div class="breakImageDiv" style="width:100%">
<img src="../images/EchoPet_Line_Break_PNG.png" class="breakImagePic" alt="Divider" style="width:100%"/>
</div>
</div>
</div>
</div>
<!--FOOTER-->
<div id="footer" style="position:relative; bottom:0">
</div>
<!--Javascript for header, nav, and footer-->
<script type="text/javascript" src="/NewWebTest/jquery.min.js"></script>
<script type="text/javascript" src="/NewWebTest/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$("#header").load("/NewWebTest/header.html");
$("#navigation").load("/NewWebTest/navigation.html");
$("#footer").load("/NewWebTest/footer.html");
});
</script>
</div>
</body>
</html>
A lot of the other CSS styles in the middle are lined up and fine, didn't feel the need to add those, unless it is requested. I've looked everywhere on here and other articles for the past day, and can't quite find what I'm looking for. Any help would be appreciated.
In your <div id="footer"> add a style with clear:both; reason it's sitting on top of your iframe is because you have your iframe float:left. You need to clear your floats.
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.
I'm very new at CSS and i want to put a header on to my new web site.
A simple one, only an image who goes on the top background. I really don't know how to do it with out much coding.
So, this is what i have, and this is what i want. And at the end of this question is the code of the actual page. Any ideas? Thanks so munch!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tablon</title>
<link rel="stylesheet" href="LIB/main.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="LIB/titulos.css">
<!--[if IE]>
<link rel="stylesheet" href="LIB/ie.css" type="text/css" media="screen" />
<![endif]-->
<style type="text/css">
.style1 {
text-align: right;
}
.style2 {
vertical-align: top;
margin-top: 3pt;
margin-bottom: 3pt;
}
#apDiv1 {
position:absolute;
left:116px;
top:398px;
width:800px;
height:37px;
z-index:1;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: 9px;
}
</style>
</head>
<body>
<script type="text/javascript" src="JS/jquery-1.3.2.js"></script>
<marquee>
</marquee>
<div class="wrapper">
<p> </p>
<p><br />
</p>
<center> </center>
<div class="aux">
<div id="container">
<ul class="menu">
<li id="noticias" class="active">Mensajes</li>
<li id="tutoriales">Profesores</li>
<li id="enlaces">Enlaces</li>
</ul>
<span class="clear"></span>
<div class="content noticias">
<h3>Ultimos mensajes</h3>
<br />
<div class="style1" style="vertical-align: middle; text-align: right; background-color: #1E1E1E; height: 21px;">
<img alt="" height="16" src="IMG/feed16.png" width="16" class="style2" />
Subscribirce al canal RSS
</div>
<ul>
<br>
<div id="todo">
<div id="foto" style="float: left;width: 86px;height: 80px;padding: 3px">
<IMG src="http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80" alt="-" />
</div>
<div id="sms" style="height: 86px;background-color: #1E1E1E;">
djsoftlayer: Este texto sera utilizado para probar el formato de las comillas quote1 y quote2 cuando lo que se escribe es suficiente texto como para copar los 300 caracteres, o al menos una gran parte de los 300, ya no me queda mas nada que decir, asi que voy a tratar de llegar a 300 hablando paja, paja, ya lleg
</div>
</div>
<div id="comenta" style="width:30%;float: right;"> <a href="comments.php?ref=44&autor=djsoftlayer&foto=http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80&sms=Este texto sera utilizado para probar el formato de las comillas quote1 y quote2 cuando lo que se escribe es suficiente texto como para copar los 300 caracteres, o al menos una gran parte de los 300, ya no me queda mas nada que decir, asi que voy a tratar de llegar a 300 hablando paja, paja, ya lleg">
<img alt="" height="16" src="IMG/comen16esp.png" width="64" style="float: right" /></a></div>
<br><div id="todo">
<div id="foto" style="float: left;width: 86px;height: 80px;padding: 3px">
<IMG src="http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80" alt="-" />
</div>
<div id="sms" style="height: 86px;background-color: #1E1E1E;">
djsoftlayer: testing
</div>
</div>
<div id="comenta" style="width:30%;float: right;"> <a href="comments.php?ref=43&autor=djsoftlayer&foto=http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80&sms=testing">
<img alt="" height="16" src="IMG/comen16esp.png" width="64" style="float: right" /></a></div>
<br><div id="todo">
<div id="foto" style="float: left;width: 86px;height: 80px;padding: 3px">
<IMG src="http://www.gravatar.com/avatar/e830bd0ff9aae265d91fe554eb65a61f?size=80" alt="-" />
</div>
<div id="sms" style="height: 86px;background-color: #1E1E1E;">
nata: grande
</div>
</div>
<div id="comenta" style="width:30%;float: right;"> <a href="comments.php?ref=42&autor=nata&foto=http://www.gravatar.com/avatar/e830bd0ff9aae265d91fe554eb65a61f?size=80&sms=grande">
<img alt="" height="16" src="IMG/comen16esp.png" width="64" style="float: right" /></a></div>
<br> </ul>
</div>
<div class="content tutoriales">
<h3>Profesores</h3>
<ul>
<br><li><IMG src="IMG/bullet.png" alt="-" />djsoftlayer</li><li><IMG src="IMG/bullet.png" alt="-" />nata</li><body style="background-image: url('IMG/bg.png')">
</ul>
</div>
<div class="content enlaces">
<h3>Deberías Visitar...</h3>
<ul>
<li><IMG src="IMG/bullet.png" alt="-" /> www.plusmusica.com - Online jukebox!</li>
<li><IMG src="IMG/bullet.png" alt="-" /> www.cokidoo.com - Nuestra startup! :)</li>
<li><IMG src="IMG/bullet.png" alt="-" /> www.pixelartgames.com - Te gustan los juegos pixel art? ;)</li>
<li><IMG src="IMG/bullet.png" alt="-" /> www.dmsconsulting.es - Anterior empresa</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="JS/tabs.js"></script>
</body>
</html>
Here is the basic html structure you have
<body>
<div id="wrapper">
<div id="container">
<p>content</p>
</div>
</div>
</body>
Here is the basic css you need to place your banner image:
#wrapper {
width: 600px; /* this is the width of your background image */
background: url(/path/to/image.jpg); /* this sets the div background as an image */
margin: 0px auto; /* this centers the div */
padding-top: 20px; /* this "pads" the div 20px on the top */
}
#container {
width: 400px; /* this sets the width of the container, it is narrower than the wrapper div to get the effect you are looking for */
margin: 0px auto; /* to center the div with the div#wrapper */
}
A bit more information on the CSS would be good. In your "what you want" link there is an specified width -- there needs to be a wrapping element on the page (possibly your #wrapper division), then do something like:
background: url(/link/to/background/image.ext)
And you'll be set.
You're going to like CSS after you get used to it. The section like this:
<p> </p>
<p><br />
</p>
<center> </center>
can be completely replaced with a little padding-top or margin-top setting like this:
.wrapper {
padding-top: 25px;
To address your question, Kerry was on the mark. Set the background property, specifying the url similarly to as he advises to get your desired effect. You probably want to do this on your wrapper class. Algo asi:
background-image: url('relative/path/toImage.png');
background-repeat:no-repeat;
background-position:center top;
}
See this for more. Enjoy!
Others have answered your question, but I'd like to add that there are a couple things I'd do to improve your HTML code.
Move the Javascript tag which loads jQuery to the last line before . The current position will block rendering until the script has loaded.
<script type="text/javascript" src="JS/jquery-1.3.2.js"></script>
<script type="text/javascript" src="JS/tabs.js"></script>
</body>
Get rid of the , tags (and center your #wrapper as superUntitled proposes)
Good luck!