I have tried to put in table-cell, table, inline-block, inline, but nothing works. Do any of you know what and where should I put in to make the div that has the text inside it to be vertical-align = middle?
.div1b {
width: 100%;
background-color: white;
height: 100vh;
}
.div2 {
width: 90%;
overflow: hidden;
}
.div6 {
width: 90%;
margin-left: 10%;
float: left;
}
.div8b {
width: calc(100% - 20px);
background-color: white;
padding: 10px;
border-radius: 2px;
}
.text5 {
color: black;
text-align: left;
margin: 0px;
line-height: 1.5;
}
<div id="BIO" class="div1b">
<div class="div2">
<div class="div6">
<div class="div8b">
<p class="text5">Unge Ferrari (egentlig Stig Joar Haugen) er en norsk rapper, sanger og låtskriver fra Hamar. Han debuterte i 2015 med albumet Til mine venner. Albumet inneholdt gjennombruddssinglene «Lianer» og «Hvis du vil» med Tomine Harket, og ble nominert til Spellemannprisen i kategorien «Urban». <br><br>
Året etter utga han EPen «Hva er vi nå // H.E.V.N. //» sammen med Tomine Harket, før han i 2017 var tilbake på egne ben med EPen «Romeo må dø». <br><br>
Unge Ferrari har de siste årene vært et populært navn å samarbeide med, og han har jobbet sammen med flere norske og svenske artister, som Lars Vaular, Store P, Cherrie og Silvana Imam. Hans fremste samarbeidspartner er imidlertid rapperen Arif, som han har spilt en rekke låter og konserter med. Unge Ferrari og Arif utgjør dessuten, sammen med Karpe Diem, supergruppen MARS. <br><br>
Unge Ferrari har en flytende sangstil som grenser mellom rap og R&B, og han bruker ofte autotune. Det er som regel Filip Kollsete og Aksel «Axxe» Carlson» som står bak produksjonene.</p>
</div>
</div>
</div>
</div>
using display:table with vertical-align = middle.
.div1b {
width: 96%;
background-color: white;
height: 100vh;
padding: 0 2%;
display: table;
}
.div8b {
display: table-cell;
vertical-align: middle;
}
<div id="BIO" class="div1b">
<div class="div8b">
<p class="text5">Unge Ferrari (egentlig Stig Joar Haugen) er en norsk rapper, sanger og låtskriver fra Hamar. Han debuterte i 2015 med albumet Til mine venner. Albumet inneholdt gjennombruddssinglene «Lianer» og «Hvis du vil» med Tomine Harket, og ble nominert til Spellemannprisen i kategorien «Urban». <br><br>
Året etter utga han EPen «Hva er vi nå // H.E.V.N. //» sammen med Tomine Harket, før han i 2017 var tilbake på egne ben med EPen «Romeo må dø». <br><br>
Unge Ferrari har de siste årene vært et populært navn å samarbeide med, og han har jobbet sammen med flere norske og svenske artister, som Lars Vaular, Store P, Cherrie og Silvana Imam. Hans fremste samarbeidspartner er imidlertid rapperen Arif, som han har spilt en rekke låter og konserter med. Unge Ferrari og Arif utgjør dessuten, sammen med Karpe Diem, supergruppen MARS. <br><br>
Unge Ferrari har en flytende sangstil som grenser mellom rap og R&B, og han bruker ofte autotune. Det er som regel Filip Kollsete og Aksel «Axxe» Carlson» som står bak produksjonene.</p>
</div>
</div>
using display:flex with vertical-align = middle.
.div1b {
width: 96%;
background-color: white;
height: 100vh;
padding: 0 2%;
display: flex;
}
.div8b {
margin: auto;
}
<div id="BIO" class="div1b">
<div class="div8b">
<p class="text5">Unge Ferrari (egentlig Stig Joar Haugen) er en norsk rapper, sanger og låtskriver fra Hamar. Han debuterte i 2015 med albumet Til mine venner. Albumet inneholdt gjennombruddssinglene «Lianer» og «Hvis du vil» med Tomine Harket, og ble nominert til Spellemannprisen i kategorien «Urban». <br><br>
Året etter utga han EPen «Hva er vi nå // H.E.V.N. //» sammen med Tomine Harket, før han i 2017 var tilbake på egne ben med EPen «Romeo må dø». <br><br>
Unge Ferrari har de siste årene vært et populært navn å samarbeide med, og han har jobbet sammen med flere norske og svenske artister, som Lars Vaular, Store P, Cherrie og Silvana Imam. Hans fremste samarbeidspartner er imidlertid rapperen Arif, som han har spilt en rekke låter og konserter med. Unge Ferrari og Arif utgjør dessuten, sammen med Karpe Diem, supergruppen MARS. <br><br>
Unge Ferrari har en flytende sangstil som grenser mellom rap og R&B, og han bruker ofte autotune. Det er som regel Filip Kollsete og Aksel «Axxe» Carlson» som står bak produksjonene.</p>
</div>
</div>
Related
This is what it looks like, and the arrow kind of shows where I wish for the image to be.
my html code
<section class="box2">
<h1 class="underline"><b>Husk dit helbred!</b></h1>
<p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held og lykke med jeres mange fremtide projekter!</p>
<img src="images/emilybillede.jpg" alt="">
my css code
.underline {
text-decoration: underline;
}
.box2 img{
position: right;
width: 200px;
height: 200px;
}
.box2 {
margin: 0 auto;
margin-right: 20%;
margin-left: 20%;
margin-top: 20px;
background-color: rgb(255, 255, 255);
padding: 15px;
height: 50%;
}
p {
width: 300px;
}
I tried float as well but that takes it out of the padding.
I also tried vertical align
You could achieve it in several ways, using float, flex or position for example.
Here an example with float
.underline {
text-decoration: underline;
clear: both;
}
.box2 img {
float: right;
}
.box2 {
width: 100%;
}
p {
width: 300px;
float: left;
}
<section class="box2">
<h1 class="underline"><b>Husk dit helbred!</b></h1>
<p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held
og lykke med jeres mange fremtide projekter!</p>
<img src="https://www.filterforge.com/more/help/images/size200.jpg" alt="">
</section>
With floats the document order must be reversed. If you don't like that, consider using flexbox instead, with the paragraph and the image being children in a flex row.
Here are both options demonstrated.
.underline {
text-decoration: underline;
}
.box2 img {
width: 200px;
height: 200px;
margin-left: 10px;
}
img.float-right {
float: right;
}
.box2 {
margin: 0 auto;
margin-right: 20%;
margin-left: 20%;
margin-top: 20px;
background-color: rgb(255, 255, 255);
padding: 15px;
height: 50%;
}
p.sized {
width: 300px;
}
.flex-row {
display: flex;
}
.flex-row p:first-child {
margin-top: 0;
}
<section class="box2">
<h1 class="underline"><b>Husk dit helbred!</b></h1>
<img src="https://via.placeholder.com/200" alt="" class="float-right">
<p class="sized">Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held
og lykke med jeres mange fremtide projekter!</p>
</section>
<section class="box2">
<h1 class="underline"><b>Husk dit helbred!</b></h1>
<div class="flex-row">
<p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig,
held og lykke med jeres mange fremtide projekter!</p>
<img src="https://via.placeholder.com/200" alt="">
</div>
</section>
You can use the (flexbox) on the parent of the childrens then use (justify-content: space between), like the example below:
.underline {
text-decoration: underline;
}
.box2 img {
position: right;
width: 200px;
height: 200px;
}
.box2 {
margin: 0 auto;
margin-right: 20%;
margin-left: 20%;
margin-top: 20px;
background-color: rgb(255, 255, 255);
padding: 15px;
height: 50%;
display:flex;
justify-content: space-between;
}
p {
width: 300px;
}
<section class="box2">
<div>
<h1 class="underline"><b>Husk dit helbred!</b></h1>
<p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held
og lykke med jeres mange fremtide projekter!</p>
</div>
<img src="https://via.placeholder.com/200" alt="">
</section>
Use float, not position. Use this CSS. I hope it will help you.
.underline {
text-decoration: underline;
}
.box2 img {
float: right;
width: 200px;
height: 200px;
}
.box2 {
margin: 0 auto;
margin-right: 20%;
margin-left: 20%;
margin-top: 20px;
background-color: rgb(255, 255, 255);
padding: 15px;
height: 50%;
}
p {
width: 300px;
float: left;
}
.underline {
text-decoration: underline;
grid-column: 1/3;
grid-row: 1/2;
}
.box2 img {
width: 200px;
height: 200px;
grid-column: 2/3;
grid-row: 2/3;
}
.box2 {
margin: 20px 20%;
background-color: rgb(255, 255, 255);
padding: 15px;
display: grid;
grid-template-columns: min(1fr, 300px) 1fr;
grid-template-rows: min-content min-content;
gap: 15px;
box-shadow: 0 0 100px rgba(0, 0, 0, .1);
}
p {
text-indent: 2em;
margin: 0;
grid-column: 1/2;
grid-row: 2/3;
}
<section class="box2">
<h1 class="underline"><b>Husk dit helbred!</b></h1>
<p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held
og lykke med jeres mange fremtide projekter!</p>
<img src="https://via.placeholder.com/100" alt="">
</section>
All I had to do was move my img above the p, example:
so instead of this:
<h1 class="underline"><b>Husk dit helbred!</b></h1>
<p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held og lykke med jeres mange fremtide projekter!</p>
<img src="images/emilybillede.jpg" alt="">
It had to look like this:
<h1 class="underline"><b>Husk dit helbred!</b></h1>
<img src="images/emilybillede.jpg" alt="">
<p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held og lykke med jeres mange fremtide projekter!</p>
I got a side navigation bar that is located on the left side of the page. I would like the position of this to be just left of the content. Example of what I want is in the pictures below:
Current state:
What I would like is the menu to be like this:
How can I do this? Code is here: https://codepen.io/johsflesj/pen/QWQERRj
<nav>
<div class="container">
<ul>
<li class="home active">Home</li>
<li class="about">About</li>
<li class="contact">Contact</li>
<li class="footer">Footer</li>
<li class="yoyo">Yoyo</li>
</ul>
</div>
</nav>
<div class="kropp">
<section id="home">
<h1>Home</h1>
<p>Dette er testskrift som er veldig lang som jeg tester om hvor langt ut til siden den går for det er veldig greit å se hvor langt ut til siden innholdet her faktisk kommer</p>
<p>Dette er testskrift som er veldig lang</p>
<p>Dette er testskrift som er veldig lang</p>
</section>
<section id="about">
<h1>About</h1>
<p>Dette er testskrift som er veldig lang</p>
<p>Dette er testskrift som er veldig lang</p>
<p>Dette er testskrift som er veldig lang</p>
<p>Dette er testskrift som er veldig lang</p>
</section>
<section id="contact">
<h1>Contact</h1>
</section>
<section id="footer">
<h1>Footer</h1>
</section>
<section id="yoyo">
<h1>Yoyo</h1>
</section>
</div>
You can add margin-left:30% to the "container" div, so that it will move closer to "kropp" div, and you have to add media queries if you need this page to be responsive.
Without any margin settings
<div class="box">
<div class="nav_out">
<nav>
<div class="container">
<ul>
<li class="home active">Home</li>
<li class="about">About</li>
<li class="contact">Contact</li>
<li class="footer">Footer</li>
<li class="yoyo">Yoyo</li>
</ul>
</div>
</nav>
</div>
<div class="kropp">
<section id="home">
<h1>Home</h1>
<p>Dette er testskrift som er veldig lang som jeg tester om hvor langt ut til siden den går for det er veldig greit å se hvor langt ut til siden innholdet her faktisk kommer</p>
<p>Dette er testskrift som er veldig lang</p>
<p>Dette er testskrift som er veldig lang</p>
</section>
<section id="about">
<h1>About</h1>
<p>Dette er testskrift som er veldig lang</p>
<p>Dette er testskrift som er veldig lang</p>
<p>Dette er testskrift som er veldig lang</p>
<p>Dette er testskrift som er veldig lang</p>
</section>
<section id="contact">
<h1>Contact</h1>
</section>
<section id="footer">
<h1>Footer</h1>
</section>
<section id="yoyo">
<h1>Yoyo</h1>
</section>
</div>
</div>
<style>
#import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
html {
font-family: "Roboto Mono";
font-size: 16px;
scroll-behavior: smooth;
}
.kropp {
max-width: 0px;
margin: auto;
padding-left: 40px;
height: 100vh;
max-width: 80%;
}
#home {
background-color: white;
}
#about {
background-color: light-grey;
}
#footer {
background-color: white;
}
#yoyo {
background-color: white;
}
.box {
display: flex;
justify-content: center;
max-width: 80%;
margin: 0 auto;
}
.box .nav_out {
max-width: 20%;
float: left;
}
nav {
position: sticky;
top: 0;
background-color: white;
width: 0px;
}
nav .container {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
margin-left:0%
}
nav .container ul li {
display: inline-block;
}
nav .container ul li a {
display: inline-block;
text-decoration: none;
padding: 10px 20px;
color: black;
}
nav .container ul li.active {
background-color: #E9E9E9;
transition: 0.3s ease background-color;
}
nav .container ul li.active a {
color: rgb(255, 255, 255);
}
</style>
I used flexbox to get the menu to be located at the right position, regardless of browser size.
My goal is to have the two Pictures side by side with its text beneath it, as described here.
The HTML cannot be changed.
I tried a bunch of things, like margin, display and float, nothing has yet done the trick.
What I have so far :
/*stildeklarationer för rubriker */
body {
margin-bottom: 496px !important;
}
h1 {
font-size: 30px;
letter-spacing: 4px;
color: blue;
font-family: helvetica;
font-weight: normal;
margin: auto;
border: 2px;
text-align: center;
border-style: solid;
border-color: #000000
}
h2 {
font-size: 20px;
letter-spacing: 4px;
color: #000000;
font-family: helvetica;
font-weight: normal;
}
/*stildeklarationer för bilder */
img {
float: left;
max-width: 260px;
max-height: 480px;
position: relative;
}
/*stildeklarationer för all text */
p {
width: 50%;
font-family: Verdana;
color: #CCC;
font-size: 13px;
line-height: 20px;
text-align: justify;
background-color: white;
color: black;
border-style: solid;
border-color: #000000
}
article section footer {
float: left;
clear: both;
font-family: Verdana;
color: #CCC;
font-size: 10px;
line-height: 16px;
text-align: justify;
}
footer {
clear: both;
overflow: auto;
font-family: Verdana;
color: #CCC;
font-size: 12px;
line-height: 16px;
text-align: center;
}
#wrapper {
width: 900px;
margin: 0 auto;
/*centrerar*/
position: relative;
}
<div id="wrapper">
<header>
<h1>Smakprov ur studieguiden för webbutveckling 2</h1>
</header>
<article>
<section>
<header>
<h2>Om CSS</h2>
</header>
<img src="./Modul 2 - uppgift 2_files/W6GqEQ" alt="css3">
<p>Vad CSS kan användas till har vi lärt oss i föregående kurs men vi kommer arbeta vidare med stilmallar i denna studieguide eftersom det är ett sätt att styra utseendet på hemsidan som ska användas. Inga hemsidor görs idag utan att använda just stilmallar
och allt eftersom nya versioner av CSS släpps så förbättras möjligheterna och utbudet av funktioner som erbjuds.</p>
<p>Den senaste versionen av CSS är då CSS3 och för att vi fullt ut ska kunna utnyttja denna version ska vi alltså använda HTML5. Glöm dock inte att webbdesign utvecklas hela tiden och det som är sanning idag behöver inte vara sanning imorgon</p>
<p class="linktext">Här är ett youtube-klipp om CSS</p>
<footer>Skrivet av Oscar Antbring den 12 juni 2013</footer>
</section>
<section>
<header>
<h2>Om märkspråk</h2>
</header>
<img src="./Modul 2 - uppgift 2_files/U7tltv" alt="html5">
<p>Märkspråk – eller markup language – är ett sätt att med hjälp av olika textkoder ge direktiv till ett program (i vårt fall då en webbläsare) hur ett dokument ska presenteras och vilka funktioner som ska finnas. Som vi kommer ihåg från första kursen
så finns flera olika sådana textkoder att använda – eller taggar som vi ofta kallar dem för. Det kan vara en tagg för att berätta för webbläsaren att vi vill presentera en hyperlänk, eller att vi ska presentera en bild exempelvis. Naturligtvis
måste webbläsaren veta vad de olika koderna – eller taggarna – betyder. Det är därför som olika märkspråk (och versioner) finns och från föregående kurs kommer vi ihåg HTML 4.01 samt XHTML. Vilket märkspråk som används ska vi specificera i dokumentet
så att webbläsaren vet vilka taggar som kan användas och vad de betyder</p>
<p>När vi skapar en hemsida så specificerar vi en så kallad DOCTYPE som beskriver vilket typ av dokument som webbläsaren kan förvänta sig. Vi säger helt enkelt till webbläsaren – ”detta dokument är av typen HTML5, och då kan du förvänta dig dessa taggar
och struktur”. Naturligtvis måste webbläsaren ha stöd för HTML5 så att programmet vet vad som ska göras med taggarna och deras egenskaper.Det är därför det är så viktigt att vi validerar koden så att vår kod stämmer överens med vad webbläsaren
förväntar sig utifrån typen av dokument. Vi kommer återkomma till just validering av koden i sista modulen även om det redan tagits upp i första kursen – validera gärna kontinuerligt koden genom hela utvecklingsarbetet.</p>
<p class="linktext">Här är en svensk artikel som beskriver HTML5</p>
<footer>Skrivet av Oscar Antbring den 11 juni 2013</footer>
</section>
</article>
<footer>©Hermods</footer>
</div>
If you want the blocks to be side-by-side you could try the following:
section {
float: left;
width: 50%;
}
I have this site:
http://dl.dg-site.com/produits-game/
Under each table I want to put a "+" as in this example
http://www.delumine.ch/produits-et-gamme.html
This is my code:
http://jsfiddle.net/xcn8fg94/
CODE HTML:
<div id="tabel_1">
<p id="title_first">Qualité</p>
<p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
<div id="image_first"></div>
</div>
<div id="tabel_2">
<p id="title_first">Qualité</p>
<p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
<div id="image_first"></div>
</div>
<div id="tabel_3">
<p id="title_first">Qualité</p>
<p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
<div id="image_first"></div>
</div>
<div id="tabel_4">
<p id="title_first">Qualité</p>
<p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
<div id="image_first"></div>
</div>
Code CSS:
#tabel_1,#tabel_2,#tabel_3,#tabel_4{width:210px;height:540px;
display:inline-block;
background: #FFFFFF;
vertical-align:top;
border: 2px solid #264572;
margin-left: 10px;}
I tried to add <p>+<p> under each table but not working.
Can you help me to solve this problem please?
Thanks in advance!
Make a margin below the divs (margin-bottom)
Make the div positioned absolute, so that the p containing the + can be positioned absolute
Create the p , with class bottom
Give them the correct dimension and position
#tabel_1,#tabel_2,#tabel_3,#tabel_4{width:210px;height:540px;
display:inline-block;
background: #FFFFFF;
vertical-align:top;
border: 2px solid #264572;
margin-left: 10px;
margin-bottom: 50px;
position: relative;
}
.bottom {
position: absolute;
top: 100%;
left: 0px;
right: 0px;
width: 1em;
margin: auto;
font-size: 40px;
font-weight: bolder;
}
<div id="tabel_1">
<p id="title_first">Qualité</p>
<p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
<div id="image_first"></div>
<p class="bottom">+</p>
</div>
<div id="tabel_2">
<p id="title_first">Qualité</p>
<p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
<div id="image_first"></div>
<p class="bottom">+</p>
</div>
<div id="tabel_3">
<p id="title_first">Qualité</p>
<p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
<div id="image_first"></div>
<p class="bottom">+</p>
</div>
<div id="tabel_4">
<p id="title_first">Qualité</p>
<p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
<div id="image_first"></div>
<p class="bottom">+</p>
</div>
you probably wouldnt use the + as in what is on your keyboard. check out icon websites like http://fortawesome.github.io/Font-Awesome/. through font-awesome they have different sizes and they are very easy to use.
for the full icon list go here: http://fortawesome.github.io/Font-Awesome/icons/
I'd use a :after selector for that and set an icon as the background. Currently not on my pc, so no example sorry.
I need to set a template for mailing using a table,
I looks fine:
but in Ie7 it does not respect its dimensions/margins/paddings
Markup:
HTML:
<table>
<tr>
<th>
<h1>Esta semana hablamos de....</h1>
</th>
</tr>
<tr>
<td>
<h2>Nuestra Cultura</h2>
</td>
</tr>
<tr>
<td>
<p>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
</p>
<p>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.
</p>
</td>
</tr>
</table>
CSS:
body{
background:#fAfAfA;
}
table {
position:relative;
width:650px;
background:url(fnd.jpg) center bottom no-repeat;
font-family:'Myriad Pro',arial;
margin:0 auto;
padding:0 25px 85px;
border-collapse:collapse;
border-spacing: 0;
display:block;
}
table th h1 {
font-size:35px;
color:#808080;
}
h1 {
text-align:left;
}
table td h2 {
font-weight:700;
margin:0;
font-size:21px;
}
h2,p {
padding:0px 0px 0px 20px;
}
h2{
padding-top:20px;}
table td {
background:#FFF;
}
td,th,tr {
border:0;
margin:0;
width:600px;
}
-edit-
PRINTS
I don't think i am using any special property, am i?
-EDIT-
Basically i only need a 25px padding in the table, but it doesn't work!!!
Few things to take care of:
don't set paddings on <table> element - IE does not work ok with that
always define font-family for your headings - IE will ignore and use default fonts instead if font family is defined only on body (serif usually)
write all your css styles inline (I left them as in sample but you should really write all css inline)
always define vertical-align:top; to your td and th elements unless you want it to be something else
always define colors to your <a> elements
always set <table cellpadding="0"> directly on the table element - css does not reset cellpadding property.
DO NOT use floats - never. You can use divs for wrapping and setting widths - just don't float them
in some cases on longer mailings headings or paragraphs tend to disappear while scrolling the mail in IE - fix that by applying zoom:1 to problematic element.
There are some other catches but already following this notes will give you satisfactory results cross platforms.
Try this solution:
<!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" >
<head>
<title>Untitled Page</title>
<style type="text/css">
body{
background:#fAfAfA;
}
#wrapper {
width:650px;margin:0 auto;
padding:25px;
background:red;
}
table {
position:relative;
font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
margin:0 auto;
padding:0;
border-collapse:collapse;
border-spacing:0;
}
table th {
padding:0;
text-align:left;
vertical-align:top;
}
table th h1 {
font-size:35px;
font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
color:#808080;
margin:0;
padding:0 40px 15px 0;
}
table td {
background:#fff;
padding:0 20px;
vertical-align:top;
}
table td h2 {
margin:0;
font-size:21px;
font-weight:bold;
font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
padding:20px 0;
}
table td p {
margin:0;
padding:0 0 20px 0;
}
</style>
</head>
<body>
<div id="wrapper">
<table cellpadding="0">
<tr>
<th>
<h1>Esta semana hablamos de....</h1>
</th>
</tr>
<tr>
<td>
<h2>Nuestra Cultura</h2>
</td>
</tr>
<tr>
<td>
<p>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
</p>
<p>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.
</p>
</td>
</tr>
</table>
</div>
</body>
</html>