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

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

Остання