Элемент SSI растягивается за пределы ширины страницы

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

если вы посмотрите на мой код, то идентификатор #menu является проблемой, так как он плавно корректно (float:right;), но кажется, что ширина переопределяется чем-то.... и я не могу выяснить, что переопределяет его..... я проверил все свойства, которые влияют на #menu, но ничто не влияет на это...

вот веб-страница, где это ясно: http://unifiedforunifat.com/redesign/homepage.html

Вот CSS для домашней страницы, где вставляется меню:

body{
font-family: "Trebuchet MS", Helvetica, sans-serif;
margin: 0;
padding: 0;
padding-top: 10px;
}

html{
height: 100%;
}   

#wrapper{
width: 900px;
min-height: 100%;
height: auto;
margin: 0 auto -4em;
}

#header{
position: relative;
top: 0;
left: 0;
margin-bottom: 1px;
}

вот соответствующий HTML:

<body>
<div id="wrapper">
<div id="header">
<!--#include virtual="/menus/menu.html" -->
</div>

вот CSS для страницы меню:

#menu-wrapper{
position: relative;
width: 900px;
margin: 0 auto;
height: 140px;
}

#logo{
background:url('http://www.unifiedforuganda.com/resources/u4ulogo.jpg') no-repeat;
height: 108px;
width: 200px;
position: relative;
top: 3px;
background-position: 0 0;
float: left;
}

#logo span{
    position: absolute;
    top:0; left:0; bottom:0; right:0;
    background:url('file:///Volumes/Despotos/Users/nojohnny101/Documents/Dropbox/Unified%20for%20UNIFAT/website/resources/u4ulogo.jpg') no-repeat;
    background-position: -200px 0;
}

#logo:hover span{
    opacity: 1;
}


 .social{
position: relative;
margin: 50px 0 0 0;
width: 136px;
float: right;
overflow: hidden;
display: block;
}
#menu{
position: relative;
top: 0;
right: 0;
list-style: none;
display: block;
overflow: hidden;
width: 100%;
margin-top: 0;
padding-top: 4px;
border-top: 1px solid black;
float: right;
}

тогда вот HTML для страницы меню:

<div id="menu-wrapper">
<div class="menu-header">
    <a href="http://unifiedforunifat.com/redesign/homepage.html" id="logo" class="imglink"><span></span></a>
</div>
<div class="social">
    <a href="https://www.facebook.com/UnifiedforUNIFAT" id="facebook" target="_blank"><span></span></a>
    <a href="https://twitter.com/unified4unifat" id="twitter" target="_blank"><span></span></a>
    <a href="http://unifiedforunifat.wordpress.com/" id="wordpress" target="_blank"><span></span></a>
    <a href="https://vimeo.com/u4u" id="vimeo" target="_blank"><span></span></a>

</div>
<div>
    <ul id="menu">
        <li class="active"><a href="#">DONATE</a></li>
        <li class="active"><a href="#">ABOUT US</a></li>
        <li class="active"><a href="#">MEDIA</a></li>
        <li class="active"><a href="#">US MOVEMENT</a></li>
        <li class="active"><a href="http://unifiedforunifat.com/redesign/ugandaprograms.html">UGANDA PROGRAMS</a></li>
    </ul>
</div>

любая помощь будет по достоинству оценена!

Источник

1 ответ

Решение

Так что я нашел ответ... то, что я закончил, положил переполнение: скрытый; свойство в идентификаторе #menu-wrapper.... я не знаю, полностью ли я понимаю, почему это помогло скрыть дополнительную ширину слева от страницы, даже если была указана жесткая ширина (900 пикселей), а граница на самом деле применяется к идентификатору #menu, а не к идентификатору #menu-wrapper.....

но проблема.... спасибо @MrLister

Источник
Другие вопросы по тегам