Ir para conteúdo

POWERED BY:

Arquivado

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

jeovan_toledo

background apenas na index

Por , em Desenvolvimento frontend

Recommended Posts

jeovan_toledo    0

jeovan_toledo
Postado

Galera tenho um site e estou aprendendo a usar mais o css com dreanweaver...então eu tenho algumas páginas e index principal, e o css que aquele arquivo onde ta tudo sobre as ações do css. Eu tenho uma page que é a index e ela tem um background que serve ali, nas demais eu vou usar uma padrão pra todas.

/* main */
.main {
	width:100%;
	padding:0;
	margin:0 auto;
	background-position: top;
	background-repeat: no-repeat;
	background-image: url(images/backgroundfinal.jpg);
Tem como eu declarar isso no css, ou tenho que fazer algo no html, detalhe tirei o background de uma delas e mudou em todas... eu só quero a index diferente as demais tem um fundo igual

 

abraço

e obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

jeovan_toledo    0

jeovan_toledo
Postado

É assim o background da index ele é diferenciado pois tem alguns efeitos que fiz pra aparecer la´, mas ele se repete nas demais, o que não deve acontecer pois elas não precisam deste background

 

grato

Compartilhar este post

Link para o post
Compartilhar em outros sites

ORisonho    0

ORisonho
Postado

É ...só tome cuidado par anão criar varios arquivos css para um site só.

 

Para ser mais simples apenas crie uma classe, ou faça uma declaração que servirá apenas para o index, veja exemplo:

.index{
   background:url(fundoindex.jpg) no-repeat;
}
.paginas{
   background:url(fundopaginas.jpg) no-repeat;
}

Dai você vai na tag <BODY> e apenas incremente assim, exemplo:

index.hmtl

<html>
   <head></head>
   <body class="index">
   </body>
</html>

paginas.html

<html>
   <head></head>
   <body class="paginas">
   </body>
</html>

Pronto, simples pratico e rápido. Pois como você pode ter percebido agora o body já tem seu respectivo background partindo do principio que o index terá uma classe diferente das outras páginas.

Compartilhar este post

Link para o post
Compartilhar em outros sites

jeovan_toledo    0

jeovan_toledo
Postado

Não rolou, mas ia vai... o pedaço que num ta rolando...

 

body { margin:0; padding:0; width:100%; background:#ededed url(images/bg.jpg) top repeat-x;}

html { padding:0; margin:0;}

 

/* main */

.main {

width:100%;

padding:0;

margin:0 auto;

background-position: top;

background-repeat: no-repeat;

background-image: url(images/backgroundfinal.jpg);

}

.resize { width:955px; margin:0 auto;}

 

/********** header **********/

.header {

border-bottom-width: 0px;

border-bottom-style: solid;

border-bottom-color: #FFFFFF;

background-repeat: repeat-x;

background-position: top;

}

 

.block_header {

margin:0 auto;

width:980px;

height:111px;

background-repeat: no-repeat;

}

.top_menu { float:right; padding:4px 10px; font:normal 11px Tahoma, Geneva, sans-serif; color:#4e4e4e; line-height:1.6em;}

.top_menu a { font:normal 11px Tahoma, Geneva, sans-serif; color:#4e4e4e; text-decoration:none;}

.top_menu a:hover {text-decoration:underline;}

 

/********** background declara **********/

.index{

background:url(backgroundfinal.jpg) no-repeat;

}

.paginas{

background:url(fun2.gif) no-repeat;

}

 

/* logo */

.logo {

float:left;

padding:0;

margin:0;

width:100px;

}

 

/* search */

.search {

float:right;

width:304px;

padding:0;

height:22px;

margin-top: 10px;

margin-right: 0;

margin-bottom: 0;

margin-left: 0;

}

.search span { display:block; float:left;}

.search a { display:block; float:left; padding:10px 10px 0 10px; line-height:1.6em; color:#4270a1; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none;}

.search a:hover { text-decoration:underline;}

.search form {

display:block;

float:left;

padding-top: 5px;

padding-right: 5px;

padding-bottom: 0;

padding-left: 5px;

}

.search form .keywords { float:left; background: url(images/Search_keywords.gif) top no-repeat; border:0; height:15px; width:140px; padding:5px 10px; line-height:15px; margin:0 10px 0 0; font:normal 12px Tahoma, Geneva, sans-serif; color:#000;}

.search form .button { float:left;}

 

Vou dar mais um estudada aqui pra ver se entendo o que houve

Compartilhar este post

Link para o post
Compartilhar em outros sites

ORisonho    0

ORisonho
Postado

Ai que você não esta entendendo, provavelmenete seu erro não esta no CSS e sim como você esta chamando a classe (ou ID) na página html, o certo seria você mostrar o seu HTML para vermos se esta aplicando certo ou não.

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoyalFlush    0

RoyalFlush
Postado

Bom, eu ja prefiro criar mais de um arquivo .css para pagina para ficar mais facil de dar manutenção,

normalmente uso 3 form.css, global.css e layout.css.

 

A maneira que acho mais simples de fazer isso é criar duas classe, como o ORisonho te explicou

No seu index você vai aplicar a classe main a sua div principal ou body (ai depende do que tu fez no html)

nas demais vai aplicar a classe pagina.

 

Não tem erro ^^

 

se tu postar uma parte do seu html fica facil te ajudar.

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

jeovan_toledo    0

jeovan_toledo
Postado

o html da index...

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript" charset="utf-8">
// <![CDATA[
$(document).ready(function(){	
	$("#slider").easySlider({
		controlsBefore:	'<p id="controls">',
		controlsAfter:	'</p>',
		auto: true, 
		continuous: true
	});	
});
// ]]>
</script>
<style type="text/css">
#slider { margin:0; padding:1px; list-style:none; }
#slider ul,
#slider li {
	margin:0;
	padding:0;
	list-style:none;
	top: 0px;
}
/* 
    define width and height of list item (slide)
    entire slider area will adjust according to the parameters provided here
*/
#slider li { width:943px; height:275px; overflow:hidden; }
p#controls { margin:0; position:relative; }
#prevBtn,
#nextBtn { display:block; margin:0; overflow:hidden; width:30px; height:40px; position:absolute; left: 5px; top:-178px; }
#nextBtn { left:935px; }
#prevBtn a { display:block; width:30px; height:40px; background:url('images/r_arrow.gif') no-repeat 0 0; }
#nextBtn a { display:block; width:30px; height:40px; background:url('images/l_arrow.gif') no-repeat 0 0; }
</style>
</head>
<body class="index">
<div class="main">
  <div class="header">
    <div class="block_header">
      <div class="search">
        <form id="form1" name="form1" method="post" action="">
          <label>
             
          </label>
        </form>
      </div>
      <div class="clr"></div>
      <div class="logo"></div>
      <div style="float:right;">
        <div class="menu">
          <ul>
            <li><a href="index.html" class="active"><span>Home</span></a></li>
            <li><a href="services.html"><span>Serviços</span></a></li>
            <li><a href="portfolio.html"><span> Portfólio </span></a></li>
            <li><a href="about.html"><span>Clientes</span></a></li>
            <li><a href="contact.html"><span>Contato</span></a></li>
            <li><a href="contact.html"><span>Contato</span></a></li>
          </ul>
        </div>
      </div>
      <div class="clr"></div>
    </div>
  </div>
  <div class="slider">
    <div class="slice1">
      <div class="slice2" id="slider">
        <ul>
          <li>
            <div>
              <p class="img">
              <img src="images/simple_text_img_1.gif" alt="screen 1" width="454" height="224" /></p>
              <h2>Projetos Gráficos</h2>
              <p>Design de revistas, produção de anúncios, capa de livros, ilustrações,  jornais, folhetos, flyers, folders, cartazes, outdoors, placas, rótulos e embalagens, logomarcas, calendários, charges e todo e qualquer projeto que sua empresa precise nesta área do design gráfico.<br />
              </p>
              <p> </p>
              <p><a href="google.com">
              <img src="images/View.gif" border="0" alt="view" width="142" height="28" /></a> <a href="portfolio.html">
              <img src="images/More.gif" border="0"  alt="sign" width="142" height="28"/></a></p>
            </div>
          </li>
          <li>
            <div>
              <p class="img"><img src="images/simple_text_img_2.gif" alt="screen 2" width="454" height="224" /></p>
              <h2>Sites</h2>
              <p>Sites de pequeno, médio e grande porte, trabalhamo com a realidade de cada cliente, ou seja,  desenvolvo seu projeto de site visando o custo e benefício para sua empresa. Também  ofereço o serviço de hospedagem com servidor seguro na plataforma Linux.</p>
              <p> </p>
              <p><a href="google.com">
              <img src="images/View.gif" border="0" alt="view" width="142" height="28" /></a> <a href="portfolio.html">
              <img src="images/More.gif" border="0"  alt="sign" width="142" height="28"/></a></p>
            </div>
          </li>
          <li>
            <div>
              <p class="img"><img src="images/simple_text_img_3.gif" alt="screen 3" width="454" height="224" /></p>
              <h2>Ilustrar projetos</h2>
              <p>Ilustrações para enriquecer seu projeto, como livros, revista, anúncios, criação de mascotes, personagens, estampas, posters, vinhetas,<br />
              charges para jornal e revista, ilustrações e vetorização com o programa<br />
              Corel Draw e photoshop<br />
              </p>
              <p><br />
              </p>
              <p><a href="google.com">
              <img src="images/View.gif" border="0" alt="view" width="142" height="28" /></a> <a href="portfolio.html">
              <img src="images/More.gif" border="0"  alt="sign" width="142" height="28"/></a></p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="body">
    <div class="body_resize">
      <div class="Welcome">
        <h2> Bem vindo ao meu website</h2>
        <p> Meu nome é Jeovan Toledo Brasileiro, natural de Ouro Fino - Minas Gerais - moro a 33 anos em Campinas, São Paulo, onde atuo como Designer Gráfico, Ilustrador, Direção de Artes e Design para Internet. Adoro mídia impressa, onde tenho atuado por 19 anos, desenvolvendo materiais de identidade visual para empresas, tais como logomarcas, fachadas, banners, folhetos, papelaria, capas, revistas, jornais, anúncios. Formado em Comunicação Digital (Produção Gráfica) pela Universidade Unip. Também gosto de desenhar e pintar. Como característica minha, sou criativo e organizado e gosto do que faço. Navegue pelo meu portfólio e conheça meus trabalhos. Obrigado pela visita!!! Volte sempre!<br />
          <br />
        </p>
        <p class="fount"><em>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</em><br />
          <br />
        </p>
        <p><a href="#"><strong>-John Smith, webdesigner</strong></a></p>
        <h2>Meu currículo</h2>
        <p>Baixe meu currículo em 2 versões, em pdf e word, e conheça um pouco mais sobre meu perfil</p>
        <ul>
          <li>Versão em PDF</li>
          <li>Versão em WORD</li>
          <li>Versão Online</li>
        </ul>
      </div>
      <div class="Box">
        <h2>Novos Projetos!</h2>
        <p> <strong>20 Janeiro </strong><br />
          Projeto de newsletter para empresa Sercamp em 3 versões, inglês, espanhol e português.<a href="#" class="link"> Mais</a></p>
        <div class="bg"></div>
        <p><strong>05 Janeiro</strong><br />
          Site para a agência Brazcomm feito em flash e photoshop<br />
          com abertura e navegação. <a href="#" class="link">Mais</a></p>
        <div class="bg"></div>
        <p><strong>15 Dezembro de 2009</strong><br />
          Concluido projeto do site para o Mercado e Frutaria Rio das Pedras de Barão Geraldo. <a href="#" class="link">mais</a></p>
        <p> </p>
        <p><a href="#">more news</a></p>
      </div>
    </div>
    <div class="clr"></div>
  </div>
  <div class="FBG">
    <div class="FBG_resize">
      <div class="What">
        <h2>Minha exposição virtual</h2>
        <p><strong>Why do we use it?</strong></p>
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
        <p><strong>Lorem Ipsum is that </strong></p>
        <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. </p>
        <p><a href="#">More Info</a></p>
      </div>
      <div class="Say">
        <h2>What They Say</h2>
        <p>"Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
        <p><em>-John Smith, webdesigner</em></p>
        <br />
        <div class="bg"></div>
        <p>"Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
        <p><em>-John Smith, webdesigner</em></p>
      </div>
      <div class="Contact">
        <h2>Contact Info</h2>
        <p>Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. </p>
        <p><strong>Tel: +123456789<br />
          Fax: +123456789<br />
          Email: company@domainname.com </strong></p>
        <div class="bg"></div>
        <p><img src="images/Twitter.gif" alt="picture" width="70" height="49" />Aliquam at semper metus. Aenean mattispurus in orci. Vestibulum posu eros vitae nunc<a href="#"> twitter.com/yourusername</a></p>
      </div>
      <div class="clr"></div>
    </div>
  </div>
  <div class="footer">
    <div class="resize">
      <p class="footer_logo"><img src="images/logo.gif" alt="picture" width="130" height="41" /></p>
      <div>Jeovan Toledo -  2010 - PROINTERATIVA SOLUÇÕES<br />
        <a href="index.html">Home</a> | <a href="contact.html">Contato</a> | <a href="blog.html">RSS</a></div>
    </div>
    <p class="clr"></p>
  </div>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

ORisonho    0

ORisonho
Postado

Peço desculpar, mas CARAMMMMBA! Que salada é essa de divs? Estou ainda zonzo...

 

Novamnete peço desculpas, mas é minha opinião.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Paiva    0

Marcos Paiva
Postado

você pode realmente fazer dessas duas formas já citadas: Ou seta ID's para o body ou dois arquivos css's.

Mas cara, seu html ta muito zuado.....apaga tudo e tenta fazer uma coisa mais estruturada e tals..]

 

abs boa sorte!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

aplique um doctype xhtml 1.0 transicional ou estrito ou xhtml 1.1

veja o resultado...

 

após isso.. a minha dica é utilizar a regra de sobreposição de propriedade...

há quem diga que é desnecessário, mas ajudaria caso você precisasse de mais alguma particularidade na index..

 

você vai criar uma nova css que pode se chamar index.css, por exemplo

 

APENAS na index, após a importação de TODAS as css's, você adiciona

<link rel="stylesheet" type="text/css" media="all" href="index.css" />

 

 

para as outras páginas, essa tag passa a ser dispensada...

o conteúdo dela, é a aplicação do bg no elemento BODY ou o DIV padrão

Compartilhar este post

Link para o post
Compartilhar em outros sites

jeovan_toledo    0

jeovan_toledo
Postado

Valu amigo, mas tem o doctype sim, eu num colei na hora que postei...dei uma olhada e ele tá como vcs disseram

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

testou fazendo o arquivo index.css??

 

outra alternativa é seguir parecido com o que o ORisonho postou

 

Na index, você dá um ID para o BODY, por ex: 'index'

<body id="index">...</body>

e na folha de estilos, cria as regras assim:

body {
  background: url(bgpadrao.jpg);
}

body#index {
  background: url(bgindex.jpg);
}

vale salientar que independentemente da opção que você siga, A REGRA PARA A INDEX DEVERÁ VIR APÓS A REGRA PADRÃO

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Com a postagem do código ficou mais fácil.

 

Veja que a imagem que você utilizou de background do <body> não existe, ou está linkada incorretamente.

 

A imagem que aparece como plano de fundo, pertence à <div>.main

 

Inverta:

antes

@charset "utf-8";
body { margin:0; padding:0; width:100%; background:#ededed url(images/bg.jpg) top repeat-x;}
html { padding:0; margin:0;}

/********** background declara **********/
.index{
	background-repeat: no-repeat;
}
.paginas{background:url(fun2.gif) no-repeat;
}

/* main */
.main {
	width:100%;
	padding:0;
	margin:0 auto;
	background-position: top;
	background-repeat: no-repeat;
	background-color: #F0F0F0;
	background-image: url(images/backgroundfinal.jpg);
}

depois

@charset "utf-8";
body { margin:0; padding:0; width:100%; background:#ededed;}
html { padding:0; margin:0;}

/********** background declara **********/
.index{
	background: #F0F0F0 url(images/backgroundfinal.jpg) top no-repeat;
}
.paginas{background:url(fun2.gif) no-repeat;
}

/* main */
.main {
	width:100%;
	padding:0;
	margin:0 auto;
}

 

note que todas as informações sobre background que estavam dentro de .main, eu as transferi para o .index

 

 

Agora aqui, só um "pitaco":

Se a sua div possui width: 100% é inútil postar as margens de centralização lateral margin: 0 auto;

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