[Dúvida] Posicionamento div dentro de outra div (position)

[Dewerbe]

Boas pessoal,

Surgiu-me aqui uma dúvida, vou criar um slideshow e gostava de ter uma parte com a descrição de cada imagem.

Essa descrição ficaria sobre o slideshow (imagem) com uma opacidade, só para terem uma noção do que seria.

div1 = slideshow

div2 = descricao

(coloquei as letras apenas para ser um "obstáculo" para a 'div2', não podendo a mesma interferir com o texto)

ou seja, o codigo seria mais ou menos assim:

HTML

<div id="slideshow">
    <div id="descricao">
    </div>
</div>

CSS

#slideshow {
        width: indiferente;
        height: indiferente;
        position:relative;
}
#descricao {
        width: indiferente;
        height: indiferente;
        position: absolute;
}

A minha duvida é que se eu dou a ordem da #descricao ter position: absolute; passa a ser em relação à pagina inteira e não à div (#slideshow) como eu queria.

alguma solucao/explicacao para isto?

mto obrigado

[I-NOZex]

e porque qeres tu meter position abs?

[Dewerbe]

e porque qeres tu meter position abs?

Talvez para o objecto não interferir com os outros (?)....

[yoda]

O problema não está aí, isso funciona assim.

[Dewerbe]

O problema não está aí, isso funciona assim.

funcionou amigo. 5*

agora estou com outro problema, quando coloco algo nessa div, por exemplo uma "<ul> <li>" ela fica sem o background. ou seja, coloquei um menu dentro da div "menubox" e fica com uma linha com a cor do background, não ficando a cor do background da box.

alguma ajuda?

[yoda]

Mostra o html

[Dewerbe]

Mostra o html

Aqui vai amigo:

HTML

<div id="main-topo"><!-- INICIO TOPO -->

<div id="logo">

   </div>

   <form>
Login: <input type="text" name="login">
Password: <input type="text" name="password">
</form>

   <nav id="menubox">

    asfkasduffjsdf

   </nav>

</div><!-- FIM TOPO -->

CSS

#main-topo {
width:auto;
height: 200px;
margin-top: 0px;
padding-bottom:0px;
background: #CACAD9;
position:relative;s
}

#logo {
width: 288px;
height: 124px;
background-image: url(img/logo.png);
position:absolute;
top:30px;
left:50px;
}

#menubox {
width: 685px;
height: 59px;
background-image: url(img/menubox.png);
position: absolute;
bottom: 0px;
right: 0px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#FFF;
font-size:20px;
text-align:center;
}

Neste caso a form fica no topo da div principal e com o fundo transparente

encontra-se assim no browser.

relembro que se eu colocar o menu em lista ele vai ficar igual à form com o fundo transparente

[yoda]

Acho que estás a complicar ao usar posicionamento num caso em que ele não é preciso.

[Dewerbe]

Acho que estás a complicar ao usar posicionamento num caso em que ele não é preciso.

mesmo tirando o posicionamento o problema persiste. e tirando o posicionamento, nao estou a conseguir colocar o menu no final do "main-topo"

[yoda]

Mas queres que aquele menu cinzento fique em cima, é isso?

[Dewerbe]

a ideia era ficar assim

[yoda]

Tens nessa imagem 2 blocos horizontais, e 2 blocos verticais no bloco da direita. Não precisas posicionamento para obteres o resultado que queres.

http://jsfiddle.net/yodapt/QWXtz/

[Dewerbe]

Tens nessa imagem 2 blocos horizontais, e 2 blocos verticais no bloco da direita. Não precisas posicionamento para obteres o resultado que queres.

http://jsfiddle.net/yodapt/QWXtz/

WOW ! muito obrigado meu 😉

Tens nessa imagem 2 blocos horizontais, e 2 blocos verticais no bloco da direita. Não precisas posicionamento para obteres o resultado que queres.

http://jsfiddle.net/yodapt/QWXtz/

so não percebi muito bem uma coisa, porque é que estamos a usar o block do logo para o form e o menu?

[yoda]

É só uma classe, como tinha que dividir o header em 2 criei uma classe para não repetir código. Deves adaptar ao teu exemplo, mas a ideia é a mesma.

[Dewerbe]

fiz um exercico para ver se conseguia fazer tudo do começo. criei uma template com o fireworks e depois foi só formatar com o CSS, consegui fazer tudo 😛

aqui fica o print:

só não consegui fazer com que o logo ficasse centrado verticalmente.. alguma solucao?

btw muito obrigado yoda, foi uma grande ajuda 😄👍

[yoda]

Para alinhar ao meio o mais fácil é usar display: table no header :

http://jsfiddle.net/yodapt/QWXtz/

[Dewerbe]

Para alinhar ao meio o mais fácil é usar display: table no header :

http://jsfiddle.net/yodapt/QWXtz/

yoda, tenho outra questão.

em relacao à form, queria dar um margin-left mas não estou a conseguir...

CSS:

#header .form {
width: 100%;
height: 30px;
display: table;
background-color: #0C0;
margin-top:100px;
margin-bottom:10px;
}

#header .box .form form {
width: 100%;
display: table-cell;
vertical-align: middle;
margin-left:30px;
}

Edited June 9, 2014 at 01:08 PM by Dewerbe

[yoda]

Estes dois não combinam :

display: table-cell;
margin-left:30px;

table-cell tem sempre a largura total que é permitida. Se quiseres dar margens tens de criar um ID ou classe lá dentro e dar a margem aí.

[I-NOZex]

possivelmente é por teres width 100% combinado com esse tipo de display...

2 soluçoes: margin em % tambem, ou:

width: calc(100% - 30px); /* 30px = margin left */

Edited June 9, 2014 at 03:39 PM by I-NOZex

[Dewerbe]

Estes dois não combinam :

display: table-cell;
margin-left:30px;

table-cell tem sempre a largura total que é permitida. Se quiseres dar margens tens de criar um ID ou classe lá dentro e dar a margem aí.

Funcionou. mas depois perde o alinhamento central verticalmente 😞

possivelmente é por teres width 100% combinado com esse tipo de display...

2 soluçoes: margin em % tambem, ou:

width: calc(100% - 30px); /* 30px = margin left */

não funcionou nada..