Boa tarde moçada, bom to desenvolvendo um layout que é este:
http://www.comerciom...br/exemplos.jpg
Só que não estou conseguindo formatar o conteudo dele, na parte onde esta A Empresa..., Serviços... como pode ser visto ai no desenho do layout que fiz no Fireworks, gostaria de uma ajuda de você para flutuar as imagens e alinhar o texto e colocar aquela linha separadora no meio, pois não estou conseguindo, e precisaria entregar ele o mais rápido possivel, alguém poderia me ajudar? Desde ja agradeço a todos pela atenção. Obrigado.
Formatação Css
Started By donizeth, 28/04/2008, 17:23
15 replies to this topic
#2
tempest
-
- Usuários
-
- 131 posts
12 Horas
- Sexo:Masculino
- Localidade:Caçador, SC
- Interesses:Php, Mysql e interatividade!
Posted 29/04/2008, 01:27
Não entendi muito bem o que você quis dizer, vamos ver se posso ajudar. 
Você teria que formar seu menu com ul certo?
nas CSS ficaria assim:
Estou certo, quanto a sua pergunta?!
Você teria que formar seu menu com ul certo?
<div id="menu"> <ul> <li><a href="#" class="home">Home</a></li> <li><a href="#" class="empresa">Serviços</a></li> <li>Produtos</li> <li>Conatos</li> <ul> </div>
nas CSS ficaria assim:
#menu{
margin:auto;
padding-right:200px;
}
#menu ul{
list-style: none;
margin:0; padding: 0;
}
#menu ul li{
display: inline;
}
#menu ul li a home{
height:50px;
width:20px;
background:url(endereço/imagem/botão_home) no-repeat;
}
#menu ul li a empresa{
height:50px;
width:20px;
background:url(endereço/imagem/botão_empresa) no-repeat;
} Estou certo, quanto a sua pergunta?!
Edição feita por: tempest, 29/04/2008, 01:28.
Css - Flash - Php?...
<? echo "Compartilhar é uma boa forma de aprender"; ?>
#3
Alex Hiroshi
-
- Ex-Admins
-
- 4923 posts
Super Veterano
- Sexo:Masculino
- Localidade:São Paulo - SP
Posted 29/04/2008, 06:29
Para flutuar as imagens do conteúdo, use float:left.
css
Procure aqui no fórum e no google sobre float no css.
css
.flutuar {float:left/}img<img src="url" class="flutuar" alt="" />Para colocar a linha que separa o conteúdo, use um float left também.
Procure aqui no fórum e no google sobre float no css.
Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador
#4
donizeth
-
- Usuários
-
- 77 posts
Normal
- Sexo:Masculino
Posted 29/04/2008, 10:24
Bom gente, graças a vocês estou conseguindo, so que agora ja esta desse modo:
http://www.comerciom...br/exemplo2.jpg
Qual seria o codigo CSS para a imagem flutuar no meio do texto? que como vcs podem ver, o primeiro paragrafo do texto da direita não esta em cima da imagem... Se alguem puder me ajudar... obrigado a todos.
http://www.comerciom...br/exemplo2.jpg
Qual seria o codigo CSS para a imagem flutuar no meio do texto? que como vcs podem ver, o primeiro paragrafo do texto da direita não esta em cima da imagem... Se alguem puder me ajudar... obrigado a todos.
#5
Alex Hiroshi
-
- Ex-Admins
-
- 4923 posts
Super Veterano
- Sexo:Masculino
- Localidade:São Paulo - SP
Posted 29/04/2008, 21:49
Como está o seu HTML? O css é o mesmo.
Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador
#6
donizeth
-
- Usuários
-
- 77 posts
Normal
- Sexo:Masculino
Posted 30/04/2008, 13:23
tempest e a todos, obrigado pela ajuda, mais tpw tempest nao é bem isso, o que estou precisando agora é flutuar a imagem no meio de um texto como no exemplo a seguir:
http://www.comerciom...br/exemplos.jpg
se vcs repararem na coluna da direita onde esta o topico "Serviços..." a imagem flutua cercada pelo texto por cima, do lado e em baixo, o resto da minha duvida gente consegui solucionar, fui futricando aki ate conseguir, agora o que me resta é consertar isso ai, ou seja, colocar a imagem flutuando no meio do texto, alguem poderia me dizer como fazer isso? obrigado gente, segue abaixo o codigo:
CSS:
HTML:
Ta ai gente. desde ja obrigado a todos.
http://www.comerciom...br/exemplos.jpg
se vcs repararem na coluna da direita onde esta o topico "Serviços..." a imagem flutua cercada pelo texto por cima, do lado e em baixo, o resto da minha duvida gente consegui solucionar, fui futricando aki ate conseguir, agora o que me resta é consertar isso ai, ou seja, colocar a imagem flutuando no meio do texto, alguem poderia me dizer como fazer isso? obrigado gente, segue abaixo o codigo:
CSS:
body {
background-color: #000000;
margin-top: 0;
text-align: center;
color: #FFFFFF;
}
#foto1 {
float: left;
width: 200px;
height: 162px;
overflow: hidden;
padding: 4px;
}
#foto2 {
float: left;
width: 200px;
height: 162px;
overflow: hidden;
padding: 4px;
}
#bloco1 {
float: left;
width: 380px;
text-align: justify;
overflow: hidden;
padding: 4px;
}
#bloco2 {
float: left;
width: 15px;
margin-top: 5px;
text-align: right;
}
#bloco3 {
float: right;
width: 360px;
text-align: justify;
overflow: hidden;
padding-right: 8px;
margin-top: 4px;
}
p.primeiro {
font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
font-size: 11px;
color: #0F3B4D;
}
p.segundo {
font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
font-size: 11px;
color: #0F3B4D;
}
.titulos {
font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
font-size: 15px;
color: #0F3B4D;
}
html> body #texto2 {margin-top: 0px;}
html> body p.primeiro {margin-top: 0px;}
html> body p.segundo {margin-top: 0px;}HTML:
<!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> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Tapeçaria Júnior</title> <link href="estilos.css" rel="stylesheet" type="text/css" /> </head> <body> <table border="0" align="center" cellpadding="0" cellspacing="0"> <tr valign="top"> <td width="40"><img src="topo/topo1.jpg" alt="Topo 1" /></td> <td width="469"><img src="topo/topo2.jpg" alt="Topo 2" /><img src="topo/topo3.jpg" alt="Topo 3" /><img src="topo/banner.jpg" alt="Banner" /><img src="topo/topo6.jpg" alt="Topo 6" /></td> <td width="113"><img src="topo/topo4.jpg" alt="Topo 4" /></td> <td width="157"><img src="topo/topo5.jpg" alt="Topo 5" /></td> </tr> <tr valign="top"> <td colspan="4"><img src="topo/topo7.jpg" alt="Topo 7" /><img src="topo/topo8.jpg" alt="Topo 8" /><img src="topo/topo9.jpg" alt="Topo 9" /></td> </tr> <tr valign="top"> <td colspan="4"><img src="menu/menu1.jpg" alt="Menu 1"/><a href="http://www.terra.com.br"><img src="menu/menu2.jpg" alt="Menu 2" border="0" /></a><img src="menu/menu3.jpg" alt="Menu 3" /><a href="http://www.terra2.com.br/"><img src="menu/menu4.jpg" alt="Menu 4" border="0" /></a><img src="menu/menu5.jpg" alt="Menu 5" /><a href="http://www.terra3.com.br/"><img src="menu/menu6.jpg" alt="Menu 6" border="0" /></a><img src="menu/menu7.jpg" alt="Menu 7" /><a href="http://www.terra4.com.br/"><img src="menu/menu8.jpg" alt="Menu 8" border="0" /></a><img src="menu/menu9.jpg" alt="Menu 9" /><a href="http://www.terra5.com.br/"><img src="menu/menu10.jpg" alt="Menu 10" border="0" /></a><img src="menu/menu11.jpg" alt="Menu 11" width="212" height="27" /></td> </tr> <tr valign="top"> <td colspan="4" bgcolor="#D8E7EA"> <div id="bloco1"> <div id="foto1"> <img src="images/foto1.jpg" alt="Foto 1" /> </div> <div class="titulos">A Empresa...</div> <p class="primeiro">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <div id="bloco2"> <img src="images/separador.jpg" alt="Separador" /> </div> <div id="bloco3"> <div id="foto2"> <img src="images/foto1.jpg" alt="Foto 2" /> </div> <div class="titulos">Serviços...</div> <p class="segundo">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the. only five centuries, but also the. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> </td> </tr> </table> </body> </html>
Ta ai gente. desde ja obrigado a todos.
#7
tempest
-
- Usuários
-
- 131 posts
12 Horas
- Sexo:Masculino
- Localidade:Caçador, SC
- Interesses:Php, Mysql e interatividade!
Posted 01/05/2008, 20:50
Olá donizeth;
Como você pode perceber. o parágrafo está abaixo da foto:
<div id="bloco3">
<div id="foto2">
<img src="images/foto1.jpg" alt="Foto 2" />
</div>
<div class="titulos">Serviços...</div>
</div>
Como a imagem é o primeiro elemento contido na div, e esta como "float : left".....
Como você pode perceber. o parágrafo está abaixo da foto:
<div id="bloco3">
<div id="foto2">
<img src="images/foto1.jpg" alt="Foto 2" />
</div>
<div class="titulos">Serviços...</div>
</div>
Como a imagem é o primeiro elemento contido na div, e esta como "float : left".....
Edição feita por: tempest, 01/05/2008, 20:52.
Css - Flash - Php?...
<? echo "Compartilhar é uma boa forma de aprender"; ?>
#8
donizeth
-
- Usuários
-
- 77 posts
Normal
- Sexo:Masculino
Posted 06/05/2008, 00:05
tempest, ainda nao consegui, dei mais uma fuçada e xeguei até nesse ponto, se puder me ajudar, segue abaixo o codigo:
HTML:
CSS:
poderia me dizer o que tenho q mudar para ficar como na coluna a direita no topico "Serviços..." como no link:
http://www.comerciom...br/exemplos.jpg
Obrigado.
HTML:
<!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> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Tapeçaria Júnior</title> <link href="estilos.css" rel="stylesheet" type="text/css" /> </head> <body> <table border="0" align="center" cellpadding="0" cellspacing="0"> <tr valign="top"> <td width="40"><img src="topo/topo1.jpg" alt="Topo 1" /></td> <td width="469"><img src="topo/topo2.jpg" alt="Topo 2" /><img src="topo/topo3.jpg" alt="Topo 3" /><img src="topo/banner.jpg" alt="Banner" /><img src="topo/topo6.jpg" alt="Topo 6" /></td> <td width="113"><img src="topo/topo4.jpg" alt="Topo 4" /></td> <td width="157"><img src="topo/topo5.jpg" alt="Topo 5" /></td> </tr> <tr valign="top"> <td colspan="4"><img src="topo/topo7.jpg" alt="Topo 7" /><img src="topo/topo8.jpg" alt="Topo 8" /><img src="topo/topo9.jpg" alt="Topo 9" /></td> </tr> <tr valign="top"> <td colspan="4"><img src="menu/menu1.jpg" alt="Menu 1"/><a href="http://www.terra.com.br"><img src="menu/menu2.jpg" alt="Voltar a página inicial" border="0" /></a><img src="menu/menu3.jpg" alt="Menu 3" /><a href="http://www.terra2.com.br/"><img src="menu/menu4.jpg" alt="A Empresa" border="0" /></a><img src="menu/menu5.jpg" alt="Menu 5" /><a href="http://www.terra3.com.br/"><img src="menu/menu6.jpg" alt="Serviços" border="0" /></a><img src="menu/menu7.jpg" alt="Menu 7" /><a href="http://www.terra4.com.br/"><img src="menu/menu8.jpg" alt="Produtos" border="0" /></a><img src="menu/menu9.jpg" alt="Menu 9" /><a href="http://www.terra5.com.br/"><img src="menu/menu10.jpg" alt="Contato" border="0" /></a><img src="menu/menu11.jpg" alt="Menu 11" width="212" height="27" /></td> </tr> <tr valign="top"> <td colspan="4" bgcolor="#D8E7EA"> <div id="bloco1"> <div id="foto1"> <img src="images/foto1.jpg" alt="Nossos Serviços" /> </div> <div class="titulos">A Empresa...</div> <p class="primeiro">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <div id="bloco2"> <img src="images/separador.jpg" alt="" /> </div> <div id="bloco3"> <div id="foto2"> <img src="images/foto1.jpg" alt="Nossos Serviços" /> </div> <div class="titulos">Serviços...</div> <p class="segundo">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the. only five centuries, but also the. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> </td> </tr> </table> </body> </html>
CSS:
body {
background-color: #000000;
margin-top: 0;
text-align: center;
color: #FFFFFF;
}
#foto1 {
float: left;
width: 200px;
height: 162px;
overflow: hidden;
padding: 4px;
}
#foto2 {
float: left;
width: 200px;
height: 162px;
overflow: hidden;
padding: 4px;
}
#bloco1 {
float: left;
width: 380px;
text-align: justify;
overflow: hidden;
padding: 4px;
}
#bloco2 {
float: left;
width: 15px;
margin-top: 5px;
text-align: right;
}
#bloco3 {
float: right;
width: 360px;
text-align: justify;
overflow: hidden;
padding-right: 8px;
margin-top: 4px;
}
p.primeiro {
font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
font-size: 11px;
color: #0F3B4D;
}
p.segundo {
font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
font-size: 11px;
color: #0F3B4D;
}
.titulos {
font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
font-size: 15px;
color: #0F3B4D;
}
html> body #texto2 {margin-top: 0px;}
html> body p.primeiro {margin-top: 0px;}
html> body p.segundo {margin-top: 0px;}poderia me dizer o que tenho q mudar para ficar como na coluna a direita no topico "Serviços..." como no link:
http://www.comerciom...br/exemplos.jpg
Obrigado.
#9
Alex Hiroshi
-
- Ex-Admins
-
- 4923 posts
Super Veterano
- Sexo:Masculino
- Localidade:São Paulo - SP
Posted 06/05/2008, 07:06
Você só quer colocar a imagem ali no canto e fazer com que o texto fique em volta, certo? Não precisa criar uma div para a imagem, é só deixar a imagem no meio do texto.
E só uma observação no seu html:
<div id="sevicos"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <img src="arvore.jpg" alt="" /> <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div>Pronto! Agora é só fazer essa imagem flutuar, com float:left.
#servicos img {float:left;}Com esse css, todas as imagens que estiverem dentro da div #servicos vão estar com float. Caso você tenha mais de uma imagem e queria só que uma receba essa mudança, use uma classe, como eu mostrei ali em cima.E só uma observação no seu html:
<div class="titulos">Serviços...</div>Você está usando uma div para marcar um título, o que é errado. Use um hN para isso, por exemplo <h2>Serviços</h2>
Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador
#10
donizeth
-
- Usuários
-
- 77 posts
Normal
- Sexo:Masculino
Posted 06/05/2008, 13:11
Alex, eu fiz como vc disse, e olha como ficou:
http://www.comerciom...m.br/teste.html
a imagem ficou cercada somente por cima e por baixo pelo texto, mais nao pelo lado.
OBS: o motivo de mim estar usando "div" para o titulo, é que eu usei um hN so que deu muito espaco no titulo para o texto, e nao consegui diminuir o espaco que ficou por baixo.
Aguardo respostas e muito obrigado.
http://www.comerciom...m.br/teste.html
a imagem ficou cercada somente por cima e por baixo pelo texto, mais nao pelo lado.
OBS: o motivo de mim estar usando "div" para o titulo, é que eu usei um hN so que deu muito espaco no titulo para o texto, e nao consegui diminuir o espaco que ficou por baixo.
Aguardo respostas e muito obrigado.
#11
dgt
-
- Usuários
-
- 281 posts
diego^SCFC
- Sexo:Masculino
- Localidade:Recife-PE
- Interesses:Java, Delphi, PHP, SQL, Modelagem de Dados, CSS, Lógica de Programação (Algoritmos), Teoria em Banco de Dados
Posted 06/05/2008, 13:55
Opa, beleza?
Dando uma olhada rápidíssima no seu código já percebi um pequeno detalhe:
No CSS você chama o Div de "Servicos"
E no código chama "Sevicos", sem o "R"
Quanto a parte de dimunir espaço no título, somente a parte de baixo, coloque:
O tamanho fica a seu critério.
Dando uma olhada rápidíssima no seu código já percebi um pequeno detalhe:
No CSS você chama o Div de "Servicos"
#servicos img {float:left;}E no código chama "Sevicos", sem o "R"
<div id="sevicos">
Quanto a parte de dimunir espaço no título, somente a parte de baixo, coloque:
margin-bottom: 0px;
O tamanho fica a seu critério.
#12
donizeth
-
- Usuários
-
- 77 posts
Normal
- Sexo:Masculino
Posted 06/05/2008, 15:12
Bom, graças a vocês esta tudo começando a dar certo, mais agora uma duvida me restou, se vcs olharem o link novamente
http://www.comerciom...m.br/teste.html
vao ver que fico um espaço entre o paragrafo de cima, e a imagem e o texto de baixo, como faço para diminuir este espaço? para dar impressao de uma continuacao do texto sem esse espaço? Obrigado a todos, estou conseguindo resolver este problemao meu... obrigado.
http://www.comerciom...m.br/teste.html
vao ver que fico um espaço entre o paragrafo de cima, e a imagem e o texto de baixo, como faço para diminuir este espaço? para dar impressao de uma continuacao do texto sem esse espaço? Obrigado a todos, estou conseguindo resolver este problemao meu... obrigado.
#13
dgt
-
- Usuários
-
- 281 posts
diego^SCFC
- Sexo:Masculino
- Localidade:Recife-PE
- Interesses:Java, Delphi, PHP, SQL, Modelagem de Dados, CSS, Lógica de Programação (Algoritmos), Teoria em Banco de Dados
Posted 06/05/2008, 15:28
Podes fazer de duas maneiras.. irei exemplificar:
Modificando o espaço na própria imagem
Ou modificando na tag <p>
Ou ainda usando os dois ao mesmo tempo...
Modificando o espaço na própria imagem
#servicos img {
float:left;
margin-top: -5px;
margin-right: 10px;
margin-bottom: 10px;
}Ou modificando na tag <p>
#servicos p {margin-bottom: 10px;}Ou ainda usando os dois ao mesmo tempo...
Edição feita por: dgt, 06/05/2008, 15:30.
#14
donizeth
-
- Usuários
-
- 77 posts
Normal
- Sexo:Masculino
Posted 06/05/2008, 16:00
dgt, finalmente consegui, mais existe mais um problema (hehehehe) agora é o FF, no ie ta como eu queria, mais veja no FF, tentei mudar o margin-top da imagem usando o seguinte hack pro FF:
html> body #servicos img {margin-top: 6px;}
deu certo, mais também atingiu o IE, posicionando a imagem mais pra baixo do texto. Como faria agora para deixar no FF igual esta no IE? atualizei o link novamente, se quiser ver, se puder me ajudar, agora so falta isso e pronto. Obrigado a todos... vlw mesmo.... muito agradecido...
html> body #servicos img {margin-top: 6px;}
deu certo, mais também atingiu o IE, posicionando a imagem mais pra baixo do texto. Como faria agora para deixar no FF igual esta no IE? atualizei o link novamente, se quiser ver, se puder me ajudar, agora so falta isso e pronto. Obrigado a todos... vlw mesmo.... muito agradecido...
#15
dgt
-
- Usuários
-
- 281 posts
diego^SCFC
- Sexo:Masculino
- Localidade:Recife-PE
- Interesses:Java, Delphi, PHP, SQL, Modelagem de Dados, CSS, Lógica de Programação (Algoritmos), Teoria em Banco de Dados
Posted 06/05/2008, 17:55
Eu fiz de um jeito aqui que ficou idênticos tanto no IE7 quanto no FF3beta5
Copie várias vezes o <p> que você tem no html e veja como fica.
#servicos img {float:left;
margin-top: -5px;
margin-right: 10px;
margin-bottom: 5px;
}
#servicos p {color: #0066CC;
margin-bottom: 10px;
}Copie várias vezes o <p> que você tem no html e veja como fica.
0 user(s) are reading this topic
0 membro(s), 0 visitante(s) e 0 membros anônimo(s)
