Jump to content
  • 0

При загрузке сайта скачут элементы (верстка дивами)

veromi

Asked by veromi,

 Share

Question

veromi Explorer

veromi

Posted
Posted

Задаю первый вопрос на этом форуме, просьба не пинать сразу :) Имеем страницу http://toniart.ru/portfolio/f.html, при загрузке контента (если скорость интернета не очень большая) сначала грузятся круглые стрелочки влево и вправо причем вверху, затем центральная иллюстрация, затем эти стрелки перемещаются вниз, на те места где они должны быть... Все происходит быстро, но все равно напрягает. Можно полистать стрелки влево или вправо, будет понятней о чем я. Подскажите как с этим бороться? спрасибо..

на всякий случай выкладываю:

HTML

<body>

<!-- Навигация в шапке -->

<div id="navi" align="center">

<div class="polosa" >

<ul>

<li><span class="about"> <a title="Информация обо мне" href="../about/index.html">ПРЕДСТАВЛЮСЬ</a></span></li>

<li> <span class="portfolio"><a title="Мое портфолио" href="../index.html"> ПОРТФОЛИО</a></span></li>

<li><span class="contacts"><a title="Связаться со мной" href="../contacts/index.html"> КОНТАКТЫ</a></span></li>

</ul>

</div>

</div>

<!-- Шапка -->

<div id="header">

<div class="wrap">

</div>

</div>

<!-- Основной Контент -->

<div id="content">

</br>

<div id="main">

<!-- Пару строк обо мне -->

<div id="img">

<img src="large/f.jpg" alt="Иллюстрация тушью, лодки" >

<a href="e.html"><div id="arrowleft">

</div></a>

<a href="g.html"><div id="arrowright">

</div></a>

</div>

<div class="clear"></div>

</div>

</div>

<!-- Футер -->

<div id="footer">

<div id="sitemap">

<ul>

<li><a href="../about/index.html">Представлюсь</a></li>

<li><a href="../index.html">Портфолио</a></li>

<li><a href="../contacts/index.html">Контакты</a></li>

<li><a href="../sitemap.html">Карта сайта</a></li>

<li><a href="../Resourses/index.html">Ресурсы</a></li>

</ul>

<p>Иллюстрации, Дизайн, Верстка - Toniart 2011 - Права не защищены, но просьба не использовать иллюстрации данного сайта <a href="/"></a></p>

<!--Счетчик гейгера-->

<div align="center">

<script type="text/javascript"><!--

document.write("<a href='http://www.liveinternet.ru/click' "+

"target=_blank><img src='http://counter.yadro.ru/hit?t52.2;r"+

escape(document.referrer)+((typeof(screen)=="undefined")?"":

";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?

screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+

";"+Math.random()+

"' alt='' title='LiveInternet: показано число просмотров и"+

" посетителей за 24 часа' "+

"border='0' width='88' height='31'><\/a>")

//--></script>

</div>

</div>

</div>

</body>

CSS

@charset "windows-1251";

body {

background-image: url(style/bg.jpg);

margin: 0px; font-size: 62.5%;

font-family: Arial, Helvetica, sans-serif;

color: #646464;

webkit-font-smoothing: subpixel-antialiased; }

#navi {

background-image: url(style/nav-bg.jpg);

height: 42px;

margins: 0;}

#navi .polosa {

width: 940px ;

background: url(style/contact-us.jpg) 0px 1px no-repeat;

height: 42px;

background-position: right;

text-align:left;

padding-top: 4px; position: relative; }

#navi li {

display: inline; white-space: pre;

font-weight: bold;

font-size: 12px;}

#header {

background-image: url(style/header.jpg);

height: 287px;

background-repeat: repeat-x;

margin: 0; }

#header .wrap {

width: 342px;

height: 152px;

background: url(style/header-sprite.png);

padding: 136px 0px 0px 618px;

margin-left: auto;

margin-right: auto;}

#content {

background: #FFF url(style/content-bg.jpg) repeat-x;

padding-bottom: 20px;

margin: 0; }

#specialbox{

margin-left:auto;

margin-right:auto;}

#content #specialbox{

background: url(style/special-offer.jpg);

width: 942px;

height: 155px;

top: -2px;

left: -4px;

position: relative; }

#main {

width: 940px;

text-align:center;

margin-left:auto;

margin-right:auto;

margin-top: 0;}

#footer {

background: url(style/footer-bg.jpg) repeat-x;

height: 200px; }

.left {

float:left;

width: 470px;}

h1,h2,h3,h4{

color: #0e7ca3;

font-family: "Lucida Sans Unicode", sans-serif;

margin: 0px;

padding: 10px 0px;

font-weight: normal;

line-height: 1.2em; }

p{

margin: 0px;

padding: 0px 0px 14px;

line-height: 1.5em;

font-size: 14px; }

a{

outline: none;

color: #646464; }

a:hover{ color: #0e7ca3; }

a:active{ color: #0e7ca3; text-decoration: none; }

a img{ border: none; }

.about a{ color: #fff; text-decoration: none; }

.about a:hover{ color: #dd3b39; text-decoration: none; }

.about a:active{ color: #dd3b39; text-decoration: none; }

.portfolio a{ color: #2bb6df; text-decoration: none; }

.portfolio a:hover{ color: #2bb6df; text-decoration: none; }

.portfolio a:active{ color: #2bb6df; text-decoration: none; }

.contacts a{ color: #fff; text-decoration: none; }

.contacts a:hover{ color: #f3c645; text-decoration: none; }

.contacts a:active{ color: #f3c645; text-decoration: none; }

.clear { clear: both; height: 40px; }

ol.numbers{ list-style-type: none; margin: -6px 0px 10px; }

ol.numbers li{ padding: 16px 0px 0px; margin: 0px; line-height: 1.3em; font-family: Cambria, serif; font-style: italic; font-size: 1.1em; text-align:left;}

#footer #sitemap{ clear: both; padding-top: 60px; color: #c2c2c2; text-align: center; font-size: 1.1em; }

#footer #sitemap ul{ padding: 0px; margin: 0px 0px 15px; list-style-type: none; }

#footer #sitemap li{ display: inline; margin: 0px 10px; text-transform: uppercase; }

#footer #sitemap a{ color: #c2c2c2; text-decoration: none; }

#footer #sitemap a:hover{ color: #00b2da; text-decoration: none; }

h1,h2,h3,h4{ color: #0e7ca3; font-family: "Lucida Sans Unicode", sans-serif; margin: 0px; padding: 10px 0px; font-weight: normal; line-height: 1.2em; }

h2{ font-size: 2em; letter-spacing: -1px; }

#packages{ width: 100%; background-image: url(style/packages-bg.jpg); background-repeat: repeat-x; height:

285px; margin-bottom: 30px; padding-top: 25px; border-bottom: #CCC 1px solid; }

#packages .wrap{ width: 960px; }

.pictures { float: left; width:235px; height:176px; text-align:center; vertical-align:middle;}

#img { height: 590px;

}

#arrowright{width:60px; height:60px;

background-image: url(style/k1.png); position:relative; top:-410px;right:-830px;}

#arrowleft{width:60px; height:60px;

background-image: url(style/k2.png); position:relative; top:-350px;left:50px;}

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

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. See more about our Guidelines and Privacy Policy

  I accept