← Desenvolvimento

Ajuda com CSS

Lida 3321 vezes

Offline

gusmaia 
Membro
Mensagens 0 Gostos 0
Troféus totais: 4
Trófeus: (Ver todos)
Level 1 Third year Anniversary Second year Anniversary One year Anniversary

Boas pessoal,

Estou de momento a desenvolver o meu primeiro site para um cliente, estilo single page responsive com flat ui pro e precisava de um entendido de css que me desse uma breve ajuda com algumas duvidas que me estão a surgir.

O site é este para já: http://paginaparatestar.host22.com/

As minhas duvidas para já são as seguintes:
- A barra da navegação quando testei o site localmente ficava completamente no topo, quando fiz upload para o servidor ficou um espaço entre o topo e barra. Como devo proceder para que fique sempre no topo?
- De seguida gostava de colocar a imagem inicial com a largura total da página (pois de momento está limitada pelas margens do container) e o texto que está por cima da imagem ficaria sobreposto à imagem.

Um bom exemplo para esses 2 resultados: http://shortfuse.pt/

Para além disso e penso ser um problema mais complicado é o jQuery scrollTo que estou a usar não está funcionar, e nessa àrea admito que estou completamente em branco, mas se fizeram f12 (Google Chrome) e forem a consola podem ver lá uma serie de erros em relação a funcionalidade.

Posto isto agradecia bastante alguma ajuda.
Obrigado e cumprimentos.
Modificar mensagem
Offline

Kart 
Membro
Mensagens 14 Gostos 1
Troféus totais: 9
Trófeus: (Ver todos)
Combination Topic Starter Level 2 Level 1 10 Posts First Post Third year Anniversary Second year Anniversary One year Anniversary

Para a 1º situação utilizas margin-top:0px;

Para a 2º Situação utilizas width:100%;


Espero ter ajudado,

Kart
Offline

gusmaia 
Membro
Mensagens 0 Gostos 0
Troféus totais: 4
Trófeus: (Ver todos)
Level 1 Third year Anniversary Second year Anniversary One year Anniversary

Boas,

Já tinha pensado em usar esses códigos, mas tal como tinha em mente não resultaram porque o processo é algo mais complexo.
Em relação à barra de navegação é algum erro porque quando testo o site local está a funcionar direito, na versão do servidor é que existe aquele gap, tanto em versão web como mobile como podes ver nos prints:
http://i.imgur.com/7Eay5io.png
http://i.imgur.com/e97ZSaV.png

Em relação à imagem, o que está a limitar que o width ocupe a página inteira que cria aquela margem tal como pretendido, tirando no caso dessa imagem e de mais duas para as quais pretendo proceder de igual maneira, por isso o necessário seria fazer com que a imagem 'desobedeça' a essa regra do container, que sendo sincero não faço ideia de como fazer.

Agradeço bastante a ajuda, um abraço
Offline

Diogo Pinto 
Administrador
Mensagens 4392 Gostos 368
Feedback +4

Troféus totais: 37
Trófeus: (Ver todos)
Avatar Search Level 6 Linux User Mobile User Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes

Desculpa a resposta curta mas estou no telemovel:

1) pesquisa no Google css reset e adiciona ao teu código no ficheiro css.
2) antes da imagem fecha o container, cria uma class que tenha a altura da imagem e uma width de 100% e adiciona no html. Depois volta a abrir o container:

Div class container
Fecha
Div class container-full-width
Imagem aqui
Fecha
Abre novamente div class container

Desculpa se está confuso mas no telemóvel não consigo muito melhor :P
Offline

joaoneves 
Membro
Mensagens 55 Gostos 9
Troféus totais: 12
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 2 Level 1 50 Posts 10 Posts First Post Avatar Third year Anniversary

Procure tutoriais no Youtube.
Offline

Kart 
Membro
Mensagens 14 Gostos 1
Troféus totais: 9
Trófeus: (Ver todos)
Combination Topic Starter Level 2 Level 1 10 Posts First Post Third year Anniversary Second year Anniversary One year Anniversary

Sendo assim, utilizas flat.
Offline

Octávio Alves 
Membro
Mensagens 963 Gostos 36
Feedback +25

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

Bom dia,

Para a situação do texto ficar centrado com a imagem basta adicionares uma div dentro da div com a class "project-overlay" com o seguinte css:

Código: [Seleccione]
position: absolute;
  left: 50%; // altera a percentagem para que fique no local certo
  right: 50%; // altera a percentagem para que fique no local certo
  top: 200px; // altera os pixeis para que fique no local certo

Cumprimentos
Offline

BrunoTeixeira 
Membro
Mensagens 93 Gostos 2
Feedback +2

Troféus totais: 19
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 50 Posts 10 Posts First Post

gusmat,

Deves fazer um reset ao CSS em primeiro lugar para evitares dores de cabeça nos vários Browsers. Eu pessoalmente utilizo o Normalize há alguns anos e nunca tive quaisquer problemas.

Abraço