CSS позиционирование вопрос

Question

Хорошо, я сейчас работаю над этим сайтом, http://www.katiesamsonlaxfest.com/preview.html. Я хотел бы добавить контактную информацию в нижнем левом углу страницы (под областью содержимого, слева от нижнего колонтитула фон). Я также хочу, чтобы навигация нижнего колонтитула была в центре. Есть предложения?

Answer 1

Попробуйте это:

<div id="footer">
  <div id="left_footer">
    some content
  </div>
  <ul>
        <li><a href="http://www.katiesamsonlaxfest.com/index.html">Home</a></li> 
        <li><a href="">The Event</a></li> 
        <li><a href="http://www.katiesamsonlaxfest.com/design.html"> The Cause </a></li> 
        <li><a href=""> The Teams </a></li> 
        <li><a href=""> To Donate </a></li> 
        <li><a href=""> The Sponsors </a></li>
 </ul>
 <p> Copyright 2010, The Katie Samson Foundation</p>
</div>

Я установил нижний колонтитул как относительный, а затем добавленный div, left_footer, чтобы он был абсолютным, оставил 0px и на несколько пикселей вверх.

#footer
{
    position: relative;
}
#left_footer
{
    position: absolute;
    left: 0px;
    top: 28px;
}

Хорошо выглядит в Firefox и IE8.

Answer 2

Самый простой способ, учитывая ваш макет, может заключаться в позиционировании вещей с относительным позиционированием. IE - в вашем div нижнего колонтитула укажите еще 2 div. Сделайте одну ширину 20%, а вторая ширину 80%. Поместите текущий нижний колонтитул в div 2, выровняйте текст по левому краю, затем корректируйте проценты, пока все не выстроится в линию.

Answer 3

Вот что я только что придумал, используя JSBin: http://jsbin.com/exogi/edit

Кажется, делает именно то, что вы хотите, плавает, и не меняет центрирование текста вашего нижнего колонтитула. Важно отметить, что поля на #footer равны 0 для вверх и вниз (можно изменить), а слева и справа равны ширине #contact-info. В большинстве браузеров (я думаю, что IE6 и 7 не нравятся) это должно работать довольно хорошо.