Efeito transição de imagens css

CrazyLOL · Julho 27, 2012

Galera to com uma bronca aqui que não to conseguindo resolver. Melhor explicando coloquei essa imagem (http://tinypic.com/r/w9a0c9/6) no topo do meu site, podem observar que meu banner não está centralizado, esse é um banner rotativo em javascript.

Bom está funcionando normal o problema está sendo no CSS dele que não estou conseguindo localizar onde por para ele ficar certo na minha pagina.

Bom vou postar o meu topo do index aqui:

<body>
<div class="main">
 <div class="header">
   <div class="resize">
     <div class="logo"><a href="#"><img src="images/logo.gif" alt="picture" width="250" height="42" border="0" /></a></div>
     <div class="menu">
       <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="about.html"> Empresas</a></li>
         <li><a href="portfolio.html">Candidatos</a></li>
         <li><a href="contact.html">Anuncie</a></li>
         <li><a href="contact.html">Contato</a></li>
       </ul>
     </div>
     <div class="clr"></div>
   </div>
   <div class="clr"></div>
 </div>
 <div id="slider_resize">
   <div id="slider">
	<ul>
         <li><a href="#"><img src="images/simple_img_1.jpg" alt="icon" width="985" height="322" border="0" /></a></li>
         <li><a href="#"><img src="images/simple_img_2.jpg" alt="icon" width="985" height="322" border="0" /></a></li>
         <li><a href="#"><img src="images/simple_img_3.jpg" alt="icon" width="985" height="322" border="0" /></a></li>
         </ul>
     </div>
   </div>
   <div class="clr"></div>

e o meu arquivo STYLE está aqui:

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

/* main */
.main {width:100%; padding:0; margin:0 auto;  }
.resize { width:985px; margin:0 auto;}
.cadastro_emprego { width:985px; margin:0 auto; font-size: 9pt; font-family: verdana;}


/* Slieder Tabs 
.slider_resize {margin:0 auto; padding:0; position:relative;}
.content {margin:0 auto; padding:0;}
.slider_resize h2 { font: normal bold 30px Arial, Helvetica, sans-serif; color:#fffefe; padding:25px 0 0 50px; margin:0;}
.slider_resize h2 span {color:#5c5c5c;}
.slider {  width:985px; padding:10px 0 10px 0; margin:0 auto;}
.slider ul.tabs { margin:0 auto; padding:10px; width:115px; list-style:none;}
.slider ul.tabs li { margin:2px 5px; padding:0; width:13px; height:13px; float:left; background: url(images/tabs_2.gif) no-repeat;}
.slider ul.tabs li.tabs-selected { background: url(images/tabs_1.gif) no-repeat;}*/

/* Easy Slider */
   /* image replacement */
#slider_resize {margin:0 auto; padding:0; position:relative;}
       .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
           margin:150px;
           padding:0;
           display:block;
           overflow:hidden;
           text-indent:-8000px;
           }

#content {margin:0 auto; padding:0;}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
	margin:0 auto;
	padding:0;
	 width:115px;
	list-style:none;
	}
#slider2{margin-top:1em;}
#slider li, #slider2 li{ 
	/* 
		define width and height of list item (slide)
		entire slider area will adjust according to the parameters provided here
	*/ 
	width:985px; padding:10px 0 10px 0; margin:0 auto; 
	}	
#prevBtn, #nextBtn,
#slider1next, #slider1prev{ 
	display:block;
	width:30px;
	height:77px;
	position:absolute;
	left:-30px;
	top:71px;
	z-index:1000;
	}	
#nextBtn, #slider1next{ 
	left:985px;
	}														
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{  
	display:block;
	position:relative;
	width:30px;
	height:77px;
	background:url(images/btn_prev.gif) no-repeat 0 0;	
	}	
#nextBtn a, #slider1next a{ 
	background:url(images/btn_next.gif) no-repeat 0 0;	
	}	


/********** header **********/
.header {padding:0; margin:0; background: url(images/header_bg.gif) top repeat-x; height:95px;}
/* logo */
.logo {
float:left;
margin:0;
width:250px;
padding-top: 34px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
/* menu */	
.menu {
float:right;
width:500px;
padding-top: 34px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
margin: 0;
}
.menu ul {  padding:0; margin:0; list-style:none; border:0;}
.menu ul li { float:left; margin:0; padding:0; border:0;}
.menu ul li a { float:left; margin:0; padding:13px 15px; color:#8f8f8f; font:bold 12px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a:hover { color:#fff;  background:#292929;}
.menu ul li a.active {  color:#fff; background:#292929;}
/* search */
.search { padding:10px 25px 0 0; margin:0; float:right; width:340px;}
.search form { display:block; float:right; padding:5px 0;}
.search span { display:block; float:left; background: url(images/search_bg.gif) left top no-repeat; width:156px; padding:0 5px; height:33px;}
.search form .keywords { line-height:14px; float:left; border:0; width:149px; padding:9px 0; height:14px; background:none; margin:0; font:normal 14px Arial, Helvetica, sans-serif; color:#9c9c9c;}
.search form .button { float:left; margin:0; padding:0;}
/* Slieder Tabs 
.slider_resize {margin:0 auto; padding:0; position:relative;}
.content {margin:0 auto; padding:0;}
.slider_resize h2 { font: normal bold 30px Arial, Helvetica, sans-serif; color:#fffefe; padding:25px 0 0 50px; margin:0;}
.slider_resize h2 span {color:#5c5c5c;}
.slider {  width:985px; padding:10px 0 10px 0; margin:0 auto;}
.slider ul.tabs { margin:0 auto; padding:10px; width:115px; list-style:none;}
.slider ul.tabs li { margin:2px 5px; padding:0; width:13px; height:13px; float:left; background: url(images/tabs_2.gif) no-repeat;}
.slider ul.tabs li.tabs-selected { background: url(images/tabs_1.gif) no-repeat;}
.tabs-hide { display:none;}*/
/* Sub_slider_resize */
.Sub_slider_resize { width:985px; height:90px; margin:0 auto; padding:20px 0; background: url(images/sub_about.jpg) top no-repeat;}
.Sub_slider_resize2 { width:985px; height:90px; margin:0 auto; padding:20px 0; background: url(images/sub_port.jpg) top no-repeat;}
.Sub_slider_resize3 { width:985px; height:90px; margin:0 auto; padding:20px 0; background:  url(images/con_sub.jpg) top no-repeat;}
/* text_slider */
.text_slider { border-bottom:1px dashed #cecece; border-top:1px dashed #cecece; margin:10px 0; padding:0;}
.anuncios { border-bottom:1px dashed #cecece; border-top:1px dashed #cecece; margin:10px 0; padding:0;}
.text_slider_resize { width:985px; margin:0 auto; padding:20px 0;}
.text_slider_resize h2 { font: italic 18px Arial, Helvetica, sans-serif; color:#585858; padding:0; margin:0; text-align:center;}
.text_slider_resize p { font: italic 11px Arial, Helvetica, sans-serif; color:#a2a2a2; padding:0; margin:0; text-align:center;}
/*FBG*/
.FBG { margin:0; padding:0; border-bottom:1px dashed #cecece;}
.FBG p { font:normal 11px Arial, Helvetica, sans-serif; color:#5f5f5f; line-height:1.8em; padding:5px 5px; margin:0;}
.FBG p span { color:#2e2e2e; font: bold 11px Arial, Helvetica, sans-serif;}
.FBG a { color:#b21600; text-decoration:none; font: bold 11px Arial, Helvetica, sans-serif;}
.FBG img { float: left; margin:5px 10px; padding:0;}
.FBG_resize { width:936px; margin:0 auto; padding:0;}
/****Recent **/
.Recent  { width:450px; float:left; padding:5px 0; margin:0 10px 0 0;}
/********** block index **********/
.body { padding:20px 0 0 0; margin:0;}
.body h2 { padding:10px 5px; margin:0 0 10px 0; font: normal 18px Arial, Helvetica, sans-serif; color:#2a2a2a;}
.body h5 { padding:10px 5px; margin:0 0 10px 0; font: italic bold 12px Arial, Helvetica, sans-serif; color:#cecece; border-bottom:1px solid #3e3e3e;}
.body p { font:normal 12px Arial, Helvetica, sans-serif; color:#5f5f5f; padding:5px 5px 10px 5px; margin:0; line-height:1.8em;}
.body p.data { width:100px; text-align:center; color:#303030; background:#ededed; padding:2px 3px; margin:0; font: bold 11px Arial, Helvetica, sans-serif;}
.body img { float:left; margin:5px 1px; padding:0;}
.body p span { color:#a4a4a4; font: normal 11px Arial, Helvetica, sans-serif;}
.body ul { width:250px; float:left; margin:10px 5px; padding:0; list-style:none;}
.body li { background: url(images/ul_li.gif) left no-repeat; padding:5px 0 5px 25px; margin:0; font: normal 12px Arial, Helvetica, sans-serif; color:#9b9b9b;}
.body a { color:#cccccc; text-decoration:underline; font: bold 11px Arial, Helvetica, sans-serif;}
.left { width:585px; float:left; margin:0; padding:10px 5px;}
.right { width:315px; float:right; margin:0; padding:10px 5px;}
/********** contact form **********/
#contactform { margin:0; padding:5px 10px;}
#contactform * { color:#F00;}
#contactform ol { margin:0; padding:0; list-style:none;}
#contactform li { margin:0; padding:0; background:none; border:none; display:block; clear:both;}
#contactform li.buttons { margin:5px 0 5px 0;}
#contactform label { margin:0; width:110px; display:block; padding:10px 0; color:#5e5e5e; font: bold 12px Arial, Helvetica, sans-serif; text-transform:capitalize; float:left;}
#contactform label span { color:#F00;}
#contactform input.text { width:200px; border:1px solid #e8e8e8; margin:10px 0; padding:5px 2px; height:16px; background:#fff; float:left;}
#contactform textarea { width:430px; border:1px solid #e8e8e8; margin:10px 0; padding:2px; background:#fff; float:left;}
#contactform li.buttons input { padding:3px 0 3px 110px; margin:0; border:0; color:#FFF; float:left;}
p.response { text-align:center; color:#F00; font: normal 11px  Georgia, "Times New Roman", Times, serif; line-height:1.8em; width:auto;}
/*************footer**********/
.footer {padding:20px 0;  margin:0;}
.footer p { font:normal 12px  Arial, Helvetica, sans-serif; color:#a8a8a8;}
.footer a { font:normal 12px Arial, Helvetica, sans-serif; color:#a8a8a8; text-decoration:none; padding:5px; margin:0;}
.footer p.leftt { text-align:left; width:50%; margin:0; padding:20px 20px; float:left;} 
.footer p.rightt { text-align:right; width:30%; margin:0; padding:20px 20px 0 0; float:right;} 
p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
li.bg, .bg { clear:both; border-top:1px solid #3e3e3e; padding:0; margin:10px 0; background:none; line-height:0;}
li.bg2, .bg2 { clear:both; border-top:1px solid #d5d5d5; padding:0; margin:10px 0; background:none; line-height:0;}

img.clear { padding:0; margin:0; float:none;}

Se alguém puder ajudar agradeço :)

Wanderson Valerio · Julho 27, 2012

Você falou, falou e não descobri qual é seu problema, o que você quer fazer?

CrazyLOL · Julho 27, 2012

Ops perdão, esqueci de anexar a imagem.

O erro é esse:

http://tinypic.com/r/w9a0c9/6

Wanderson Valerio · Julho 27, 2012

#slider li, #slider2 li{ 
   /* 
   define width and height of list item (slide)
   entire slider area will adjust according to the parameters provided here
   */ 
   width:985px; padding:10px 0 10px 0; margin:0 auto; 
   margin-left: 100px;
}

Daí você vai dando margem até chegar ao centro

CrazyLOL · Julho 27, 2012

Vou fazer o teste...

Super Obrigado!

Entrar

Arquivado

Efeito transição de imagens css

Recommended Posts

CrazyLOL 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wanderson Valerio 102

Compartilhar este post

Link para o post

Compartilhar em outros sites

CrazyLOL 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wanderson Valerio 102

Compartilhar este post

Link para o post

Compartilhar em outros sites

CrazyLOL 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante