Промежутки между изображениями

Question

Я пытаюсь сделать Navbar для блога друга (http://testcheww.blogspot.com/), но я всегда получаю это мало места:

Я попытался изменить задания, поддержку и играть позицию но это не сработает. Любые предложения о том, как это исправить? Вот код:

<center> 
    <div style='background-image: url(http://files.tinkatollidunes.com/nav/left.png) ; background-size: 45px 86px; height: 86px; width: 45px; border: 0px; margin-left: -1139px; margin-bottom: -80x;'/> 
    </center> 
    <center> 
<div class='homebutton' style='position:relative; left:-477px; top:-86px;'> 
    <a href='http://www.tinkatollidunes.com/'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/home.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/homehover.png' width='141px'/> 
    </a> 
</div> 
    </center> 
    <center> 
     <div style='height: 86px; width: 63px; border: 0px; margin-top: -172px; margin-left: -750px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/home-about.png' width='63px'/> 
     </div> 
    </center> 
    <center> 
<div class='aboutbutton' style='position:relative; left:-273px; top:-86px; margin-bottom: -82px;'> 
    <a href='http://www.tinkatollidunes.com/p/about.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/about.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/abouthover.png' width='141px'/> 
    </a> 
</div> 
    </center> 
    <center> 
     <div style='height: 86px; width: 72px; border: 0px; margin-top: -172px; margin-left: -333px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/about-guides.png' width='72px'/> 
     </div> 
    </center> 
    <center> 
     <div class='guidesbutton' style='position:relative; left:-60px; top:-86px; margin-bottom: -82px;'> 
<a href='http://www.tinkatollidunes.com/p/guides.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/guides.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/guideshover.png' width='141px'/> 
</a> 
</div> 
    </center> 
     <center> 
     <div style='height: 86px; width: 58px; border: 0px; margin-top: -172px; margin-left: 78px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/guides-quests.png' width='58px'/> 
     </div> 

<div class='questsbutton' style='position:relative; left:137px; top:-86px; margin-bottom: -82px;'> 
<a href='http://www.tinkatollidunes.com/p/quests.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/quests.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/questshover.png' width='141px'/> 
</a> 
</div> 
    </center> 
      <center> 
     <div style='height: 86px; width: 52px; border: 0px; margin-top: -172px; margin-left: 470px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/quests-support.png' width='52px'/> 
     </div> 
    </center> 
     <center> 
<div class='supportbutton' style='position:relative; left:334px; top:-86px; margin-bottom: -82px;'> 
<a href='http://www.tinkatollidunes.com/p/support-us.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/support.png' width='150px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/supporthover.png' width='150px'/> 
</a> 
</div> 
    </center> 
    <center> 
     <div style='height: 86px; width: 52px; border: 0px; margin-top: -172px; margin-left: 874px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/support-play.png' width='54px'/> 
     </div> 
    </center> 
     <center> 
     <div style='height: 86px; width: 142px; border: 0px; margin-top: -86px; margin-right: -1021px;'><a href='http://www.tinkatolli.com/play/'><img height='86' src='http://files.tinkatollidunes.com/nav/play.png' width='142'/></a> 
     </div> 
    </center> 

Answer 1

Между изображениями есть пробел.

<img (content) /> 
<img (content) /> 

Возврат между двумя изображениями здесь имеет ту же функцию, что и пространство. Таким образом, решение заключается в удалении возврата.

<img (content) /><img (content) /> 

Все.

Кстати, вы не должны использовать атрибуты и height (которые были устаревшими с по крайней мере в начале этого столетия), но если вы используете их в любом случае, дайте им номер для своих значений, а не длина css-стиля.
То есть, 141, а не 141px.
Но на самом деле использование CSS намного лучше. То же для <center> элементов.

И если вы не используете XHTML, вам не нужно заканчивать теги />. Просто > будет делать хорошо.

Answer 2

попробовать это:

<center> 
    <div style='background-image: url(http://files.tinkatollidunes.com/nav/left.png) ; background-size: 45px 86px; height: 86px; width: 45px; border: 0px; margin-left: -1139px; margin-bottom: -80x;'/> 
    </center> 
    <center> 
<div class='homebutton' style='position:relative; left:-477px; top:-86px;'> 
    <a href='http://www.tinkatollidunes.com/'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/home.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/homehover.png' width='141px'/> 
    </a> 
</div> 
    </center> 
    <center> 
     <div style='height: 86px; width: 63px; border: 0px; margin-top: -172px; margin-left: -750px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/home-about.png' width='63px'/> 
     </div> 
    </center> 
    <center> 
<div class='aboutbutton' style='position:relative; left:-273px; top:-86px; margin-bottom: -82px;'> 
    <a href='http://www.tinkatollidunes.com/p/about.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/about.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/abouthover.png' width='141px'/> 
    </a> 
</div> 
    </center> 
    <center> 
     <div style='height: 86px; width: 72px; border: 0px; margin-top: -172px; margin-left: -333px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/about-guides.png' width='72px'/> 
     </div> 
    </center> 
    <center> 
     <div class='guidesbutton' style='position:relative; left:-60px; top:-86px; margin-bottom: -82px;'> 
<a href='http://www.tinkatollidunes.com/p/guides.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/guides.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/guideshover.png' width='141px'/> 
</a> 
</div> 
    </center> 
     <center> 
     <div style='height: 86px; width: 58px; border: 0px; margin-top: -172px; margin-left: 78px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/guides-quests.png' width='58px'/> 
     </div> 

<div class='questsbutton' style='position:relative; left:137px; top:-86px; margin-bottom: -82px;'> 
<a href='http://www.tinkatollidunes.com/p/quests.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/quests.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/questshover.png' width='141px'/> 
</a> 
</div> 
    </center> 
      <center> 
     <div style='height: 86px; width: 52px; border: 0px; margin-top: -172px; margin-left: 458px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/quests-support.png' width='52px'/> 
     </div> 
    </center> 
     <center> 
<div class='supportbutton' style='position:relative; left:334px; top:-86px; margin-bottom: -82px;'> 
<a href='http://www.tinkatollidunes.com/p/support-us.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/support.png' width='150px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/supporthover.png' width='150px'/> 
</a> 
</div> 
    </center> 
    <center> 
     <div style='height: 86px; width: 52px; border: 0px; margin-top: -172px; margin-left: 870px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/support-play.png' width='54px'/> 
     </div> 
    </center> 
     <center> 
     <div style='height: 86px; width: 142px; border: 0px; margin-top: -86px; margin-right: -1021px;'><a href='http://www.tinkatolli.com/play/'><img height='86' src='http://files.tinkatollidunes.com/nav/play.png' width='142'/></a> 
     </div> 
    </center> 

Answer 3

Я изменил ширину Задания до 143, а ширина поддержки до 152, увеличение 2 пикселя каждый (а и б), и она выглядит хорошо.

Вероятно, не самый лучший способ, чтобы исправить это, но я не очень понимаю ваш макет.