Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Victor Ferreira França

Problema CSS com *:not(ul)

Recommended Posts

Boa tarde pessoal sou novo nesta parte de programação web e estou desenvolvendo um website, mas surgiu um pequeno problema agora no css.
Eu estava fiz uma tabela <ul> para criar uma barra de navegação horizontal(Que fica em cima da tela)
O codigo é este:

<ul>
	<li><a href="">Inicio</a></li>
	<li><a href="">Máterias</a></li>
	<li><a href="">Gnosi Ask</a></li>
	<li><a href="">Contato</a></li>
	<li style="float:right"><a class="active" href="">Login</a></li>
	<li><a href="">Lingua</a></li>
	<li><a href="">Pesquisar</a></li>
	</ul>

Então fiz a parte CSS:

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: #dddddd;
	overflow: hidden;
	background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
.active {
    background-color: #4CAF50;
}

Mas então comecei a fazer a parte do website e adicionei na  body { } o comando :

max-width: 1200px;
    margin: auto;
O problema é que quando eu digito isto a barra também diminui, e eu quero saber se tem como abrir uma exceção para ele não diminuir a barra de navegação.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Victor Ferreira França Olá,  seria interessante você postar algum print do problema.. mesmo você descrevendo não consegui captar de qual barra você está falando.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Victor Ferreira França Mas o que você quer fazer?

Colocar o botão login junto com os campos e centralizar o formulário, além da barra de menu ocupar toda a tela na parte de cima?

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@DiF Eu quero que todo o conteúdo do site fique centralizado, Menos a barra.
Então para centralizar o conteúdo eu usei: max-width , o problema é que quando eu coloco a barra também vai para o meio (O que eu não quero que aconteça).

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Victor Ferreira França

Então,  pelo que eu vi ali, a estrutura está meio errada.

Você colocou o botão de login junto no menu,  os campos de usuário e senha separado..  E o emprego do max-width está errado.

 

Se você quer centralizar, use o margin "zero" auto

 

Exemplo:

 

A barra de menu você deixa ela com width 100% e cria uma nova estrutura a baixo a nível de bloco e centraliza.

 

<div class="barraMenu">
    aqui você põe a sua estrutura do menu
</div> 

<div id="conteudo">
  
    aqui vai o resto centralizado.
</div>  

 

Veja um exemplo simples online: https://jsfiddle.net/ovLc3pj5/

Compartilhar este post


Link para o post
Compartilhar em outros sites

@DiF Cara muito obrigado mesmo!
Tava já desistindo de fazer isto.

Estou iniciando na programação web e ainda vai surgir muitas duvidas.
Você recomenda algum site, livro, videos etc... que possa me ajudar a aprender mais?
Obrigado dnv!

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Victor Ferreira França Antes de tudo, tenha perseverança!

Na programação, sempre vai haver muito estudo e novos aprendizados, portanto não desista! Isso vale para tudo até para seus sonhos.

 

Posso indicar os sites que conheço como o Codeacademy, W3school, o youtube dentre outros que não me vem na cabeça agora.

 

Sobre livros, você pode encontrar os do Maurício Samy "maujor"  Silva. Para eu, é um dos melhores escritores brasileiros sobre HTML, CSS e jQuery.

 

Tenho alguns livros dele, e pretendo completar minha coleção. Em especial recomendo para inicio de estudo o Construindo sites com CSS e (X)html  este é bem didático e ensina bem os princípios básicos da estrutura html e css, além de vários exemplos.

 

Depois você pode comprar o HTML 5 e CSS3  ambos também do Maurício samy silva pela editora Novatec. 

Embora seja um pouco salgado o preço, vale muito a pena.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×