Alinhar texto!

DenilsonNap · 20 de julho de 2017

Olá pessoal,

Tudo bem?

Estou elaborando um pequeno site em HTML, CSS E PHP para um projeto no meu curso!

Porém estou com algumas dúvida, não estou conseguindo usar o posicionamento do texto da maneira que eu quero!

• Quero que fique alinhado, porém se eu coloco a position Absolute ele desalinha e eu só consigo usar o TOP:X; com a position absolute.

Outra pergunta!

Vou usar PHP para o formulário, eu preciso do Wamp server ou de algo que emule o servidor no meu computador, pois é Server-Side.

Dúvida:

• Como eu faço para ligar o HTML+CSS no PHP? Quando eu salvar/criar um novo arquivo na pasta do servidor eu já crio a index por lá mesmo!?

Obrigado pessoal e até a próxima!

Obs.: Irei colocar o nome de todos que me ajudarem tirando minhas dúvidas, etc...!

navegantenarede · 20 de julho de 2017

Sobre alinhamento, dá uma olhada no tópico:

É importante verificar a documentação sobre a propriedade pra entender melhor como ela funciona: https://developer.mozilla.org/en/docs/Web/CSS/position - se você só quer centralizar o texto, não há necessidade de usar o valor absolute, você pode centralizar o elemento em que está o texto a partir da largura dá pagina. Dá uma olhada nas respostas do outro tópico que elas podem te ajudar.

Sobre usar o PHP com o WAMP ou software similar, você terá que colocar os arquivos (HTML/CSS/JS/PHP) dentro da pasta que é a raiz dos documentos do site, geralmente é a pastas "www", "htdocs" ou "public_html". Você pode usar HTML dentro do arquivo PHP, entretanto, a fim de organização do código e também para o seu caso em específico, você pode criar o arquivo PHP separadamente, e usar atributo action no elemento form, que vai fazer uso do arquivo PHP que for chamado: https://developer.mozilla.org/en/docs/Web/HTML/Element/form

Felipe Paz · 20 de julho de 2017

@DenilsonNap vamos por partes. Quando postar algo referente à programação, é altamente produtivo e aconselhável que você poste o código junto, dessa maneira fica fácil identificar o que está acontecendo e o que pode ser resolvido.

Teoricamente, teu texto "SITE EM CONSTRUÇÃO" deveria funcionar apenas com um text-align: center. Tente retirar o position dele e acrescentar o text-align (viu a necessidade de mostrar o código?).

Quando se trabalha com linguagem server-side, precisa sim de um servidor local. Eu, particularmente, prefiro XAMPP. Fácil de instalar, já vem com php, mariaDB, apache, mysql. No linux, o diretório dele fica em /opt/lampp/htdocs, no windows fica em C:xampp.

Lembrando que toda a vez que você for trabalhar com php ou outra linguagem server-side precisa "ligar" o servidor. No linux, o xampp, é sudo /opt/lampp/lampp start, no windows basta abrir o painel de controle do xampp e clicar no servidor desejado.

Sobre você incorporar o php, html, css. Basicamente, php só tem sentido se incorporado o html, até porque se você mostrar alguma informação ao usuário, isso será feito no browser e para gerar a informação, o browser renderizará um arquivo html.

Então, ao invés de você salvar os arquivos html, você salva .php na pasta dentro do servidor escolhido. Procure, posteriormente sobre include, require etc do php para você entender melhor. Youtube tem listas e listas de tutoriais falando sobre php.

DenilsonNap · 21 de julho de 2017

6 horas atrás, Felipe Paz disse:

@DenilsonNap vamos por partes. Quando postar algo referente à programação, é altamente produtivo e aconselhável que você poste o código junto, dessa maneira fica fácil identificar o que está acontecendo e o que pode ser resolvido.

Teoricamente, teu texto "SITE EM CONSTRUÇÃO" deveria funcionar apenas com um text-align: center. Tente retirar o position dele e acrescentar o text-align (viu a necessidade de mostrar o código?).

Quando se trabalha com linguagem server-side, precisa sim de um servidor local. Eu, particularmente, prefiro XAMPP. Fácil de instalar, já vem com php, mariaDB, apache, mysql. No linux, o diretório dele fica em /opt/lampp/htdocs, no windows fica em C:xampp.

Lembrando que toda a vez que você for trabalhar com php ou outra linguagem server-side precisa "ligar" o servidor. No linux, o xampp, é sudo /opt/lampp/lampp start, no windows basta abrir o painel de controle do xampp e clicar no servidor desejado.

Sobre você incorporar o php, html, css. Basicamente, php só tem sentido se incorporado o html, até porque se você mostrar alguma informação ao usuário, isso será feito no browser e para gerar a informação, o browser renderizará um arquivo html.

Então, ao invés de você salvar os arquivos html, você salva .php na pasta dentro do servidor escolhido. Procure, posteriormente sobre include, require etc do php para você entender melhor. Youtube tem listas e listas de tutoriais falando sobre php.

Olá @Felipe Paz, tudo bem?

Antes de tudo, obrigado pelo seu interesse em querer me ajudar!

Na real eu já estou usando um ' text-align:center; ' porém eu não consigo usar o top:x; para poder colocar o texto mais pra baixo e eu só estou conseguindo utilizar o top:x; quando eu coloco o position:absolute; , sendo assim, não fica centralizado!

Meu HTML:

<html>
<head>
<title>Projeto Integrador</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css"/>
</head>
<body bgcolor="#d8d8d8">
<marquee behavior="alternate"><div id="TextP"><h1>SITE EM CONSTRUÇÃO</h1></div></marquee>
<h2 id="LDE">LIBERDADE DE ESCOLHA<br /><br /></h2>
<div id="CDT"><h3>Sobre o projeto</h3>Nosso projeto tem o intuito de <b>aprender, partilhar e apensar</b>.<br  /><br  /></div>
<div id="FORMU">
O que é liberdade de escolha para você?
<form action="http://formmail.kinghost.net/formmail.cgi" method="POST">
<input type="text" size="Resposta!" name="nome"><br />
<input type="submit" name="BTEnvia" value="Enviar">

</form></div>

</body>
</html>

Meu CSS:

* {margin:0; padding:0;} 

#TextP {
	color:rgb(42, 104, 163);
	/*Text-Align:center;*/
	font-family: arial, helvetica, sans-serif;
	text-shadow: 0.1em 0.1em 0.15em #333;
}

#LDE {
	Text-Align:Center;
	font-family: Andale Mono, monospace;
}

#CDT {
	top:150px;
	font-size:13px;
	Text-Align:Center;
	font-family: Trebuchet MS;
	
}

#FORMU {
	font-family: Trebuchet MS;
	text-align:Center;
}

@navegantenarede

Obrigado cara, vou estar olhando!

Felipe Paz · 21 de julho de 2017

@DenilsonNap na verdade você está trocando um método pelo outro. Quando se quer apenas ajustar a distância de um elemento seja em relação ao body da página ou a um outro elemento, o correto é utilizar o margin. Já se você quer posicionar o elemento em algum lugar do corpo da página, aí você utiliza o position e define as coordenadas com top, bottom e etc.

Outra coisa, no teu campo input text tem um size="Resposta!", imagino que seja a dica do input para que o usuário digite algo. Este atributo é o placeholder. O size, como o próprio nome diz, é para definir o tamanho do input.

Mais uma coisa, procure manter teus ids e classes em minúsculo, não há necessidade de deixar em maiúsculo.

Enfim, fiz algumas mudanças no html e no css e tudo dando espaçamento através do margin.


<marquee behavior="alternate">
	<div id="TextP">
		<h1>SITE EM CONSTRUÇÃO</h1>
	</div>
</marquee>

<h2 id="LDE">LIBERDADE DE ESCOLHA</h2>

<div id="CDT">
	<h3>Sobre o projeto</h3>
	<p>Nosso projeto tem o intuito de <strong>aprender, partilhar e apensar</strong>.</p>
</div>

<div id="FORMU">
	<h3> O que é liberdade de escolha para você?</h3>
	<form action="http://formmail.kinghost.net/formmail.cgi" method="POST">
		<input type="text" placeholder="Resposta!" name="nome"><br />
    	<input type="submit" name="BTEnvia" value="Enviar">
 	</form>
</div>

E o CSS com o margin:

* {margin:0; padding:0;} 

#TextP {
	color:rgb(42, 104, 163);
	font-family: arial, helvetica, sans-serif;
	text-shadow: 0.1em 0.1em 0.15em #333;
  margin-top: 50px;
}

#LDE {
	Text-Align:Center;
	font-family: Andale Mono, monospace;
  	margin: 50px 0px;
}

#CDT {
	font-size:13px;
	Text-Align:Center;
	font-family: Trebuchet MS;
  	display: block;
  	width: 100%;
}

#FORMU {
	font-family: Trebuchet MS;
	text-align:Center;
 	 margin-top: 20px;
}

#FORMU form {
 	 margin-top: 5px;
}

#FORMU form input[type="text"] {
  	margin: 10px 0px;
  	padding: 4px 3px;
  	width: 250px;
}

O resultado você pode ver aqui

DiF · 21 de julho de 2017

14 horas atrás, Felipe Paz disse:

Quando se trabalha com linguagem server-side, precisa sim de um servidor local. Eu, particularmente, prefiro XAMPP. Fácil de instalar, já vem com php, mariaDB, apache, mysql. No linux, o diretório dele fica em /opt/lampp/htdocs, no windows fica em C:xampp.

Só complementando, além do xampp, existe o EasyPHP DEV-server. Atualmente ele é considerado o melhor. Nele é um pouco mais fácil de fazer algumas configurações. Pode-se até fazer uma intranet com ele.

DenilsonNap · 23 de julho de 2017

Em 21/07/2017 às 02:44, Felipe Paz disse:
@DenilsonNap na verdade você está trocando um método pelo outro. Quando se quer apenas ajustar a distância de um elemento seja em relação ao body da página ou a um outro elemento, o correto é utilizar o margin. Já se você quer posicionar o elemento em algum lugar do corpo da página, aí você utiliza o position e define as coordenadas com top, bottom e etc.

Outra coisa, no teu campo input text tem um size="Resposta!", imagino que seja a dica do input para que o usuário digite algo. Este atributo é o placeholder. O size, como o próprio nome diz, é para definir o tamanho do input.

Mais uma coisa, procure manter teus ids e classes em minúsculo, não há necessidade de deixar em maiúsculo.

Enfim, fiz algumas mudanças no html e no css e tudo dando espaçamento através do margin.
<marquee behavior="alternate">
	<div id="TextP">
		<h1>SITE EM CONSTRUÇÃO</h1>
	</div>
</marquee>

<h2 id="LDE">LIBERDADE DE ESCOLHA</h2>

<div id="CDT">
	<h3>Sobre o projeto</h3>
	<p>Nosso projeto tem o intuito de <strong>aprender, partilhar e apensar</strong>.</p>
</div>

<div id="FORMU">
	<h3> O que é liberdade de escolha para você?</h3>
	<form action="http://formmail.kinghost.net/formmail.cgi" method="POST">
		<input type="text" placeholder="Resposta!" name="nome"><br />
    	<input type="submit" name="BTEnvia" value="Enviar">
 	</form>
</div>
E o CSS com o margin:
* {margin:0; padding:0;} 

#TextP {
	color:rgb(42, 104, 163);
	font-family: arial, helvetica, sans-serif;
	text-shadow: 0.1em 0.1em 0.15em #333;
  margin-top: 50px;
}

#LDE {
	Text-Align:Center;
	font-family: Andale Mono, monospace;
  	margin: 50px 0px;
}

#CDT {
	font-size:13px;
	Text-Align:Center;
	font-family: Trebuchet MS;
  	display: block;
  	width: 100%;
}

#FORMU {
	font-family: Trebuchet MS;
	text-align:Center;
 	 margin-top: 20px;
}

#FORMU form {
 	 margin-top: 5px;
}

#FORMU form input[type="text"] {
  	margin: 10px 0px;
  	padding: 4px 3px;
  	width: 250px;
}
O resultado você pode ver aqui

Olá @Felipe Paz,

Fico muito grato por você estar me ajudando dessa forma, com certeza tirou todas as minhas dúvidas e ainda complementou!

Obrigado!

Att,

Denilson Pinto.

@Edit

@Felipe Paz,

Eu criei uma DIV e coloquei dentro dela outra div para por um text, porém não consigo usar o margin-top por qual motivo isso acontece?

MEU HTML:

<div id="rodape">
	<div id="textrp">
		<h4>Codificação e programação: Denilson Pinto<br />Ajudas em geral: Fórum Clube do Hardware(Felipe Paz).</h4>
	</div>
</div>

CSS:

#rodape {
	background-color:rgb(168, 168, 168);
	width:100%;
	height:80px;
	margin-top:104px;
}

#textrp {
	font-size:11px;
	font-family: Trebuchet MS;	
	text-align:center;
	margin-top:100px;	
}

Tks!

Felipe Paz · 23 de julho de 2017

Veja bem, quando se trabalha com margin, você está alterando o espaço entre elementos irmãos. Quando se trabalha com uma estrutura identada, um elemento dentro do outro, você precisa estipular como cada um vai se comportar - Procure por seletores no css e vai entender melhor - Nesse caso acima, simplesmente tem um elemento dentro de outro. Quando você seta a margin-top para o #rodape, ele ganha uma margin X em relação ao topo do html, quando você seta outro margin-top, agora para o #textrp, como não há nenhuma concordância em quem é pai, quem é filho, o browser interpreta que ele também está setando a margin em relação ao topo do html. Neste caso tem-se que usar a propriedade position para adequar corretamente o conteúdo.

Você pode conferir teu exemplo aqui. O elemento pai, no caso o #rodape, recebe um position relative (ele está posicionado relativamente ao html). Já o elemento filho, #textrp, recebe um position absolute, setando assim, seu comportamento ao elemento pai, então, toda margin que ele receber, será referente ao pai, e não mais ao top do html como estava sendo feito antes. No exemplo, o #rodape fica a 50px do topo e o #textrp fica a 50px do topo do elemento pai, #rodape.

De início é chato e complicado isso, mas estude estes casos e treine muito, teste muito. Só assim vai entender como funcionam estas coisinhas.