Здравствуйте Гость ( Вход | Регистрация )

Создать форум бесплатно: ixbb.ru :: Календарь на Апрель 2024 года: calendar2008.ru/2024/aprel/

Форум aceweb.ru -> Web программирование -> Все об html

Страницы: (3) 1 [2] 3 ( Перейти к первому непрочитанному сообщению )

3 дива

Подписка на тему | Сообщить другу | Версия для печати

Матроскин

Отправлено: Jan 21 2011, 02:05 PM

Генерал

Группа: Members
Сообщений: 245
Пользователь №: 2581
Регистрация:
9-June 09

QUOTE (gregst @ Jan 21 2011, 01:47 PM)

ну в твоем примере вообще ширина жестко не указана

А это что?

QUOTE

... ширина центрального блока, который с фиксированной шириной...

и далее по тексту еще трижды упоминается о фиксированности (жестко заданной ширине) центрального блока.
И вообще, в каком моем примере? Я вообще не написал ни одной строки кода

- я просто объяснил почему не обойтись одним float: left. Чтобы не кидаться в абстракции приведу конкретный пример - скорее всего ТС именно для реализации подобного примера и задал вопрос.
Необходимо сверстать шапку сайта, у которой есть 3 блока:
1) центральный с фиксированной шириной 1024px;
2 и 3) 2 боковых, которые займут все оставшееся свободное пространство, т.е., будут резиновыми и при разрешении, допустим 1440px, ширина каждого из них составит 208px
Если же разрешение меньше 1024px, то должна появиться полоса прокрутки, ширина центрального блока останется 1024px, а боковые блоки не должны съезжать, а должны остаться в одной строке с центральным. Поэтому повторюсь, что для реализации этой задачи одного float: left не достаточно.

--------------------

Запчасти для мобильных телефонов
Как создать свой сайт

gregst	Отправлено: Jan 21 2011, 02:23 PM
Команда ЭйсВэб Группа: Super moderator Сообщений: 1012 Пользователь №: 1169 Регистрация: 28-September 07	сорри, не посмотрел кто писал про дивы и ширину в процентах =) ну то что недостаточно одного float:left я согласен. просто я так понял что вопрос был не только в том, что бы центральный блок был 1024 пикселя но и в том, как сделать 3 дива в столбик

SilverDEN	Отправлено: Jan 21 2011, 02:37 PM
Команда ЭйсВэб Группа: Super moderator Сообщений: 528 Пользователь №: 196 Регистрация: 27-December 06	надо эти 3 div засунуть в еще 1 div c шириной 100% -------------------- Мало знать как, нужно знать почему...

Матроскин

Отправлено: Jan 21 2011, 03:12 PM

Генерал

Группа: Members
Сообщений: 245
Пользователь №: 2581
Регистрация:
9-June 09

QUOTE (SilverDEN @ Jan 21 2011, 02:37 PM)

надо эти 3 div засунуть в еще 1 div c шириной 100%

Логично

И кроме этого нужно еще прописать кучу свойств для оставшихся 3 дивов

Мне кажется, что таблицами эта задача решается проще всего:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello!</title>
<style type="text/css">
*{margin:0; padding:0;}
.center{
min-width:1024px;
width:1024px;
width: expression((documentElement.clientWidth||document.body.clientWidth)<1024?'1024px':'');
}
#wrap{
/*Для IE, не понимающего свойство min-width*/
width: expression((documentElement.clientWidth||document.body.clientWidth)<1024?'1024px':'');
}
</style>
</head>

<body>

<table id="wrap" width="100%" border="1">
<tr>
<td>Left</td>
<td class="center">Center</td>
<td>Right</td>
</tr>
</table>

</body>

</html>

--------------------

Запчасти для мобильных телефонов
Как создать свой сайт

dudeonthehorse

Отправлено: Jan 21 2011, 04:14 PM

Команда ЭйсВэб

Группа: Super moderator
Сообщений: 763
Пользователь №: 2933
Регистрация:
26-October 09

на дивах можно сделать все

кстати можно более подробно описать задачу? что в итоге должно получиться? так интереснее дилему решать.
А вообще на jQuery это делается на раз.

CODE

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div.left').css('width',$(window).width() - $('div.left').width()/2 + 'px');
$('div.right').css('width',$(window).width() - $('div.left').width()/2 + 'px')
});
$(window).resize(function() {
$('div.left').css('width',$(window).width() - $('div.left').width()/2 + 'px');
$('div.right').css('width',$(window).width() - $('div.left').width()/2 + 'px')
});
</script>

<style>
div.wrapper{min-width:1024px;}
div.left{float:left;}
div.center{width:1024px; margin:0 auto;}
div.right{float:right;}
</style>

</head>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>

я не тестировал, но должно работать. так же я не учитывал факт того, что левый и правый див должны совпадать по высоте с главным, но это можно дописать

gregst	Отправлено: Jan 21 2011, 04:17 PM
Команда ЭйсВэб Группа: Super moderator Сообщений: 1012 Пользователь №: 1169 Регистрация: 28-September 07	а мне каажется что не надо думать о тех, у кого экран уже 1024 пикселей

dudeonthehorse	Отправлено: Jan 21 2011, 04:20 PM
Команда ЭйсВэб Группа: Super moderator Сообщений: 763 Пользователь №: 2933 Регистрация: 26-October 09	я разобрал задачку по примеру. а вообще сейчас как никогда надо думать о таких юзерах. планшеты/коммуникаторы/нетбуки набирают обороты. все зависит от целевой аудитории сайта.

Матроскин

Отправлено: Jan 21 2011, 04:24 PM

Генерал

Группа: Members
Сообщений: 245
Пользователь №: 2581
Регистрация:
9-June 09

QUOTE (dudeonthehorse @ Jan 21 2011, 04:14 PM)

я не тестировал, но должно работать.

Не работает...

--------------------

Запчасти для мобильных телефонов
Как создать свой сайт

dudeonthehorse

Отправлено: Jan 21 2011, 04:44 PM

Команда ЭйсВэб

Группа: Super moderator
Сообщений: 763
Пользователь №: 2933
Регистрация:
26-October 09

CODE

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div.left').css('width',($(window).width() - $('div.center').width())/2 + 'px');
$('div.right').css('width',($(window).width() - $('div.center').width())/2 + 'px');
});
$(window).resize(function() {
$('div.left').css('width',($(window).width() - $('div.center').width())/2 + 'px');
$('div.right').css('width',($(window).width() - $('div.center').width())/2 + 'px');
});
</script>

<style>
div.wrapper{min-width:1024px;}
div.left{float:left; background:#ccc;}
div.center{width:1024px; margin:0 auto; background:#666;}
div.right{float:right; background:#999;}
</style>

</head>
<body>
<div class="wrapper">
<div class="left">dfdf</div>
<div class="right">dfdf</div>
<div class="center">dfdf</div>
</div>
</body>
</html>

Матроскин	Отправлено: Jan 21 2011, 04:51 PM
Генерал Группа: Members Сообщений: 245 Пользователь №: 2581 Регистрация: 9-June 09	В лисе теперь все ок ... В 7-ом ослике плывет. -------------------- Запчасти для мобильных телефонов Как создать свой сайт

« Предыдущая тема | Все об html | Следующая тема »

Страницы: (3) 1 [2] 3

[ Script Execution time: 0.0254 ] [ 10 queries used ] [ GZIP выключен ]