sites responsivos

Apenas Eu · Julho 15, 2013

Olá!

Um colega me deu uma dica sobre criar site responsivo. Eu gostei e estou trabalhando nisso, mas fiquei com algumas duvidas.

Por exemplo, os valores heights, devem ser também em %, ou em "em" ou "px" mesmo?

E para fazer menus, botões e valores de margin, padding e etc, qual unidade de medida mais indicada?

E sobre as imagens que eu adicionar. O que fazer para elas seguirem o tamanho do resto do site?

Obrigado!

Buchechafs · Julho 15, 2013

Vamos lá.

Sobre o height eu gosto de trabalhar com px mesmo.

Sobre a margin é bom trabalhar com %.

e a imagem você trabalha com a porcentagem correspondente aonde ela se encontra e coloca o height auto como no exemplo abaixo.

img#logo{
   width:90%; // ele vai ocupar 90% da div
   height:auto; // a imagem vai gerar a height automaticamente
}

diogoand1 · Julho 15, 2013

Comece a trabalhar com o algum framework, te ajudará muito, eu utilizo esse aqui

Apenas Eu · Julho 15, 2013

que legal diogo, muito obrigado.

Eu preciso também verificar a questão dos menus que estou apanhando bastante. Por exemplo o que fazer para que a altura do fundo do menu cresça, quando a tela diminui? Eu baixei uns códigos ontem, mas eu ainda não consegui fazer funcioná-lo corretamente na minha pagina.

diogoand1 · Julho 17, 2013

Trabalhe com %, se esse não der certo opte pelas medias query.

Apenas Eu · Julho 19, 2013

rapaiz...

esse negócio de responsivo é muito complicado...hehheeh. Não esperava que era tão difícil assim :)

Apenas Eu · Julho 20, 2013

Eu estou com um problema aqui:

Eu encontrei um código de menu bem legalzinho, porém, em resoluções menores o conteúdo fica tudo por baixo do menu, quando ele se adapta a telas pequenas.

Será para o pessoal me ajudar só postando o código de tudo? Só do menu?

É que ainda estou estruturando e está uma bagunça tudo... hihihi

Valeuuu

angelorubin · Julho 20, 2013

Boa tarde,

Tente postar com objetividade, sempre focando o problema, muitos de nós que ajudamos voluntariamente, temos trabalho (sim, mesmo não parecendo temos ! hehe) e não temos tempo de pesquisar sobre longos códigos.

Apenas Eu · Julho 20, 2013

Ann ran, eu entendo!!

É que as vezes é só a questão de colocar um comando e tufff...

Bom, faz assim, eu vou postar o cód. do menu, e o cód. do que vem depois do menu, em seguida o html, entre o menu e a parte de baixo.

Enfim, postar o mais relevante, ta?

CSS do menu:

a {
  color: rgb(172, 172, 172);
  -webkit-transition: all 200ms;
  -moz-transition: all 200ms;
  -ms-transition: all 200ms;
  -o-transition: all 200ms;


}


a:hover {
  color: rgb(72, 72, 72) ;
  text-decoration: none;
}


.PL0 { padding-left:0; }
.make-round { border-radius:4px 0px 0px 4px;}


/* brand */
.navbar .brand {
  font-family: Helvetica, Arial ; 
  line-height: 20px;
 font-weight: bold; 
 font-size:11px;
color: #fff;
text-shadow: 0 1px 0 rgb(0, 0, 0);
letter-spacing: 0px;
text-transform: uppercase;


}


.navbar .brand:hover {
  color: #fff;
}


/* navbar */
.navbar-inner {
  border: 0px solid #FB5755; margin:auto;
  background:#4D4C4E; width:63%; font-size:0.58em;
}


.navbar .nav>li {
   
  border-right: 0px;


  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -ms-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
}


.navbar .nav>li:hover {
  background: #09C;
  color:#fff;
}
.navbar .nav a {  font-style:normal !important;  }
.navbar .nav>li:hover > a {
  color:#fff;
  
}


.navbar .nav>li>a:focus, .navbar .nav>li>a:hover {
  color:#fff;
}


/* disabled link */
.dropdown-menu>.disabled>a, .dropdown-menu>.disabled>a:hover, .dropdown-menu>.disabled>a:focus {
  color: rgb(100, 100, 100); 
  border: 1px solid transparent;
  
  -webkit-box-shadow: 0 0 0;
  -moz-box-shadow: 0 0 0;
  -ms-box-shadow: 0 0 0;
  -o-box-shadow: 0 0 0;
  box-shadow: 0 0 0;
} 


.navbar .nav>li:last-child {
  
}


/* active link */
.navbar .nav>.active>a, .navbar .nav>.active>a:hover, .navbar .nav>.active>a:focus {
  color: #fff;
  text-decoration: none;
  background:rgb(0, 0, 0);
   
  
   
}


/*  */
.navbar .nav>li>a {
  float: none;
  padding: 10px 15px 10px;
  color: #F5F5F5;
  text-shadow: 0 0 0;
}


/* dropdown */
.dropdown-menu {
  padding: 5px 0;
  border: 0px solid #000;
  margin-top: 0px;


background: #4D4C4E;
  -webkit-border-radius: 0px 0px 4px 4px;
  -moz-border-radius: 0px 0px 4px 4px;
  border-radius:  0px 0px 4px 4px;


}


.dropdown-menu>li>a {
  padding: 7px 20px;
  color: #D2D3DD;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}


.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-submenu:hover>a, .dropdown-submenu:focus>a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  background: #09C;


}


/*  shows the dropdown on hover*/
.navbar ul.nav li:hover > ul.dropdown-menu {
  display: block;
}






/* before and after */
.navbar .nav > li > .dropdown-menu::before,
.navbar .nav > li > .dropdown-menu::after {
  display: none;
} 


/* utilities */
.text-left { text-align: left;}
.text-center { text-align: center;}
.text-right { text-align: right;}


/* *******************************************************************
 * Responsive Media                                                  *
 * *******************************************************************/
/* Large desktop */
@media (min-width: 1200px) {}


@media (min-width: 1024px) and (max-width: 1100px) {
  .navbar-search .search-query:focus{
    width: 70px;
  }
}




/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) {
  .PL0 {
padding-left: 20px;
}
.PT20 { padding-top:20px;}
  .navbar .brand {
    padding-bottom: 18px;
  }
  


  
  /* link background */
  .nav-collapse .nav>li>a:hover, .nav-collapse .dropdown-menu a:hover {
    background: rgba(0, 0, 0, 0.55);
  }
  
  /* active link */
  .nav-collapse .nav>li>a, .nav-collapse .dropdown-menu a {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  
  .nav.social-icons{
    text-align: center;
  }
  
  .nav.social-icons li{
    float: none;
    display: inline-block;
    border: 1px solid #000;
  }
  
  .nav-collapse .navbar-form, .nav-collapse .navbar-search {
    border: 0;
  }
  
  /* search form */
  .navbar-search {
    text-align: center;
  }
  
  .navbar-search .search-query{
    width: 100px;
    border: 1px solid #000;
  }


  .nav-collapse, .nav-collapse.collapse {
    height: auto;
    overflow: hidden;
  }
}


/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
  
  .navbar .brand {
    padding-bottom: 18px;
  }
  
    .PL0 {
padding-left: 20px;
}
.PT20 { padding-top:20px;}
  
  /* link background */
  .nav-collapse .nav>li>a:hover, .nav-collapse .dropdown-menu a:hover {
    background: rgba(0, 0, 0, 0.55);
  }
  
  /* active link */
  .nav-collapse .nav>li>a, .nav-collapse .dropdown-menu a {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  
  .nav.social-icons{
    text-align: center;
  }
  
  .nav.social-icons li{
    float: none;
    display: inline-block;
    border: 1px solid #000;
  }
  
  .nav-collapse .navbar-form, .nav-collapse .navbar-search {
    border: 0;
  }
  
  /* search form */
  .navbar-search {
    text-align: center;
  }
  
  .navbar-search .search-query{
    width: 100px;
    border: 1px solid #000;
  }


  .nav-collapse, .nav-collapse.collapse {
    height: auto;
    overflow: hidden;
  }


}


/* Landscape phones and down */
@media (max-width: 480px) { 
  
  .nav-collapse, .nav-collapse.collapse {
    height: auto;
    overflow: hidden;
  }
  
}

CSS da página (resumido)

#fundo-menu2 {
	width:100%;
	background:#4D4C4E;
	position:relative;
	height:50px;
	z-index:3;
#tudo {
font-family: "Open Sans", Arial ; font-size:0.750em;
background: #FFFFFF ;
clear:both;
display: inline-block;
height:auto; width: 64%;  
margin:0 auto;
position:relative; padding:0;
z-index:1; 
webkit-box-shadow: 0 0.870em 3.0em 0.375em #CCCCCC;
moz-box-shadow: 0p 0.870em 3.0em 0.375em #CCCCCC;
box-shadow: 0 1.0em 3.0em 0.375em #CCCCCC;
}

HTML

<div id="fundo-menu2">
 <section id="skin1">
  <div class="navbar">
<div class="navbar-inner PL0 PT20">
  <div class="container">
<div class="nav-collapse collapse navbar-responsive-collapse">
  <ul class="nav">
  
  <!--MULTINIVEL -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="foundicon-home"></i> INÍCIO<i class="icon-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Introdução à Formula 1</a></li>
<li><a href="#">Política do Site</a></li>
<li><a href="#">Mapa do Site</a></li>
<li><a href="#">Novidades</a></li>
</ul>
</li>
<!--FIM MULTINIVEL -->
<li><a href="#"><i class="foundicon-mic"></i> OPNIÃO DO DANILÃO</a></li>
 <!--MULTINIVEL -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="foundicon-flag"></i> F1 EM 2013 <i class="icon-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Notícias</a></li>
<li><a href="#">Regras e Regulamentos</a></li>
<li><a href="#">Calendário e Circuitos de 2013</a></li>
<li><a href="#">Pilotos</a></li>
<li><a href="#">Equipes</a></li>
</ul>
</li>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="foundicon-smiley"></i> DIVERSÃO<i class="icon-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Diverão F1</a></li>
<li><a href="#">Antes e Depois</a></li>
<li><a href="#">Volta Virtual</a></li>
<li><a href="#">Pilotos</a></li>
<li><a href="#">Equipes</a></li>
</ul>
</li>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-desktop"></i>POR DENTRO DA F1<i class="icon-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Acidentes</a></li>
<li><a href="#">Os Campeões</a></li>
<li><a href="#">Pneus</a></li>
</ul>
</li>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="foundicon-address-book"></i> MINHA HISTÓRIA<i class="icon-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a href="#">As Crônicas de Danilo - 1º Temporada</a></li>
<li><a href="#">As Crônicas de Danilo - 2º Temporada</a></li>
</ul>
</li>
<!--FIM MULTINIVEL -->
<li><a href="#"><i class="foundicon-paper-clip"></i> ESPECIAIS</a></li>
  </ul>
</li>
  </ul>
  
 
  
</div><!-- /.nav-collapse -->
  </div>
</div><!-- /navbar-inner -->
  </div><!-- /navbar -->
  
</section>
      </div>
<div id="tudo">
  <div id="coin-slider">
<img src="imagens/site.jpg" alt="yorrana" width="64%" height="auto" />
<img src="imagens/site.jpg" width="1200" height="315" />
<img src="imagens/site.jpg" width="1200" height="315" >
<img src="imagens/3-slide.jpg" width="1200" height="315" >
<span class="cs-title">
<b>Fotos Especiais</b><br /> 
Relembre seus melhores momentos com books ou fotolivros. <a class="link" href="s-fotografias.php">Saiba mais</a></span>  
<img src="imagens/9-slide.jpg" width="1200" height="315" >
<span class="cs-title">
<b>Linha Holográfica</b><br /> 
Impressione seu cliente com cores e efeitos especiais com produtos holográficos.
<a class="link" href="linha-holografica.php">Saiba mais</a></span>  
<img src="imagens/10-slide.jpg" width="1200" height="315" >
<span class="cs-title">Convites de casamento personalizados de vários modelos e cores <a class="link" href="linha-casamento.php">Saiba mais</a></span>  
  </div>
  <script type="text/javascript">
$(document).ready(function() {
		$('#coin-slider').coinslider({ width: 1024, height: 315, navigation: true, delay: 5000, hoverPause: true });
	});
</script>
  <p> </p>
  <p>ççl</p>
  <p>lll</p>
  <p>l</p>
  </div>

Apenas Eu · Julho 22, 2013

Viu, por acaso eu consegui resolver essa questão, muito obrigado ;)

Arquivado

sites responsivos

Recommended Posts

Apenas Eu 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buchechafs 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

diogoand1 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Apenas Eu 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

diogoand1 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Apenas Eu 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

Apenas Eu 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Apenas Eu 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

Apenas Eu 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real

Informação importante