mysterious pixel in table -for newsletter- - html

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
<style type="text/css">
table{ position:relative;margin:0px auto;width:650px;background:url(fnd.jpg) center bottom no-repeat; padding: 0 25px 75px; font-family:arial;}
table th{ width:600px; }
table th h1{font-size:30px;color:#808080;}
h1,h2,p{text-align:left;padding:0px 20px;}
table td h2{font-weight:bold;margin:0;padding:0;}
table tr{ width:600px;}
table td{background:white;}
td, th, tr { margin:0;border:0;}
</style>
The problem is that in the td, tr or h2 there is a pixel I can't make disappear, the problem is that is splitting the background which I don't want... what I am doing wrong?
-EDIT-
you can see here
and test here http://toniweb.us/melia/mail/

Default style for <table> is often
border-collapse: separate;
border-spacing: 2px;
If you don't want any space between rows then add
border-spacing: 0;
for table line 6.
EDIT: IE7 simply doesn't know border-spacing, if it's a matter you must use border-collapse:collapse; and adjust space with padding.

Related

How to put a div and nested divs with min height of all body

I have my body with border:5px solid blue, and I want to put my green div, as well as yellow div and orange div with min-height of 100% of the body.
I want my body Tag (and also my orange div and yellow div) to be at least 100% of the screen and it should grow if the content is added.
My code:
html {
height: 100%;
}
body {
min-height: 100%;
}
.top-menu {
padding: 0%;
margin: 0px;
}
.main-content {
position: relative;
width: 96.5%;
left: 3.5%;
}
.wrapper {
position: relative;
min-height: 100%;
}
.left-menu {
position: absolute;
height: 100%;
width: 3.5%;
float: left;
z-index: 0;
overflow: visible;
}
<body style="border:5px solid blue">
<div class="top-menu" style="border:1px solid red;height: 60px;">
</div>
<div class="wrapper" style="border:5px solid green">
<div class="left-menu" style="border:3px solid yellow">
<!-- <app-side-menu></app-side-menu> -->
</div>
<div class="main-content" style="border:5px solid orange;">
< O que é o Lorem Ipsum? O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um
espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens
com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum. Porque é que o usamos? É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando
analisa a sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais ou menos normal de letras, ao contrário do uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e editores
de páginas web usam actualmente o Lorem Ipsum como o modelo de texto usado por omissão, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias versões têm evoluído ao longo dos anos, por vezes por acidente,
por vezes propositadamente (como no caso do humor). De onde é que ele vem? Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura clássica em Latim, de 45 AC, tornando-o com mais de 2000
anos. Richard McClintock, um professor de Latim no Colégio Hampden-Sydney, na Virgínia, procurou uma das palavras em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum, e atravessando as cidades do mundo na literatura clássica, descobriu
a sua origem. Lorem Ipsum vem das secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" (Os Extremos do Bem e do Mal), por Cícero, escrito a 45AC. Este livro é um tratado na teoria da ética, muito popular durante a Renascença. A primeira
linha de Lorem Ipsum, "Lorem ipsum dolor sit amet..." aparece de uma linha na secção 1.10.32. O pedaço mais habitual do Lorem Ipsum usado desde os anos 1500 é reproduzido abaixo para os interessados. As secções 1.10.32 e 1.10.33 do
"de Finibus Bonorum et Malorum" do Cícero também estão reproduzidos na sua forma original, acompanhados pela sua tradução em Inglês, versões da tradução de 1914 por H. Rackham. Onde posso arranjar algum?O que é o Lorem Ipsum? O Lorem Ipsum é um texto modelo da indústria tipográfica
e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto
para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o
Aldus PageMaker que incluem versões do Lorem Ipsum. Porque é que o usamos? É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição
mais ou menos normal de letras, ao contrário do uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e editores de páginas web usam actualmente o Lorem Ipsum como o modelo de texto usado por
omissão, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias versões têm evoluído ao longo dos anos, por vezes por acidente, por vezes propositadamente (como no caso do humor). </div>
</div>
</body>
Output:
Expected output:
I've used Flexbox to achieve this with flex-grow:
* {
box-sizing: border-box;
}
*:before,
*:after {
box-sizing: inherit;
}
html {
height: 100vh;
}
body {
min-height: 100%;
border: 5px solid blue;
display: flex;
flex-direction: column;
}
.top-menu {
padding: 0%;
margin: 0px;
}
.main-content {
width: 96.5%;
}
.wrapper {
display: flex;
flex-grow: 1;
}
.left-menu {
width: 3.5%;
}
<div class="top-menu" style="border:1px solid red;height: 60px;">
</div>
<div class="wrapper" style="border:5px solid green">
<div class="left-menu" style="border:3px solid yellow">
<!-- <app-side-menu></app-side-menu> -->
</div>
<div class="main-content" style="border:5px solid orange;">
O que é o Lorem Ipsum? O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem
Ipsum
tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os
caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o
salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com
a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com
os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum. Porque é que o usamos?
É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a
sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais ou menos normal de letras, ao
contrário do uso de "Conteúdo aqui, conteúdo aqui" , tornando-o texto legível. Muitas ferramentas de
publicação electrónica e editores de páginas web usam actualmente o Lorem Ipsum como o modelo de texto usado
por omissão, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias
versões têm evoluído ao longo dos anos, por vezes por acidente, por vezes propositadamente (como no caso do
humor). De onde é que ele vem? Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto
aleatório. Tem raízes numa peça de literatura clássica em Latim, de 45 AC, tornando-o com mais de 2000 anos.
Richard McClintock, um professor de Latim no Colégio Hampden-Sydney, na Virgínia, procurou uma das palavras
em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum, e atravessando as cidades do mundo na
literatura clássica, descobriu a sua origem. Lorem Ipsum vem das secções 1.10.32 e 1.10.33
do "de Finibus Bonorum et Malorum" (Os Extremos do Bem e do Mal), por Cícero, escrito a 45AC. Este livro é
um tratado na teoria da ética, muito popular durante a Renascença. A primeira linha de Lorem
Ipsum, "Lorem ipsum dolor sit amet..." aparece de uma linha na secção 1.10.32. O pedaço mais habitual do
Lorem Ipsum usado desde os anos 1500 é reproduzido abaixo para os interessados. As secções 1.10.32 e 1.10.33
do "de Finibus Bonorum et Malorum" do Cícero também estão reproduzidos na sua forma original, acompanhados
pela sua tradução em Inglês, versões da tradução de 1914 por H. Rackham. Onde posso arranjar algum?O que é o
Lorem Ipsum? O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem
vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres
de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para
a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a
disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os
programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum. Porque é que o usamos? É
um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua
mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais ou menos normal de letras, ao
contrário do uso de "Conteúdo aqui, conteúdo aqui" , tornando-o texto legível. Muitas ferramentas de
publicação electrónica e editores de páginas web usam actualmente o Lorem Ipsum como o modelo de texto usado
por omissão, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias
versões têm evoluído ao longo dos anos, por vezes por acidente, por vezes propositadamente (como no caso do
humor).
</div>
</div>
I've also set the box model to border-box so that the elements specified width and height aren't affected by padding or borders. Find out more about box-sizing here.
Find out more about the CSS Flexbox here.
try this
html,body {
height: 100%;
}
* {
box-sizing: border-box;
}
.wrapper {
position: relative;
height: calc(100% - 60px);
}
.main-content {
height:100%;
}
.main-content div {
height: 100%;
overflow-y:auto;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.left-menu {
position: absolute;
height: 100%;
width: 100%;
left:0;
top:0;
float: left;
z-index: 0;
overflow: visible;
}
<body style="border:5px solid blue;margin:0;">
<div class="top-menu" style="border:1px solid red;height: 60px;">
</div>
<div class="wrapper" style="border:5px solid green">
<div class="left-menu" style="border:3px solid yellow">
<!-- <app-side-menu></app-side-menu> -->
</div>
<div class="main-content" style="border:5px solid orange;">
<div> que é o Lorem Ipsum? O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um
espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens
com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum. Porque é que o usamos? É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando
analisa a sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais ou menos normal de letras, ao contrário do uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e editores
de páginas web usam actualmente o Lorem Ipsum como o modelo de texto usado por omissão, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias versões têm evoluído ao longo dos anos, por vezes por acidente,
por vezes propositadamente (como no caso do humor). De onde é que ele vem? Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura clássica em Latim, de 45 AC, tornando-o com mais de 2000
anos. Richard McClintock, um professor de Latim no Colégio Hampden-Sydney, na Virgínia, procurou uma das palavras em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum, e atravessando as cidades do mundo na literatura clássica, descobriu
a sua origem. Lorem Ipsum vem das secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" (Os Extremos do Bem e do Mal), por Cícero, escrito a 45AC. Este livro é um tratado na teoria da ética, muito popular durante a Renascença. A primeira
linha de Lorem Ipsum, "Lorem ipsum dolor sit amet..." aparece de uma linha na secção 1.10.32. O pedaço mais habitual do Lorem Ipsum usado desde os anos 1500 é reproduzido abaixo para os interessados. As secções 1.10.32 e 1.10.33 do
"de Finibus Bonorum et Malorum" do Cícero também estão reproduzidos na sua forma original, acompanhados pela sua tradução em Inglês, versões da tradução de 1914 por H. Rackham. Onde posso arranjar algum?O que é o Lorem Ipsum? O Lorem Ipsum é um texto modelo da indústria tipográfica
e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto
para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o
Aldus PageMaker que incluem versões do Lorem Ipsum. Porque é que o usamos? É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição
mais ou menos normal de letras, ao contrário do uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e editores de páginas web usam actualmente o Lorem Ipsum como o modelo de texto usado por
omissão, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias versões têm evoluído ao longo dos anos, por vezes por acidente, por vezes propositadamente (como no caso do humor). </div>
</div>
</body>

How can I put a div occupying full body height

I have a menu, and Im trying to wrap it inside of yellow div, and I want that this div (yellow) to occupy the whole height of the green square, no matter how big is the green square content, for example, if the orange square increases, the yellow div should increase as well
here is a snippet:
.top-menu{
padding: 0%;
margin: 0px;
}
.main-content{
position: relative;
width: 96.5%;
left: 3.5%;
}
.wrapper{
display: fixed;
position: relative;
width: 100%;
}
.left-menu{
position: relative;
height: 100%;
width: 3.5%;
float: left;
z-index: 0;
overflow: visible;
}
<body style="border:5px solid blue">
<div class="top-menu" style="border:1px solid red;height: 60px;">
</div>
<div class="wrapper"style="border:5px solid green">
<div class="left-menu" style="border:3px solid yellow">
<p>Here is where I want to put my menu and I want that this div to be as tall as the pink div</p>
</div>
<div class="main-content" style="border:5px solid orange;">
<p>O que é o Lorem Ipsum?
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.
Porque é que o usamos?
É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais ou menos normal de letras, ao contrário do uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e editores de páginas web usam actualmente o Lorem Ipsum como o modelo de texto usado por omissão, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias versões têm evoluído ao longo dos anos, por vezes por acidente, por vezes propositadamente (como no caso do humor).
De onde é que ele vem?
Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura clássica em Latim, de 45 AC, tornando-o com mais de 2000 anos. Richard McClintock, um professor de Latim no Colégio Hampden-Sydney, na Virgínia, procurou uma das palavras em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum, e atravessando as cidades do mundo na literatura clássica, descobriu a sua origem. Lorem Ipsum vem das secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" (Os Extremos do Bem e do Mal), por Cícero, escrito a 45AC. Este livro é um tratado na teoria da ética, muito popular durante a Renascença. A primeira linha de Lorem Ipsum, "Lorem ipsum dolor sit amet..." aparece de uma linha na secção 1.10.32.
O pedaço mais habitual do Lorem Ipsum usado desde os anos 1500 é reproduzido abaixo para os interessados. As secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" do Cícero também estão reproduzidos na sua forma original, acompanhados pela sua tradução em Inglês, versões da tradução de 1914 por H. Rackham.
Onde posso arranjar algum?O que é o Lorem Ipsum?
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.
Porque é que o usamos?
É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais ou menos normal de letras, ao contrário do uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e editores de páginas web usam actualmente o Lorem Ipsum como o modelo de texto usado por omissão, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias versões têm evoluído ao longo dos anos, por vezes por acidente, por vezes propositadamente (como no caso do humor).
</p>
</div>
</div>
</body>
Expected output
The height of yellow square is the same that green square
Can someone please help me?????
Try:
Hi,
you have to change the position of the .left-menu to absolute.
So his position is absolute to his relative parent here .wrapper
.top-menu{
padding: 0%;
margin: 0px;
}
.main-content{
position: relative;
width: 96.5%;
left: 3.5%;
}
.wrapper {
display: fixed;
position: relative;
width: 100%;
}
.left-menu {
position: absolute;
height: 100%;
width: 3.5%;
float: left;
z-index: 0;
overflow: visible;
}
<body style="border:5px solid blue">
<div class="top-menu" style="border:1px solid red;height: 60px;">
</div>
<div class="wrapper"style="border:5px solid green">
<div class="left-menu" style="border:3px solid yellow">
<p>Here is where I want to put my menu and I want that this div to be as tall as the pink div</p>
</div>
<div class="main-content" style="border:5px solid orange;">
<p>O que é o Lorem Ipsum?
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.
Porque é que o usamos?
É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais ou menos normal de letras, ao contrário do uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e editores de páginas web usam actualmente o Lorem Ipsum como o modelo de texto usado por omissão, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias versões têm evoluído ao longo dos anos, por vezes por acidente, por vezes propositadamente (como no caso do humor).
De onde é que ele vem?
Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura clássica em Latim, de 45 AC, tornando-o com mais de 2000 anos. Richard McClintock, um professor de Latim no Colégio Hampden-Sydney, na Virgínia, procurou uma das palavras em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum, e atravessando as cidades do mundo na literatura clássica, descobriu a sua origem. Lorem Ipsum vem das secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" (Os Extremos do Bem e do Mal), por Cícero, escrito a 45AC. Este livro é um tratado na teoria da ética, muito popular durante a Renascença. A primeira linha de Lorem Ipsum, "Lorem ipsum dolor sit amet..." aparece de uma linha na secção 1.10.32.
O pedaço mais habitual do Lorem Ipsum usado desde os anos 1500 é reproduzido abaixo para os interessados. As secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" do Cícero também estão reproduzidos na sua forma original, acompanhados pela sua tradução em Inglês, versões da tradução de 1914 por H. Rackham.
Onde posso arranjar algum?O que é o Lorem Ipsum?
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.
Porque é que o usamos?
É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais ou menos normal de letras, ao contrário do uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e editores de páginas web usam actualmente o Lorem Ipsum como o modelo de texto usado por omissão, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias versões têm evoluído ao longo dos anos, por vezes por acidente, por vezes propositadamente (como no caso do humor).
</p>
</div>
</div>
</body>
Like this?
.top-menu{
padding: 0%;
margin: 0px;
}
.main-content{
position: relative;
width: 96.5%;
left: 3.5%;
}
.wrapper{
display: fixed;
position: relative;
width: 100%;
}
.left-menu{
position: relative;
height: 100%;
width: 3.5%;
float: left;
z-index: 0;
overflow: visible;
}
<body style="border:5px solid blue">
</div>
<div class="wrapper"style="border:5px solid green">
<div class="left-menu" style="border:3px solid yellow">
<p>Here is where I want to put my menu and I want that this div to be as tall as the pink div</p>
</div>
<div class="main-content" style="border:5px solid orange;">
<p>O que é o Lorem Ipsum?
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.
Porque é que o usamos?
É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais ou menos normal de letras, ao contrário do uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e editores de páginas web usam actualmente o Lorem Ipsum como o modelo de texto usado por omissão, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias versões têm evoluído ao longo dos anos, por vezes por acidente, por vezes propositadamente (como no caso do humor).
De onde é que ele vem?
Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura clássica em Latim, de 45 AC, tornando-o com mais de 2000 anos. Richard McClintock, um professor de Latim no Colégio Hampden-Sydney, na Virgínia, procurou uma das palavras em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum, e atravessando as cidades do mundo na literatura clássica, descobriu a sua origem. Lorem Ipsum vem das secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" (Os Extremos do Bem e do Mal), por Cícero, escrito a 45AC. Este livro é um tratado na teoria da ética, muito popular durante a Renascença. A primeira linha de Lorem Ipsum, "Lorem ipsum dolor sit amet..." aparece de uma linha na secção 1.10.32.
O pedaço mais habitual do Lorem Ipsum usado desde os anos 1500 é reproduzido abaixo para os interessados. As secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" do Cícero também estão reproduzidos na sua forma original, acompanhados pela sua tradução em Inglês, versões da tradução de 1914 por H. Rackham.
Onde posso arranjar algum?O que é o Lorem Ipsum?
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.
Porque é que o usamos?
É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais ou menos normal de letras, ao contrário do uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e editores de páginas web usam actualmente o Lorem Ipsum como o modelo de texto usado por omissão, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias versões têm evoluído ao longo dos anos, por vezes por acidente, por vezes propositadamente (como no caso do humor).
</p>
</div>
</div>
</body>
You should use something like:
heigth: 100%

css float issue (nav and article)

I have a nav bar and an article in my html page. I want the nav bar to be floating on the left side of the page and the article on the right side: but I don't want the article to wrap around the nav.
<nav>
<ul>
<li id="startButton" class="ui-selected"><div>Inicio</div></li>
<li id="servicesButton"><div>Servicios</div></li>
<li id="offersButton"><div>Ofertas</div></li>
<li id="contactButton"><div>Contacto</div></li>
</ul>
</nav>
<article id="start">
<p>Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.</p>
<p>Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dellas. Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.</p>
<p>Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dellas. Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.</p>
<p>Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dellas. Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden,</p>
</article>
My code is in this fiddle: http://jsfiddle.net/qu6jqcrk/
I have tried floating the article but it gets pushed down the nav bar. Can anyone help me figuring it out?
Regards
There are some solutions. One is to use display: table-cell to article:
nav {
float: left;
}
nav ul {
list-style-type: none;
position: relative;
left: -20px;
display: inline-block;
text-align: center;
}
nav ul li {
border: 2px solid #051838;
margin: 10px;
padding: 1em;
font-size: 1em;
height: 16px;
font-family: Lucida Console;
cursor: pointer;
}
article {
padding: 10px 20px 10px 10px;
margin: 10px;
display: table-cell;
}
article p {
text-align: justify;
}
<nav>
<ul>
<li id="startButton" class="ui-selected">
<div>Inicio</div>
</li>
<li id="servicesButton">
<div>Servicios</div>
</li>
<li id="offersButton">
<div>Ofertas</div>
</li>
<li id="contactButton">
<div>Contacto</div>
</li>
</ul>
</nav>
<article id="start">
<p>Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han
de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.</p>
<p>Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dellas. Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más
que otro.</p>
<p>Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está
ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dellas. Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro
si no hace más que otro.</p>
<p>Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está
ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dellas. Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro
si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado
mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden,</p>
</article>
use white-space:nowrap;
article {
padding: 10px 20px 10px 10px;
margin: 10px;
display: block;
white-space:nowrap;
}
try this
http://jsfiddle.net/qu6jqcrk/5/
you can wrap with a div:
<div class="Left">
<nav>
...
</nav>
</div>
<div class="Right">
<article id="start">
...
</article>
</div>
.Right {
float: right;
width: 70%;
}
.Left {
float: left;
width: 30%;
}
jsfiddle
Just give the article a width, float it to the right, and also use nowrap
article {
padding: 10px 20px 10px 10px;
margin: 10px;
display: block;
width: 60%; /* You need to define a width */
float: right
white-space:nowrap;
}
See working example here.
Note: Width is very important so that the article width doesn't grow excessively.
Use display: table-cell for article
article {
padding: 10px 20px 10px 10px;
margin: 10px;
display: table-cell;
}
http://jsfiddle.net/alemarch/qu6jqcrk/10/

Why aren't the right and left floats stacking together? Where does the space between them come from?

I bet this is probably basic stuff, I've just never come across it before. So, the code:
I've got a h1 followed by a p, followed by the same thing twice. So it goes h1 + p + h1 + p + h1 + p ;
I've floated the h1's to the left, with a 29% width ;
I've floated the p's to the right, width a 69% width ;
My question:
Why are the h1's not stacking up together? I notice the first two are. Why isn't the third one doing the same? Why is it top-aligned with the second paragraph (notice that if you change the p's bottom margin, the h1 follows it)? What am I missing about float behavior?
Here's the example at tinkerbin : http://tinkerbin.com/IUVovfjM
Here's the code:
<head>
<style>
h1, p, body{
margin: 0;
padding: 0;
line-height: 1.4;
font: inherit;
}
h1{
float: right;
width: 29%;
background-color: lightblue;
}
p{
float: left;
width: 69%;
background-color: indianred;
}
</style>
</head>
<body>
<h1>This Is The Title</h1>
<p>Lorem Ipsum badum badum baei.A primeira exposição apresenta, através de elementos multimédia, a evolução do dinheiro, com especial referência ao espaço que hoje é Portugal. A exposição termina com um núcleo dedicado à produção das notas, em que materiais e máquinas ilustram as diferentes fases da vida da nota, desde a sua concepção artística até à sua impressão, assim como os principais elementos de segurança que lhe estão associados.</p>
<h1>This Is The Title</h1>
<p>Lorem Ipsum badum badum baei.A primeira exposição apresenta, através de elementos multimédia, a evolução do dinheiro, com especial referência ao espaço que hoje é Portugal. A exposição termina com um núcleo dedicado à produção das notas, em que materiais e máquinas ilustram as diferentes fases da vida da nota, desde a sua concepção artística até à sua impressão, assim como os principais elementos de segurança que lhe estão associados.</p>
<h1>This Is The Title</h1>
<p>Lorem Ipsum badum badum baei.A primeira exposição apresenta, através de elementos multimédia, a evolução do dinheiro, com especial referência ao espaço que hoje é Portugal. A exposição termina com um núcleo dedicado à produção das notas, em que materiais e máquinas ilustram as diferentes fases da vida da nota, desde a sua concepção artística até à sua impressão, assim como os principais elementos de segurança que lhe estão associados.</p>
</body>
Thanks in advance.
Why?
Taken from CSS specification:
"A float is a box that is shifted to the left or right on the current line." - http://www.w3.org/TR/CSS2/visuren.html#floats
"The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document." - item #5 at http://www.w3.org/TR/CSS2/visuren.html#float-position
So, it is the order of your HTML elements which is doing this.
Don't change your CSS, play only with the headers and paragraphs, and you will get the "why": http://tinkerbin.com/xex2Pykn
To achieve the stacking you want, without changing the CSS, you may try this:
<p>Lorem Ipsum badum badum baei.A primeira exposição apresenta, através de elementos multimédia, a evolução do dinheiro, com especial referência ao espaço que hoje é Portugal. A exposição termina com um núcleo dedicado à produção das notas, em que materiais e máquinas ilustram as diferentes fases da vida da nota, desde a sua concepção artística até à sua impressão, assim como os principais elementos de segurança que lhe estão associados.</p>
<h1>This Is The Title</h1>
<h1>This Is The Title</h1>
<h1>This Is The Title</h1>
<p>Lorem Ipsum badum badum baei.A primeira exposição apresenta, através de elementos multimédia, a evolução do dinheiro, com especial referência ao espaço que hoje é Portugal. A exposição termina com um núcleo dedicado à produção das notas, em que materiais e máquinas ilustram as diferentes fases da vida da nota, desde a sua concepção artística até à sua impressão, assim como os principais elementos de segurança que lhe estão associados.</p>
<p>Lorem Ipsum badum badum baei.A primeira exposição apresenta, através de elementos multimédia, a evolução do dinheiro, com especial referência ao espaço que hoje é Portugal. A exposição termina com um núcleo dedicado à produção das notas, em que materiais e máquinas ilustram as diferentes fases da vida da nota, desde a sua concepção artística até à sua impressão, assim como os principais elementos de segurança que lhe estão associados.</p>
There are several other possible solutions, changing the CSS and/or the HTML structure.
http://tinkerbin.com/wMLrXlfQ
Add clear: both; to the h1 and it would appear properly.

table wont respect a 25px padding in IE7

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>