Xampp

Pensei que onde não funcionava fosse uma resolução que já não se usa, como 1024x768. Sendo assim, a minha solução seria mesmo modificar o site para funcionar bem em 1680x1050. Até 1366x768 ainda deve ser frequente, por causa dos portáteis.
 
Deve ser por causa da resuluçao, sem ver o codigo e dificil ter uma ideia, se pegares no monitor de 1920x1080 e forçares 1680x1050 como fica (usa as dev tools do chrome)
 
Última edição:
aqui vai o CSS que acho relevante:

.timeline {
list-style: none;
padding: 0% 0 15%;
position: relative;
}

.timeline:before {
top: 0%;
bottom: 0%;
position: absolute;
content: " ";
width: 0.1%;
background-color: #eeeeee;
left: 46%;
margin-left: -1.5px;
}

.timeline > li {
margin-bottom: -14%;
position: relative;
}

.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}

.timeline > li:after {
clear: both;
}

.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}

.timeline > li:after {
clear: both;
}

.timeline > li > .timeline-panel {
width: 51%;
margin-left:-9%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 0%;
padding: 1%;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}

.timeline > li > .timeline-panel:before {
position: absolute;
top: 5%;
right: -5%;
display: inline-block;
border-top: 0px solid transparent;
border-left: 0px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}

.timeline > li > .timeline-panel:after {
position: absolute;
top: 5%;
right: -5%;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}

.timeline > li > .timeline-badge {
color: #fff;
width: 0%;
height: 0%;
line-height: 30px;
font-size: 1.4em;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #E31E24;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}

.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}

.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 150px;
left: -15px;
right: 0%;
}

.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}

.timeline-badge.primary {
background-color: #E31E24 !important;
}

.timeline-badge.success {
background-color: #E31E24 !important;
}

.timeline-badge.warning {
background-color: #E31E24 !important;
}

.timeline-badge.danger {
background-color: #E31E24 !important;
}

.timeline-badge.info {
background-color: #E31E24 !important;
}

.timeline-title {
margin-top: 0;
color: inherit;
}

.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}

.timeline-body > p + p {
margin-top: 5px;
}​
e agora o código da pág em si:

<!DOCTYPE HTML>
<html lang="pt">
<head>
<meta charset="utf-8">
<title>BLABLABLA</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- custom CSS-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css' />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--<link rel="stylesheet" href="css/lightbox.css">-->
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="header_btm">
<div class="h_left">
<h1><img src="images/BLABLABLA.png"></img></h1>
</div>
<div class="h_right">

<br>
</br>
<ul class="menu">
<li><a href="BLABLABLA.html">Home</a></li>
<li class="active"><a href="BLABLABLA.html">Empresa</a></li>
<li><a href="BLABLABLA.html">Destaques</a></li>
<li><a href="BLABLABLA.html">Marcas</a></li>
<li><a href="BLABLABLA.html">Contactos</a></li>
<li><a href="BLABLABLA.html">Area de Cliente</a></li>
</ul>
<script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<script>
new UISearch( document.getElementById( 'sb-search' ) );
</script>
<!-- start smart_nav * -->
<nav class="nav">
<ul class="nav-list">
<li class="nav-item"><a href="BLABLABLA.html">Home</a></li>
<li class="nav-item"><a href="BLABLABLA.html">Empresa</a></li>
<li class="nav-item"><a href="BLABLABLA.html">marcas</a></li>
<li class="nav-item"><a href="BLABLABLA.html">Contactos</a></li>
</ul>
</nav>
<script type="text/javascript" src="js/responsive.menu.js"></script>
<!-- end smart_nav * -->
</div>
<div class="soc_icons">
<br>
</br>
<ul>
<li><!--a href="BLABLABLA"><img src="images/icon4_h.png"/></a></li>
<li><a href="BLABLABLA"><img src="images/icon5_h.png"/></a--></li>
</ul>
</div>
<div class="clear">
</div>
</div>
<!-- start header -->
<div class="header_btm">

<div class="clear">
</div>
</div>
<!-- start main -->
<div class="main_bg">
<div class="wrap">
<div class="main">
<div class="content">
<!-- start about -->

<div class="about">
<div class="container">
<div class="page-header">
</div>
<ul class="timeline">
<li>
<div class="timeline-badge">
</div>
<div class="timeline-panel">
<div class="cont-grid">
<h4><font color="141819">BLABLABLA</font></h4>
<!--<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>-->
</div>
<div class="timeline-body">
<br>
</br>
<p align="justify">
<font color="141819">BLABLABLA</font>
<br>
</br><img src="images/BLABLABLA.jpg">
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning">
</div>
<div class="timeline-panel">
<div class="cont-grid">
<h4><font color="141819">BLABLABLA</font></h4>
</div>
<div class="timeline-body">
<br>
</br>
<p align="justify">
<font color="141819">BLABLABLA</font>
</p><br></br>
<img src="images/BLABLABLA.jpg"></img>
</div>
</div>
</li>
<li>
<div class="timeline-badge">
</div>
<div class="timeline-panel">
<div class="cont-grid">
<h4><font color="141819">BLABLABLA</font></h4>
<!--<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>-->
</div>
<div class="timeline-body">
<br>
</br>
<p align="justify">
<font color="141819">BLABLABLA</font>
<br>
</br><img src="images/BLABLABLA.jpg">
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning">
</div>
<div class="timeline-panel">
<div class="cont-grid">
<h4><font color="141819">BLABLABLA</font></h4>
</div>
<div class="timeline-body">
<br>
</br>
<p align="justify">
<font color="141819">BLABLABLA</font>
<br>
</br><img src="images/BLABLABLA.jpg">
</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge">
</div>
<div class="timeline-panel">
<div class="cont-grid">
<h4><font color="141819">BLABLABLA</font></h4>
<!--<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>-->
</div>
<div class="timeline-body">
<br>
</br>
<p align="justify">
<font color="141819">BLABLABLA</font>
<br>
</br><img src="images/BLABLABLA.jpg">
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning">
</div>
<div class="timeline-panel">
<div class="cont-grid">
<h4><font color="141819">BLABLABLA</font></h4>
</div>
<div class="timeline-body">
<br>
</br>
<p align="justify">
<font color="141819">BLABLABLA</font>
</p>
<p align="justify">
<font color="141819">BLABLABLA</font>
<br>
</br><img src="images/BLABLABLA.jpg">

</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge">
</div>
<div class="timeline-panel">
<div class="cont-grid">
<h4><font color="141819">BLABLABLA</font></h4>
<!--<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>-->
</div>
<div class="timeline-body">
<br>
</br>
<p align="justify">
<font color="141819">BLABLABLA</font>
<br>
</br><img src="images/BLABLABLA.jpg">
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning">
</div>
<div class="timeline-panel">
<div class="cont-grid">
<h4><font color="141819">BLABLABLA</font></h4>
</div>
<div class="timeline-body">
<br>
</br>
<p align="justify">
<font color="141819">BLABLABLA</font>
<br>
</br><img src="images/BLABLABLA.jpg">
</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge">
</div>
<div class="timeline-panel">
<div class="cont-grid">
<h4><font color="141819">BLABLABLA</font></h4>
<!--<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>-->
</div>
<div class="timeline-body">
<br>
</br>
<p align="justify">
<font color="141819">BLABLABLA </font>
<br>
</br><img src="images/BLABLABLA.jpg">
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning">
</div>
<div class="timeline-panel">
<div class="cont-grid">
<h4><font color="141819">BLABLABLA</font></h4>
</div>
<div class="timeline-body">
<br>
</br>
<p align="justify">
<font color="141819">BLABLABLA</font>
<br>
</br><img src="images/BLABLABLA.jpg">
</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge">
</div>
<div class="timeline-panel">
<div class="cont-grid">
<h4><font color="141819">BLABLABLA</font></h4>
<!--<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>-->
</div>
<div class="timeline-body">
<br>
</br>
<p align="justify">
<font color="141819">BLABLABLA</font>
<br></br><img src="images/BLABLABLA.jpg">
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning">
</div>
<div class="timeline-panel">
<div class="cont-grid">
<h4><font color="141819">BLABLABLA</font></h4>
</div>
<div class="timeline-body">
<br>
</br>
<p align="justify">
<font color="141819">BLABLABLA</font>
<br>
</br><img src="images/BLABLABLA.jpg">
</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge">
</div>
<div class="timeline-panel">
<div class="cont-grid">
<h4><font color="141819">BLABLABLA</font></h4>
<!--<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>-->
</div>
<div class="timeline-body">
<br>
</br>
<p align="justify">
<font color="141819">BLABLABLA</font>
<br>
</br><img src="images/cron/BLABLABLA.jpg">
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning">
</div>
<div class="timeline-panel">
<div class="cont-grid">
<h4><font color="141819">BLABLABLA</font></h4>
</div>
<div class="timeline-body">
<br>
</br>
<p align="justify">
<font color="141819">EBLABLABLA</font>
<br>
</br><img src="images/BLABLABLA.jpg">
</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge">
</div>
<div class="timeline-panel">
<div class="cont-grid">
<h4><font color="141819">BLABLABLA</font></h4>
<!--<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>-->
</div>
<div class="timeline-body">
<br>
</br>
<p align="justify">
<font color="141819">BLABLABLA</font>
<br>
</br><img src="images/BLABLABLA.gif">
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning">
</div>
<div class="timeline-panel">
<div class="cont-grid">
<h4><font color="141819">BLABLABLA</font></h4>
</div>
<div class="timeline-body">
<br>
</br>
<p align="justify">
<font color="141819">BLABLABLA</font>
<br>
</br><img src="images/BLABLABLA.jpg"></img>
</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge">
</div>
<div class="timeline-panel">
<div class="cont-grid">
<h4><font color="141819">2015</font></h4>
<!--<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>-->
</div>
<div class="timeline-body">
<br>
</br>
<p align="justify">
<font color="141819">BLABLABLA</font>
<br>
</br><img src="images/BLABLABLA.jpg"></img>
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning">
</div>
<div class="timeline-panel">
<div class="cont-grid">
<h4><font color="141819"> 2016</font></h4>
</div>
<div class="timeline-body">
<br>
</br>
<p align="justify">
<font color="141819">
BLABLABLA.</font>
<br>
</br><!--<img src="images/cron/BLABLABLA.jpg"></img>-->
<div id="Vsebina">
<div class="storitve"><div class="okrogel"> <img src="images/BLABLABLA.jpg"></div></div>
</div>
</p>
</div>
</div>
</li>





<li>
<div class="timeline-panel">
<div class="cont-grid">
<h4><font color="141819">2016</font></h4>
<!--<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>-->
</div>
<div class="timeline-body">
<br>
</br>
<p align="justify">
<font color="141819">BLABLABLA </font>
</p>
<p align="justify">
<font color="141819"></font>
<br>
</br><img src="images/cron/BLABLABLA.jpg">
</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge">
</div>

<br></br>
</li>
</ul>
</div>
<div class="clear">
</div>
</div>
<!-- end about -->
</div>
</div>
</div>
</div>
<script src="js/lightbox-plus-jquery.min.js"></script>
<div class="footer_bg">
<div class="wrap">
<div class="footer">

</div>
</div>
<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#horizontalTab').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true // 100% fit in a container
});
});
</script>
<!--script-->
<div class="footer">

</div>
<div class="footer_top">
<div class="f_nav1">
<ul>
<li><a href="privacidade.html">BLABLABLA</a></li>
</ul>
</div><br></br>
<div class="clear"></div>
</div>

<!--script-->
</body>
</html>​
 
Esse CSS ta medonho.
- !important é proibido
- margins percentuais com valores negativos? Receita para desastre
- paddings com percentagens? Idem

Eu começava por limpar isso tudo
 
Pões paddings fixos, o que varia de tamanho é o container.
Vê o CSS das colunas do bootstrap, por exemplo.

Devias também usar media queries para tratar da adaptação do layout a vários tamanhos.

Não é boa prática teres seletores demasiado específicos nas tuas classes:
- Coupling. estás a prender a tua estrutura semântica do HTML. No teu caso nos <li>s, perdes muita flexibilidade se quiseres fazer alterações e reutilizar componentes.
- processamento de CSS é mais lento (um bocado irrelevante talvez).
 
muito obrigado pela dica, de facto eu tinha (muito erradamente, já percebi) alterado isso, agora está tudo ok. só mais uma questão, no css, os media queries funcionam para todas as páginas, para o site por completo, certo?
 
powerisevil disse:
os media queries funcionam para todas as páginas, para o site por completo, certo?
Clicar para expandir...

Funcionam para as páginas em que forem carregados. Se usares o mesmo header em todas as páginas, apontando para os mesmos ficheiros CSS, sim, funcionam em todas as páginas.

Outra coisa que estás a fazer que não é aconselhada é misturar apresentação com conteúdo, com alinhamentos e cores feitos em HTML. A tag 'font' nem sequer é suportada em HTML5.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo