carga de pagina web

[sandymiau]

Hola.
quisiera saber por que cuando carga la pagina que hice, por un segundo c ve todo encimado y despues queda bien, es decir no sucede como las paginas que he visto que cargan y c ven bien desde el principio. ¿por que? ¿como solucionarlo?
salu2.
Gracias por su atencion.

[ipraetoriux]

pues pueden ser varias cosas...como esta estructurada, los css, javascript, etc, etc, etc, etc...tendrias que poner el link de la web para verla y tener una idea mas clara, sino es como tratar de adivinar el numero de la loteria con tan poca informacion que das...

[sandymiau]

www.ferrefast.com

[sandymiau]

El css lo importo, por si no puedes verlo, aqui te lo dejo. Este es el del index

/*basics*/
body {margin: 0; padding: 0; margin-top: 5px;}
div.principal {margin: 0 auto; width: 1250px;}
div.top {position: relative; height: 74px; margin-bottom: 15px;}
div.middle {position: relative; top: 0px; left: 0;}
div.contenido {float: right; width: 1045px; margin-bottom: 20px; border:1px solid red;}
div.foot {clear: both; z-index: 2;}
div.footer {background-color: black;clear: both;font-family: "Helvetica", "Arial", san-serif;font-size: 0.8em;padding-bottom: 18px;min-width: 1250px;
position: relative; top: -105px; z-index: -2; padding-top: 25px;}
div.reservado {text-align: center;}

P_TOP
/*contents div top*/
/*div boton twiter*/
.ferry {float: left; width: 280px; padding-top: 23px;}
/*Boton twiter*/
.twiter {height: 30px; background-color: #f5f5f0;border-bottom: 1px solid #555555;border-right:1px solid #555555;border-top:0px;border-left:0px;
font-size: 9px;color:black;background-image: url(../Images/twitter_newbird_blue.gif);padding-left: 30px;background-repeat: no-repeat;cursor:hand;
cursor:pointer;margin-left:5px;margin-right:5px;outline-width:0px;font-size: 1em;width: 200px;padding-top: 10px;padding-bottom: 5px;padding-right: 5px;
text-decoration:none;font-family:Arial, Helvetica, sans-serif;}
.twiter:hover{height: 30px;background-color: #f5f5f0;border-bottom: 1px solid #AAAAAA;border-right:1px solid #AAAAAA;border-top:0px;border-left:0px;
font-size: 9px;color:black;padding-left: 30px;background-repeat: no-repeat;cursor:hand;cursor:pointer;margin-left:5px;margin-right:5px;outline-width:0px;
background-image: url(../Images/twitter_newbird_blue.gif);font-size: 1em;width: 200px;padding-top: 10px;padding-bottom: 5px;padding-right: 5px;
text-decoration:none;}
/*telephone*/
div.top img {position: absolute; right: 0; top: 0; width: 300px;}
/*numero.ventas*/
div.sales {background-image: url(../Images/sales.gif); background-repeat: no-repeat; width: 300px; height: 74px; position: absolute; top:0; left: 500px;}

P_middle
/*basic div middle*/
div.leftSideBar {position: absolute; top:0; left:0; width: 190px; height: 530px;}
div.myLogo {margin-left: 205px;}/*this are the logo ferrefast and de group of logos*/
/*basics div leftsidebar*/
div.busqueda {z-index: 1;margin-left: 0px; margin-top: 40px; width: 300px; margin-bottom: 20px;}
div.menu {width: 190px; padding-top: 72px; }

/*contents div.busqueda*/
/*search form*/
div.busqueda p {font-family: "Helvetica", "Arial", san-serif; font-size: 1.3em; padding: 0; margin: 0;}
input#amigo {height: 30px; font-size: 1.5em; width: 190px;}
INPUT#searchbox { background-color: orange; height: 33px; font-size: 1.5em; margin-left: -5px;}

/*contents div.menu*/
li.dd > audio { display:none;}
ul.nav {}
li.dd {background-color: orange;margin-bottom: 7px;list-style: none;font-family: "Helvetica", "Arial", san-serif;font-size: 2em;padding-top: 4px;
/*2%;*/padding-bottom: 4px;/*2%;*/position:relative;margin-left: -35px;}
li.dd a, li.dd a:visited{text-decoration: none;color: black;padding-left: 13px; /*8%;*/position: relative;display:block;}

i_contenido
div.contenido div {float: left; width: 246px; margin: 0; padding: 0; margin-right: 15px;}
div.contenido p {
font-family: "Helvetica", "Arial", san-serif;
font-size: 1.4em;
margin-top: 0px;
}

/*--------------------ULTIMA COLUMNA IZQUIERDA----------------------*/
div.column3 {
float: right;
width: 780px;
margin-top: -800px;
margin-left: 9px;
}
div.column3 img {
width: 780px;
}
div.column3 p {
font-family: "Helvetica", "Arial", san-serif;
font-size: 1.5em;
width: 780px;
}
div.column3 p span {
display: block;
background-image: url('Images/logo_peque1.jpg');
background-repeat: no-repeat;
width: 125px;
height: 48px;
}

i_slide
/*----------------------------------SLIDE-------------------------------*/
a:link, a:visited {
color : #fff;
text-decoration : none;
}
a img {
border : 0;
}
div.wrap {
width : 1000px;
margin : 0 auto;
text-align : left;
padding: 10px 0 0 0;
}
div#header {
margin : 0 0 0 0;
}
div#header div.wrap {
height : 299px;
}
div#header div#slide-holder {
z-index : 40;
width : 1000px;
height : 299px;
position : absolute;
}
div#header div#slide-holder div#slide-runner {
top : 9px;
left : 9px;
width : 1000px;
height : 278px;
overflow : hidden;
position : absolute;
}
div#header div#slide-holder img {
margin : 0;
display : none;
position : absolute;
}
div#header div#slide-holder div#slide-controls {
left : 0;
bottom : 228px;
width : 1000px;
height : 46px;
display : none;
position : absolute;
background: 0 0;
background-image:url(../Images/partes_slide/slide-bg.png);
}
div#header div#slide-holder div#slide-controls p.text {
float : left;
color : #fff;
display : inline;
font-size : 10px;
line-height : 16px;
margin : 15px 0 0 20px;
text-transform : uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav {
float : right;
height : 24px;
display : inline;
margin : 11px 110px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
float : left;
width : 24px;
height : 24px;
display : inline;
font-size : 11px;
margin : 0 5px 0 0;
line-height : 24px;
font-weight : bold;
text-align : center;
text-decoration : none;
background-position : 0 0;
background-repeat : no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on {
background-position : 0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
background-image: url(../Images/partes_slide/silde-nav.png);
}
div#nav ul li a {
background-repeat: no-repeat;
background-image: url(../Images/partes_slide/nav-bg.png);
}

i_forms
/*formas de pago*/
/*basics from forma de pago*/
div.money { width: 190px; margin-right: 0; margin-left: 47px; margin-top: 100px;}
/*contents div money*/
ul.check {margin-bottom: 60px;}
ul.check li {list-style: none;font-family: Helvetica, Arial, sans-serif; font-size: 120%;font-style: normal;font-weight: normal;text-transform:uppercase;
line-height: 1em;padding-bottom: 4%; margin-left: -40px;}
ul.check li img.visa {margin-left: 15px;}
ul.check li span {display: block;color: black;text-transform: uppercase;color: blue;font-size: 0.8em;}
ul.check li.transfer {border-color: black;text-transform: uppercase;color: #47B224;text-decoration:none;padding-left: 0;font-size: 140%;line-height: 0.9em;
color: blue;font-size: 1em;font-weight:bold;}
/*btn mas info*/
.btn{height: 23px; background-color: #f5f5f0; border-bottom: 1px solid #555555;border-right:1px solid #555555; border-top:0px; border-left:0px; font-size: 9px;
color:black; background-image: url(./img_comuns/btns.png);padding-left: 20px; background-repeat: no-repeat; cursor:hand; cursor:pointer;margin-left:5px;
margin-right:5px; outline-width:0px;}
.btn:hover{height: 23px; background-color: #f5f5f0; border-bottom: 1px solid #AAAAAA;border-right:1px solid #AAAAAA; border-top:0px; border-left:0px;
font-size: 9px; color:black;padding-left: 20px; background-repeat: no-repeat;cursor:hand; cursor:pointer; margin-left:5px; margin-right:5px;
outline-width:0px;background-image: url(./img_comuns/btns_act.png);}

p_footer
/*content pie de pagina*/
ul.pie1 {list-style-type: none; padding-left: 0; margin-left: 0; text-align: center;}
ul.pie1 li{display: inline;}
ul.pie1 li a{border: 1px solid blanchedalmond; padding-bottom: 5px; text-decoration: none; color: blanchedalmond; border: none;
border-bottom: 2px dotted red; margin-left: 120px; font-family: Helvetica; font-size: 1em; padding-left: 5px; padding-right: 5px;}

a.poplight {text-decoration:none;}

/* these are the text headings set for CREDITS - they can be applied to text in the HTML pages */
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
margin-top: -10px;
}
p {
margin-bottom: 0.5em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.1em;
}
p.moonlight {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;}

/* This moves the credits tool tip link */
#information {
margin: 10px auto;
width: 1250px;
text-align: right;
padding: 5px 0 0 0;
font-weight: plain;
}

/* This will change the rollover colour for the credits link */
#creditLink:hover {
color: grey;
}
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
width:300px;
font-color:#FFF;
display: none; /*--hidden by default--*/
background: #000;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.popup_block p {
color:#FFF;
text-align:left;
float:left;
}
.popup_block h1 {
color:#FFF;
text-align:center;
}

.popup_block h2 {
color:#FFF;
text-align:left;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
#modal_button a {
color:#000
}

#digital_guys{
float:left;
width:190px;
}
#editorial_guys{
width:150px;
float:right;
}
#company_text{
float:left;
/*width:450px;*/
}

Gracias.
Salu2.

[ipraetoriux]

pues en principio...mirando asi rapidito...a class "myLogo" deberias indicar width and height que seria...1045x482, ya con eso solo, arreglas buena parte...y te recomendaria que hagas lo mismo donde hayan imagenes muy grandes...