Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Lost Dark

[Resolvido] Bordas com canto arredondados

Por , em Desenvolvimento frontend

Recommended Posts

Lost Dark    0

Lost Dark
Postado

Iae pessoal venho pedir mais uma "ajudinha" a v6!!

 

<!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=utf-8" />
<title>Div</title>
<style type="text/css">
/*Primeiro Layout usando Div's apenas
width: 800px; -> comprimento
height: 600px; -> largura
*/
* { 
padding: 0px;
margin: 0px;
height: 100%;
}
#mae{
margin:0 auto;
width: 800px;
height: 600px;
}
#logo{
	position:absolute;
background-image:url(Logo(1).png) no-repeat;
	top:16px;
	left:18px;
	width:246px;
	height:150px;
	float:left;
	margin: 2px;
	visibility: hidden;
	overflow: visible;
}
#topo{
width: 800px;
height: 200px;
background-color: #A8A8A8;
float:left;
}

#menu{
width: 150px;
height: 500px;
background-color: #7699A5;
float:left;
}
#conteudo{
width:500px;
height:500px;
background-color: #72864D;
float:left;
}
#publicidade{
width: 150px;
height: 500px;
background-color:#666666;
float: left;
}
#rodape{
width:800px;
height: 80px;
background-color;
float:left;
}
</style>

</head>

<body>
<div id="mae">

<div id="topo">
	<div id="logo"></div>
</div>

<div id="menu">
	<div id="link">
    	<!--<ul>
        	<li><a href="#" title="LInk1">Link 1</a></li>
            <li><a href="#" title="LInk1">Link 2</a></li>
            <li><a href="#" title="LInk1">Link 3</a></li>
            <li><a href="#" title="LInk1">Link 4</a></li>
        </ul>-->
    </div>
</div>

<div id="conteudo"></div>

<div id="publicidade"></div>

<div id="rodape"></div>

</div>
</body>
</html>

 

 

Esse foi o meu primeiro Layout só com div's to aprendendo Tabless, agora queria deixar ele melhorzinho, tipo arredondar os cantos , e eu naum conseguir inserir o logo , o mesmo não ta aparecendo alguem po de ajudar tipo como inserir borda na div e arredondar a mesma!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Denis Lins    0

Denis Lins
Postado 

#elemento
{
   border: 1px solid #000; /* borda comum ^^ */
   border-radius: 5px; /* código que deixa as bordas arredondadas em CSS3, futuramente só precisará desse aqui, os de baixo serão inutilizados */
   -moz-border-radius: 5px; /* bordas arredondadas no firefox */
   -webkit-border-radius: 5px; /* bordas arredondadas em navegadores webkit, como o chrome */
}

Tenha em mente que isto nao funcionara em todos os browsers, pois utiliza CSS3.

Mais especificamente, nosso amado internet explorer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lost Dark    0

Lost Dark
Postado

Obg cara vlw mesmo!! o IE é mesmo uma doénça que açola a internet!!

vlw pelo código vou testar se tiver dúvidas posta

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Dá uma olhada aqui:

http://forum.imasters.com.br/index.php?/topic/377344-bordas-arredondadas/

aqui:

http://forum.imasters.com.br/index.php?/topic/259430-bordas-arredondadas-em-css/page__hl__borda__fromsearch__1

e aqui:

http://forum.imasters.com.br/index.php?/topic/309236-bordas-arredondadas-em-divs/page__hl__borda__fromsearch__1

 

Qnto ao teu logo, estranho ter () no nome ne?! isso pode estar quebrando a sintaxe do CSS..

por isso existem as aspas:

background: url('Logo(1).png') no-repeat;

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lost Dark    0

Lost Dark
Postado

Entaum eu arredondei as bordas e tal's só que a div publicidade, se dizalinhou e foi parar de baixo da div menuh olhem só!!

 

 

<!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=utf-8" />
<title>Div</title>
<style type="text/css">
/*Primeiro Layout usando Div's apenas
width: 800px; -> comprimento
height: 600px; -> largura

#elemento
{
   border: 1px solid #000; /* borda comum ^^ */
   border-radius: 5px; /* código que deixa as bordas arredondadas em CSS3, futuramente só precisará desse aqui, os de baixo serão inutilizados */
   -moz-border-radius: 5px; /* bordas arredondadas no firefox */
   -webkit-border-radius: 5px; /* bordas arredondadas em navegadores webkit, como o chrome */

* { 
padding: 0px;
margin: 0px;
height: 100%;
}
#mae{
margin:0 auto;
width: 800px;
height: 600px;
}
#topo{
width: 800px;
height: 200px;
background-color: #A8A8A8;
border: 1px solid #000;
border-radius: 10px;
-moz-border-radius: 5px;
float:left;
}
#logo{
background-image:url("Logo.png") no-repeat;
}
#menu{
width: 150px;
height: 500px;
background-color: #7699A5;
border: 1px solid #000;
border-radius: 10px;
-moz-border-radius: 5px;
float:left;
}
#conteudo{
width:500px;
height:500px;
background-color: #72864D;
border: 1px solid #000;
border-radius: 10px;
-moz-border-radius: 5px;
float:left;
}
#publicidade{
width: 150px;
height: 500px;
background-color:#666666;
border: 1px solid #000;
border-radius: 10px;
-moz-border-radius: 5px;
float: left;
}
#rodape{
width:800px;
height: 80px;
background-color:#0066CC;
border: 1px solid #000;
border-radius: 10px;
-moz-border-radius: 5px;
float:left;
}



</style>

</head>

<body>
<div id="mae">

<div id="topo">
	<div id="logo"></div>
</div>

<div id="menu">
	<div id="link">
    	<!--<ul>
        	<li><a href="#" title="LInk1">Link 1</a></li>
            <li><a href="#" title="LInk1">Link 2</a></li>
            <li><a href="#" title="LInk1">Link 3</a></li>
            <li><a href="#" title="LInk1">Link 4</a></li>
        </ul>-->
    </div>
</div>

<div id="conteudo"></div>

<div id="publicidade"></div>

<div id="rodape"></div>

</div>
</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Estude box model

 

Oque aconteceu, é que você aumentou as dimensões da tua div, e agora ela não cabe mais onde cabia.

se vai adicionar borders ou paddings, desconte das dimensões(width|height)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito