← HTML + CSS

Alinhar elemento estático

Lida 4723 vezes

Offline

myStoned 
Membro
Mensagens 663 Gostos 8
Feedback +2

Troféus totais: 29
Trófeus: (Ver todos)
Level 5 Tenth year Anniversary Nineth year Anniversary Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Boa noite!

O meu problema é o seguinte,




Como se pode ver na imagem, tenho um slide no qual os detalhes da imagem que esta a passar estão sob uma zona a 70% de opacity. Até ai tudo bem, mas conformo escrevo, uns detalhes maiores outros mais pequenos, o fundo e o tamanho do texto muda obviamente.
Já tentei de tudo para alinha o texto/imagem de fundo (parte semi-preta de pontas redondas) mas não consigo encontrar uma solução, pois se usar margin alinha a partir da esquerda do texto.

Nada parece resultar, como faço para alinhar sendo que as dimensões mudam consoante os detalhes que escrevo na imagem, isto sem ter de meter um fixed-background, pois quero manter o que esta com as pontas redondas com os tamanhos apropriados ao detalhe.

Desde já obrigado. Cumprimentos
Offline

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

Boas, pelo que parece ira ter que criar dois spans ou divs para os contornos e depois colocar um background com repeat-x no centro, assim sempre que aumentar o texto a caixa ira manter as bordas..

O elemento não pode ser de tamanho fixo, têm de ter liberdade para crescer com o texto...

acho que é isto. Fica complicado dizer o mais sem ver o código .

Cumps espero ter ajudado
Offline

myStoned 
Membro
Mensagens 663 Gostos 8
Feedback +2

Troféus totais: 29
Trófeus: (Ver todos)
Level 5 Tenth year Anniversary Nineth year Anniversary Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Boas, pelo que parece ira ter que criar dois spans ou divs para os contornos e depois colocar um background com repeat-x no centro, assim sempre que aumentar o texto a caixa ira manter as bordas..

O elemento não pode ser de tamanho fixo, têm de ter liberdade para crescer com o texto...

acho que é isto. Fica complicado dizer o mais sem ver o código .

Cumps espero ter ajudado

Desde já obrigado, vou tentar, acho que é mesmo essa a solução, apesar de nao ter a opacity a 100% penso que não vá interferir.

Cumprimentos
Offline

myStoned 
Membro
Mensagens 663 Gostos 8
Feedback +2

Troféus totais: 29
Trófeus: (Ver todos)
Level 5 Tenth year Anniversary Nineth year Anniversary Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Experimentei e deu o mesmo..
Offline

myStoned 
Membro
Mensagens 663 Gostos 8
Feedback +2

Troféus totais: 29
Trófeus: (Ver todos)
Level 5 Tenth year Anniversary Nineth year Anniversary Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Mais ninguém me pode ajudar?

Por amor de deus, nem que seja a pagar já.
Offline

Pedro Magalhães 
Membro
Mensagens 397 Gostos 0
Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

Ou seja, queres alinhar o texto ao centro independentemente do conteúdo?
Offline

Pedro Magalhães 
Membro
Mensagens 397 Gostos 0
Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

Se for isso, tenta fazer o seguinte:

1.
Envolve o conteúdo de texto, numa <div>
Essa div terá uma posição relativa ao topo de X, que é onde começa o conteúdo de texto.
Atribui apenas a largura da imagem do slide a essa <div>

(geralmente faço de outra forma, coloco o <div> que envolve os slides com posição relativa, e o texto com posição absoluta, bottom:0; left:0)

2.
O conteúdo de texto terá apenas margin:0 auto e text-align:center.
Podes colocar o texto noutro div com uma classe diferente e lá dentro vão os parágrafos.

Quanto aos cantos redondos, não sei como estás a fazer isso...
Se for com CSS3 é simples, dás um padding à <div> que contem todo o texto. Aconselho-te antes assim.
Se não estiver com CSS3, então vais precisar de fazer uma ginástica em html/css para alinhar ao centro.
Pois precisas de aplicar floats aos cantos, o que poderá forçar as <div> pai...

Boa sorte ;)
Offline

myStoned 
Membro
Mensagens 663 Gostos 8
Feedback +2

Troféus totais: 29
Trófeus: (Ver todos)
Level 5 Tenth year Anniversary Nineth year Anniversary Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Obrigado Pedro Magalhaes, agora fiquei um pouco confuso.  #-o

O meu problema, é que eu consigo dar uma margin definida à parte esquerda, ou seja, se disser para o "elemento" começar a 25px de margem, ele começa, mas o que procuro mesmo é que fique sempre centrado, independentemente do texto, se tiver 30 caracteres ou 100, ele deverá manter-se centrado na totalidade do slide, que é por exemplo 900px.

Já tentei de tudo e não consigo, se algum programador se disponibilizar para o trabalho, envie-me uma MP com os valores do trabalho.

Cumprimentos.
Offline

myStoned 
Membro
Mensagens 663 Gostos 8
Feedback +2

Troféus totais: 29
Trófeus: (Ver todos)
Level 5 Tenth year Anniversary Nineth year Anniversary Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Já agora, está aqui o código que diz respeito ao slide.


Código: [Seleccione]
.rs-projects {
margin:20px 0 0 20px;
width:940px;
height:380px;
overflow:hidden;
z-index:0;
position:relative;
}
.rs-project {
position:absolute;
width:940px;
height:380px;
}
.rs-caption {
        position:absolute;
bottom:30px;
clear:both;
width:auto;
z-index:1;
}
.rs-caption p {
line-height:20px;
padding:20px;
color:#fff;
        text-transform: uppercase;
        text-align:center
font-size:12px;
        background: url('styles/default/opacity70.png') left top;
        margin:auto;


Agradeço desde já a todos pela ajuda prestada, preciso mesmo de uma solução para isto.

Cumprimentos
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

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

margin: 0 auto;
Offline

Pedro Magalhães 
Membro
Mensagens 397 Gostos 0
Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

.rs-projects e .rs-project corresponde a q conteudo? a largura do slide é 940? mostra tb o html sff!