Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,129

Резиновое меню

03.11.2014, 20:48. Показов 919. Ответов 6
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Всем доброго времени суток. Есть код :
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="content-type" content="charset=utf-8" />
       <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body onLoad="JSClock()">
    <div class="content">
        <div class="blocks">
                <div class="leftcol" >
                    <div class="left-menu"> 
                        <div class="p3">
                            <form>
                            <input class="round"/> </br>
                            <input class="round" />
                            </form>
                        </div>
                    </div>
                </div>          
                <div class="right-part" >
                    <div class='right-cell'> 
                        <div style='min-width:500px;' class='border-content-cell'>     
                            <div class='p5'>
                                <div class='round'>
                                    <center>
                                        <H4 class='top-denatation'><b>Текст</b></H4>
                                    </center>
                                <div align='left' class='p3'>
                                    asf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjfasf ashk  aks fak sjf
                                        </br>
                                    <p align='right' class='p3'>
                                        Добавлено:<Font color=#0000CC>2014-08-04</font>
                                    </p>
                                </div>  
                            </div>
                        </div>
                    </div>
            </div>
        </div>
        </div>
        </div>
</body>
</html>
И стили
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
   .leftcol{
     width:25%;
      float:left;
        min-width:auto;
    }   
    .right-part{
          width:75%;
      float:left;
        min-width:auto;
    }
 
    .left-menu {
    float:left;
    border: 5px solid #7B56F1;
    border-width: 5px;
    border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    }   
 
    .p3{
    padding:3px;
    }  
  .round{
        border-radius:10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        background-color:#ADFF2F;
        overflow: hidden;
    }
    
   .blocks{
    margin-right:2px;
   }
   .right-cell {
        float:right;
        width: 100%;    
        }
        
    .border-content-cell {
    float:left;
    width: 100% ;   
    border:solid #7B56F1; 
    border-radius: 0px 10px 10px 0px;
    border-width: 5px;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-radius:0px 10px 10px 0px; 
    }
Суть проблемы такова: хочу разместить эти два блока рядом, но не по 25 и 75 процентов, а рядом, почти вплотную(да и вплотную тоже подойдет). Не могу реализовать это так как обязательно наличие форм в левой колонне. Скажите как решить эту проблему? Вариант с конкретным кол-вом пикселей не совсем подходит, так как при масштабировании один блок почему-то уезжает под другой. Заранее спасибо!
ЗЫ: Извиняюсь за огромное кол-во блоков.

Добавлено через 9 часов 9 минут
Может задать левому блоку min-width?

Добавлено через 18 часов 42 минуты
Предложите хоть что-нибудь, а то мне уже не весело после больше чем 3/4 сотни просмотров ,не получить ни одного варианта
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
03.11.2014, 20:48
Ответы с готовыми решениями:

Резиновое меню
Сейчас меню на ширину всего врапера нарисовано. Нужно сверстать резиновое меню, чтобы при уменьшении размера экрана сужалась ширина...

Резиновое меню
Здравствуйте Сверстал меню под резиновый контент, но не как не дойдет как сделать чтобы можно было наводить на всплювающее меню ...

Резиновое меню
Уважаемые форумчане, прошу помочь! Необходимо резиновое меню для сайта, чтобы растягивалось на всю ширину блока, к сожалению, никак не...

6
 Аватар для PeterLS
71 / 69 / 22
Регистрация: 24.11.2012
Сообщений: 502
Записей в блоге: 1
03.11.2014, 21:16
Вноси исправления:
CSS
1
2
3
4
5
6
7
.left-menu { width: 96%; }
 
.p3 { width: 97%; }
 
form { width: 100%; }
 
.round { width: 100%; }
Добавлено через 37 секунд
При сильном масштабировании немного съезжает, но вполне допустимо.
1
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,129
04.11.2014, 15:47  [ТС]
нет, не получается, форма "обрубается" когда находится в блоке
0
 Аватар для PeterLS
71 / 69 / 22
Регистрация: 24.11.2012
Сообщений: 502
Записей в блоге: 1
04.11.2014, 15:51
paskalnikita, при каком масштабе? скинь скрин. У меня все работало.
1
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,129
04.11.2014, 15:53  [ТС]
уже все норм, просто вставил size в инпут , а так при 100% "обрубается" уже все номр
0
04.11.2014, 16:10

Не по теме:

paskalnikita, с тебя заслуженный сенк!

0
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,129
04.11.2014, 16:21  [ТС]
вроде кликал, но чет снова кликнул на том же посте)
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
04.11.2014, 16:21
Помогаю со студенческими работами здесь

Резиновое меню + картинка слева
Всем привет)) Не могу никак разобраться. Имеется резиновое меню: &lt;ul class=&quot;menu_top&quot;&gt; &lt;li&gt; ...

Резиновое меню с вытягиванием пунктов по ширине
Прикрепил как должно быть. Поясню основные моменты. Меню имеет min-width 1000px и max-width 1280, должно крайними элементами всегда...

Резиновое горизонтальное меню на 100% ширины
Как меню растянуть на 100%? Количество пунктов будет меняться, поэтому нужно сделать так, чтобы не приходилось каждый раз в CSS менять...

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

Как создать горизонтальное резиновое меню?
Здравствуйте! Подскажите пожалуйста как создать горизонтальное резиновое меню на css? Имеется следующий код: Нужно чтобы при...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Новые блоги и статьи
Отправка уведомления на почту при изменении наименования справочника
Maks 24.03.2026
Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .
модель ЗдравоСохранения 5. Меньше увольнений- больше дохода!
anaschu 24.03.2026
Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .
Midnight Chicago Blues
kumehtar 24.03.2026
Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .
SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++
8Observer8 24.03.2026
Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip
Жизнь в неопределённости
kumehtar 23.03.2026
Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .
Модель здравоСохранения: работники работают быстрее после её введения.
anaschu 23.03.2026
geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .
Контроль уникальности заводского номера
Maks 23.03.2026
Алгоритм контроля уникальности заводского (или серийного) номера на примере нетипового документа выдачи шин для спецтехники с табличной частью, разработанного в конфигурации КА2. Данные берутся из. . .
Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения
anaschu 22.03.2026
e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru