Jump to content
Danny_Pt

Caixas de Texto em Linha

Recommended Posts

Danny_Pt

Estou a fazer um pequeno exercício. Criei uma div que por sua vez tem duas divs dentro de si. São caixas de texto. O que pretendia era que as caixas de texto aparecessem em linha e não uma por baixo da outra. Já usei o display inline-block, etc. Mas nada. Não sei que estou a fazer mal. Se alguém me puder ajudar.

Eu pretendia que as divs caixas1 aparecessem ambas em linha uma com a outra.

HTML

<html>
<head>
<title>BEPI</title>
<link rel="stylesheet" href="box.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="caixas">
<div class="caixas1">
<center><img src="imagens/mota1.png" /></center>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempor non sapien nec bibendum. Duis nisi massa, lobortis.
</div>
<div class="caixas1">
<center><img src="imagens/mota1.png" /></center>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempor non sapien nec bibendum. Duis nisi massa, lobortis.
</div>
</div>
</body>
</html>

CSS:

.caixas1{
background: url(imagens/box.png);
width:220px;
height:244px;
text-align:center;
font-family:tahoma;
color:white;
font-size:small;
margin-left:auto;
margin-right:auto;
}
.caixas1 img{
padding:5px;
}
.caixas{
margin-left:auto;
margin-right:auto;
display:inline;
position:relative;
}

Edited by brunoais
geshi

Share this post


Link to post
Share on other sites
Virneto

Precisas de utilizar float.

<div id="caixas">
<div id="caixa1" class="cx">Caixa1
</div>

<div id="caixa2" class="cx">Caixa2
</div>
</div>

#caixas {
width:100%;
border-style:solid;
border-color:yellow;
height:210px;
}

#caixa1 {
float:left;
}

#caixa2 {
float:left;
}

.cx {
width:200px;
height:200px;
border-style:solid;
border-width:2px;
border-color:black;
background: url(imagens/box.png);
text-align:center;
color:blue;
}

Have fun! :thumbsup:


"Que inquieto desejo vos tortura, Seres elementares, força obscura? Em volta de que ideia gravitais?" >> Anthero de Quental

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Linuxando.com | ...

Share this post


Link to post
Share on other sites
Danny_Pt

Eu consegui usando o float left de facto...mas fiquei com 2 problemas...lol.

Queria um pequeno espaço entre as duas imagens, pois ficam quase juntas. E queria alinhá-las ao cento em vez da esquerda.

Como faço isso?

Obrigado :)

Share this post


Link to post
Share on other sites
Virneto
Como faço isso?

para centrar adiciona a #caixas:

  display:block;
  margin-left:auto;
  margin-right:auto;

e para as margens trabalha com margin e padding!

margin é o espaço entre elementos. padding é o espaço entre a div e o conteúdo da div (interno).

Não sei exatamente o que pretendes mas a boa notícia é que só tens de experimentar. :cheesygrin:


"Que inquieto desejo vos tortura, Seres elementares, força obscura? Em volta de que ideia gravitais?" >> Anthero de Quental

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Linuxando.com | ...

Share this post


Link to post
Share on other sites
brunoais

Tens aqui uma base com que trabalhar:

http://jsfiddle.net/53HYU/

Não está completo mas tem a base de trabalho para o que queres.

Pessoalmente, só uso os floats quando todo o resto falha ou quando revela ser realmente a melhor opção. Neste caso, na minha opinião, nem de perto...


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
Danny_Pt

Obrigado a ambos.

Vou dar uma olhada :)

para centrar adiciona a #caixas:

  display:block;
  margin-left:auto;
  margin-right:auto;

e para as margens trabalha com margin e padding!

margin é o espaço entre elementos. padding é o espaço entre a div e o conteúdo da div (interno).

Não sei exatamente o que pretendes mas a boa notícia é que só tens de experimentar. :cheesygrin:

Eu já tinha experimentado adicionar o margin-left e right em auto na div caixas, mas não funciona...não entendo porquê :\

Obrigado na mesma :)

Share this post


Link to post
Share on other sites
brunoais

Eu já tinha experimentado adicionar o margin-left e right em auto na div caixas, mas não funciona...não entendo porquê :\

Falta do ponto e virgula, provavelmente.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.