Ir para conteúdo

POWERED BY:

Arquivado

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

Dieguinn

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

Por , em Desenvolvimento frontend

Recommended Posts

douglash    0

douglash
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dieguinn    0

Dieguinn
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglash    0

douglash
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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 ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dieguinn    0

Dieguinn
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dieguinn    0

Dieguinn
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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 ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dieguinn    0

Dieguinn
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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'

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dieguinn    0

Dieguinn
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

E qual a dúvida agora?

tentou usando margin?

#menu{    
        margin-right: 20px;
}

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