Posicionar Imagens Lado A Lado
#1
Posted 25/08/2008, 15:40
Alguem saberia me dizer como posso fazer para posicionar imagens uma ao lado e embaixo da outra com o css sem q fique com espaço em branco entre elas?
Estu tentando montar o topo de um site parecido com essa imagem mas estou tendo muita dificuldade para colocar esses cubinhos um ao lado do outro.
modelo_img_topo.png 162.59KB 34 downloads
[codebox]body
{
margin: 0;
padding: 0;
font: verdana, arial, san-serif;
text-align: center;
background: #FFF;
/*background-image: url(imagens/bg.png)*/
}
#geral
{
margin: 1em auto;
align:center;
width:778px;
text-align: left;
background-color: #fff;
}
#topo
{
position: relative;
margin:0
padding:0;
height: 180px;
background: #800000;
}
/* Linha 1*/
#topo.img1{ /* p/ as 5 imagem das linhas */
float: left;
}
#topo.img2{ /*p/ a 6ª imagem da linhas */
clear: left;
#topo.imagem_grande {
float: right;
}
[/codebox]
abraços
Luzia
#2
Posted 25/08/2008, 16:08
Margin: 1em
troque por 0px
#3
Posted 25/08/2008, 16:33
largura imagem 1 + largura imagem 2
Nas imagens, aplique float:left em cada uma delas.
P.S: Por favor, favor postar dúvidas nas seções destinadas à isso. A seção onde você postou se chama Tutoriais e Artigos de (X)HTML, CSS, JavaScript e Metodologias, ou seja, destina-se apenas para tutoriais e artigos.
Movi seu tópico.
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.
#4
Posted 25/08/2008, 20:24
Desculpa eu nem reparei que estava postando no lugar errado. Foi mal.
Obrigada pela dica, mas não tá funcionando não.
Já tentei de tudo, relativo, absoluto, float e nada tá resolvendo
Será que eu posso colocar uma tabela dentro da div topo? Só pra poder alinhar essas benditas figuras?
abraços
#5
Posted 25/08/2008, 23:07
#6
Posted 26/08/2008, 08:23
tu coloca uma div para as duas imagens ficarem dentro com o tamanho que as duas imagens tem juntas, ai vc coloca cada imagem dentro de uma div pra cada com o tamanho de cada imagem ai vc coloca nas divs de imagens um float:left; ve se funciona.
<html> <head> <style type="text/css"> #duas_imagens { width:552px; height:auto; } #imagem1 { width:276px; height:115px; float:left; } #imagem2 { width:276px; height:115px; float:left; } </style> </head> <body> <div id="duas_imagens"> <div id="imagem1"> <img src="imagem1.jpg" width="276" height="115" /> </div> <div id="imagem2"> <img src="imagem1.jpg" width="276" height="115" /> </div> </div> </body> </html>
#7
Posted 26/08/2008, 10:16
Bom dia!
Bom, aí vai o codigo html e o css pra vcs darem uma olhada.
Vlw pela ajuda
Abraços
[codebox]/* CSS Document */
body
{
margin: 0;
padding: 0;
font: verdana, arial, san-serif;
text-align: center;
background: #fff;
}
/*
#geral
{
margin:0px;
width: 778px;
text-align: left;
background-color: #ffe;
}
#topo
{ width:778px;
height: 180px;
background-color: #800000;
}
*/
#topo.img1{
position:absolute;
top:0;
left:0;
height:60px;
width:60px;
z-index:1;
}
#topo.img2{
position:absolute;
top: 0px;
left:60px;
height:60px;
width:60px;
z-index:2;
}
#topo.img3{
position: absolute;
top: 0px;
left:120;
height:60px;
width:60px;
z-index:3;
}
#topo.img4{
position: absolute;
top: 0px;
left:180px;
height:60px;
width:60px;
z-index:4;
}
#topo.img5{
position: absolute;
top: 0px;
left:240px;
height:60px;
width:60px;
z-index:5;
}
#topo.img6{
position:absolute;
top: 0px;
left:300px;
height:60px;
width:60px;
z-index:6;
}
#topo.img7{
position: absolute;
top: 0px;
left:358px;
height:180px;
width:420px;
z-index:7;
}
/*2 linha*/
#topo.img8{
position: absolute;
top: 60px;
left:300px;
height:60px;
width:60px;
z-index:8;
}
#topo.img9{
position: absolute;
top: 60px;
left:180px;
height:60px;
width:60px;
z-index:9;
}
#topo.img10{
position: absolute;
top: 60px;
left:240px;
height:60px;
width:60px;
z-index:10;*/
}
#topo.img11{
position: absolute;
top: 60px;
left:300px;
height:60px;
width:60px;
z-index:11;*/
}
#topo.img12{
clear:left;
position: absolute;
top: 61px;
left:60px;
height:60px;
width:60px;
z-index:12;
}
#topo.img13{
float:left;/*
position: absolute;
top: 60px;
left:120px;
height:60px;
width:60px;
z-index:13;*/
}
/*3ª linha*/
#topo.img14{
float:left;/*
position: absolute;
top: 120px;
left:0px;
height:60px;
width:60px;
z-index:14;*/
}
#topo.img15{
float:left;/*
position: absolute;
top: 120px;
left:60px;
height:60px;
width:60px;
z-index:15;*/
}
#topo.img16{
float:left;/*
position: absolute;
top: 120px;
left:120px;
height:60px;
width:60px;
z-index:16;*/
}
#topo.img17{
float:left;/*
position: absolute;
top: 120px;
left:300px;
height:60px;
width:60px;
z-index:17;*/
}
#topo.img18{
float:left;/*
position: absolute;
top: 120px;
left:240px;
height:60px;
width:60px;
z-index:18;*/
}
#topo.img19{
float:left;/*
position: absolute;
top: 120px;
left:300px;
height:60px;
width:60px;
z-index:19;*/
}
#topo.title {
float: right;
}
[/codebox][codebox]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Agendas e Atores de PEB</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="topo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img class="img1" src="imagens/topo/edu1.jpg">
<img class="img2" src="imagens/topo/bloco.jpg">
<img class="img3" src="imagens/topo/globo1.jpg">
<img class="img4" src="imagens/topo/bloco1.jpg">
<img class="img5" src="imagens/topo/clave1.jpg">
<img class="img6" src="imagens/topo/bloco2.jpg">
<img class="img7" src="imagens/topo/title.png">
<img class="img8" src="imagens/topo/bloco1.jpg">
<img class="img9" src="imagens/topo/hiv1.jpg">
<img class="img10" src="imagens/topo/bloco2.jpg">
<img class="img11" src="imagens/topo/cd1.jpg">
<img class="img12"src="imagens/topo/mre1.jpg">
<img class="img13" src="imagens/topo/bloco1.jpg">
<img class="img14" src="imagens/topo/chain1.jpg">
<img class= "img15" src="imagens/topo/bloco1.jpg">
<img class= "img16" src="imagens/topo/arvore1.jpg">
<img class= "img17" src="imagens/topo/bloco1.jpg">
<img class= "img18" src="imagens/topo/copy1.jpg">
<img class= "img2" src="imagens/topo/bloco1.jpg">
</body>
</html>
[/codebox]
#8
Posted 26/08/2008, 16:22
<div id="geral"> <div id="topo"> <!-- As tags img dentro desta div --> </div> </div>
E outra coisa...
Não tem necessidade de criar um CSS tão grande assim.
Você pode retirar todos os atributos class dessas imagens e colocar apenas isso no CSS:
#topo img { float: left; width: 60px; height: 60px; }
Muller Dias
ex-administrador Fórum WMO
#9
Posted 27/08/2008, 10:56
Nunca iria funcionar sem existir a Div #topo e a Div #geral.
<div id="geral"> <div id="topo"> <!-- As tags img dentro desta div --> </div> </div>
E outra coisa...
Não tem necessidade de criar um CSS tão grande assim.
Você pode retirar todos os atributos class dessas imagens e colocar apenas isso no CSS:#topo img { float: left; width: 60px; height: 60px; }
Olá sem.Ponto
Obrigada pela dica, mas isso foi só mais um dos testes que estava fazendo. Estou tentando de tudo com e sem divs e não estava funcionando.
Mas vamos lá, fiz o que vc recomendou.. enxuguei o css e inseri as tags div e topo e funcionou em parte .
Vou tentar explicar melhor pra vê se vc consegue me ajudar di novo.
Eu tenho 18 figurinhas 60x60 dispostas em 3 linhas e 6 colunas + 1 uma "figurona "de 420x180 que deve ficar imediatamente ao lado dessas fig menores - como na imagem anexa.
Só que quando faço as modificações que vc sugeriu, essa imagem de 420x180 fica com a mesma dimesão das outras e as imagens ficam em apenas duas linhas , quando deveriam ficar em três.
Eu fiz então uma classe para essa imagem maior, só que ela desce e fica praticamente no corpo do documento.
Eu vou anexar a imagem do que tá acontecendo p/ vc ter uma idéia melhor
Vlw pela ajuda.
Abraços
Attached Files
#10
Posted 27/08/2008, 12:59
<div id="geral"> <div id="topo"> <div id="pequenas"> <!-- As imagens pequenas dentro desta div --> </div> <div id="grande"> <!-- A imagem grande dentro desta div --> </div> </div> </div>
Muller Dias
ex-administrador Fórum WMO
#11
Posted 28/08/2008, 21:33
Muuuuuuuuuuuuuito obrigada! Eu consegui alinhar todas as imagens graças a sua ajuda!
Vlw mesmo.
Posso abusar só mais um pouquinho rsrsr? Agora q consegui alinhar, gostaria de colocar aquele efeito de substituição de imagens para algumas figuras. Será que vc pode me ajudar a fazer isso tb?
Abraços
#12
Posted 28/08/2008, 22:03
Sobre essa substituição eu não entendi muito bem. Você pode explicar melhor?
Muller Dias
ex-administrador Fórum WMO
#13
Posted 28/08/2008, 22:58
Posso explicar sim. O que eu gostaria de fazer é aquele efeito de aparecer outra imagem quando se passa o mouse por cima - rollover, não é? . Pelo q andei vendo eles usam as listas para fazer isso com os menus, mas não sei como seria no meu caso com esses quadradinhos na div topo.
Abraços
#14
Posted 29/08/2008, 12:51
A imagem que será exibida sem passar o mouse e a imagem que será exibida ao passar o mouse podem formar uma única imagem de 60 x 120 (uma em cima e a outra embaixo).
Html:
<a href="#" class="img1">Texto para essa imagem</a> <a href="#" class="img2">Texto para essa imagem</a> <a href="#" class="img3">Texto para essa imagem</a>
CSS:
a { display: block; width: 60px; background-repeat: no-repeat; padding-top: 60px; overflow: hidden; height: 0; } a:hover { background-position: 0 60px; /* ao passar o mouse, a posição do background mudará exibindo assim a imagem de baixo */ } /* Todas as suas imagens logo abaixo */ .img1 { background: url(imagem1.jpg); } .img2 { background: url(imagem2.jpg); } .img3 { background: url(imagem3.jpg); }
Muller Dias
ex-administrador Fórum WMO
#15
Posted 30/08/2008, 22:04
Muuuuuuuuuuuuuuuito obridada pela ajuda.
Eu consegui fazer, mas... como nem tudo é perfeito rsrsr tá dando um conflito quando eu junto tudo buáá .
Bom, deixa eu te explicar pra vê se vc consegue me salvar di novo.
Estou colocando esse efeito no topo da página, e para testar fiz um css e um html separado. Até aqui tudo bem, funciona direitinho. Mas quando passo as regras do css-teste p/ css-completo, e o html-teste p/ o html-completo fica tudo louco, as imagens do topo desalinham e não aparecem, o menu dá problema, o site inteiro fica esquisito.
Vou colocar o código p/ vc dar uma olhadinha pra mim.
Html
[codebox]!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Agendas e Atores de PEB</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css-topo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="geral">
<div id="topo">
<div id="pequenas">
<!-- Linha 1-->
<a href="ec.html" class="img1"></a>
<img class="img" src="imagens/topo/bloco1.jpg" alt=""/>
<a href="ct.html" class="img2"></a>
<img class="img" src="imagens/topo/bloco1.jpg" alt=""/>
<a href="ec.html" class="img3"></a>
<img class="img" src="imagens/topo/bloco1.jpg" alt=""/>
<!-- linha 2-->
<img class="img" src="imagens/topo/bloco1.jpg" alt=""/>
<a href="ec.html" class="img4"></a>
<img class="img" src="imagens/topo/bloco1.jpg" alt=""/>
<a href="ec.html" class="img5"></a>
<img class="img" src="imagens/topo/bloco1.jpg" alt=""/>
<a href="ec.html" class="img6"></a>
<!-- linha 3-->
<a href="ec.html" class="img7"></a>
<img class="img" src="imagens/topo/bloco1.jpg" alt=""/>
<a href="ec.html" class="img8"></a>
<img class="img" src="imagens/topo/bloco1.jpg" alt=""/>
<a href="ec.html" class="img9"></a>
<img class="img" src="imagens/topo/bloco1.jpg" alt=""/>
</div>
<div id="grande">
<img class="img" src="imagens/topo/titulo.jpg">
</div>
</div>
<!--Fim Topo-->
<div id="barra"></div>
<!-- Inicio Menu de Navegação >
<div id="menu">
<ul id="nav">
<li><a href="index.html">Apresentação</a></li>
<li><a href="#">Áreas Temáticas</a>
<ul>
<li><a href="ct.html">Ciência e Tecnologia</a></li>
<li><a href="ec.html">Educação e Cultura</a></li>
<li><a href="paradiplomacia.html">Paradiplomacia</a></li>
<li><a href="saude.html">Saúde</a></li>
</ul>
</li>
<li><a href="#">Equipe</a>
<ul>
<li><a href="equipe.html#pesquisadores">Pesquisadores</a></li>
<li><a href="equipe.html#assistentes">Assistentes</a></li>
</ul>
</li>
<li><a href="publicacoes.html">Publicações</a></li>
<li><a href="trabalhos.html">Trabalhos Apresentados</a></li>
<li><a href="teses.html">Teses e Dissertações</a></li>
<li><a href="monografias.html">Monografias</a></li>
<li><a href="#">Relatórios</a>
<ul>
<li><a href="rel_rede.html">Atividades da Rede</a>
<li><a href="rel_ic.html">Iniciação Científica</a>
</ul>
</li>
<li><a href="cursos.html">Cursos e Disciplinas</a></li>
<li><a href="#">Eventos</a>
<ul>
<li><a href="eventos.html#prog">Programados</a>
<li><a href="eventos.html#realizados">Realizados</a></li>
</ul>
</li>
<li><a href="clipping.html">Clipping</a></li>
<li><a href="album.html">Fotos</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</ul>
</div>
<!--Fim Menu-->
-->
<h3 class="dest"> Apoio</h3>
<p> jjhhffd<p>
<div class="cols"><img src="imagens/p1.png" alt=""></div>
<div class="cols"><img src="imagens/p1.png" alt=""></div>
</div>
<!--Fim Menu-->
<div id="conteudo">
<h1>Apresentação</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod </p>
<div id="barra"></div>
<div class="c1">
<h3>Subporjetos</h3>
<p><img src="imagens/pdf.gif" alt=""/> <a class="cont" href="#">sp1</a></p>
</div>
</div>
<div id="apoio">
<h4>Área Restrita</h4>
<form action="" method="get">
<label> Usuário:</label>
<input name="usuario" type="text" id="usuario4" size="12" maxlength="8" />
<label> Senha:</label>
<input name="senha" type="password" id="senha2" size="12" maxlength="5" />
<p>
<input type="submit" name="Submit" value="Enviar" />
</p>
</form>
<hr />
<div>
<h3>Novidades</h3>
<p class="teste"><a href="#">Lançamento do o novo livro </a></p>
<p class="teste">Simpósio de Peb</p>
<p class="teste">Seminário </p>
</div>
</div>
<div id="rodape"> </div>
</div>
-->
</div>[/codebox]
css
[codebox]/* CSS Document */
body
{
margin: 0;
padding: 0;
font: verdana, arial, san-serif;
text-align: center;
background: #FFF;
}
#geral
{
margin:1em center;
width:778px;
text-align: left;
background-color: #fff;
}
#topo
{
height: 180px;
}
#pequenas {
float: left;
width: 360px;
height: 180px;
}
#pequenas img {
float: left;
width: 60px;
height: 60px;
}
a {
display: block;
width: 60px;
background-repeat: no-repeat;
padding-top: 60px;
overflow: hidden;
height: 0;
}
a:hover{
background-position: 0 60px;
size: 120%;
/* ao passar o mouse, a posição do background mudará exibindo assim a imagem de baixo */
}/*
Todas as suas imagens logo abaixo */
.img1 {
background: url(imagens/topo/top1.jpg);
float: left;
width: 60px;
height: 0px;
}
.img2 {
background: url(imagens/topo/top2.jpg);
float: left;
width: 60px;
height: 0px;
}
.img3 {
background: url(imagens/topo/top3.jpg);
float: left;
width: 60px;
height: 0px;
}
.img4 {
background: url(imagens/topo/top4.jpg);
float: left;
width: 60px;
height: 0px;
}
.img5 {
background: url(imagens/topo/top5.jpg);
float: left;
width: 60px;
height: 0px;
}
.img6 {
background: url(imagens/topo/top6.jpg);
float: left;
width: 60px;
height: 0px;
}
.img7 {
background: url(imagens/topo/top7.jpg);
float: left;
width: 60px;
height: 0px;
}
.img8 {
background: url(imagens/topo/top8.jpg);
float: left;
width: 60px;
height: 0px;
}
.img9 {
background: url(imagens/topo/top9.jpg);
float: left;
width: 60px;
height: 0px;
}
#grande {
float: right;
width: 418px;
height: 180px;
}
#grande img {
float: left;
width: 420px;
height: 180px;
}
#barra
{
height: 10px;
background-color: #800000;
/*Fim Topo*/ }
/*----------------Inicio Menu-----------------*/
#menu
{
float: left;
width: 180px;
height: auto;
margin-top:0px;
}
#menu ul{
margin: 0;
padding: 0;
list-style: none;
width: 180px;
color: #fcebca;
font: bold 11px "Trebuchet MS", Verdana, Arial, Serif;
}
#menu ul li {
position: relative;
}
#menu li ul{
position: absolute;
left: 179px;
top: 0;
display: none;
}
#menu ul li a:link, a:visited, a:active {
text-decoration:underline;
display: block;
text-decoration:none;
color: #ffe9c6;
background: #800000;
padding: 5px;
}
#menu ul li a:visited {
text-decoration:none;
display: block;
text-decoration:none;
color: #ffe9c6;
background: #800000;
padding: 5px;
}
#menu ul li a:active {
text-decoration:none;
display: block;
text-decoration:none;
color: #ffe9c6;
background: #ccc;
padding: 5px;
}
#menu ul li a:hover {
text-decoration: underline;
color: #800000;
background-color: #feebcc;
}
#menu li:hover ul {
display: block;
text-decoration: underline;
color:#feebcc ;
background: #800000;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
/* ----Fim Menu -------*/
/* ----Inicio Conteudo -------*/
#conteudo{
float: left;
width: 450px;
height: auto;
text-align:justify;
padding: 10px;
border:solid 0 #800000;
border-width: 0px 8px;
background-image: url(imagens\bg2.png) repeat-y 0 0;
font: 11px "Trebuchet MS", Verdana, Arial, Serif;
color: #696969;
}
.c1 {
width: 450px;
height: auto;
text-align:justify;
padding:10px;
font: 11px "Trebuchet MS", Verdana, Arial, Serif;
color: #696969;
}
/* Lista do Conteúdo*/
ul.cont{
/*margin: 10px;
padding: 3px;*/
list-style: square;
/*font: normal, 12px, Trebuche MS, Verdana, Arial, Serif;*/
font-size: 11px;
line-height: 150%;
}
ul li.cont{
padding: 5px;
}
a.cont:link, a.cont:visited, a.cont:active {
text-decoration: underline;
color:#A52A2A;
}
a.cont:hover {
text-decoration: underline;
color: #800000;
background: #feebcc;
}
/*Fim das Listas dentro do conteudo*/
#apoio
{
float: right;
width: 100px;
height:auto;
padding: 5px;
background-image: url(imagens/bg_vert.jpg);
}
#teste
{
margin-left: 190px;
width: 80px;
height: 120px;
background-color: #000;
}
#rodape
{
clear: both;
height: 20px;
background-color: #800000;
text-align: center;
font-size: 9pt;
color: #fcebca;
font: bold 9px "Trebuche MS", Verdana, Arial, Serif;
}
h1, h2, h3, h4 {
margin: 0.8em 0;
font-size:1.6em;
color:#8B0000;
padding:5px;
}
h2 {
font-size:1.3em;
}
h3 {
font-size:1.2em;
}
h4{
font-size:1em;
}
.dest {
margin-top: 15px;
color:#800000;
padding:5px;
background-color: #ece5cf;
font: arial;
}
.areas_tematicas {
background: #800000;
color: #fcebca;
padding: 5px;
}
.cols{
float:left;
background:#fff;
}[/codebox]
1 user(s) are reading this topic
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)