2010-02-02 2 views
0

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

+0

Возможно, я неправильно понимаю, но ваш запрос противоречив: добавление информации слева от навигатора компенсировало бы навигацию, не делая ее центрированной. – sthg

+0

Это точно, мне нужно обходное решение. Я хочу, чтобы информация о контакте была оставлена ​​слева, а nav осталась центрированной, мне нужно решение – Dan

ответ

1

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

+0

Да, я увижу, работает ли это, учитывая ситуацию, вероятно, нет пути для вложенности нескольких divs – Dan

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> 

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

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

Выглядит нормально в Firefox и IE8.

0

Вот что я только что пришел с использованием JSBin: http://jsbin.com/exogi/edit

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