Решение макета панели меню

У меня возникли проблемы с созданием правильного макета панели меню.Решение макета панели меню

Моя строка меню разделено на три части, которые являются:

слева (логотип), центр (меню), право (информация о регистрации)

Есть также два различных меню , один для администратора (несколько дополнительных кнопок - ширина 701px) и обычное пользовательское меню (ширина 447px).

Ширина всего меню всего 100%.

Теперь мне нужна помощь с настройкой атрибута width для каждого из разделов.

Если я установил фиксированную ширину (px) в центр (меню), я не могу определить правильную ширину процента для других двух разделов. Я также не могу установить фиксированные значения ширины для других разделов из-за меньшего разрешения экрана (меню остается широким).

Если я установил процентную ширину в центр (меню), меню может сломаться при меньших разрешениях экрана.

Итак, что является лучшим решением?

HTML:

<body> 
    <div id="main"> 
     <div id="left"></div> 
     <div id="center"></div> 
     <div id="right"></div> 
    </div> 
</body>

CSS:

#main { 
    width:100%; 
    height:77px; 
    background-color:#373737; 
    } 

    #left, 
    #center,  
    #right { 
     height:77px; 
     } 

    #left { 
     float:left; 
     } /* width? % or px*/ 

    #center { 
     display:inline-block; 
     } /* width? % or px*/ 

    #right { 
     float:right; 
     } /* width? % or px*/

Строка меню администратора: enter image description here

Обычный бар Меню пользователя: enter image description here

источник

2012-05-24 John

Вы можете попробовать этот CSS и настроить ширину каждого, если вы хотите в процентах к сумме до 100% от основной DIV:

#main { 

    width:100%; 
    height:77px; 
    background-color:#373737; 
    padding:5px; 
} 

#left, #center, #right {height:77px;} 

#left {float:left;background-color:black;width:25%} /*width? % or px*/ 
#center {display:inline-block;background-color:blue;width:50%; float:left}/* width? % or px*/ 
#right {float:left;background-color:yellow;width:25%} /*width? % or px*/

источник

2012-05-24 13:38:22 Nation

Я думаю, что вы, вероятно, придется использовать JavaScript для изменения размера элементов по мере необходимости. Существует несколько решений, но ни одна из них не позволяет смешивать динамическую и статическую ширину.

Поплавки отсутствуют, потому что они будут прыгать, когда вы уменьшаете размер экрана. Если вы не хотите, чтобы они падали ниже других разделов, когда он слишком мал.

Просто подумайте о каждом div как отдельном элементе, а не о совместной работе. Я настоятельно рекомендую не использовать float в этой ситуации, если ваша цель кросс-браузерная совместимость.

Удачи.)

источник

2012-05-24 14:14:40

Решение макета панели меню

ответ

Смежные вопросы