Задачка верстальщикам

5330 сообщений

#14 лет назад

Не ради работы, а ради забавы.

Решить без таблиц.

Должна быть полноценная резина.

570 сообщений

#14 лет назад

Не знаю, то или не то, но посмотри здесь:
ссылка

2817 сообщений

#14 лет назад

С float и position резина получает всегда, без таблиц.

* будет время свободное - позабавляюсь хД

87 сообщений

#14 лет назад

Тут хитро получается, минимальная ширина страницы выходит 300рх, и тогда средний блок исчезает(ширина должна стать 0, значит процентами ширину блока задать не получится). Если рассмотреть средний блок как некий декоративный элемент, контент которого не ужимается при сжатии страницы по ширине, а накрывается левым и правым блоком - то всё можно реализовать только средствами css. А так думаю без яваскрипт тут не получится.

1807 сообщений

#14 лет назад

Делается легко, но кодить влом... В голове решение есть, печатать неохота.

5330 сообщений

#14 лет назад

Цитата ("segoddnja"):

Тут хитро получается, минимальная ширина страницы выходит 300рх, и тогда средний блок исчезает(ширина должна стать 0, значит процентами ширину блока задать не получится).

Допустим минимальная ширина все же от 640px.
Плюшки тут в другом.

2989 сообщений

#14 лет назад

А в чем, собственно, проблема?

87 сообщений

#14 лет назад

Цитата ("ArtPro"):

Цитата ("segoddnja"):
Тут хитро получается, минимальная ширина страницы выходит 300рх, и тогда средний блок исчезает(ширина должна стать 0, значит процентами ширину блока задать не получится).

Допустим минимальная ширина все же от 640px.
Плюшки тут в другом.

Так согласно картинке минимальная ширина получается 150+0+150, то есть 300рх. И кстати по ссылке, что на скрине, как раз выложен вариант с яваскриптом.

А вообще интересно было бы глянуть как здесь можно без скрипта обойтись(если можно).
upd. В примере кстати глюк есть, когда ширина становится менее 300рх правый блок накрывает левый. Как раз надо задать свойство min-width:300px блоку #header, тогда будет всё нормально.

584 сообщения

#14 лет назад

Я бы делал как-то так:

<!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></title>

</head>


<body style="min-width:300px;">

<div style="background-color:red; width:100%; height:50px;">

<div style="background-color:blue; width:60%; height:50px; float:right;">

    <div style="background-color:black; width:20%; height:50px; float:left;">


    </div>

</div>

</div>

</body>

</html>

или типа того.. Ну, а вообще, задача сродни: А слабо проехаться на велосипеде, сняв один носок, зимой в -10, ковыряясь в носу левой рукой

Можно сделать, только зачем?

52 сообщения

#14 лет назад

Цитата ("SField"):

Я бы делал как-то так:
<!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></title>

</head>


<body style="min-width:300px;">

<div style="background-color:red; width:100%; height:50px;">

<div style="background-color:blue; width:60%; height:50px; float:right;">

    <div style="background-color:black; width:20%; height:50px; float:left;">


    </div>

</div>

</div>

</body>

</html>
или типа того.. Ну, а вообще, задача сродни: А слабо проехаться на велосипеде, сняв один носок, зимой в -10, ковыряясь в носу левой рукой Можно сделать, только зачем?

_height: 300px; - чтобы и в ie работало

1807 сообщений

#14 лет назад

mishustin_s,

//height: 300px - для ие7 и ие6
height/*\**/: 300px\9 - для ие8

_height: 300px - 8й ослик не поймет, если нормально прописан доктайп (такой хак 8й понимает только в quirks mode)

3460 сообщений

#14 лет назад

Цитата ("nehovaysyatopol"):

_height: 300px - 8й ослик не поймет

Седьмой тоже не поймет. Только IE6.

Цитата ("nehovaysyatopol"):

//height: 300px - для ие7 и ие6

*height:300px - тоже работает в IE 6,7

1807 сообщений

#14 лет назад

Цитата ("MrWolf"):

Цитата (nehovaysyatopol):
_height: 300px - 8й ослик не поймет

Седьмой тоже не поймет. Только IE6.

Кстати да, уточнение правильное.
В таком случае, если речь идет только о ИЕ6, лучше юзать
*html height: 300px;
Чтобы исключить возможное срабатывание в ИЕ8. Мало ли у кого там какой режим включен...

Цитата ("MrWolf"):

Цитата (nehovaysyatopol):
//height: 300px - для ие7 и ие6

*height:300px - тоже работает в IE 6,7

Да, правильно... Но я привык к двойному слешу.

87 сообщений

#14 лет назад

Что то вы совсем не в тему пишите.

Расскажите лучше, как решить всё таки задачку без помощи js.

1807 сообщений

#14 лет назад

segoddnja, ненене... Там думать надо, а тут - нет, можно умничать и всё

... Не мешайте, я умничаю!... ггг

6863 сообщения

#14 лет назад

Это по теме топика!

 Усовершенствованный код несколькими постами ниже

Нормально работает в хроме при обычных разрешениях. При очень маленьких и очень больших - средний блок съезжает от середины. Тут надо подумать о его центрировании, а меня муж спать зовет

Еще в задаче не сказано, при каком разрешении должно достигаться макс-видз среднего блока.

5330 сообщений

#14 лет назад

Цитата ("floppox"):

Еще в задаче не сказано, при каком разрешении должно достигаться макс-видз среднего блока.

Ширина общая от 640px

6863 сообщения

#14 лет назад

Цитата ("ArtPro"):

Ширина общая от 640px

Я не поняла этого выражения

Имеется в виду, что меньшую ширину брать не нужно? Это понятно.
В условии сказано: center {max-width:200px}
При какой ширине экрана должно быть width:200px а при какой меньше?
Если рассматривать, что при 640 ширина среднего блока 200пкс а меньшие поддерживать не надо, то решение на порядок упрощается

Но это совсем не интересно.

Скажите, задача имеет отношение к реальности, или это абстрактный пример?

6863 сообщения

#14 лет назад

Вот полное решение. Работает при ширине окна от 348пкс и больше.
Величины можно подгонять на любой вкус.
кстати, ограничение мин-видз: 150пкс играет роль только при ширине меньше 500

<body style="margin:0;padding:0; min-width:348px">

<div style="background:#ffd; height:600px; width:50%; float:left;   ">

	<div  style="background:#fcc; height:600px; width:16%; max-width:100px; float:right;"></div>

	<div  style="overflow:hidden">

	ТУТ КОНТЕНТ

	</div>

</div>

<div style="background:#fdf;  height:600px; width:50%; float:right ;">

	<div  style="background:#fcc; height:600px; width:16%; max-width:100px; float:left;"></div>

	<div  style="overflow:hidden">

	ТУТ КОНТЕНТ

	</div>

</div>

<div style="border:1px dashed aqua; height:600px; width:8%; max-width:100px; position:absolute; right:50%; top:0; overflow:visible">

	<div style="border:1px solid blue; height:600px; width:200%; max-width:200px;  overflow:hidden">

	ТУТ КОНТЕНТ

	</div>

</div>

</body>

6863 сообщения

#14 лет назад

ArtPro, написали бы хоть, годиться - не годится.
Где мои шумные аплодисменты? (с)

1 2

Последняя