← HTML + CSS

Dúvidas de principiante

Lida 2891 vezes

Offline

Tekku 
Membro
Mensagens 100 Gostos 3
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Boas, estou a desenvolver uma espécie de apresentação "powerpoint" mas em html e css, neste momento estava a elaborar uma espécie de header, e gostava de posicionar dois logos um em cada ponta, isto já consegui.

O meu problema agora é que gostava de colocar algum texto neste header e de o centrar no topo da página.

Devo dizer que tenho o seguinte código html:

Citar
<div id="header">
      <div id="epslogo">
         <img src="img/eps.png" alt="eps_logo"/>
      </div>
      <div id="tanquisadologo">
         <img src="img/tanquisado.png" alt="tanquisado_logo"/>
      </div>
      <div id="titulo">
      <h10> Escola Profissional de Setúbal </h10> <br>
      <h10> Tanquisado - Terminais Marítimos, S.A. </h10>
      </div>
      <div id="linha">
      </div>
   </div>

e o seguinte código CSS:

Citar
#epslogo {
   position: fixed;
   top: 20px;
   left: 50px;
   background-color:transparent;
   border-width:2px;
   border-color:transparent;
}
#tanquisadologo {
   position: fixed;
   top: 20px;
   left: 1130px;
   background-color:transparent;
   border-width:2px;
   border-color:transparent;
}

#header {
   position: absolute;
   top: 100px;
   width: 1200px;
   
   border-top-width: 3px;
   border-top-style: solid;
   border-top-color: #FFF;
   margin-bottom: 20px;
   
}

#titulo {
   text-align: center;
   background-position: 50%;
   
   left: 450px;
}

O problema é que o titulo por assim dizer, não está a ficar no sitio certo :S



Gostava também de saber como centrar essa linha que vêm entre o header e o corpo do trabalho, já tentei montes de cenas e não consegui :S

Só um aparte, eu não tive formação em programação, sou do Curso Técnico de Gestão de Equipamentos Informáticos e estou a tentar fazer algo diferente para a apresentação da minha PAP, se me puderem dar uma mãozinha agradecia imenso :D
Offline

euluism 
Membro
Mensagens 975 Gostos 0
Feedback +4

Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 500 Posts

usa a TAG
Código: [Seleccione]
<h1> titulo </h1>em vez de h10!

e no CSS mete:
Código: [Seleccione]
h1 {
font-size: 11;
}

altera o 11 para o tamanho que queres.

Podes ler + aqui: http://www.w3schools.com/tags/tag_hn.asp
Offline

Tekku 
Membro
Mensagens 100 Gostos 3
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Boas, obrigado pelo conselho, está com a TAG h10 porque as primeiras já estão em uso, e como isto vai ser só para usar em localhost, não vou necessitar de ter isto tudo optimizado para SEO ou assim.

Cumps

Edit: tinha-me esquecido de mostrar lá em cima, está aqui as propriedades do TAG h10:

Código: [Seleccione]
h10 {
font-size: 30px;
}
Offline

euluism 
Membro
Mensagens 975 Gostos 0
Feedback +4

Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 500 Posts

Foi por isso que adicionei ;)

Resolves-te o teu problema?
Offline

Tekku 
Membro
Mensagens 100 Gostos 3
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Não, continuo sem conseguir por o texto no sitio certo do header :S e sem conseguir centrar aquela linha :(

Voltei agora do almoço, vou tentar estudar um pouco mais isto a ver se descubro alguma coisa.

Mas se alguém me conseguir ajudar agradeço :P

Cumps
Offline

Tekku 
Membro
Mensagens 100 Gostos 3
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Sorry o Double post...

Bem as imagens e linha parece-me que já estão alinhadas como eu queria, agora só me falta mesmo o texto, ele já está centrado ao centro do ecrã mas precisava de subir ele para a parte do header... :S
Offline

Tekku 
Membro
Mensagens 100 Gostos 3
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Bem já consegui colocar o texto onde queria, embora não tenha sido exactamente como gostava, mas vai ter que servir.

Cumps
Offline

Tekku 
Membro
Mensagens 100 Gostos 3
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Boas, agora tenho outro problema, desta vez com uma lista, não consigo alterar o tamanho da letra :S

o código css que tenho para este slide é:

Código: [Seleccione]
div.figura4 {
float:right;
margin-right:5px;
display:inline;
width: 20%;
border: thin black solid;

padding: 0.5em;
}
div.figura5 {
float:right;
display:inline;
margin-right:5px;
width: 20%;
border: thin black solid;

padding: 0.5em;
}
div.figura6 {
float:right;
display:inline;
margin-right: 5px;
width: 20%;
border: thin black solid;

padding: 0.5em;
}
div.figura4 p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}
div.figura5 p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}
div.figura6 p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}


ul.ideias2 li {
float:left;
font-size: 15px;
text-align: left;
text-indent: 0;
}

Código html:

Código: [Seleccione]
<div>
<h3> Projecto</h3>

<div class="figura4">
<img class="local" src="img/bastidor.jpg" alt="Bastidor"/>
<p > Figura 4 - Bastidor</p>
</div>
<div class="figura5">
<img class="local" src="img/gabinete1.jpg" alt="Gabinete1"/>
<p > Figura 5 - Gabinete</p>
</div>
<div class="figura6">
<img class="local" src="img/gabinete2.jpg" alt="Gabinete2"/>
<p > Figura 6 - Gabinete</p>
</div>
<div class="ideias2">
<p>
<ul> 
<li> Sugestões de Melhorias:</li>
<ul>
<li> Reorganização do Bastidor</li> 
<li> Reestruturação da cablagem</li> 
</ul>
</ul>
</p>
</div>
</div>

e o estado do slide é este:

Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Viva,

Altera o teu HTML para:

Código: [Seleccione]
<div>
<p>
<ul class="ideias2"> 
<li> Sugestões de Melhorias:</li>
<ul>
<li> Reorganização do Bastidor</li> 
<li> Reestruturação da cablagem</li> 
</ul>
</ul>
</p>
</div>

Estavas a atribuir a class CSS na tag HTML errada.
Offline

Jota 
Editor
Mensagens 773 Gostos 0
Feedback +1

Troféus totais: 27
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Boas,


Apenas uma dica

Porque usas div.figura4, div.figura5 quando usas sempre o mesmo estilo?

Cria uma classe para tudo e depois da a mesma classe aos elementos de html.

Exemplo:

CSS

Código: [Seleccione]
div.figuracaixa{
  float:right;
  margin-right:5px;
  display:inline;
  width: 20%;
  border: thin black solid;
  padding: 0.5em;
}
div.figuracaixa p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}


HTML
Código: [Seleccione]
<div class="figuracaixa">
<img class="local" src="img/bastidor.jpg" alt="Bastidor"/>
<p > Figura 4 - Bastidor</p>
</div>

<div class="figuracaixa">
<img class="local" src="img/gabinete1.jpg" alt="Gabinete1"/>
<p > Figura 5 - Gabinete</p>
</div>

<div class="figuracaixa">
<img class="local" src="img/gabinete2.jpg" alt="Gabinete2"/>
<p > Figura 6 - Gabinete</p>
</div>

E que tens o mesmo estilo a repetir-se em todas as caixas.

Se for porque depois estas a usar javascript para fazer referencia a cada caixa podes sempre adicionar um id ou melhor ainda outra classe.

Podes ter multiplas classes.

Exemplo - HTML
Código: [Seleccione]
<div class="figuracaixa figura1 outraclass">
<img class="local" src="img/bastidor.jpg" alt="Bastidor"/>
<p > Figura 4 - Bastidor</p>
</div>

<div class="figuracaixa figura2 outraclass">
<img class="local" src="img/gabinete1.jpg" alt="Gabinete1"/>
<p > Figura 5 - Gabinete</p>
</div>

<div class="figuracaixa figura3 outraclass">
<img class="local" src="img/gabinete2.jpg" alt="Gabinete2"/>
<p > Figura 6 - Gabinete</p>
</div>

Se cada caixa tive-se um design diferente ainda percebia.

Ou podes fazer chain:

Código: [Seleccione]
div.figura4,
div.figura5,
div.figura6 {
float:right;
margin-right:5px;
display:inline;
width: 20%;
border: thin black solid;

padding: 0.5em;
}

div.figura4 p,
div.figura5 p,
div.figura6 p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}

So a tentar ajudar-te.
Offline

Tekku 
Membro
Mensagens 100 Gostos 3
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Não tem design mas cada caixa ou imagem está a ser redimensionada a uma percentagem diferente...

Cumps vou já experimentar :D