iMasters Fóruns: [Resolvido] Gostaria de fazer um site assim, mas nao consigo - iMasters Fóruns

Ir para

Página 1 de 1
  • Novo tópico
  • Responder

[Resolvido] Gostaria de fazer um site assim, mas nao consigo

#1 Membro offline   Dieguinn Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 44
  • Cadastrado: 17-setembro 09

Postou 07 novembro 2009 - 14:54

Gostaria de fazer um site assim, com esse visual, mas nao tenho nem ideia...como fazer o topo?


Imagem
Muito obrigado =/

#2 Membro offline   Thiago Retondar Ícone

  • Moderador Webstandards http://twitter.com/thiagoretondar
  • Ícone
  • Grupo: Moderadores
  • Posts: 3700
  • Cadastrado: 04-março 08
  • Sexo:Masculino
  • Localização:São Paulo - SP

Postou 07 novembro 2009 - 15:37

Os ângulos de todos serão diferentes?

De qualquer forma, vai ter que usar imagem. Pode colocar de background do li.

:thumbsup:

#3 Membro offline   Dieguinn Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 44
  • Cadastrado: 17-setembro 09

Postou 07 novembro 2009 - 17:47

Como coloco eles na horizontal?

#4 Membro offline   douglash Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 31
  • Cadastrado: 22-maio 09
  • Sexo:Masculino
  • Localização:Porto Alegre

Postou 07 novembro 2009 - 18:13

Olá Dieguinn, você pode fazer da seguinte maneira.

Vou lhe dar um exemplo.

<!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>Menu</title>

<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style:none;
width:300px;
}
ul li a{
float:left;
margin-left:2px;
padding:5px;
border:1px solid black;
color:black;
text-decoration:none;
}
</style>
</head>

<body>
<ul>
<li><a href="#">LINK1</a></li>
<li><a href="#">LINK2</a></li>
<li><a href="#">LINK3</a></li>
</ul>

</body>
</html>


Assim seu menu ficará na horizontal.

#5 Membro offline   Dieguinn Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 44
  • Cadastrado: 17-setembro 09

Postou 07 novembro 2009 - 22:33

O na horizontal eu consegui.. brigadao :D


mas como ficaria com a img ? O background-img nun ta dando certo

Este post foi editado por Thiago Retondar: 07 novembro 2009 - 22:43
Razão por editar:: Removido BBCode [quote] desnecessário.

#6 Membro offline   Thiago Retondar Ícone

  • Moderador Webstandards http://twitter.com/thiagoretondar
  • Ícone
  • Grupo: Moderadores
  • Posts: 3700
  • Cadastrado: 04-março 08
  • Sexo:Masculino
  • Localização:São Paulo - SP

Postou 07 novembro 2009 - 22:44

Volto a fazer a mesma pergunta:

Quote

Os ângulos de todos serão diferentes?


Se não forem, terá que definir um id para cada li e colocar o background.

:thumbsup:

#7 Membro offline   Dieguinn Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 44
  • Cadastrado: 17-setembro 09

Postou 07 novembro 2009 - 23:00

Nao sao os mesmos.. eu q desenhei errado :P
#menu ul li{

    display:inline;
	background-image:url(img/back_liTOP.JPG);
	padding:60px;
	list-style-type: none;
	
}


To fazendo assim... mas nao esta dando

Este post foi editado por William Bruno: 08 novembro 2009 - 07:47
Razão por editar:: Adicionar [code]

#8 Membro offline   douglash Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 31
  • Cadastrado: 22-maio 09
  • Sexo:Masculino
  • Localização:Porto Alegre

Postou 07 novembro 2009 - 23:13

Mas eu recomendo fazer do modo em que mostrei pra ti, com float left..

ficaria assim mesmo, e o list-style none é definido no container, no ul e não no li.

#menu ul li a{
float:left;
margin-left:2px;
padding:60px;
border:1px solid black;
background-image:url(img/back_liTOP.JPG);
background-repeat: no-repeat;
color:black;
text-decoration:none;
}


Se você tiver a imagem eu posso lhe dar um exemplo, e veja se o diretório está correto, se está no mesmo nível, se o nome da imagem está correta..

#9 Membro offline   Dieguinn Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 44
  • Cadastrado: 17-setembro 09

Postou 08 novembro 2009 - 07:42

Continua sem aparecer a imagem no fundo =/.

Tipo que o diretorio da certin... o nome tbm.

screen:

Imagem

Este post foi editado por William Bruno: 08 novembro 2009 - 07:46
Razão por editar:: Remover quote desnecessário

#10 Membro offline   William Bruno Ícone

  • Ícone
  • Grupo: Moderadores
  • Posts: 5690
  • Cadastrado: 08-janeiro 08
  • Sexo:Masculino
  • Localização:São Paulo - SP

Postou 08 novembro 2009 - 07:46

0 arquivo é .JPG em MAISCULO mesmo ?
o css está no mesmo nível de pasta do arquivo .php ou .html ?

Como ficou o HTML disso ai ?

#11 Membro offline   Dieguinn Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 44
  • Cadastrado: 17-setembro 09

Postou 08 novembro 2009 - 07:53

Ver postWilliam Bruno, em 08 novembro 2009 - 07:46 , disse:

0 arquivo é .JPG em MAISCULO mesmo ?
o css está no mesmo nível de pasta do arquivo .php ou .html ?

Como ficou o HTML disso ai ?

html:
<!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>

<style type="text/css">
@import url("css/Default.css");
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> DiEgUiNnNnN </title>

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
   	<div id="header">
   	  <?php include "logo.inc" ?>
   	</div>
  <div id="menu">
     		<?php include "menu.inc" ?>
  </div>
    	<div id="conteudo">
      		<?php include "conteudo.inc" ?>
  </div>
    	<div id="footer">
     		<?php include "footer.inc" ?>
  </div>
	</div>

</body>
</html>


css:

@charset "utf-8";
/* CSS Document */
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	/*color: white;*/
}
#container {
	width: 80%;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	margin: 10px auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px black;
	text-align: left; /* this overrides the text-align: center on the body element. */
	background:white;
}
#header {
	background: #663300;
	border: 1px black; 
	width: 100%;
	height:120px;
}


#menu{    
	border:1px;
	font: bold 15px "Comic Sans MS";
	width: 100%;
	height:40px;
}

#menu ul{

	list-style-type: none;
}

#menu ul li{

    display:inline;
}

#menu li a{
	
	float:left;
	margin-left:2px;
	padding:60px;
	border:1px solid black;
	background-image:url(img/back_liTOP.jpg);
	background-repeat: no-repeat;
	color:black;
	text-decoration:none;

}

#conteudo {
	
	background: pink;
	height: 500px;
    border: 1px black;
	width: 100%;
	float : left;
}
#footer {
	
	background:green;
	border: 1px black;
	width: 100%;
	height:50px;
	float: left;
}


A imagem ta na pasta IMG... eu mudei pra minusculo... mas fez diferença nao... la tava maiusculo tbm...

#12 Membro offline   William Bruno Ícone

  • Ícone
  • Grupo: Moderadores
  • Posts: 5690
  • Cadastrado: 08-janeiro 08
  • Sexo:Masculino
  • Localização:São Paulo - SP

Postou 08 novembro 2009 - 08:01

Faz diferença sim ^_^
deve ficar igual, tanto no arquivo como no código.

Veja:
@import url("css/Default.css");
o teu css está numa pasta.
Então, você deve voltar um nível para chamar backgrounds.

        background-image:url('../img/back_liTOP.jpg');
você postou código php.
Qndo pedirmos 'html', poste somente o gerado depois da resposta do servidor.

Exibir > Código Fonte
E cole aqui o trecho que interessa.

#13 Membro offline   Dieguinn Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 44
  • Cadastrado: 17-setembro 09

Postou 08 novembro 2009 - 08:02

A taa, hehe

Brigadao e desculpa ae =D

E aqui eu estou dando padding no menu li a ... ta so aumentando o tamanho .... nao ta dando espaço entre home portifolio .... etc

#14 Membro offline   William Bruno Ícone

  • Ícone
  • Grupo: Moderadores
  • Posts: 5690
  • Cadastrado: 08-janeiro 08
  • Sexo:Masculino
  • Localização:São Paulo - SP

Postou 08 novembro 2009 - 08:05

Aumentar o tamanho, teoricamente dá espaço entre as coisas tb ^_^

O site está publicado? esse tipo de dúvida de agora, só conseguiriamos te ajudar, vendo o código completo.
Resolveu o problema das imagens ?

#15 Membro offline   Dieguinn Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 44
  • Cadastrado: 17-setembro 09

Postou 08 novembro 2009 - 08:16

Ver postWilliam Bruno, em 08 novembro 2009 - 08:05 , disse:

Aumentar o tamanho, teoricamente dá espaço entre as coisas tb ^_^

O site está publicado? esse tipo de dúvida de agora, só conseguiriamos te ajudar, vendo o código completo.
Resolveu o problema das imagens ?



Deu sim :D


TIpo que os espaços acho que nao via da pra dar manualmeente... pq to incluindo um menu.inc

#16 Membro offline   William Bruno Ícone

  • Ícone
  • Grupo: Moderadores
  • Posts: 5690
  • Cadastrado: 08-janeiro 08
  • Sexo:Masculino
  • Localização:São Paulo - SP

Postou 08 novembro 2009 - 08:22

Isso não faz diferença nenhuma.
O browser só lê HTML. E isso acontece depois do servidor ter processado os includes.

o importante é o HTML GERADO
Como eu disse, clicando em 'Exibir > Código Fonte'

#17 Membro offline   Dieguinn Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 44
  • Cadastrado: 17-setembro 09

Postou 08 novembro 2009 - 08:29

Ver postWilliam Bruno, em 08 novembro 2009 - 08:22 , disse:

Isso não faz diferença nenhuma.
O browser só lê HTML. E isso acontece depois do servidor ter processado os includes.

o importante é o HTML GERADO
Como eu disse, clicando em 'Exibir > Código Fonte'


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

<style type="text/css">
@import url("css/Default.css");
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> DiEgUiNnNnN </title>

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
   	<div id="header">

   	  <img src="img/logo.png" alt="Dieguin" width="100%" height="120"  />   	</div>
  	<div id="menu">
     	<ul>
<li><a href=" ">Home</a></li>
<li><a href=" ">Quem somos</a></li>
<li><a href=" ">Portif�lios</a></li>
<li><a href=" ">Contato</a></li>

</ul>

	
      
            
            
   </div>
    	<div id="conteudo">
      		Aqui sera o conteudo do site, todo o conteudo esta aqui.
Aqui sera o conteudo do site, todo o conteudo esta aqui.
Aqui sera o conteudo do site, todo o conteudo esta aqui.
Aqui sera o conteudo do site, todo o conteudo esta aqui.
Aqui sera o conteudo do site, todo o conteudo esta aqui.
Aqui sera o conteudo do site, todo o conteudo esta aqui.Aqui sera o conteudo do site, todo o conteudo esta aqui.
Aqui sera o conteudo do site, todo o conteudo esta aqui.
Aqui sera o conteudo do site, todo o conteudo esta aqui.  </div>
    	<div id="footer">
     		<img src="img/logo.png" alt="Dieguin" width="100%" height="50"  />  </div>
	</div>

</body>

</html>

#18 Membro offline   William Bruno Ícone

  • Ícone
  • Grupo: Moderadores
  • Posts: 5690
  • Cadastrado: 08-janeiro 08
  • Sexo:Masculino
  • Localização:São Paulo - SP

Postou 08 novembro 2009 - 08:43

E qual a dúvida agora?
tentou usando margin?
#menu{    
        margin-right: 20px;
}

#19 Membro offline   Dieguinn Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 44
  • Cadastrado: 17-setembro 09

Postou 08 novembro 2009 - 08:45

Eh o espaço entre eles

Este post foi editado por Thiago Retondar: 08 novembro 2009 - 11:12
Razão por editar:: Removido BBCode [quote] desnecessário.

#20 Membro offline   Thiago Retondar Ícone

  • Moderador Webstandards http://twitter.com/thiagoretondar
  • Ícone
  • Grupo: Moderadores
  • Posts: 3700
  • Cadastrado: 04-março 08
  • Sexo:Masculino
  • Localização:São Paulo - SP

Postou 08 novembro 2009 - 11:11

Está usando display: inline no li? Se sim, é por isso que está tendo dificuldades com o espaçamento com padding e margin.

Tente fazer com float como já foi indicado.

:thumbsup:

#21 Membro offline   Dieguinn Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 44
  • Cadastrado: 17-setembro 09

Postou 08 novembro 2009 - 11:39

Deu certo o espaçamento.. agora so mais uma coisa... pro exemplo... HOME ________________________ PORTIFOLIO.... Quando o mouse ta no meio ou qnd sai do nome ainda fica a setinha do mouse(vira akele desenho do dedinho... qnd tem um link) como tirar isso, para com q nao fique o dedinho no espaço dos links ?

Este post foi editado por Thiago Retondar: 08 novembro 2009 - 12:03
Razão por editar:: Removido BBCode [quote] desnecessário.

#22 Membro offline   Thiago Retondar Ícone

  • Moderador Webstandards http://twitter.com/thiagoretondar
  • Ícone
  • Grupo: Moderadores
  • Posts: 3700
  • Cadastrado: 04-março 08
  • Sexo:Masculino
  • Localização:São Paulo - SP

Postou 08 novembro 2009 - 12:04

Isso é por causa do padding. Posta o link para ficar mais fácil a ajuda.

:thumbsup:

#23 Membro offline   Dieguinn Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 44
  • Cadastrado: 17-setembro 09

Postou 08 novembro 2009 - 12:23

Coloquei em um lugar provisorio... : http://www.sociedade...minas.br/Diego/

1- Gostaria de saber como tirar akela area de link... entre os links...
2- Espaçamento exato entre os botoes de link
3- Texto dentro da imagem


Muito obrigado pela ajuda ate agora :D

Este post foi editado por Thiago Retondar: 08 novembro 2009 - 12:39
Razão por editar:: Removido BBCode [quote] desnecessário.

#24 Membro offline   Thiago Retondar Ícone

  • Moderador Webstandards http://twitter.com/thiagoretondar
  • Ícone
  • Grupo: Moderadores
  • Posts: 3700
  • Cadastrado: 04-março 08
  • Sexo:Masculino
  • Localização:São Paulo - SP

Postou 08 novembro 2009 - 12:43

Coloque o background no li. Faça os espaçamento também no li.

Se precisa ajustar a altura do texto, use line-height.

:thumbsup:

#25 Membro offline   douglash Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 31
  • Cadastrado: 22-maio 09
  • Sexo:Masculino
  • Localização:Porto Alegre

Postou 08 novembro 2009 - 12:48

Apenas adicione margin no seu li, separando os itens da lista, e defina a posição do background. Ficaria assim:

#menu li a{
	background-image:url(http://www.sociedadeinclusiva.pucminas.br/Diego/img/back_li.jpg);
	background-repeat: no-repeat;
	background-position:top;
	background-color:black;
	display:block;
	float:left;
	line-height:50px;
    text-indent:38px;
	margin-left:10px;
	color:#66CC33;
	text-decoration:none;
	height:50px;
	width:168px;
}

#26 Membro offline   Dieguinn Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 44
  • Cadastrado: 17-setembro 09

Postou 08 novembro 2009 - 13:02

humm o line-height funcionou.. ta dentro da img... mas o back nao funcionou nao =/

olha la =/

Este post foi editado por Thiago Retondar: 08 novembro 2009 - 13:18
Razão por editar:: Removido BBCode [quote] desnecessário.

#27 Membro offline   Dieguinn Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 44
  • Cadastrado: 17-setembro 09

Postou 08 novembro 2009 - 13:08

Agora sim deu certo.


Brigadao gente =D


Muito obrigado mesmo... eu amo esse forum=p


hehehe!
Página 1 de 1
  • Novo tópico
  • Responder

1 usuário(s) está(ão) lendo este tópico
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)