С Новым годом! Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.83/40: Рейтинг темы: голосов - 40, средняя оценка - 4.83
4 / 4 / 1
Регистрация: 20.11.2010
Сообщений: 211
1

Размещение Div вертикально

24.03.2013, 16:51. Показов 7192. Ответов 7
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Добрый день!

У меня проблема с размещением div'ов. Она состоит в том, что у меня не получается разместить друг за другом, они размещаются друг под другом.

На рисунке скриншот проблемного фрагмента.
Миниатюры
Размещение Div вертикально  
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
24.03.2013, 16:51
Ответы с готовыми решениями:

Как поставить div по середине вертикально внутри другого div?
Заранее спасибо!! <!DOCTYPE html> <html> <head> <title>Best Promocodes</title>...

Размещение нескольких блоков div внутри другого блока div
Хочу сделать шапку веб-страницы. Прикреплю ниже небольшую схему того, как она будет выглядеть. Хочу...

2 div расположенных вертикально
Всем привет) Подскажите, как сделать так, чтобы div class="first" имел высоту 50px, а div...

Выставить div вертикально по центру
Подскажите, как выставить div вертикально по центру? Вроде прописал vertical-align: middle; но не...

7
17 / 17 / 3
Регистрация: 03.01.2010
Сообщений: 138
Записей в блоге: 2
24.03.2013, 17:08 2
привет напиши фрагмент HTML/CSS кода
0
Почетный модератор
Эксперт HTML/CSSЭксперт PHP
16844 / 6724 / 880
Регистрация: 12.06.2012
Сообщений: 19,967
24.03.2013, 17:25 3
пропишите для них
CSS
1
display:inline-block
1
4 / 4 / 1
Регистрация: 20.11.2010
Сообщений: 211
24.03.2013, 20:01  [ТС] 4
Technology, вот код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
 <div class="Navigaton">
        <ul class="listbox" id="menu">
            <li><a href="Default.aspx"><span>Пункт 1</span></a></li>
            <li><a href="#"><span>Пункт 2</span></a></li>
            <li><a href="#"><span>Пункт 2</span></a></li>
        </ul>
    </div>
    <div id="PageContent">
        <p>
            Content goes here!
        </p>
    </div>
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
#menu
{
    display: inline-block;
    border-color: #0000FF;
    margin-right: 15px;
    width: 250px;
    clear: both;
    display: block;
    overflow: hidden;
    background-color: White;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: #666 0px 0px 6px;
    -moz-box-shadow: #666 0px 0px 6px;
    box-shadow: #666 0px 0px 6px;
}
 
.Navigaton
{
    border-color: #0000FF;
    width: 250px;
    margin-top: 30px;
}
        
ul#menu 
{
    margin:0;
    padding:0;
    list-style: none;
}
 
#PageContent 
{
    display: inline-block;
    margin: 10px 0px 0px 265px;
    padding: 5px;
    width: auto;
    height: 98px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: #666 0px 0px 6px;
    -moz-box-shadow: #666 0px 0px 6px;
    box-shadow: #666 0px 0px 6px;
}
Добавлено через 28 минут
KOPOJI, это не помогло
0
17 / 17 / 3
Регистрация: 03.01.2010
Сообщений: 138
Записей в блоге: 2
24.03.2013, 20:10 5
#PageContent задай ширину в пикселях или процентах (если резиновый), перед тем посчитай общую ширину шаблона все margin, padding, рамки и эти тени вот и задавай то что остаётса, тогда он запрыгнет
1
4 / 4 / 1
Регистрация: 20.11.2010
Сообщений: 211
24.03.2013, 20:53  [ТС] 6
Technology, как мне отмерить ширину в процентах так, чтобы у меня .Navigaton не пострадал?

перед тем посчитай общую ширину шаблона все margin, padding, рамки и эти тени вот и задавай то что остаётса, тогда он запрыгнет
вот тут не совсем понял. Перефразируй пожалуйста)
0
17 / 17 / 3
Регистрация: 03.01.2010
Сообщений: 138
Записей в блоге: 2
26.03.2013, 00:54 7
почиму ты задал автоматическую ширину? напиши полный код HTML/CSS всей страницы
0
4 / 4 / 1
Регистрация: 20.11.2010
Сообщений: 211
26.03.2013, 21:15  [ТС] 8
Technology, у меня все вышло. Все запрыгнуло на свои места. Просто назначил float: left для списка :3
0
26.03.2013, 21:15
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
26.03.2013, 21:15
Помогаю со студенческими работами здесь

Размещение div
Добрый день! У меня возникла следующая проблема с размещением div внутри страницы. Все дело в...

Размещение изображения в div
Доброго времени суток. Подскажите как можно подогнать размер изображения под div. вот пример. ...

Размещение div на странице
Доброго времени суток! Очень надеюсь на вашу помощь, у меня вот какая проблема, начала изучать...

интересное размещение div
доброго времени суток всем! есть два DIVа: &lt;div style=&quot;background-color:#F00; width:250px;...


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

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Новые блоги и статьи
Книги и учебные ресурсы по C#
InfoMaster 08.01.2025
Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .
Что такое NullReferenceEx­­­ception и как исправить?
InfoMaster 08.01.2025
NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .
Что такое Null Pointer Exception (NPE) и как это исправить?
InfoMaster 08.01.2025
Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .
Русский язык в консоли C++
InfoMaster 08.01.2025
При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .
Telegram бот на C#
InfoMaster 08.01.2025
Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .
Использование GraphQL в Go (Golang)
InfoMaster 08.01.2025
Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .
Что лучше использовать при создании класса в Java: сеттеры или конструктор?
Alexander-7 08.01.2025
Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .
Как работать с GraphQL на TypeScript
InfoMaster 08.01.2025
Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .
Счётчик на базе сумматоров + регистров и генератора сигналов согласования.
Hrethgir 07.01.2025
Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .
Как перейти с Options API на Composition API в Vue.js
BasicMan 06.01.2025
Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .
Архитектура современных процессоров
inter-admin 06.01.2025
Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .
История создания реляционной модели баз данных, правила Кодда
Programming 06.01.2025
Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru