Создание простого дизайна

@Sequd · Регистрация: 03.11.2009

Студворк — интернет-сервис помощи студентам

как сделать следующий дизайн... интересует как разместить шаблон по центру и как выровнить <div> Menu и Content... что бы они находились паралельно друг другу и на одной высоте... а то как не стараюсь, получаются один ниже другова!!! и еще, как сделать если колонок будет 3?

@Dimedrol · 30.05.2010, 19:56

HTML5
1
2
3
4
5
6
7
8
<div id="object">
<div id="first_contejner">
menu
</div>
<div id="second_contejner">
content
</div>
</div>

css

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
div#object{
width:1000px;
margin:auto; /*center*/
}
div#first_contejner {
width:200px;
float:left;
}
div#second_contejner {
width:700px;
float:right;
}

Добавлено через 4 минуты

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="object">
<div id="first_contejner">
menu
</div>
<div id="second_contejner">
content
</div>
<div id="third_contejner">
text
</div>
</div>

css

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div#object{
width:1000px;
margin:auto; /*center*/
}
div#first_contejner {
width:200px;
float:left;
}
div#second_contejner {
width:600px;
float:left;
}
div#third_contejner {
width:100px;
float:right;
}

@Sequd · 30.05.2010, 22:19 **[ТС]**

уже лучше, но опять проблема)
контейнер в котором они находятся, не растягивается в низ в месте с ними, как будто они не в нем( видно это из за float... что делать?

@Mischanja · 30.05.2010, 22:42

кроме дивов можно еще Фреймами сделать

@Dimedrol · 30.05.2010, 22:57

Сообщение от Sequd

контейнер в котором они находятся, не растягивается в низ в месте с ними, как будто они не в нем( видно это из за float... что делать?

Вы хотите, чтобы высота first_contejner и second_contejner была одинаковой?
Тогда надо использовать JavaScript

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

JavaScript
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
function setHeightById() {
    var n = setHeightById.arguments.length;
    var args = setHeightById.arguments;
    
    if(n>1)
    switch (isInteger(args[0]))
    {
         case true:
            for(i=1; i < n; i++) {  
                element = document.getElementById(args[i]);         
                element.style.height = parseInt(args[0]) + "px";
            }   
            break;
         case false:
            var element;
            var maxHeight = 0;
            /* */
            for(i=0; i < n; i++) {              
                element = document.getElementById(args[i]);
                //alert(args[i]);
                if(maxHeight < parseInt(getElementHeight(element))) maxHeight = parseInt(getElementHeight(element));
            }   
            for(i=0; i < n; i++) {  
                element = document.getElementById(args[i]);         
                element.style.height = maxHeight + "px";
            }            
    }
}
function isInteger(s) { // String s
    var i;
    for (i = 0; i < s.length; i++) {
        var c = s.charAt(i);
        if (!((c >= "0") && (c <= "9"))) return false;
    }
    return true;
}
 
function getElementHeight(element) {    
    if(element.clientHeight) {
        return element.clientHeight;
    }
    else {
        if(element.offsetHeight) {
            return element.offsetHeight;
        }
    }
    return 10;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="object">
<div id="first_contejner">
menu
</div>
<div id="second_contejner">
content
</div>
</div>
<script>
    setHeightById('first_contejner', 'second_contejner');
</script>

@etalord · 31.05.2010, 00:54

http://www.dynamicdrive.com/style/layouts/ там в менюшке слева выбери интересующий тебя вариант

Добавлено через 49 секунд
http://www.dynamicdrive.com/st... xed-fixed/ вот этот вроде твой случай

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@Sequd 85 / 84 / 8 Регистрация: 03.11.2009 Сообщений: 723

	Создание простого дизайна 30.05.2010, 19:14. Показов 1874. Ответов 5 Метки нет (Все метки) как сделать следующий дизайн... интересует как разместить шаблон по центру и как выровнить <div> Menu и Content... что бы они находились паралельно друг другу и на одной высоте... а то как не стараюсь, получаются один ниже другова!!! и еще, как сделать если колонок будет 3? Миниатюры 0

@Sequd 85 / 84 / 8 Регистрация: 03.11.2009 Сообщений: 723
	30.05.2010, 22:19 [ТС]
	уже лучше, но опять проблема) контейнер в котором они находятся, не растягивается в низ в месте с ними, как будто они не в нем( видно это из за float... что делать? 0

@Mischanja Всегда не хватает времени 119 / 119 / 20 Регистрация: 15.10.2009 Сообщений: 493
	30.05.2010, 22:42
	кроме дивов можно еще Фреймами сделать 0

@etalord работяга 368 / 368 / 52 Регистрация: 23.05.2010 Сообщений: 947
	31.05.2010, 00:54
	http://www.dynamicdrive.com/style/layouts/ там в менюшке слева выбери интересующий тебя вариант Добавлено через 49 секунд http://www.dynamicdrive.com/st... xed-fixed/ вот этот вроде твой случай 1