Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Nhyl

Problema com width HTML | CSS

Por , em Desenvolvimento frontend

Recommended Posts

Nhyl    0

Nhyl
Postado

Boa tarde,

Segue meu html, css e print do que está acontecendo. Não era pros articles ficarem com 100px?

  

<!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>Projeto</title>

<link href="css\style.css" rel="stylesheet" />

</head>

<body>

<div id="conteudo">
	<div id="menu">
    menu
    </div>
    <div id="infos">
    infos
    </div>
    
    <div id="produtos">
    	<div class="produtos">01</div>
    	<div class="produtos">02</div>
        <div class="produtos">03</div>
        <div class="produtos">04</div>
    
    </div>

</div>
</body>
</html>
#conteudo{
	background: #FFF;
	widht: 850px;
	height: 1000px;	
}

#menu{
	witdh: 850px;
	height: 40px;
	background: #333;

	
}

#infos{
	witdh: 850px;
	height: 600px;
	background: #EFEFEF;

}

#produtos{
	witdh: 350px;
	height: 250px;
	background: #FFF;
	display: flex;
	flex-direction: row;
	flex-wrap: no-wrap;
	justify-content: space-around;
	
}

.produtos{
	witdh: 100px;
	height: 245px;
	background: #E9E9E9;
	margin: 5px;	
	
}

 

PROBLEMA.png

Compartilhar este post

Link para o post
Compartilhar em outros sites

Omar~    87

Omar~
Postado

Sua solução : <div clas="produtos">

Regras CSS:

Spoiler 

<html>
	<head>
		<style>
			div {
				font-weight: bold
			}
			#identificador {
				color: blue
			}
			.atribuidor {
				color: green
			}
		</style>
	</head>
	<body>
		<div style="color:red">CSS não pode editar esse bloco porque tem grau de importância máxima (Recomendado só em cituações expecíficas)</div>
		<div id="identificador">CSS pode editar, mas pode não funcionar em disign complexos (Não recomendado em hipótese alguma!)</div>
		<div class="atribuidor">CSS pode editar e pode existir quantos quiser (Melhor aplicação)</div>
	</body>
</html>

 

 

DIV - ID usa-se uma tralha : #

DIV - CLASS usa-se um ponto : .

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nhyl    0

Nhyl
Postado
Em 01/07/2017 at 09:53, OmarF disse:

Sua solução : <div clas="produtos">

Regras CSS:

  Mostrar conteúdo oculto 


<html>
	<head>
		<style>
			div {
				font-weight: bold
			}
			#identificador {
				color: blue
			}
			.atribuidor {
				color: green
			}
		</style>
	</head>
	<body>
		<div style="color:red">CSS não pode editar esse bloco porque tem grau de importância máxima (Recomendado só em cituações expecíficas)</div>
		<div id="identificador">CSS pode editar, mas pode não funcionar em disign complexos (Não recomendado em hipótese alguma!)</div>
		<div class="atribuidor">CSS pode editar e pode existir quantos quiser (Melhor aplicação)</div>
	</body>
</html>

 

 

DIV - ID usa-se uma tralha : #

DIV - CLASS usa-se um ponto : .

 

Troquei o nome da class para "produto", sem o "s" - Ajustei no CSS para ".produto" e ainda não deu... =/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • Alessandro Bodão
      H1 que preencha toda a largura da container
      Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

    • 4Unknow
      Tamanho de imagem.
      Por 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.
    • Carlos Web Soluções Web
      Como expandir Multi-Level Menu para 100% ??
      Por Carlos Web Soluções Web
      Como expandir Multi-Level Menu para 100% ??

      Olá....como vão ??

      Eu peguei um CSS Multi-Level Menu como modelo na internet, e gostaria de fazer uma modificação !!
      O menu (no link abaixo) sem estar no Responsive está ocupando mais ou menos a metade da tela. Eu gostaria que ocupasse 100% !! Tentei fazer tal modificação por conta mas não consegui !!
       
      Link = CSS Multi-Level Menu

      Alguém por favor poderia me dar uma ajuda ??
      Desde já obrigado
      Carlos
    • Bruna Garcia
      Como deixar o texto adaptável em uma site com efeito scroll
      Por Bruna Garcia
      Meu site é scroll, estou com problemas pra deixar o texto adaptável ao width, o texto não está quebrando automático e está criando uma barra de rolagem no rodapé.
      O estilo do texto está na classe "Sobre"
       
      @charset UTF=8; *{ margin: 0; padding: 0; } body, html{ max-width: 100%; height: 100%; } #menu{ width: 100%; height: 102px; background-color: #000; color: #fff; position: fixed; display: flex; } #menu a{ display: block; color: #fff; text-decoration: none; padding: 48px; flex-grow: 1; font-family: Arial; } #menu a:hover{ padding: 48px; background: #fff; color: #000; } .logo{ display: block; } .content{ width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; } p{ text-indent: 50px; text-align: center; } #home{ background-color: #000;} #sobre{ background-color: #fff; width: 100%;} .sobre{ text-align: center; padding: 30px; overflow: visible; }  
    • Kelven Cristian
      Banner 100% Tamanho da Tela
      Por Kelven Cristian
      Olá pessoal, tudo bem? Estou com uma dúvida aqui, que está me travando a alguns dias, fiz pesquisas e mais pesquisas e ainda não consegui nada conclusivo...
      Estou programando um layout e vou usar algo simples,  uma galeria de noticias em jcycle de uns 600px e que tenha 100% de width. Aí que é o meu problema...Quero saber se existe a possibilidade de eu definir o  tamanho da miniatura para 100% do tamanho da tela e não 100% do tamanho da imagem em si, eu sei que é possivel fazer isso com os recursos do background-image e background-size, ja fiz e deu certo, e as imagens se ajustam corretamente nas resoluções.
      Mas como vou usar php para inserir as imagens, creio que não será viável, então minha busca é de usar  uma forma sem ser o parâmetro background do css...
      Resumindo, quero que a miniatura preencha a tela toda com um height estabelecido, que diminua de acordo com o tamanho da janela do navegador. Não vou postar o código que eu tenho aqui pq acho, que não vai ajudar muito. (Obs. Não estou utilizando Bootstrap).
       
      Desde já agradeço a atenção de todos! 
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito