Ir para conteúdo

Arquivado

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

MurilloCSS

Formatação de rodapé

Recommended Posts

Vamos La, Estava fazendo meu site e cheguei no rodape e estou com uma grande duvida uma imensa duvida 

 

Eu quero que este texto do rodape fica no meio e um texto grande mas nao consigo editar o css que raivaaaa

alguem poderia me ajudar?

O CODIGO EM HTML:
 

<footer class="py-5 bg-dark">
<div class="container">
 
<p class="m-0 text-center text-white">2015 - 2018 © Todos direitos reservados.<br>Desenvolvido por <b>Arthur Barreto</b> | Hospedado por <b><a target="_blank" href="https://www.reishosting.com.br/minecraft" class="text-white">ReisHost</a></b></p>
 
 
</div>
</footer>

O codigo em css
 
.py-5 {
padding-top: 3rem!important;
padding-bottom: 3rem!important;
}
.bg-dark {
background-color: #343a40!important;
}
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
*, ::after, ::before {
box-sizing: inherit;
}
user agent stylesheet
footer {
display: block;
}
Style Attribute {
visibility: visible;
}
body {
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
}
html {
box-sizing: border-box;
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}
user agent stylesheet
html {
color: -internal-root-color;
}
*, ::after, ::before {
box-sizing: inherit;
}
*, ::after, ::before {
box-sizing: inherit;
}

ALGUEM ME AJUDA PFV

Screenshot_14.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Segue código:

 

CÓDIGO

<!DOCTYPE HTML>
<html>
	<head>
		<title> EXAMPLE </title>

		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

		<style type="text/css">
		body {
			margin: 0;
			font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
			font-size: 1rem;
			font-weight: 400;
			line-height: 1.5;
			color: #212529;
			background-color: #fff;
		}
		html {
			box-sizing: border-box;
			font-family: sans-serif;
			line-height: 1.15;
			-webkit-text-size-adjust: 100%;
			-ms-text-size-adjust: 100%;
			-ms-overflow-style: scrollbar;
			-webkit-tap-highlight-color: transparent;
		}
		html {
			color: -internal-root-color;
		}
		*, ::after, ::before {
			box-sizing: inherit;
		}

		article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
			display: block;
		}
		footer {
			display: block;
		}
		footer p {
			font-size: 30px;
		}
		.py-5 {
			padding-top: 3rem!important;
			padding-bottom: 3rem!important;
		}
		.bg-dark {
			background-color: #343a40!important;
		}
		</style>
	</head>

	<body>
		<footer class="py-5 bg-dark">
			<div class="container">
				<p class="m-0 text-center text-white">
					2015 - 2018 © Todos direitos reservados.<br>Desenvolvido por <b>Arthur Barreto</b> | Hospedado por <b><a target="_blank" href="https://www.reishosting.com.br/minecraft" class="text-white">ReisHost</a></b>
				</p>
			</div>
		</footer>
	</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
<!DOCTYPE HTML>
<html>
	<head>
		<title> EXAMPLE </title>

		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

		<style type="text/css">
		body {
			margin: 0;
			font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
			font-size: 1rem;
			font-weight: 400;
			line-height: 1.5;
			color: #212529;
			background-color: #fff;
		}
		html {
			box-sizing: border-box;
			font-family: sans-serif;
			line-height: 1.15;
			-webkit-text-size-adjust: 100%;
			-ms-text-size-adjust: 100%;
			-ms-overflow-style: scrollbar;
			-webkit-tap-highlight-color: transparent;
		}
		html {
			color: -internal-root-color;
		}
		*, ::after, ::before {
			box-sizing: inherit;
		}

		article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
			display: block;
		}
		footer {
			text-align: center;
			display: block;
		}
		footer .v-middle {
			display: table;
			color: #ffffff;
			height: 400px;
			width: 100%;
		}
		footer .v-middle p {
			vertical-align: middle;
			display: table-cell;
			font-size: 30px;
		}
		.bg-dark {
			background-color: #343a40!important;
		}
		</style>
	</head>

	<body>
		<footer class="bg-dark">
			<div class="container">
				<div class="v-middle">
					<p class="m-0">
						2015 - 2018 © Todos direitos reservados.<br>Desenvolvido por <b>Arthur Barreto</b> | Hospedado por <b><a target="_blank" href="https://www.reishosting.com.br/minecraft" class="text-white">ReisHost</a></b>
					</p>
				</div>
			</div>
		</footer>
	</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por André Gonçalves Fernandes
      Prezados, 
       
      Boa Noite 
       
      A Imagem02 anexa é situação que eu preciso chegar
       
      A imagem01 anexa é o caminho que estou percorrendo. O conteúdo é o mesmo. Acredito que estou no caminho certo, mas não estou conseguindo deixar as três caixas alinhadas na parte de cima e as três caixas alinhadas na parte de baixo.
       
      Abaixo o código que eu apliquei em HTML e CSS referente a imagem 01
       
      Se alguém puder me ajudar agradeço,
       
       
      HTML
      <div class="container">
             
            <p class="title">VEJA MAIS SOBRE AS NOSSAS ESPECIALIDADES E</br>COMO PODEMOS AJUDAR VOCÊ</p>
       
            <div class="box01">
               <p class=p01>UTI</p>  
               <p>Suporte Avançado de</br>Ambulâncias e Suportes</br>Básicos</p>
            </div>  
            
            <div class="box02">
               <p>Área Protegida</p>
               <p>Proporcionando total segurança</br>em áreas de risco.</p>
            </div>
            
            <div class="box03">
               <p>Transferência</p>
               <p>Intra-Hospitalar e Inter<br></br>Hospitalar, Casa de repousos, Residenciais.</p>
            </div>
             
            <div class="box04">
               <p>Posto Fixo</p>
               <p>Profissionais especializados para<br></br>atuar em situações de urgências<br></br>e emergência (médicos, enfermeiros e socorridos).</p>
            </div>
            
            <div class="box05">
               <p>Neonatal</p>
               <p>Intra-Hospitalar e Inter Hospitalar, Casa de repousos, Residenciais.
            </div>
            
               
            <div class= "box06">
               <p>Eventos</p>
               <p>Cobertura de Eventos Religiosos Corridas de Rua</br>Peladas de Futebol, Casas Noturnas, Eventos Culturais</br>Lutas Muay Thai, Boxe, Jiu Jitsu, Vale Tudo</p>
            </div> 
         
         </div>  
       
      CSS
       
      .container{
          font-family:Arial, Helvetica, sans-serif;
          font-size: 15px ;
          color:white;
          background-color: rgb(255, 80, 92);
          margin: 0px -8px 0px -8px;
          padding: 60px 20px 60px 20px;
      }
      .title{
          font-family:Arial, Helvetica, sans-serif ;
          font-size: 18px;
          text-align: center;
          margin: -50px 0px 0px 0px;
          padding: 20px 20px 60px 20px; 
       
      }
      .box01{
         display:inline-block;
         text-align:center;
         
      }
      .p01{
          border: solid 1px white;
          height: 30px;
          width: 100px;
          margin: 6px -3px 6px 34px;
          padding: 7px 2px 7px 63px;
          
      }
      .box02{
          display: inline-block;
          text-align: center;
      }
      .box03{
          display:inline-block;
          text-align:center;
      }
      .box04{
          display:inline-block;
          text-align:center;
      }
       
      .box05{
          display:inline-block;
          text-align:center;
      }
       
      .box06{
          display:inline-block;
          text-align:center;
      }
       
       
       
       
       
       
       


    • Por Mateus Alcântara
      Bom dia galera, tenho uma lista de imagem e ao selecionar uma imagem no site ela é aberta dentro de uma div, porém fica um espaço como mostrado na imagem, gostaria de saber como resolver isso, atualmente meu html e meu css estão assim: 
          <ul>                     
                              <div style="width: auto">
                              </div>
                              <li><img width="70" src="images/J1.PNg" no repeat; onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                              <H6> Pulseira Teste.</H6></li>
                              <li><img width="70" src="images/J3.PNg" onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                              <H6> Pulseira Teste.</H6></li>
                              <li><img width="70" src="images/J2.PNg" onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                              <H6> Pulseira Teste.</H6></li>
                              <li><img width="70" src="images/J3.PNg" onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                              <H6> Pulseira Teste.</H6></li>
                              <li><img width="70" src="images/J2.PNg" onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                              <H6> Pulseira Teste.</H6></li>
                              <li><img width="70" src="images/J1.PNg" onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                              <H6> Pulseira Teste.</H6></li>
                              <li><img width="70" src="images/J2.PNg" onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                              <H6> Pulseira Teste.</H6></li>
                              <li><img width="70" src="images/J3.pNg" onclick="clickImagem(this.src)" alt=""/>Pulseira Teste
                              <H6> Pulseira Teste.</H6></li>
                          </ul>                    
                      </form>
                  </div>
                  <div class="conteudo" id="conteudo" ondrop="drop(event)" ondragover="allowDrop(event)" style="background:#fff">
       
      E CSS:
      #conteudo{
          width:55%;
          height:60%;
          float:left;
          background-color:#fff;    
          display: initial;
          margin: auto;
          z-index: 1;
          overflow: hidden;
          .columns {
          }

    • Por luiz@tkseven.com
      Olá usei os parâmetros, padding e display para separar elementos na minha pagina, o problema é que em devices apple estes parâmetros não funcionam, e no android eles funcionam exatamente como deveriam.
       
       
       
      </section>
            
              <div style="display:block; padding: 10px;">
              
                 <p><font color="#d7d7d7">Texto que fica entre as section</font></p>
             
              </div>
      <section> 
    • Por Luiz Carlos Bittar
      Bom dia
      Comprei o livro Construindo sites com CSS e (X)HTML, e ao tentar acessar www.livrocss.com.br sai a mensagem que não é possível acessar o site, afim de verificar as técnicas na construção.... Gostaria de saber se o site não está mais disponível ou se mudou de endereço.
      Obrigado
      Luiz Carlos
×

Informação importante

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