HTML Modificar uma "div" através do CSS.

cisneiro · 25 de julho de 2018

Boa tarde a todos do fórum, galera estou tentando criar meu primeiro site usando a IDE sublime text 2. Logo , tenho um arquivo HTML e outro CSS para estilizar a página. porém no CSS só consigo inserir os atributos na primeira "div"( id:wrep) do html, quando tento estilizar a seguda (id:"content") e terceira (id:"sidebar") "div", nada funciona quando atualizo a pagina no navegador. abaixo segue os códigos do arquivo HTML e o código do CSS. quem puder ajudar agradeço. aguardo atenciosamente a ajuda dos senhores, obrigado

HTML

<!doctype html>

	<html>
		<head>
			<title>Meu primeiro layout</title>
			<meta charset = "utf-8"/> 
			<link rel="stylesheet" type="text/css" href="estilo.css"/>

		</head>

		<body>
			<div id="wrap">
				<header>
					<h1>Nome do site</h1>
					<nav>
						<ul>
							<li><a href="">Menu 1</a></li>
							<li><a href="">Menu 2</a></li>
							<li><a href="">Menu 3</a></li>
							<li><a href="">Menu 4</a></li>
							<li><a href="">Menu 5</a></li>
						</ul>
					</nav>
				</header>


				<div id:"content">
					<section>
						<h2>Título da seção</h2>
						<p>Conteúdo da seção</p>	
					</section>
					<article>
						<h2>Título do artigo</h2>
						<p>Conteúdo do artigo</p>
					</article>
				</div>
				<div id:"sidebar">
					<aside>
						<ul>
							<li><a href="">Submenu 1</a></li>
							<li><a href="">Submenu 2</a></li>
							<li><a href="">Submenu 3</a></li>
							<li><a href="">Submenu 4</a></li>
							<li><a href="">Submenu 5</a></li>	
						</ul>
					</aside>
				</div>


				<footer>
					rodapé do site
				</footer>
			</div>
		</body>

	</html>

CSS

body{ font-family: helvetica, sans-serif; 

}
#wrap{
	width: 960px;
	margin: auto;
	background: #e3e3e3;
	padding: 10px 20px;
	overflow: hidden;
}
header nav ul{
	list-style: none;
	padding-left:  0;
}
header nav ul li{
	display: inline-block;
	margin-right: 10px;
}
header nav ul li a{
	font-size: 20px;
	color: #ff6600;
	text-decoration: none;
}
header nav ul li a:hover{
	text-decoration: underline;
}
#content{
	float: right;
	width: 660px;
	background: blue;
}

#sidebar{
	float: right;
	width: 300px;
	background: blue;
}

Luís Roberto C. da Silva · 25 de julho de 2018

Tem que excluir o cache do navegador, pois o mesmo armazena o arquivos das páginas em offline e abre esses arquivos. Apague o cache e atualize.

XenoStory · 25 de julho de 2018

Opa, boa tarde cisneiro

Fico feliz que esteja iniciando sua vida no mundo de desenvolvimento. Acredito que o problema no seu caso, está na forma em você estruturou o código mesmo. As divs, devem seguir a seguinte estrutura de criação:

<div id="nome">
  <p>Conteúdo</p>
</div>

Note que no seu código, você está usando : para declarar a criação de duas das divas, conforme abaixo:

<div id:"content">
  <!-- Toda sua estrutura -->
</div>

Conforme expliquei, o certo seria então:

<div id="content">
  <!-- Sua estrutura -->
</div>

Em HTML, todos os atributos de uma tag serão tratados da mesma forma, utilizando um = para definir o valor daquele atributo. Espero que isso funcione!

Qualquer coisa dúvida, é só postar que tentamos te ajudar.

Abraços!

DiF · 25 de julho de 2018

@cisneiro Basicamente não funciona por causa do "dois pontos" que foi mencionado pelo@XenoStory

O certo é usar o sinal de igual " = " porém já vi em certos casos usar o dois pontos " : " provavelmente com algum framework.

Mas no HTML o correto é o sinal de igual. :thumbsup:

cisneiro · 26 de julho de 2018

Galera primeiramente quero agradecer a todos que responderam. Na verdade eu que fiz confusão e fui desatento com o HTML e CSS, pois no CSS usamos os : antes do valor do atributo e no HTML é o sinal de igual.

Muito obrigado galera, pois estava travado por conta deste pequeno detalhe.

Cordialmente Allan Cisneiro.

@XenoStory @DiF @Luís Roberto C. da Silva