Jump to content

Lado-a-Lado


UnKnowN
 Share

Recommended Posts

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 :)

Link to comment
Share on other 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

Link to comment
Share on other 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 :)

Link to comment
Share on other 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>
Link to comment
Share on other 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>
Link to comment
Share on other 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 ?

Link to comment
Share on other 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 :)

Link to comment
Share on other 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 :)

Link to comment
Share on other 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]

Link to comment
Share on other 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; }
Link to comment
Share on other 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

Link to comment
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
 Share

×
×
  • 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.