Jump to content
Sign in to follow this  
thiscosta

Problema com div

Recommended Posts

Boa tarde!

Estou com uma problema com o estilo de uma div. Queria fazer uma div com imagens nela, e gostaria que essa div ficasse igual a div com imagens (abaixo do "Quem sou?") do seguinte site: http://editor.wix.com/html/editor/web/renderer/new?siteId=3d9b67f2-8ba2-45f9-832a-bfacfbd306df&metaSiteId=13c470c6-adbf-4635-9bb0-4ec114f2bbd1&editorSessionId=D25DF937-ACA5-4DF2-A6B1-28A42F0DB351

A div que receberia o estilo seria a "<div fotografias" :

<!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=utf-8" />
	<title>Beatriz Gomes Fotografia</title>

	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div class="all">
<div class="fotoback">

<div class="header">
  <div class="menuheader">
      	<center>
	    <ul>
          <li class="logo"><img src="moldura.png" width="5%" /></li>
	      <li><a href="#">HOME</a></li>
	      <li><span class="span">|</span><a href="#">BIO</a></li>
	      <li><span class="span">|</span><a href="#">FOTOGRAFIAS</a></li>
	      <li><span class="span">|</span><a href="#">CONTATO</a></li>
        </ul>
        </center>
      </div>
	
    <div class="foto">
    	<img src="imagens/LOGOBEATRIZ.png" width="30%"  />
    </div>
</div>
</div>

	<div class="sobre">
		<div class="fotoperfil">
			<img src="imagens/perfil.jpg" width="">
		</div>
		<div class="textosobre">
			<font face="" size="10"> Quem sou?</font><br><hr width="6%">
			<p><font face="" size="4" color="black">sfpjsajfsajfiosajfosaijfiosajfoisajfiosajfosajfsajfiosajfisajfio<br>
			sdóaskfoafosakfopsakfopsafopakfksafopaksf<br>aspfjsajfosajfosajfiosajfosajfiosajfiosajfiosajfosa<br>
			pfjsaopjfdsajfsajfiopsajfiosa<br>l´sakfopsajfopksafopksaopfksa<br>o´sfjopsajkpfoksafsaopfkspf<br>
			sfpjsajfsajfiosajfosaijfiosajfoisajfiosajfosajfsajfiosajfisajfio<br>
			sdóaskfoafosakfopsakfopsafopakfksafopaksf<br>aspfjsajfosajfosajfiosajfosajfiosajfiosajfiosajfosa<br>
			pfjsaopjfdsajfsajfiopsajfiosa<br>l´sakfopsajfopksafopksaopfksa<br>o´sfjopsajkpfoksafsaopfkspf<br>
			sfpjsajfsajfiosajfosaijfiosajfoisajfiosajfosajfsajfiosajfisajfio<br>
			sdóaskfoafosakfopsakfopsafopakfksafopaksf<br>aspfjsajfosajfosajfiosajfosajfiosajfiosajfiosajfosa<br>
			pfjsaopjfdsajfsajfiopsajfiosa<br>l´sakfopsajfopksafopksaopfksa<br>o´sfjopsajkpfoksafsaopfkspf<br></p></font>
		</div>
		<br>
	</div>
		
	<div class="fotografias">
		<ul class="lista">
			<li><img src="imagens/fotografias/img1.jpg"></li>
			<li><img src="imagens/fotografias/img2.jpg"></li>
			<li><img src="imagens/fotografias/img3.jpg"></li>
			<li><img src="imagens/fotografias/img4.jpg"></li>
			<li><img src="imagens/fotografias/img5.jpg"></li>
			<li><img src="imagens/fotografias/img6.jpg"></li>
			<li><img src="imagens/fotografias/img7.jpg"></li>
			<li><img src="imagens/fotografias/img8.jpg"></li>
			<li><img src="imagens/fotografias/img9.jpg"></li>
			<li><img src="imagens/fotografias/img10.jpg"></li>
			<li><img src="imagens/fotografias/img11.jpg"></li>
			<li><img src="imagens/fotografias/img12.jpg"></li>
			<li><img src="imagens/fotografias/img13.jpg"></li>
			<li><img src="imagens/fotografias/img14.jpg"></li>
			<li><img src="imagens/fotografias/img15.jpg"></li>
			<li><img src="imagens/fotografias/img16.jpg"></li>
			<li><img src="imagens/fotografias/img17.jpg"></li>
			<li><img src="imagens/fotografias/img18.jpg"></li>
			<li><img src="imagens/fotografias/img19.jpg"></li>
			<li><img src="imagens/fotografias/img20.jpg"></li>
		</ul>
	</div>
</div>
</body>
</html>

E aqui está meu css:

@charset "utf-8";
/* CSS Document */
.all {
	margin:0 auto;
	padding:0px;
}
.header{
	position:absolute;
	top:0;
	left:0;
	right:0;
	background-color: rgba(0,0,0,.5);
	height:150px
}
.logo {
	padding-right:100px;
	margin-top:50px;
}
.menu{
	float:right;
}
.menu ul{
	border-color:white;
}
.menu, ul li {
	list-style:none;
	display:inline;
	padding-right:10px;
}
.menu, ul, li a{
	text-decoration:none;
	color:white;
	padding-left:0px;
	padding-top:10px;
	
}
.span {
	padding:50px;
	font:bold 12px Verdana, Arial, Helvetica; color:#fff;
}
.fotoback {
	background-image:url(imagens/01.jpg);
	width:100%;
	height:1080px;
	background-repeat:no-repeat;
	position:absolute;
	top:0;
	left:0;
	right:0;
	text-align:center;
}
.foto {
	position:relative;
	top:200px;	
}
.sobre{
	position:static;
	padding-top:1072px;
	margin:0 auto;
}
.fotoperfil {
	margin:0 auto;
	float:left;	
}
.textosobre {
	text-align:center;
	padding-top:50px;
}

.fotografias {
	position:static;
	width:100%;
	margin:0 auto;
	overflow:hidden;
}
.fotografias img {
	width:300px;
	float:left;
	margin:0px;
}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By LucasLV
      Olá.
      Tenho um site onde as imagens são geradas através de um arquivo PHP - utilizo esse método para retornar imagens webp ou jpg - e vi que o navegador não utiliza, ou não salva em cache, as imagens geradas dessa forma.
      Já as onde informo o caminho completo da imagem com a extensão, aparecem como utilizadas do cache.

      Esse comportamento é normal quando as imagens são geradas desse jeito ou é por não ter feito nenhuma configuração de cache no arquivo PHP que gera as imagens?
       
      Coloquei uma imagem do resultado exibido no navegador.

    • By rcsbnu27
      Estou tentando ajudar um amigo a desenvolver seu site pessoal ele me passou um modelo, onde não estou conseguindo fazer um link de menu quando clicar nos anos iniciais ir para as turmas dos anos iniciais no menu atividade educacionais, segue em anexo o código. Endereço para ter ideia do que estou falando: https://www.profrodrigo.com/temporario/index.html. Nesta parte:
      HTML
      <div class="container"> <div class="row"> <div class="col-sm-2"> <a href="#anosiniciais" > <img src="images/anos/anosiniciais.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#anosfinais" > <img src="images/anos/anosfinais.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> </div> </div> </div> </div> </div> <div class="section news-section" id="anosiniciais"> <div class="container"> <div class="row"> <div class="col-sm-2"> <a href="#" target="_blank"> <img src="images/turmas/pres.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#" target="_blank"> <img src="images/turmas/1sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/2sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/3sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/4sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> </div> </div> </div>

      <div class="section news-section" id="anosfinais">
      <div class="container">
      <div class="row">
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/5sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="https://www.ebmalbertostein.com" target="_blank">
      <img src="images/turmas/6sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="https://www.profgarrido.com" target="_blank">
      <img src="images/turmas/7sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/8sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/9sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      </div>
      </div>
      </div>
    • By lezão
      Ola pessoal!
      Td bem com vcs?
       
      Estou tentando fazer esse item ficar em css e naun estou conseguindo alguem pode me ajudar?
      <table width="75%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15%" height="35"><b>Moda da Casa</b></td> <td width="55%" style="border-bottom: dotted; border-width: 1px 3px 3px 1px; border-color: black black #000000 #000000"></td> <td width="7%"><b>R$ 25,00</b></td> <td width="3%" rowspan="2" align="left"><img src="https://clipartart.com/images/delete-button-clipart.jpg" width="75px" heigth="50px"/></td> </tr> <tr> <td colspan="3" height="35"> <div class="label-float"> <input type="text" value="Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano." size="100%" placeholder="" required=""> </div> </td> </tr> </table> obrigado!
       
       
       
    • By lezão
      Boa noite!
      Td bem com vcs?
       
      Meus amigos, estou precisando de um css que eu não faço ideia por onde começar ja pesquisei e nada.
      só encontrei como imagem, vejam.

       
      será que tem como fazer em css desse modelo, o texto tem q ficar sobreposto a cor do fundo.
       
    • By 4Unknow
      Boa tarde galera, vamos lá.
      Eu tenho uma plataforma de forum chamada Invision Power Servidor. IPS.

      E nela tenho todo acesso ao código fonte.
      Porém estou com um baita problema, talvez por que eu não entenda.

      No fórum existe um sistema de ranking onde você pode enviar imagens para esse ranking.
      Porém a imagem que eu estou enviando tem as dimensões de 184x100 porém depois que faço o upload, a plataforma mostra com dimensões menores  140x76
      conforme mostra imagem abaixo:
       


      Sendo que as imagens dos grupos como mostra ali "Administrator" e "Founder" estão em um tamanho maior.
      Eu encontrei no código dele o caminho dessa imagem do ranking:

      Se eu remover esse código
       
      {{elseif $comment->author()->rank['title'] && $comment->author()->member_id}} <li class='ipsType_break'>{$comment->author()->rank['title']}</li> {{endif}} {{if $comment->author()->rank['image'] && $comment->author()->member_id}} <li>{$comment->author()->rank['image']|raw}</li> {{endif}} O imagem do raking somem, mas eu não sei como fazer para a imagem ficar do tamanho que estou enviando.

      Se alguém puder me ajudar, ficaria grato.

      obrigado.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.