Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá a todos !
Estou criando um protótipo aqui e estou tendo uma certa dificuldade de posicionar o texto como queria. Olhem só a SS:
Queria subir o texto de forma que ele encaixasse com a caixa.
A baixo o fonte:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled</title>
<style type="text/css">
/*Tags*/
body {
margin: 0;
padding: 0;
text-align: center; }
p {
text-align: justify; }
img {
border-width: 0; }
ul, li {
margin: 0;
padding: 0; }
/*IDs*/
#tudo {
text-align: left;
margin: auto;
margin-top: 6px;
padding: 2px;
border: 1px solid black;
width: 760px; }
#cabeçalho {
margin: auto;
margin-top: 2px;
width: 756px; }
.logo {
position: absolute;
margin: 10px;
z-index: 1; }
.titulo {
position: absolute;
margin-top: 20px;
margin-left: 260px;
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-style: italic;
text-decoration: none;
color: #060;
z-index: 2; }
.sombra {
position: absolute;
margin-top: 24px;
margin-left: 264px;
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-style: italic;
text-decoration: none;
color: #000;
z-index: 1; }
#menu {
padding: 13px 5px 5px 5px;
position: relative;
height: 24px;
width: 270px;
border: 1px #000 solid;
background-color: #FFF;
margin-top: -24px;
margin-right: 14px;
float: right;
z-index: 2; }
#menu a {
text-decoration: none;
color: #F30; }
#menu li {
background-image: url(imagens/bg-menu.png);
border: 1px black solid;
border-top: 4px #060 solid;
padding: 4px 8px;
list-style: none;
margin: 0;
display: inline; }
#menu li:hover {
border: 1px black solid;
border-bottom: 4px #060 solid; }
#conteudo {
padding: 5px;
margin: 0 auto;
width: 746px;
background-color: #FF9;}
</style>
</head>
<body>
<div id="tudo">
<div id="cabeçalho">
<a href="index.html">
<h1 class="titulo">Titulo</h1>
<h1 class="sombra">Titulo</h1>
<img src="imagens/logo.png" alt="Logotipo" width="194" height="160" class="logo" />
<img src="imagens/cabecalho.jpg" alt="Cabeçalho" height="180" width="756" style="z-index: 0;" />
</a>
<div id="menu">
<ul>
<li><a href="#">Início</a></li>
<li><a href="#">História</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Receitas</a></li>
</ul>
</div>
</div>
<div id="conteudo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla nunc in eros. Suspendisse potenti. Duis diam arcu, tincidunt sit amet, pellentesque in, faucibus et, odio. Fusce vitae tortor vel libero tincidunt commodo. Maecenas imperdiet nisi. Vivamus eros. Curabitur sapien. In lobortis. Nunc ac dolor. Donec et ante ut tortor dictum mattis. Nulla aliquet sagittis ligula. Cras fermentum enim fermentum leo. Duis porttitor.</p>
<p>Duis quis ligula sed lacus placerat volutpat. Integer sit amet enim. Suspendisse nibh dui, sodales et, molestie et, pellentesque vitae, diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin diam. Mauris augue ipsum, tempor nec, porttitor a, aliquet vel, felis. Mauris at pede. Morbi luctus arcu sed dolor. Nullam est magna, pretium eu, facilisis ac, vestibulum et, metus. Proin elementum nulla vel dui. Nullam orci. Aliquam vitae massa. Nam sollicitudin vestibulum dui. Ut mollis. Suspendisse quis enim. Nulla feugiat ipsum vitae lacus. Donec eleifend pede elementum lectus.</p>
<p>Vestibulum molestie urna et nunc. Curabitur quam. Vestibulum pharetra. Nulla facilisi. Proin eget massa. Aenean a pede vel mauris vehicula congue. Sed cursus bibendum nisi. Suspendisse placerat scelerisque erat. Curabitur blandit hendrerit quam. Duis egestas eros. Quisque sodales, augue sit amet ullamcorper placerat, lacus justo sagittis metus, ut faucibus nisi magna eget lectus. Aliquam erat volutpat. Aenean mattis egestas felis. Morbi urna augue, fringilla vitae, dignissim sit amet, placerat rhoncus, enim. Phasellus vitae neque. Nunc sed ante non lorem lobortis tincidunt. Donec nisl.</p>
<p>Fusce molestie orci in quam. Fusce magna. Phasellus id eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec egestas tortor ac mauris. Curabitur blandit. Sed nulla. Sed id risus. Nullam fringilla. Mauris quam libero, commodo at, ultricies quis, dignissim id, nisi. Morbi sit amet neque ut arcu scelerisque rhoncus. Duis lectus odio, facilisis ac, feugiat id, venenatis eu, enim. In orci ante, semper vitae, pretium id, dignissim vitae, neque. Aliquam ullamcorper dolor.</p>
<p>Phasellus semper. Maecenas venenatis. Nulla non turpis. Nullam aliquam, nisl et posuere imperdiet, nunc quam sagittis diam, sed lobortis odio pede et purus. Aliquam pharetra viverra ante. Nullam purus neque, laoreet vitae, faucibus at, lacinia at, lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis, lectus in tincidunt congue, nibh ipsum auctor ipsum, sed malesuada elit purus id turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt ullamcorper arcu. Suspendisse a ligula ut elit lobortis commodo. </p>
</div>
</div>
</body>
</html>Forte abraço !!!
Carregando comentários...