Ir para conteúdo

POWERED BY:

Arquivado

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

Riovani

revisar o codigo do site

Por , em Desenvolvimento frontend

Recommended Posts

Riovani    0

Riovani
Postado

Ola pessoal, sou novo aqui no forum, estou montando um site, mas estou com alguns problemas de alinhamento.

Vou postar os codigos para vocês analisarem e me ajudarem a colocar em ordem, que não tenha problemas nos navegadores.

 

Descrição do Site:

O site vai ter um banner animado em Jquery tomando toda a parte superior do site, sendo que vai ter uma barra sobre ele, onde vai ter o menu e a logomarca da empresa, logo abaixo do banner, vai um background e rodapé, sobrepondo uma parte do banner e background.

Bom o que acontese é o banner fica menor que o background e a barra.

Desde já agradeço a ajuda.

 

Codigo html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>

<meta charset="iso-8859-1">
<link rel="stylesheet" href="default.css" type="text/css" media="all"/>

</head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="javascript/simplegallery.js"></script>
<script type="text/javascript">

   var mygallery=new simpleGallery({
    wrapperid: "simplegallery1", //div q fica as imagens
    dimensions: [1263, 500], //width/height
    imagearray: [
	    ["images/dormitorio.png", "", "", ""],
           ["images/dormitorio2.png", "", "", ""],
	    ["images/dormitorio3.png", "", "", ""],
		["images/dormitorio4.png", "", "", ""]
    ],
    autoplay: [true, 2500, 99], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    oninit:function(){ //event that fires when gallery has initialized/ ready to run
	    //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    },
    onslide:function(curslide, i){ //event that fires after each slide is shown
	    //Keyword "this": references current gallery instance
	    //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
	    //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
    }
   })

   </script>


<body>

<div id="wrap">
<div id="topo">

</div>

<!-- div q mostra as imagens -->
<div id="slimplegallery-wrap">    
	<div id="simplegallery1"></div>
</div>



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

</body>
</html>

 

 

--------------------------------------------------------------------------------

 

Codigo css

# {
   margin:0;
   padding:0;
   border:none;
   outline:none;
   list-style-type:none;
   font-family:Arial, Helvetica, sans-serif;
}
/* para garantir que estes elementos ocuparão toda a tela */
body, html {
background:url(Images/fundo1.png) no-repeat center top;
width:auto;
background-position:0 500px;
height:100px;
}  

#wrap{
width:auto;
margin-left:-1;
height:1200px;
padding:-1px;
}
#topo{
background:url(images/barra_menu.png) repeat-x;
height:220px;
width:auto;
margin-top:30px;
margin-left:-1px;
z-index:-1;
}
#menu {
float: center;
height:50px;
margin-left:-8px;
}
#menu ul {
   padding-top:30px;
padding-right:0;
padding-left:0;
}
#menu li {
   float:left;
   padding-right:0;
 padding-left:0;
}
#menu li.last {
   padding-right:0;
}
#menu li a {
   font-size:15px;
   color:#fff;
   font-weight:bold;
   letter-spacing:-1px;
}
#simplegallery1{
   width:auto;
   position:absolute; /*keep this intact*/
   visibility: hidden; /*keep this intact*/
   left:0;
   margin-left:0px;
}

#slimplegallery-wrap{
   width:auto;
   height:1036px;
   overflow:hidden;
   position:absolute;
   z-index:-3;
   top:0;
   left:0px;
}

#rodape{
background:url("images/rodape.png") repeat-x;
width:auto;
height:60px;
margin-top:900px;
margin-left:-1px;
margin-right:-1px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

o seletor global é * e não #

 

* {
   margin:0;
   padding:0;
   border:none;
   outline:none;
   list-style-type:none;
   font-family:Arial, Helvetica, sans-serif;
}

 

poste um link online do site, será mais facil de analisarmos, por causa das imagens.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Riovani    0

Riovani
Postado

Ola segue o endereço para visualizar o site.(http://www.comporganico.com.br/) pois agora colocado no servidor, não funciona a animação das imagens do banner que é jduery, e não aparece a barra menu e a logomarca sobre este banner e nem o rodapé. Me ajudem.

Vlw.

:(

 

Layout

 

http://imageshack.us/photo/my-images/580/sitehotelfiorini.jpg/

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglash    0

douglash
Postado

Olá, eu eu dei um modificada na estrutura criada por você para exemplificar, dê uma olhada. As imagens estavam com o caminho errado também estava a maioria para /images mas o diretorio q existe é o /Images.

 

Eu vejo q você terá outras dificuldades nesta tela, mas bem, eu fiz uma solução para você, tente se basear nela.

 

html

 

<div id="main">
<div id="header">
	<div id="nav-top">
		<div class="wrapper">
			<ul>
			 <li>teste</li>
			</ul>
		</div>
	</div>
	<div id="logo">
		<div class="wrapper">
			<h1><a href="#" title="Hotel Fiorini">Hotel Fiorini</a></h1>
		</div>	
	</div>
	<div id="slimplegallery-wrap">    
		<div id="simplegallery1"></div>
	</div>	
</div>
<div id="content">
	<div class="wrapper">
		Conteudo
	</div>
</div>
<div id="footer"></div>
</div>

 

CSS

*{
   margin:0;
   padding:0;
   border:none;
   outline:none;
   list-style-type:none;
   font-family:Arial, Helvetica, sans-serif;
}

body, html {
        background:url(http://www.comporganico.com.br/Images/fundo2.png) no-repeat center top;
        background-position:0 400px;
}  

/* Main */
#main {  }

.wrapper { 
               width:980px; 
               margin:0 auto; 
       }

#header{
        position:relative;
        height:650px;
}

#nav-top { 
	background:url(http://www.comporganico.com.br/Images/barra_menu.png) repeat-x 0 20px;
	width:100%;
	height:150px;
	padding-top:20px;
} 

#nav-top ul {
	margin-left:236px;
}
#logo {
	position:absolute;
	top:0;
	width:100%;
}

#logo h1{
	background:url(http://www.comporganico.com.br/Images/logo_marca.png) no-repeat;
	width:236px;
	height:201px;
	text-indent:-999px; 
	overflow:hidden;
}
#logo h1 a { 
	display:block; 
	width:236px; 
	height:201px; 
}

#slimplegallery-wrap {
	position:absolute;
	top:0;
	z-index:-1;
}

#footer {
	background:url("http://www.comporganico.com.br/Images/rodape.png") repeat-x;
	height:60px;
}

 

Bom, é isso, agora é com você.

 

Um abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Riovani    0

Riovani
Postado

Opa, vlw pela ajuda, muito obrigado mesmo. Vou seguir na colocação do resto do conteudo conforme esta ai.

Se eu não conseguir, vo pedir ajuda novamente.beleza..

 

Agradeço mesmo.

 

Abraço. :clap: :joia:

 

Ha outra coisa, só a animação do banner em jquery não ta funcionando?

alguem sabe pq?

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglash    0

douglash
Postado

A animação está funcionando sim, eu testei, mas o caso é que você está passando a url errada, esta assim no seu código:

 

<script type="text/javascript">

   var mygallery=new simpleGallery({
    wrapperid: "simplegallery1", //div q fica as imagens
    dimensions: [1263, 400], //width/height
    imagearray: [
	    ["images/dormitorio.jpg", "", "", ""],
           ["images/dormitorio2.jpg", "", "", ""],
	    ["images/dormitorio3.jpg", "", "", ""],
		["images/dormitorio4.jpg", "", "", ""]
    ],
    autoplay: [true, 2500, 99], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    oninit:function(){ //event that fires when gallery has initialized/ ready to run
	    //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    },
    onslide:function(curslide, i){ //event that fires after each slide is shown
	    //Keyword "this": references current gallery instance
	    //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
	    //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
    }
   })

   </script>

 

O array de imagens está com as urls erradas, troque por isso:

 

<script type="text/javascript">

   var mygallery=new simpleGallery({
    wrapperid: "simplegallery1", //div q fica as imagens
    dimensions: [1263, 400], //width/height
    imagearray: [
	    ["Images/dormitorio.jpg", "", "", ""],
           ["Images/dormitorio2.jpg", "", "", ""],
	    ["Images/dormitorio3.jpg", "", "", ""],
		["Images/dormitorio4.jpg", "", "", ""]
    ],
    autoplay: [true, 2500, 99], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    oninit:function(){ //event that fires when gallery has initialized/ ready to run
	    //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    },
    onslide:function(curslide, i){ //event that fires after each slide is shown
	    //Keyword "this": references current gallery instance
	    //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
	    //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
    }
   })

   </script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Riovani    0

Riovani
Postado

Poxa que descuido,,heheh ...pra ver que são coisas basicas, novamente vlw pela ajuda. :joia:

 

Alguem poderia me explicar como faço para ajustar o site no IE?

que como é o navegador que da uma diferença no alinhamento.

 

vlw.

Abraço.

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