Jump to content

Duas páginas iguais mostram-se diferentes

AngusYoung

By AngusYoung,
in CSS

 Share

Recommended Posts

AngusYoung boolean user

AngusYoung

Posted
Posted (edited)

Bom dia a todos!

Estou a trabalhar num site, e deparei-me com um problema um tanto estranho.

Criei a página principal, e depois fui a criar outra e estranhamente, o tamanho do "header" e do logo ficava diferente. Para ver se era algo que tinha feito de mal, copiei o código da primeira página para a segunda, mas o mesmo continuava a acontecer.

Não estou a conseguir ultrapassar este problema e qualquer ajuda é bem-vinda. Abaixo seguem os códigos-fonte:

Página Principal:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>PayCyber</title>

<link rel="stylesheet" href="extra/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="extra/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

 <link rel="stylesheet" href="css/style.css" type="text/css" />

<!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css" type="text/css" />
<![endif]-->
</head>
<body>
<div class="page">
<div class="header">
<a href="index.html" id="logo"><img id="paycyber" src="images/logo.png" alt=""/></a>
<ul>
 <li class="selected"><a href="index.html">Home</a></li>
 <li><a href="about.html">About</a></li>
 <li><a href="index.html">Blog</a></li>
 <li><a href="index.html">Services</a></li>
</ul>
</div>
<div class="body">
<div id="featured">
 <h3>Why us?</h3>
<div id="text">
 <tr>
	 <td> •<strong> Start Accepting Online Payments
	 Instantly</strong>: No paperwork, no approval process! <br>You can register
	 for an account and begin accepting payments on your website
	 in just minutes! <br> <br>
	 •<strong> Free Referral Program</strong>: Open a free account today
	 and be automatically enrolled <br>in our free affiliate program that pays
	 you for your referrals 6 levels deep.<br> <br>
	 • <strong>Instant Payment Notifications</strong>: You are notified
	 instantly via e-mail when<br> someone sends funds to your account. <br> <br>
	 • <strong>Variety of Funding Options</strong>: We offer
	 a variety of funding options,  <br>such as by credit card, E-check, and
	 U.S. mail <br> <br>
	 • <strong>Sell Online</strong>: We are a reliable payment processor
	 and will not "freeze" or "suspend" <br>your account
	 for any reason other than fraud or spam!<br> <br>
	 </td> We are here for your success on the internet!
 </tr>
	 </div>
 <input type="button" value="Sign Up!" onClick="parent.location='index.html'"/>
</div>
 </li>
</ul>
</div>
<div class="footer">
<ul>
 <li><a href="index.html">Home</a></li>
 <li><a href="index.html">About</a></li>
 <li><a href="index.html">Blog</a></li>
 <li><a href="index.html">Gallery</a></li>
</ul>
<p>© Copyright © 2012. PayCyber all rights reserved</p>
<div class="connect">
 <a href="index.html" id="facebook">facebook</a>
 <a href="index.html" id="twitter">twitter</a>
 <a href="index.html" id="vimeo">vimeo</a>
</div>
</div>
</div>

<!-- SLIDER -->

<div id="wrapper">
 <div class="slider-wrapper theme-default">
	 <div id="slider" class="nivoSlider">
		 <img src="imagens/slider/screen1.png" data-thumb="imagens/slider/screen1.png" alt="" />
<img src="imagens/slider/screen2.png" data-thumb="imagens/slider/screen2.png" alt="" />
<img src="imagens/slider/screen3.png" data-thumb="imagens/slider/screen3.png" alt="" />
	 </div>
	 <div id="htmlcaption" class="nivo-html-caption">

	 </div>
 </div>
</div>
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="extra/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
 $('#slider').nivoSlider();
});
</script>





</body>
</html>

Segunda Página (about):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>PayCyber</title>

<link rel="stylesheet" href="extra/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="extra/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

 <link rel="stylesheet" href="css/style.css" type="text/css" />

<!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css" type="text/css" />
<![endif]-->
</head>
<body>
<div class="page">
<div class="header">
<a href="index.html" id="logo"><img id="paycyber" src="images/logo.png" alt=""/></a>
<ul>
 <li class="selected"><a href="index.html">Home</a></li>
 <li><a href="about.html">About</a></li>
 <li><a href="index.html">Blog</a></li>
 <li><a href="index.html">Services</a></li>
</ul>
</div>
<div class="body">
<div id="featured">
 <h3>Why us?</h3>
<div id="text">
 <tr>
	 <td> •<strong> Start Accepting Online Payments
	 Instantly</strong>: No paperwork, no approval process! <br>You can register
	 for an account and begin accepting payments on your website
	 in just minutes! <br> <br>
	 •<strong> Free Referral Program</strong>: Open a free account today
	 and be automatically enrolled <br>in our free affiliate program that pays
	 you for your referrals 6 levels deep.<br> <br>
	 • <strong>Instant Payment Notifications</strong>: You are notified
	 instantly via e-mail when<br> someone sends funds to your account. <br> <br>
	 • <strong>Variety of Funding Options</strong>: We offer
	 a variety of funding options,  <br>such as by credit card, E-check, and
	 U.S. mail <br> <br>
	 • <strong>Sell Online</strong>: We are a reliable payment processor
	 and will not "freeze" or "suspend" <br>your account
	 for any reason other than fraud or spam!<br> <br>
	 </td> We are here for your success on the internet!
 </tr>
	 </div>
 <input type="button" value="Sign Up!" onClick="parent.location='index.html'"/>
</div>
 </li>
</ul>
</div>
<div class="footer">
<ul>
 <li><a href="index.html">Home</a></li>
 <li><a href="index.html">About</a></li>
 <li><a href="index.html">Blog</a></li>
 <li><a href="index.html">Gallery</a></li>
</ul>
<p>© Copyright © 2012. PayCyber all rights reserved</p>
<div class="connect">
 <a href="index.html" id="facebook">facebook</a>
 <a href="index.html" id="twitter">twitter</a>
 <a href="index.html" id="vimeo">vimeo</a>
</div>
</div>
</div>

<!-- SLIDER -->

<div id="wrapper">
 <div class="slider-wrapper theme-default">
	 <div id="slider" class="nivoSlider">
		 <img src="imagens/slider/screen1.png" data-thumb="imagens/slider/screen1.png" alt="" />
<img src="imagens/slider/screen2.png" data-thumb="imagens/slider/screen2.png" alt="" />
<img src="imagens/slider/screen3.png" data-thumb="imagens/slider/screen3.png" alt="" />
	 </div>
	 <div id="htmlcaption" class="nivo-html-caption">

	 </div>
 </div>
</div>
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="extra/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
 $('#slider').nivoSlider();
});
</script>





</body>
</html>

Folha de estilos CSS:

/*------------------------- Layout styles ------------------------*/
body{
margin:0;
background:url(../images/bg-body.jpg);
}
.page{
background:url(../images/bg-header.jpg) no-repeat center top;
}
/*------------------------- Font ------------------------*/
@font-face {
font-family: 'RokkittRegular';
src: url('rokkitt-regular-webfont.eot');
src: url('rokkitt-regular-webfont.eot?#iefix') format('embedded-opentype'),
	 url('rokkitt-regular-webfont.woff') format('woff'),
	 url('rokkitt-regular-webfont.ttf') format('truetype'),
	 url('rokkitt-regular-webfont.svg#RokkittRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/*------------------------- Header ------------------------*/
.header{
z-index: 10;
background:url(../images/bg-navigation.jpg) no-repeat center 90px;
width:940px;
margin:0 auto;
height:105px;
padding:36px 10px 0;
}
.header a#logo{
display:block;
float:left;
outline:none;
}
.header a#logo img{
border:0;
}
.header ul{
margin:0;
list-style:none;
padding:13px 0 0;
float:right;
}
.header ul li{
float:left;
margin:0 0 0 63px;
}
.header ul li.selected a,.header ul li a:hover{
color: red;
}
.header ul li a{
font-size:16px;
text-decoration:none;
color:#5e5e5e;
font-family: 'RokkittRegular';
outline:none;
}
/*------------------------- Body ------------------------*/
.body{
width:940px;
margin:0 auto;
padding:0 10px;
overflow:hidden;
}
.body div#featured{
background:url(../images/house.jpg) no-repeat right top;
height:500px;
padding:0 0 17px;
}
.body div#featured h3{
color: red;
font-size:36px;
font-family: 'RokkittRegular';
margin:0 0 30px;
width:490px;
padding:-100px 0 0;
font-weight:normal;
}
.body div#featured p{
width:480px;
color:#5d5d5d;
font-family: 'RokkittRegular';
font-size:16px;
line-height:25px;
text-shadow: 0 1px 0 #fcfcfc;
text-align:justify;
margin:0;
}
.body div#featured input{
background:url(../images/interface.jpg) no-repeat;
border:0;
height:48px;
width:216px;
font-family: 'RokkittRegular';
color:#fff;
font-size:30px;
margin:28px 0 0 125px;
cursor:pointer;
outline:none;
}
.body ul.blog{
list-style:none;
margin:40px 0 0;
padding:0 0 50px;
background:url(../images/separator.jpg) no-repeat center top;
overflow:hidden;
}
.body ul.blog li:first-child{
margin:60px 0 0;
}
.body ul.blog li{
float:left;
background:url(../images/interface.jpg) no-repeat 0 -68px!important;
margin:60px 0 0 48px;
height:400px;
padding:0;
}
.body ul.blog li div{
width:281px;
height:380px;
text-align:center;
padding: 8px 0 20px 0;
float:none;
margin:0;
background:none;
}
.body ul.blog li div a img{
border:0;
margin:0 0 0 -3px;
}
.body ul.blog li div a img:hover{
filter:alpha(opacity=80);
opacity:0.8;
}
.body ul.blog li div p{
width:258px;
text-align:justify;
color:#828081;
font-family: 'RokkittRegular';
margin:17px 0 0 10px;
line-height:20px;
font-size:14px;
background:none;
padding:0;
}
.body ul.blog li div a:first-child{
margin:0;
padding:0;
background:none;
width:auto;
}
.body ul.blog li div a:hover{
color:#F78117;
}
.body ul.blog li div a{
color:#606060;
font-family: 'RokkittRegular';
font-style:italic;
text-decoration:none;
padding:98px 0 0;
margin:32px auto 0;
display:block;
width: 150px;
background:url(../images/button-more.jpg) no-repeat center top;
outline:none;
font-size:16px;
font-weight:normal;
text-shadow: 0 1px 0 #fcfcfc;
}
.body h3{
font-family: 'RokkittRegular';
font-size:16px;
font-weight:bold;
color:#E41B17;
margin:15px 0 0;
line-height:21px;
}
.body p{
font-family: 'RokkittRegular';
font-size:16px;
text-align:justify;
color:#636363;
margin:0 0 20px;
line-height:21px;
}
.body p a{
outline:none;
color:#636363;
}
.body ul{
list-style:none;
margin:0;
padding:0;
overflow:hidden;
}
.body ul li:first-child{
background:none;
padding:0 0 30px;
}
.body ul li{
overflow:hidden;
background:url(../images/separator.jpg) no-repeat center top;
padding:30px 0;
}
.body ul li div.featured{
background:url(../images/interface.jpg) no-repeat 0 -68px;
width:281px;
height:292px;
text-align: center;
margin:0;
}
.body ul li div.featured img{
margin:10px 0 0 -3px;
border:0;
}
.body ul li div.featured ul{
overflow:hidden;
margin:2px 0 0 10px;

}
.body ul li div.featured ul li:first-child{
margin:0;
}
.body ul li div.featured ul li{
float:left;
margin:0 0 0 18px;
background:none;
padding:0;
}
.body ul li div.featured ul li a{
padding:0;
}
.body ul li div.featured ul li a img{
margin:0;
}
.body ul li div.featured ul li a img:hover{
filter:alpha(opacity=80);
opacity:0.8;
}
.body ul li div.featured a{
clear:both;
display:block;
font-size:13px;
font-family: 'RokkittRegular';
text-decoration:none;
color:#8a8889;
font-weight:bold;
padding:5px 0 0;
width:auto;
outline:none;
}
.body ul li div{
float:left;
margin:0 0 0 50px;
width:609px;
background:url(../images/button-more.jpg) no-repeat left bottom;
}
.body ul li div h3{
margin:0;
font-size:20px;
font-weight:bold;
font-family: 'RokkittRegular';
color:#f28220;
line-height:22px;
}
.body ul li div p{
line-height:22px;
font-family: 'RokkittRegular';
font-size:14px;
color:#5D5D5D;
padding:0 0 90px;
margin:0;
}
.body ul.paging{
margin:15px 0 10px 210px;
}
.body ul.paging li{
float:left;
padding:0 5px;
background:none;
}
.body ul.paging li a{
text-decoration:none;
color:#ff7e0d;
font-family: arial;
font-size:12px;
}
.body ul.paging li a:hover{
color:#5D5D5D;
}
/*------------------------- Footer ------------------------*/
.footer{
position: absolute;
width:940px;
background:url(../images/bg-footer.jpg) no-repeat center top;
padding:65px 10px 3%;
margin:0 auto;
overflow:hidden;
}
.footer ul{
list-style:none;
margin:0 0 0 60px;
padding:0;
overflow:hidden;
float:left;
}
.footer ul li:first-child a{
border:none;
padding:0 6px 0 0;
}
.footer ul li{
float:left;
}
.footer ul li a:hover{
color:#F78117;
}
.footer ul li a{
border-width: 1px;
border-color:#5b5b5b;
border-style: none none none solid;
color:#5b5b5b;
font-size:10px;
font-family: Trebuchet MS;
text-decoration:none;
font-weight:bold;
padding:0 6px;
outline:none;
}
.footer p{
color:#5b5b5b;
font-size:10px;
font-family: Trebuchet MS;
font-weight:bold;
float:left;
margin:6px 0 0 135px;
}
.footer div.connect{
float:left;
margin:0 0 0 92px;
}
.footer div.connect a{
float:left;
outline:none;
}
.footer div.connect a#facebook{
width:27px;
height:28px;
display:block;
text-indent:-9999px;
background:url(../images/icons.gif) no-repeat;
}
.footer div.connect a#twitter{
width:36px;
height:28px;
display:block;
text-indent:-9999px;
background:url(../images/icons.gif) no-repeat 0 -48px;
margin:0 0 0 68px;
}
.footer div.connect a#vimeo{
width:32px;
height:28px;
display:block;
text-indent:-9999px;
background:url(../images/icons.gif) no-repeat 0 -96px;
margin:0 0 0 73px;
}
/* INDEX */
#paycyber{
position: absolute;
width: 40%;
height: 20%;
top: -3%;
}
.body{
position: absolute;
top: 90%;
left: 15%;
}
.footer{
position: absolute;
top: 180%;
left: 15%;
margin-bottom: -50%;
}
#text{
font-size: 100%;
}
/* ABOUT */
#texto{
position: relative;
top: -35%;
}

Muito obrigado desde já,

Marcos Pereira

Edited by softklin
Adicionado GeSHi (código colorido)

Isto porque, saber a composicão do granito, os estágios da evolucão psicológica humana ou as deambulacões do Sartre não indicam puto sobre as competências de alguém num determinado campo específico e muito menos sobre o que as pessoas gostam de fazer ou a sua capacidade de aprendizagem. - bubulindo, 15 de Fevereiro de 2013 - 02:01

Link to comment
Share on other sites
AngusYoung boolean user

AngusYoung

Posted
  • Author
Posted

Sim, as páginas encontram-se no mesmo directório.

Isto porque, saber a composicão do granito, os estágios da evolucão psicológica humana ou as deambulacões do Sartre não indicam puto sobre as competências de alguém num determinado campo específico e muito menos sobre o que as pessoas gostam de fazer ou a sua capacidade de aprendizagem. - bubulindo, 15 de Fevereiro de 2013 - 02:01

Link to comment
Share on other sites
HappyHippyHippo stack overflow

HappyHippyHippo

Posted
Posted

visto que o código é igual (não analisei o código profundamente) e não parece estares a criar as páginas através de uma linguagem de script server-side,

podes fornecer um link para se poder visualizar as páginas ?

dessa forma poderia ver onde se encontra o problema mais rapidamente

IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites
AngusYoung boolean user

AngusYoung

Posted
  • Author
Posted

Fiz o upload das páginas agora mesmo 🙂

O link é http://paycyber.host22.com

Espera aí, é impressão minha ou as páginas no host funcionam bem?

Eu vou mas é para a reforma 😄 :D 😄 :D

Não sei porquê, ao abrir a página "about" no computador, o browser tinha o zoom a 110% (apenas naquela página).

Levem-me para a casa dos tolos.

Isto porque, saber a composicão do granito, os estágios da evolucão psicológica humana ou as deambulacões do Sartre não indicam puto sobre as competências de alguém num determinado campo específico e muito menos sobre o que as pessoas gostam de fazer ou a sua capacidade de aprendizagem. - bubulindo, 15 de Fevereiro de 2013 - 02:01

Link to comment
Share on other sites
AngusYoung boolean user

AngusYoung

Posted
  • Author
Posted

Presumes correctamente.

Uma boa continuação a todos, quanto a mim, já vou à segurança social pedir os papéis da reforma. 😄

Isto porque, saber a composicão do granito, os estágios da evolucão psicológica humana ou as deambulacões do Sartre não indicam puto sobre as competências de alguém num determinado campo específico e muito menos sobre o que as pessoas gostam de fazer ou a sua capacidade de aprendizagem. - bubulindo, 15 de Fevereiro de 2013 - 02:01

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept