Навигационная панель Ссылки, перекошенные

Question

Я относительный новичок с кодировкой, но я создаю Tumblr для того, чтобы друг выглядел как профессиональный сайт.

Навигационная панель - единственное, что дает мне проблемы. Я правильно позиционировал его, и я создал карту изображений 5 различными способами, но каждый раз ссылки перегибаются влево, а я не могу, так как жизнь меня точно определяет проблему.

Вот код для отображения:

<div style="display:block; width:2819px; height:242px; background:url(http://25.media.tumblr.com/ebc94124ba5998d21de08ddcb2e49a2c/tumblr_mtyjp4OLQH1sw93yro1_1280.png); position:absolute; margin:0px 0px; background-repeat: no-repeat;"> 
<map id="imgmap20139301813" name="imgmap20139301813"><area shape="rect" alt="" title="" coords="471,63,510,80" href="http://davidallanhowell.tumblr.com/homepage" target="_self" /><area shape="rect" alt="" title="" coords="541,63,590,79" href="http://davidallanhowell.tumblr.com/resume" target="_self" /><area shape="rect" alt="" title="" coords="622,63,662,79" href="http://davidallanhowell.tumblr.com/media" target="_self" /><area shape="rect" alt="" title="" coords="691,64,735,79" href="http://davidallanhowell.tumblr.com/studio" target="_self" /><area shape="rect" alt="" title="" coords="765,63,817,79" href="http://davidallanhowell.tumblr.com/contact" target="_self" /></map> 
</style> 

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

Here's the full site.

Помощь?

Заранее благодарим и извиняюсь за то, что, вероятно, является очевидной проблемой.

Answer 1

Извините, что говорите, но ваш код - беспорядок!

Почему бы не удалить карту изображения и ссылки с изображения и использовать элементы html для этого?

Этот код, который я собираюсь вам дать, это хорошее начало для вас, чтобы над ним работать!

<div style="display:block; width: 100%; height:242px; background:url(http://25.media.tumblr.com/ebc94124ba5998d21de08ddcb2e49a2c/tumblr_mtyjp4OLQH1sw93yro1_1280.png); position:absolute; margin:0px 0px; background-repeat: no-repeat;"> 
    <ul style=" 
    width: 361px; 
    height: 17px; 
    margin: 62px auto 0 auto; 
    border-bottom: 2px solid rgba(0,0,0,0.1); 
"> 
     <li style=" 
    float: left; 
    margin: 0 15px; 
">home</li> 
     <li style=" 
    float: left; 
    margin: 0 15px; 
">resume</li> 
     <li style=" 
    float: left; 
    margin: 0 15px; 
">media</li><li style=" 
    float: left; 
    margin: 0 15px; 
">studio</li> 
     <li style=" 
    float: left; 
    margin: 0 15px; 
">contact</li> 
    </ul> 
</div> 

Надеюсь, что это поможет, и любой вопрос просто спросите!