Jump to content

  2. → Doty's Content

Doty's Content

There have been 14 items by Doty (Search limited from 17/05/2023)


Tipos

See this member's

Ordernar por                Order  

#934293 Posicionar Imagens Lado A Lado

Posted by Doty on 01/09/2008, 13:02 in CSS & Semântica (Tableless)

Olá Sem.Ponto!

Pode desconsiderar o último post. Finalmente eu consegui ajustar tudo! :rolleyes:

Criei uma classe para cada <a> e funcionou.

Mais uma vez , muito obrigada pela ajuda.


[codebox]/* CSS Document */

body
{
margin: 0;
padding: 0;
font: verdana, arial, san-serif;
text-align: center;
background: #FFF;
}

#geral
{
margin: 1em auto;
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.img1 {
float: left;
display: block;
width: 60px;
background-repeat: no-repeat;
padding-top: 60px;
overflow: hidden;
height: 0;
background: url(imagens/topo/top1.jpg)
}
a.img1:hover {
background-position: 0 60px;
}

a.img2 {
float: left;
display: block;
width: 60px;
background-repeat: no-repeat;
padding-top: 60px;
overflow: hidden;
height: 0;
background: url(imagens/topo/top2.jpg);
}
a.img2:hover {
background-position: 0 60px;
}


a.img3 {
float: left;
display: block;
width: 60px;
background-repeat: no-repeat;
padding-top: 60px;
overflow: hidden;
height: 0;
background: url(imagens/topo/top3.jpg);
}
a.img3:hover {
background-position: 0 60px;
}[/codebox]


#934105 Posicionar Imagens Lado A Lado

Posted by Doty on 30/08/2008, 22:04 in CSS & Semântica (Tableless)

Oie Sem.Ponto!!!

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]


#933659 Posicionar Imagens Lado A Lado

Posted by Doty on 28/08/2008, 22:58 in CSS & Semântica (Tableless)

Oi Sem. Ponto!


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


#933643 Posicionar Imagens Lado A Lado

Posted by Doty on 28/08/2008, 21:33 in CSS & Semântica (Tableless)

Olá Sem.Ponto.

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


#933225 Posicionar Imagens Lado A Lado

Posted by Doty on 27/08/2008, 10:56 in CSS & Semântica (Tableless)

Nunca iria funcionar sem existir a Div #topo e a Div #geral. :P

<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;
}

(ok2)



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



#932980 Posicionar Imagens Lado A Lado

Posted by Doty on 26/08/2008, 10:16 in CSS & Semântica (Tableless)

Olá Rapazeada,

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]


#932884 Posicionar Imagens Lado A Lado

Posted by Doty on 25/08/2008, 20:24 in CSS & Semântica (Tableless)

Oi Feks e Firehalk

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


#932813 Posicionar Imagens Lado A Lado

Posted by Doty on 25/08/2008, 15:40 in CSS & Semântica (Tableless)

Olá Pessoal

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


[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


#931960 Layout - Da Tabela P/ Divs

Posted by Doty on 20/08/2008, 10:07 in CSS & Semântica (Tableless)

Olá Édipo

Muito obrigada pela dica. Eu vou testar. Depois coloco o código aqui. Vc poderia dar uma olhada pra mim?
Abraços

Luzia


#931957 Problemas Com Template

Posted by Doty on 20/08/2008, 09:57 in Dreamweaver

Olá An Web

O link do tutorial é http://forum.wmonlin...howtopic=193072. Inlcusive foi postado por vc. Parabéns !Seu tuto ficou muito bom.
Eu não tenho o link e acabei deletando a minha tentativa, mas o layout que eu preciso é igual ao q está no tuto só que a tabela do menu possui mais ou menos 15 linhas e não apenas 3 como no modelo . Então, quando o conteudo da tabela do meio ultrapassa essa altura os links do menu descem.

Se puder me ajudar eu agradeço

Um abraço

Doty :)


#931632 Layout - Da Tabela P/ Divs

Posted by Doty on 18/08/2008, 19:18 in CSS & Semântica (Tableless)

Olá Pessoal

Alguém poderia me ajudar? Eu gostaria de fazer um layout como esse aki - http://www.andersonn.../trab-templates - só que com css e xhtml, mas não estou conseguindo ajustar o lado direito. Não consigo posicionar as três caixinhas uma embaixo da outra

Abraços

Luzia


#931622 Problemas Com Template

Posted by Doty on 18/08/2008, 18:32 in Dreamweaver

Olá Pessoal

Eu to tentando fazer o template no dw seguindo os passos do tutorial disponpivel aki, só que quando o conteúdo -da página / tabela q fica no centro- é maior que a altura do menu o layout desalinha . Alguém poderia me ajudar?
Abraços


#904750 Script Para Salvar Página

Posted by Doty on 24/03/2008, 14:25 in Javascript / DOM / AJAX / ECMAScript

Oi

Obrigada! Mas então.. como faço p/ criar um servidor PHP no meu PC?

vlw


#904745 Script Para Salvar Página

Posted by Doty on 24/03/2008, 13:53 in Javascript / DOM / AJAX / ECMAScript

Olá Pessoal

Estou precisando de uma ajudinha rsr Eu sou iniciante e gostaria de saber se é possivel e como poderia se fazer em javascript uma fubção que salvasse a própra página numa pasta loca.

É mais ou menos isso:

Eu tenho uma página que é um formulário mas, ao invés de enviar os dados para o servidor eu gostaria que o botão submeter simplesmente salvasse esta mesma página na pasta onde ela se encontra.

Vlw

Doty



  1. Fórum WMO
  2. → Doty's Content
  3. Privacy Policy
  4. Regras ·
IPB Skin By Virteq