Ir para conteúdo

POWERED BY:

Arquivado

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

mmbica

Desalinhamento dos elementos

Por , em Desenvolvimento frontend

Recommended Posts

mmbica    0

mmbica
Postado

Boa tarde.

Estou a terminar um protejo académico, mas estou com um problema entre mãos do qual não consigo perceber onde possa estar o erro.

 

Fiz o desenho do meu site, e na hora de passar para o dreamweaver correu bem, o problema é que quando faço visualizar no browser noto que os alinhamentos não estão a ser feito, mas contudo no dreamweaver aparece dentro das colunas que estipulei.

 

Preciso realmente de ajuda, é protejo de final de curso.

 

Vou deitar imagens a baixo para perceberem melhor o que me refiro.

 

2j3ruc3.png

 

 

axcwah.png

 

m99574.png

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

mmbica    0

mmbica
Postado

aqui vai ficar a minha css toda. Não sei se pode ser isso, mas tendo em conta que a instrução mais alta de resolução no codigo é 769px to a max of 1232px, e quando abro no meu pc tenho uma resolução bem acima (que é dessa que sai o print), pensei que se criar uma instrução com uma resolução superior possa funcionar, uma vez que quando diminui a minha resolução do pc consigo ver as coisas alinhadas.

 

Não sei se é um dispara-te o que estou a dizer, mas estou aqui para aprender com quem sabe xD

 

BOM ANO (já agora)

 

 

 

 

 

 

body {
background-image:url(../_img/shattered/shattered_@2X.png);
}
.fluid {
clear: both;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style: none;
list-style-image: none;
margin-top: 60px;
padding: 0;
}
/* Mobile Layout: 480px and below. */
a.back_top {
width: 55px;
height: 53px;
position: fixed;
right: 20px;
bottom: 20px;
background-position: -927px -117px;
display: none;
z-index: 2;
}
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 86.45%;
padding-left: 2.275%;
padding-right: 2.275%;
clear: none;
float: none;
}
a.fast_skype {
position: fixed;
right: 20px;
top: 0px;
width: 38px;
height: 64px;
background-position: -813px 0;
z-index: 2;
}
a.fast_email {
position: fixed;
right: 60px;
top: 0px;
width: 38px;
height: 64px;
background-position: -769px 0;
z-index: 2;
}
.content2 {
background:url(../images/spr_content2.png) no-repeat 0 1000px;
text-indent: -99999px;
}
.dis_block {
display: block;}
img{ max-width:100%;
}
#div01 {
margin-left: 0;
clear: both;
}
.boneca {
margin-left: 0;
clear: both;
width: 100%;
}
.info {
margin-left: 0;
clear: both;
width: 100%;
}
.div02 {
margin-left: 0;
}
#div02 {
margin-left: 0;
}
.info01 {
margin-left: 0;
width: 100%;
}
.info02 {
margin-left: 0;
width: 100%;
clear: both;
}
.info03 {
margin-left: 0;
width: 100%;
clear: both;
}
#div03 {
margin-left: 0;
clear: both;
}
#div04 {
margin-left: 0;
clear: both;
}
.icon01 {
margin-left: 0;
width: 100%;
}
.story {
width: 100%;
margin-left: 0;
clear: both;
}
.icon02 {
margin-left: 0;
width: 100%;
clear: both;
}
#storyImg {
margin-left: 0;
}
#div05 {
margin-left: 0;
}
#div06 {
}
.work01 {
width: 100%;
margin-left: 0;
}
.work02 {
width: 100%;
margin-left: 0;
clear: both;
}
.work03 {
width: 100%;
margin-left: 0;
clear: both;
}
#div07 {
width: 100%;
margin-left: 0;
}
#div08 {
width: 100%;
margin-left: 0;
}
#div09 {
}
.contact01 {
width: 100%;
margin-left: 0;
}
.contact02 {
width: 100%;
margin-left: 0;
clear: both;
font-size:26px;
font-weight:200;
text-align:center;}
animation-iteration-count:
.contact03 {
width: 100%;
margin-left: 0;
clear: both;
}
.face {
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
clear: none;
float: none;
margin-left: auto;
}
#div01 {
margin-left: 0;
clear: both;
}
.boneca {
clear: both;
margin-left: 0;
width: 40%;
}
.info {
clear: none;
margin-left: 1%;
width: 50%;
}
.div02 {
margin-left: 0;
}
#div02 {
margin-left: 0;
}
.info01 {
margin-left: 0;
width: 20%;
}
.info02 {
margin-left: 0;
width: 25%;
clear: both;
margin-top: 0px;
}
.info03 {
margin-left: 0;
width: 20%;
clear: both;
}
#div03 {
margin-left: 0;
clear: both;
}
#div04 {
margin-left: 0;
clear: both;
}
.icon01 {
margin-left: 0;
width: 25%;
}
.story {
width: 50%;
clear: both;
margin-left: 0;
}
.icon02 {
margin-left: 0;
width: 25%;
clear: both;
}
#storyImg {
margin-left: 0;
}
#div05 {
margin-left: 0;
margin-top: 30px;
}
#div06 {
}
.work01 {
width: 100%;
margin-left: 0;
}
.work02 {
width: 100%;
clear: both;
margin-left: 0;
}
.work03 {
width: 100%;
clear: both;
margin-left: 0;
}
#div07 {
width: 50%;
margin-left: 0;
}
#div08 {
width: 100%;
margin-left: 0;
}
#div09 {
}
.contact01 {
width: 100%;
margin-left: 0;
}
.contact02 {
width: 100%;
clear: both;
margin-left: 0;
}
.contact03 {
width: 100%;
clear: both;
margin-left: 0;
}
.face {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#header {
width: 15.2542%;
margin-left: 33.8983%;
}
#div01 {
margin-left: 0;
clear: both;
margin-top: 60px;
}
.boneca {
clear: none;
width: 32.2033%;
}
.info {
width: 66.1016%;
}
.div02 {
margin-left: 0;
}
#div02 {
margin-left: 0;
margin-top: 3%;
}
.info01 {
margin-left: 0;
width: 32.2033%;
font-size: 22px;
margin-top: 1.5%;
color: #939393;
}
.info02 {
margin-left: 1.6949%;
width: 32.2033%;
clear: none;
margin-top: 0px;
}
.info03 {
margin-left: 1.6949%;
width: 32.2033%;
clear: none;
text-align: right;
line-height: 36px;
font-size: 20px;
margin-top: 1.5%;
color: #939393;
}
.designer{ font-weight:bold;
font-size:44px;
margin-top:24px;
}
#div03 {
margin-left: 0;
margin-top: 6%;
clear: both;
}
#div04 {
margin-left: 0;
margin-top: 6%;
clear: both;
}
.icon01 {
margin-left: 0;
width: 23.7288%;
margin-top: 1%;
}
.story {
width: 49.1525%;
clear: none;
margin-left: 1.6949%;
font-size: 30px;
color: #939393;
text-align: center;
}
.icon02 {
margin-left: 1.6949%;
width: 6.7796%;
clear: none;
margin-top: 1%;
}
#storyImg {
margin-left: 0;
margin-top: 6%;
}
#div05 {
margin-left: 0;
margin-top: 12%;
margin-bottom: 30px;
}
#div06 {
}
.work01 {
width: 6.7796%;
margin-left: 25.4237%;
}
.work02 {
width: 32.2033%;
clear: none;
margin-left: 1.6949%;
font-size: 36px;
}
.work03 {
width: 6.7796%;
clear: none;
margin-left: 1.6949%;
}
#div07 {
width: 83.0508%;
margin-left: 8.4745%;
margin-top: 60px;
}
#div08 {
width: 32.2033%;
margin-top: 60px;
margin-left: 33.8983%;
}
#div09 {
}
.contact01 {
width: 6.7796%;
margin-left: 16.9491%;
}
.contact02 {
width: 49.1525%;
clear: none;
margin-left: 1.6949%;
margin-top: 30px;
}
.contact03 {
width: 6.7796%;
clear: none;
margin-left: 1.6949%;
}
.face {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

mmbica    0

mmbica
Postado

poderia colocar o estilo do css para poder da uma olhada.

aqui vai ficar a minha css toda. Não sei se pode ser isso, mas tendo em conta que a instrução mais alta de resolução no codigo é 769px to a max of 1232px, e quando abro no meu pc tenho uma resolução bem acima (que é dessa que sai o print), pensei que se criar uma instrução com uma resolução superior possa funcionar, uma vez que quando diminui a minha resolução do pc consigo ver as coisas alinhadas.

Não sei se é um dispara-te o que estou a dizer, mas estou aqui para aprender com quem sabe xD

BOM ANO (já agora)

body {
background-image:url(../_img/shattered/shattered_@2X.png);
}
.fluid {
clear: both;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style: none;
list-style-image: none;
margin-top: 60px;
padding: 0;
}
/* Mobile Layout: 480px and below. */
a.back_top {
width: 55px;
height: 53px;
position: fixed;
right: 20px;
bottom: 20px;
background-position: -927px -117px;
display: none;
z-index: 2;
}
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 86.45%;
padding-left: 2.275%;
padding-right: 2.275%;
clear: none;
float: none;
}
a.fast_skype {
position: fixed;
right: 20px;
top: 0px;
width: 38px;
height: 64px;
background-position: -813px 0;
z-index: 2;
}
a.fast_email {
position: fixed;
right: 60px;
top: 0px;
width: 38px;
height: 64px;
background-position: -769px 0;
z-index: 2;
}
.content2 {
background:url(../images/spr_content2.png) no-repeat 0 1000px;
text-indent: -99999px;
}
.dis_block {
display: block;}
img{ max-width:100%;
}
#div01 {
margin-left: 0;
clear: both;
}
.boneca {
margin-left: 0;
clear: both;
width: 100%;
}
.info {
margin-left: 0;
clear: both;
width: 100%;
}
.div02 {
margin-left: 0;
}
#div02 {
margin-left: 0;
}
.info01 {
margin-left: 0;
width: 100%;
}
.info02 {
margin-left: 0;
width: 100%;
clear: both;
}
.info03 {
margin-left: 0;
width: 100%;
clear: both;
}
#div03 {
margin-left: 0;
clear: both;
}
#div04 {
margin-left: 0;
clear: both;
}
.icon01 {
margin-left: 0;
width: 100%;
}
.story {
width: 100%;
margin-left: 0;
clear: both;
}
.icon02 {
margin-left: 0;
width: 100%;
clear: both;
}
#storyImg {
margin-left: 0;
}
#div05 {
margin-left: 0;
}
#div06 {
}
.work01 {
width: 100%;
margin-left: 0;
}
.work02 {
width: 100%;
margin-left: 0;
clear: both;
}
.work03 {
width: 100%;
margin-left: 0;
clear: both;
}
#div07 {
width: 100%;
margin-left: 0;
}
#div08 {
width: 100%;
margin-left: 0;
}
#div09 {
}
.contact01 {
width: 100%;
margin-left: 0;
}
.contact02 {
width: 100%;
margin-left: 0;
clear: both;
font-size:26px;
font-weight:200;
text-align:center;}
animation-iteration-count:
.contact03 {
width: 100%;
margin-left: 0;
clear: both;
}
.face {
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
clear: none;
float: none;
margin-left: auto;
}
#div01 {
margin-left: 0;
clear: both;
}
.boneca {
clear: both;
margin-left: 0;
width: 40%;
}
.info {
clear: none;
margin-left: 1%;
width: 50%;
}
.div02 {
margin-left: 0;
}
#div02 {
margin-left: 0;
}
.info01 {
margin-left: 0;
width: 20%;
}
.info02 {
margin-left: 0;
width: 25%;
clear: both;
margin-top: 0px;
}
.info03 {
margin-left: 0;
width: 20%;
clear: both;
}
#div03 {
margin-left: 0;
clear: both;
}
#div04 {
margin-left: 0;
clear: both;
}
.icon01 {
margin-left: 0;
width: 25%;
}
.story {
width: 50%;
clear: both;
margin-left: 0;
}
.icon02 {
margin-left: 0;
width: 25%;
clear: both;
}
#storyImg {
margin-left: 0;
}
#div05 {
margin-left: 0;
margin-top: 30px;
}
#div06 {
}
.work01 {
width: 100%;
margin-left: 0;
}
.work02 {
width: 100%;
clear: both;
margin-left: 0;
}
.work03 {
width: 100%;
clear: both;
margin-left: 0;
}
#div07 {
width: 50%;
margin-left: 0;
}
#div08 {
width: 100%;
margin-left: 0;
}
#div09 {
}
.contact01 {
width: 100%;
margin-left: 0;
}
.contact02 {
width: 100%;
clear: both;
margin-left: 0;
}
.contact03 {
width: 100%;
clear: both;
margin-left: 0;
}
.face {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#header {
width: 15.2542%;
margin-left: 33.8983%;
}
#div01 {
margin-left: 0;
clear: both;
margin-top: 60px;
}
.boneca {
clear: none;
width: 32.2033%;
}
.info {
width: 66.1016%;
}
.div02 {
margin-left: 0;
}
#div02 {
margin-left: 0;
margin-top: 3%;
}
.info01 {
margin-left: 0;
width: 32.2033%;
font-size: 22px;
margin-top: 1.5%;
color: #939393;
}
.info02 {
margin-left: 1.6949%;
width: 32.2033%;
clear: none;
margin-top: 0px;
}
.info03 {
margin-left: 1.6949%;
width: 32.2033%;
clear: none;
text-align: right;
line-height: 36px;
font-size: 20px;
margin-top: 1.5%;
color: #939393;
}
.designer{ font-weight:bold;
font-size:44px;
margin-top:24px;
}
#div03 {
margin-left: 0;
margin-top: 6%;
clear: both;
}
#div04 {
margin-left: 0;
margin-top: 6%;
clear: both;
}
.icon01 {
margin-left: 0;
width: 23.7288%;
margin-top: 1%;
}
.story {
width: 49.1525%;
clear: none;
margin-left: 1.6949%;
font-size: 30px;
color: #939393;
text-align: center;
}
.icon02 {
margin-left: 1.6949%;
width: 6.7796%;
clear: none;
margin-top: 1%;
}
#storyImg {
margin-left: 0;
margin-top: 6%;
}
#div05 {
margin-left: 0;
margin-top: 12%;
margin-bottom: 30px;
}
#div06 {
}
.work01 {
width: 6.7796%;
margin-left: 25.4237%;
}
.work02 {
width: 32.2033%;
clear: none;
margin-left: 1.6949%;
font-size: 36px;
}
.work03 {
width: 6.7796%;
clear: none;
margin-left: 1.6949%;
}
#div07 {
width: 83.0508%;
margin-left: 8.4745%;
margin-top: 60px;
}
#div08 {
width: 32.2033%;
margin-top: 60px;
margin-left: 33.8983%;
}
#div09 {
}
.contact01 {
width: 6.7796%;
margin-left: 16.9491%;
}
.contact02 {
width: 49.1525%;
clear: none;
margin-left: 1.6949%;
margin-top: 30px;
}
.contact03 {
width: 6.7796%;
clear: none;
margin-left: 1.6949%;
}
.face {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}

Compartilhar este post

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

  • Conteúdo Similar

    • Rafael_Ferreira
      Não consigo carregar imagem do captcha no meu formulário
      Por Rafael_Ferreira
      Não consigo carregar a imagem do captcha do meu formulário. Foi testado com o xampp e easyphp. Também não carregou a imagem de outros captcha. 
       
       
    • ILR master
      Fixar div até atingir uma certa altura
      Por ILR master
      Fala pessoal, tudo bem?
       
      Eu tenho o seguinte código:
       
      <script>
         $(function(){
      var jElement = $('.fixar_banner');
      $(window).scroll(function(){
          if ( $(this).scrollTop() > 120 ){
              jElement.css({
                  'position':'fixed',
                  'top':'10px'
              });
          }else{
              jElement.css({
                  'position':'relative',
                  'top':'auto'
              });
          }
      });
      });
      </script>
       
      Porém, eu quero que a div fique fixa até que outro elemento apareça na tela, tipo o rodapé da página por exemplo. É mais ou menos como a página de notícia do uol.
      https://noticias.uol.com.br/internacional/ultimas-noticias/2025/01/19/sonho-americano-brasileiros-moram-em-carro-e-buscam-comida-no-lixo-nos-eua.htm
       
      Espero ter sido claro.
       
      Obrigado :)
       
    • juliosonic
      Menu Navbar CSS Bootstrap
      Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Felipe Medeiros
      Como alterar o tema filho se o css usado no tema pai nao está dentro da pasta do tema pai?
      Por Felipe Medeiros
      Bom, criei um tema filho e o que aprendi é que para alterar qualquer coisa do tema filho eu preciso copiar o arquivo do tema pai o colocar dentro da pasta do tema filho.
       
      No meu caso, estou usando o tema "Astra" bem famosinho. O arquivo css que quero modificar não está dentro da pasta do tema pai, está em "wp-content/uploads/uag-plugin/assets/0/uag-css-10.css" sendo que o diretorio do tema pai é "wp-content/themes/Astra"
       
      O problema é o seguinte, preciso modificar a barra de pesquisa da pagina inicial, porem o inspetor de elementos do chrome ta acusando que esse arquivo é o responsavel por estilizar a barra de pesquisa. Será que isso tem a ver com "Cache de objetos", eu sei que o plugin liteSpeed Cache, AMP, Rank Math, todos eles tem essas paradas de criar arquivos css e js para tornar o site mais rapido.
    • 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.
       
       

×

Informação importante

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

  Aceito