Lado-a-Lado

UnKnowN · June 26, 2006 at 10:08 AM

http://img89.imageshack.us/img89/7846/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 ?

QuickFire · June 26, 2006 at 11:27 AM

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 🙂

UnKnowN · June 26, 2006 at 11:33 AM

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 😛

QuickFire · June 26, 2006 at 11:46 AM

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

<!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 🙂

UnKnowN · June 26, 2006 at 12:17 PM

Muito Obrigado QuickFire, vou ver se consigo resolver o problema 😛

UnKnowN · June 26, 2006 at 12:31 PM

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>

QuickFire · June 26, 2006 at 12:43 PM

Faltava o position: absolute; na div#big 😛

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>

UnKnowN · June 26, 2006 at 12:54 PM

Já resolvi 😛

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 ?

UnKnowN · June 26, 2006 at 12:55 PM

Ya QUick , dps descobri isso 😛

QuickFire · June 26, 2006 at 12:56 PM

essa é facil 😛

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 🙂

UnKnowN · June 26, 2006 at 12:59 PM

essa é facil 😛
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 🙂

UnKnowN · June 26, 2006 at 01:52 PM

essa é facil 😛
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]

QuickFire · June 26, 2006 at 01:55 PM

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; }

UnKnowN · June 26, 2006 at 02:46 PM

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" 😛

Obrigado mais uma vez lol

Sign In

Lado-a-Lado

Recommended Posts

UnKnowN

QuickFire

UnKnowN

QuickFire

UnKnowN

UnKnowN

QuickFire

UnKnowN

UnKnowN

QuickFire

UnKnowN

UnKnowN

QuickFire

UnKnowN

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information