• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

UnKnowN

Lado-a-Lado

14 mensagens neste tópico

text1oi.th.png

Como é que ponho aquelas "Box's" (as duas mais pekenas) ao lado da maior ?

E respondam-me a outra pergunta tbm sff  :-[

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Bem em relação à duvida do texto dentro da caixa tenta usar padding: 0 0 0 10px; (eu prefiro usar pixel porque cm não me inspira muita confiança :P

Quanto à duvida das caixas lado a lado tens duas hipoteses :) Ou fazes um margin: 0 0 0 100px; onde o 100px é variavel depende do width da outra caixa à esquerda

Ou fazes float:left; :)

Já te dou um exemplo :)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Bem em relação à duvida do texto dentro da caixa tenta usar padding: 0 0 0 10px; (eu prefiro usar pixel porque cm não me inspira muita confiança :)

Quanto à duvida das caixas lado a lado tens duas hipoteses :) Ou fazes um margin: 0 0 0 100px; onde o 100px é variavel depende do width da outra caixa à esquerda

Ou fazes float:left; :)

Já te dou um exemplo :)

Obrigadão. Fico a espera entao :)

Quanto ao margin-left: X cm eu ensava que so dava mesmo para a medida ser em cm , no width 10~0% tbm se pode usar px ?

Obrigado mais uma vez :P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Bem aqui vai um exemplo do margin: do float faço depois que agora com exames isto tem de ser feito em pouco tempo :P

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
body{padding: 20px;background: #FFF;color: #000;text-align: center; }
div#main { text-align:left; margin: 0 auto; position:relative; float:left;}
div#leftcaixa { position:absolute; margin:10px 0 0 10px; width:150px; height:220px; background:#99FF00}
div#rightupcaixa{position:absolute; margin:10px 0 0 180px; width:100px; height: 100px; background: #FF3300 }
div#rightbtcaixa{position:absolute; margin:130px 0 0 180px; width:100px; height: 100px; background: #FFFF00 }
</style>

</head>


<body>
<div id="main">
<div id="leftcaixa">Caixa da Esquerda</div>
<div id="rightupcaixa">Caixa Superior da Direita</div>
<div id="rightbtcaixa">Caixa Inferior da Direita</div>
</div>
</body>
</html>

Quanto às medidas eu uso sempre em pixel  :) Já usei em % mas cheguei à conclusão que em pixel é bem mais pratico :)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Muito Obrigado QuickFire, vou ver se consigo resolver o problema :P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O que é que me falta aqui ?

<html><head>
<title>UnKnowN Hole</title>
<style type=text/css>
div#one
{
height: 100%;
width: 100%;
position: relative;
float: left
}
div#big
{
border-style: dashed;
border-width: 1px;
height: 250px;
width: 50%;
font-family: tahoma;
font-size: 12pt;
text-align: left
}
div#upright
{
margin: 10px 0px 0px 180px;
position: absolute;
border-style: dashed;
border-width: 1px;
height: 100px;
width: 100px;
font-family: tahoma;
font-size: 12pt;
text-align: left
}
</style></head>
<body>
<div id="one">
<div id="big">This WebSite is under construction!</div>
<div id="upright">This WebSite is under construction!</div>
</div>
</body>
</html>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Faltava o position: absolute; na div#big :P

aqui vai o código que modifiquei um pouco:

<style type=text/css>
div#one
{
height: 100%;
width: 100%;
position: relative;
float: left
}
div#big
{
position:absolute;
margin:10px 0 0 10px;
border-style: dashed;
border-width: 1px;
height: 250px;
width: 500px;
font-family: tahoma;
font-size: 12pt;
text-align: left
}
div#upright
{
margin: 10px 0px 0px 520px;
position: absolute;
border-style: dashed;
border-width: 1px;
height: 100px;
width: 100px;
font-family: tahoma;
font-size: 12pt;
text-align: left
}
</style>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Já resolvi :P

Falatava-me 1 position: absolute :)

Agora tenho outra dúvida, que é:

Como fazer para 1 link (a href) não esteja sublinhado, para que tenha o estilo que eu quiser ?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

essa é facil :P

a { text-decoration:none; color:#000; }

Assim por exemplo vão parecer texto normal porque não têm sublinhado e estão com cor preta :)

Podes usar várias coisas no text-decoration :)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

essa é facil :P

a { text-decoration:none; color:#000; }

Assim por exemplo vão parecer texto normal porque não têm sublinhado e estão com cor preta :)

Podes usar várias coisas no text-decoration :)

Obrigadão! :)

QuickFire A.k.A. CSS-Man :)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

essa é facil :P

a { text-decoration:none; color:#000; }

Assim por exemplo vão parecer texto normal porque não têm sublinhado e estão com cor preta :)

Podes usar várias coisas no text-decoration :)

Errr... O sublinhado continua :|

[estrato]

div#estiloso

{

text-decoration: none;

color: 004f9d

}

[/estrato]

[estrato]

<div id="estiloso"><a href="/contactos.html">contactos</a></div>

[/estrato]

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

não é bem isso :P Tem de meter mesmo um elemento para o a (links) como tenho no código a cima.

O que estás a fazer neste momento é dizer que todo o texto dentro da div estiloso vai ser da cor 004f9d e sem decoração no texto.

Para seres mais especifico tens de indicar que é os links que têm de ficar sem decoração.

Se queres ficar SÓ com os links do div estiloso sem sublinhado fazes:

div#estiloso a { text-decoration:none; }

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

não é bem isso :) Tem de meter mesmo um elemento para o a (links) como tenho no código a cima.

O que estás a fazer neste momento é dizer que todo o texto dentro da div estiloso vai ser da cor 004f9d e sem decoração no texto.

Para seres mais especifico tens de indicar que é os links que têm de ficar sem decoração.

Se queres ficar SÓ com os links do div estiloso sem sublinhado fazes:

div#estiloso a { text-decoration:none; }

Ah ok lol erro lamme nao percebi que o "a" {} era da função de HTML "a" :P

Obrigado mais uma vez lol

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora