Хостинг в Украине: Верстка слоями и дивами, как сделать блоки - Хостинг в Украине

Перейти к содержимому

Привет, гость!

 
Регистрация! Забыли пароль?
 

  • (2 Страниц)
  • +
  • 1
  • 2
  • Вы не можете создать новую тему
  • Вы не можете ответить в тему

Верстка слоями и дивами, как сделать блоки Обсуждение проблем верстки слоями

#1 Пользователь офлайн   podlom 

  • Хостинг-профессионал
  • PipPip
  • Группа: Хостинг-Профессионал
  • Сообщений: 123
  • Регистрация: 01 марта 07

Иконки сообщения  Отправлено 06 декабря 2007 - 17:30

Делаю один сайтик. Возникла такая вот проблема: у меня должен быть список контентов с блоками одного формата: заголовок статьи, а под ним слева картинка к статье ограниченная по ширине и рядом с ней текстовое описание (фрагмент статьи) после чего разделительная полоса, а за ней еще один подобный блок. Таблицами верстать это не хочется. Я пока что сделал эти блоки так:
...
<div class="cont_list">
<h2><a href="?lang_id=1&content_id=90">Карай Тако Сарада - Салат из осьминога на остром соусе</a></h2>
<div class="cont_txt">
<img src="/i.php?width=200&temp_small_img_url=/files/9/Tako.jpg" alt="Карай Тако Сарада - Салат из осьминога на остром соусе">  
 Взять щупальце осьминога ближе к тонкому окончанию, нарезать ее кружочком толщиной в 1 см. В отдельной миске смешать пасту момидзи ороси, мирин, сок лайма (фрэш), чесночную пасту, чёрный перец крупного помола 0.1 гр. и адзиномото. Положить туда осьминога, лук резанец, бланшированные грибы эноки. Мариновать 10 мин. салат Фризе и ростки салата шизо выложить красиво на тарелку. При подаче сбрызнуть смесью кунжутного масла и оставшегося сока лайма.  Состав:1)Осьминог - 100 гр.2)Салатные ростки
<br><br><br><br><br><span><a href="?lang_id=1&content_id=90">Подробнее</a></span>
</div>
</div>
<hr>
...

с такой вот таблицей стилей:
...
.cont_list
{
	padding:0 10px 20px 5px;
	margin:5px 0 25px 0
}
.cont_list span a
{
	display:block;
	float:right;
	font:bold 10px Arial;
	color:#086BBA;
	background:#E8FBFF url('/i/mor.gif') right no-repeat;
	padding:3px 19px 3px 14px;
	margin:20px 0 1px 0;
	text-decoration:none
}
.cont_list h2 a
{
	font:14px Arial;
	color:#316698;
	text-decoration:none
}
.cont_txt
{
	padding:14px 0 0 0
}
.cont_txt img
{
	width:150px;
	float:left;
	padding:5px;
	margin:0 0 30px 0
}
...

Хочу избавиться от лишних "<br><br><br><br><br>", но при этом высокие картинки "налазят" на идущие ниже заголовки.
Может кто-то подскажет что нужно сделать, чтобы высокие картинки не "налазили" на заголовки ниже без использования таблиц?
0

#2 Пользователь офлайн   explicito 

  • Участник хостинг-жизни
  • Группа: Пользователь хостинга
  • Сообщений: 4
  • Регистрация: 06 декабря 07

Отправлено 06 декабря 2007 - 18:20

Вам нужно было оставить ссылку на страницу, где Вы это делаете, чтобы видно было проблему, моё лично мнение, делать вёрстку полностью в слоях, без табличного каркаса - "гемор", я люблю делать резиновый каркас из таблиц, а остальное всё уже в CSS
0

#3 Пользователь офлайн   podlom 

  • Хостинг-профессионал
  • PipPip
  • Группа: Хостинг-Профессионал
  • Сообщений: 123
  • Регистрация: 01 марта 07

Отправлено 06 декабря 2007 - 18:39

Просмотр сообщенияexplicito (6.12.2007, 18:20) писал:

Вам нужно было оставить ссылку на страницу, где Вы это делаете, чтобы видно было проблему, моё лично мнение, делать вёрстку полностью в слоях, без табличного каркаса - "гемор", я люблю делать резиновый каркас из таблиц, а остальное всё уже в CSS

Не проблема. Я могу дать ссылку на то место где сейчас находится описываемая мной ситуация, но пока в этом нету необходимости.
Проблему сейчас там не видно из-за добавленных мною пяти тегов <br>, которые временно решают проблему. И от которых я хотел бы избавиться (если это вообще возможно средствами блочной верстки).
Таблицами я умею верстать, но в этом проекте хочу от них отказаться (где это будет возможно).
Если я плохо описал ситуацию, то можно и ссылку дать.

Сообщение отредактировал podlom: 06 декабря 2007 - 18:40

0

#4 Пользователь офлайн   explicito 

  • Участник хостинг-жизни
  • Группа: Пользователь хостинга
  • Сообщений: 4
  • Регистрация: 06 декабря 07

Отправлено 06 декабря 2007 - 18:53

возможно тут проблема в уровне слоя, попробуйте указать для каждого слоя свойство z-index: номер уровня, чем больше номер, тем выше уровень
0

#5 Пользователь офлайн   podlom 

  • Хостинг-профессионал
  • PipPip
  • Группа: Хостинг-Профессионал
  • Сообщений: 123
  • Регистрация: 01 марта 07

Отправлено 07 декабря 2007 - 10:16

Просмотр сообщенияexplicito (6.12.2007, 18:53) писал:

возможно тут проблема в уровне слоя, попробуйте указать для каждого слоя свойство z-index: номер уровня, чем больше номер, тем выше уровень

Если бы я использовал технику абсолютного позиционирования, то я бы мог играться со свойством z-index, но в данном случае я его не использую.
...или свойством z-index можно в моей ситуации что-то сделать?
Ладно. Попробую, но для каждого нового блока мне прийдется его значение делать все большим и большим?!
0

#6 Пользователь офлайн   explicito 

  • Участник хостинг-жизни
  • Группа: Пользователь хостинга
  • Сообщений: 4
  • Регистрация: 06 декабря 07

Отправлено 07 декабря 2007 - 10:37

да, логично, согласно уровню вложенности
0

#7 Пользователь офлайн   podlom 

  • Хостинг-профессионал
  • PipPip
  • Группа: Хостинг-Профессионал
  • Сообщений: 123
  • Регистрация: 01 марта 07

Отправлено 07 декабря 2007 - 11:03

Просмотр сообщенияexplicito (7.12.2007, 10:37) писал:

да, логично, согласно уровню вложенности

...так блоки-то одноранговые. Они на одном уровне вложенности находятся.
Короче даю ссылку, чтобы было понятно: тестовая страница Morskoi-dom.
<div class="cont_list">
<h2><a href="?lang_id=1&content_id=91">Сякэ Сарада То Суппой Соусу – Салат из копчёного лосося в кисло-сладком соусе</a></h2>
<div class="cont_txt">
  Лосось нарезать жульеном, шампиньоны нашинковать полоской, лук шалот нашинковать полукольцами, болгарской перец нашинковать жульеном.<br />Овощи (кроме капусты Брокколи) слегка обжарить на оливковом масле. <br />Для приготовления соуса смешать все необходимые ингредиенты. <br />Лосось, овощи и соус смешать и дать замариноваться. <br />Салат можно хранить в холодильнике 72 ч. <br />При подаче блюда украсить отварным брокколи и крессалатом.<br /><br />Состав:<br />1)Копчёный Лосось - 50

<br><br><br><br><br><span><a href="?lang_id=1&content_id=91">Подробнее</a></span>
</div>
</div>
<hr>
<div class="cont_list">
<h2><a href="?lang_id=1&content_id=90">Карай Тако Сарада - Салат из осьминога на остром соусе</a></h2>
<div class="cont_txt">
<img src="/i.php?width=200&temp_small_img_url=/files/9/Tako.jpg" alt="Карай Тако Сарада - Салат из осьминога на остром соусе">  
 Взять щупальце осьминога ближе к тонкому окончанию, нарезать ее кружочком толщиной в 1 см. В отдельной миске смешать пасту момидзи ороси, мирин, сок лайма (фрэш), чесночную пасту, чёрный перец крупного помола 0.1 гр. и адзиномото. Положить туда осьминога, лук резанец, бланшированные грибы эноки. Мариновать 10 мин. салат Фризе и ростки салата шизо выложить красиво на тарелку. При подаче сбрызнуть смесью кунжутного масла и оставшегося сока лайма.  Состав:1)Осьминог - 100 гр.2)Салатные ростки
<br><br><br><br><br><span><a href="?lang_id=1&content_id=90">Подробнее</a></span>
</div>
</div>
<hr>
...

Повторюсь: главная задача у меня избавиться как-то от ненужных тего "<br><br><br><br><br>", которые исправляют налезающие высокие картинки на нижние заголовки.
0

#8 Пользователь офлайн   explicito 

  • Участник хостинг-жизни
  • Группа: Пользователь хостинга
  • Сообщений: 4
  • Регистрация: 06 декабря 07

Отправлено 07 декабря 2007 - 11:08

попробуйте сделать так:
добавьте стиль:

.separator { position: relative;
float: left;
width: 100%;
height: 1px;
margin: 0px;
padding: 0px; }


<hr>
<div class="cont_list">
<h2><a href="?lang_id=1&content_id=90">Карай Тако Сарада - Салат из осьминога на остром соусе</a></h2>
<div class="cont_txt">
<img src="/i.php?width=200&temp_small_img_url=/files/9/Tako.jpg" alt="Карай Тако Сарада - Салат из осьминога на остром соусе">
Взять щупальце осьминога ближе к тонкому окончанию, нарезать ее кружочком толщиной в 1 см. В отдельной миске смешать пасту момидзи ороси, мирин, сок лайма (фрэш), чесночную пасту, чёрный перец крупного помола 0.1 гр. и адзиномото. Положить туда осьминога, лук резанец, бланшированные грибы эноки. Мариновать 10 мин. салат Фризе и ростки салата шизо выложить красиво на тарелку. При подаче сбрызнуть смесью кунжутного масла и оставшегося сока лайма. Состав:1)Осьминог - 100 гр.2)Салатные ростки
<span><a href="?lang_id=1&content_id=90">Подробнее</a></span>
</div>
<div class="separator"></div>
</div>
<hr>

или же так:

<hr>
<div class="cont_list">
<h2><a href="?lang_id=1&content_id=90">Карай Тако Сарада - Салат из осьминога на остром соусе</a></h2>
<div class="cont_txt">
<img src="/i.php?width=200&temp_small_img_url=/files/9/Tako.jpg" alt="Карай Тако Сарада - Салат из осьминога на остром соусе">
Взять щупальце осьминога ближе к тонкому окончанию, нарезать ее кружочком толщиной в 1 см. В отдельной миске смешать пасту момидзи ороси, мирин, сок лайма (фрэш), чесночную пасту, чёрный перец крупного помола 0.1 гр. и адзиномото. Положить туда осьминога, лук резанец, бланшированные грибы эноки. Мариновать 10 мин. салат Фризе и ростки салата шизо выложить красиво на тарелку. При подаче сбрызнуть смесью кунжутного масла и оставшегося сока лайма. Состав:1)Осьминог - 100 гр.2)Салатные ростки
<span><a href="?lang_id=1&content_id=90">Подробнее</a></span>
</div>
</div>
<div class="separator"></div>

<hr>

смысл в том, что <div class="separator"></div> будет разделять..
0

#9 Пользователь офлайн   podlom 

  • Хостинг-профессионал
  • PipPip
  • Группа: Хостинг-Профессионал
  • Сообщений: 123
  • Регистрация: 01 марта 07

Иконки сообщения  Отправлено 07 декабря 2007 - 13:03

Просмотр сообщенияexplicito (7.12.2007, 11:08) писал:

попробуйте сделать так:
добавьте стиль:

.separator { position: relative;
float: left;
width: 100%;
height: 1px;
margin: 0px;
padding: 0px; }


<hr>
<div class="cont_list">
<h2><a href="?lang_id=1&content_id=90">Карай Тако Сарада - Салат из осьминога на остром соусе</a></h2>
<div class="cont_txt">
<img src="/i.php?width=200&temp_small_img_url=/files/9/Tako.jpg" alt="Карай Тако Сарада - Салат из осьминога на остром соусе">
Взять щупальце осьминога ближе к тонкому окончанию, нарезать ее кружочком толщиной в 1 см. В отдельной миске смешать пасту момидзи ороси, мирин, сок лайма (фрэш), чесночную пасту, чёрный перец крупного помола 0.1 гр. и адзиномото. Положить туда осьминога, лук резанец, бланшированные грибы эноки. Мариновать 10 мин. салат Фризе и ростки салата шизо выложить красиво на тарелку. При подаче сбрызнуть смесью кунжутного масла и оставшегося сока лайма. Состав:1)Осьминог - 100 гр.2)Салатные ростки
<span><a href="?lang_id=1&content_id=90">Подробнее</a></span>
</div>
<div class="separator"></div>
</div>
<hr>

или же так:

<hr>
<div class="cont_list">
<h2><a href="?lang_id=1&content_id=90">Карай Тако Сарада - Салат из осьминога на остром соусе</a></h2>
<div class="cont_txt">
<img src="/i.php?width=200&temp_small_img_url=/files/9/Tako.jpg" alt="Карай Тако Сарада - Салат из осьминога на остром соусе">
Взять щупальце осьминога ближе к тонкому окончанию, нарезать ее кружочком толщиной в 1 см. В отдельной миске смешать пасту момидзи ороси, мирин, сок лайма (фрэш), чесночную пасту, чёрный перец крупного помола 0.1 гр. и адзиномото. Положить туда осьминога, лук резанец, бланшированные грибы эноки. Мариновать 10 мин. салат Фризе и ростки салата шизо выложить красиво на тарелку. При подаче сбрызнуть смесью кунжутного масла и оставшегося сока лайма. Состав:1)Осьминог - 100 гр.2)Салатные ростки
<span><a href="?lang_id=1&content_id=90">Подробнее</a></span>
</div>
</div>
<div class="separator"></div>

<hr>

смысл в том, что <div class="separator"></div> будет разделять..

Пробовал оба варианта:
Вариант с разделителем внутри блока
Вариант с разделителем за блоком
К сожалению оба не подошли. :(
Может быть еще есть какие-то предположения как это можно сделать?
0

#10 Пользователь офлайн   Iton 

  • Активист хостинга
  • Pip
  • Группа: Пользователь хостинга
  • Сообщений: 37
  • Регистрация: 07 декабря 07

Отправлено 07 декабря 2007 - 14:31

ИМХО, нельзя полностью доверять одной технологии. надо их правильно комбинировать. таблицы+слои, слои+таблицы...а если использовать только что-то одно....то это не очень удобно :)
0

#11 Пользователь офлайн   podlom 

  • Хостинг-профессионал
  • PipPip
  • Группа: Хостинг-Профессионал
  • Сообщений: 123
  • Регистрация: 01 марта 07

Отправлено 07 декабря 2007 - 14:37

Просмотр сообщенияIton (7.12.2007, 14:31) писал:

ИМХО, нельзя полностью доверять одной технологии. надо их правильно комбинировать. таблицы+слои, слои+таблицы...а если использовать только что-то одно....то это не очень удобно :)

Зачастую я так и делаю. Но в этот раз хочу найти универсальный способ создания красивых блоков именно технологией блочной верскти (слоями) + CSS. IMHO это будет полезно не мне одному. Такая задача думается часто встречается.
0

#12 Пользователь офлайн   Кот 

  • Активист хостинга
  • Pip
  • Группа: Пользователь хостинга
  • Сообщений: 46
  • Регистрация: 07 декабря 07

Отправлено 07 декабря 2007 - 15:18

проблемма часто встречается, ибо у Мелкософта - огромные рога на тему "все сидят под ИЕ". Причем - это связано не только с версткой слоями (и ввиду того, что везде работает - а в ИЕ6 - нет, в ИЕ7 - как фишка ляжет), но и собственно с нежеланием категорировать пользователей по признаку используемого браузера.

Вот и приходится с табличками мучится
Осторожно! Огнеозёрный Кот: жжОт и не краснеет!
Изображение
0

#13 Пользователь офлайн   Iton 

  • Активист хостинга
  • Pip
  • Группа: Пользователь хостинга
  • Сообщений: 37
  • Регистрация: 07 декабря 07

Отправлено 21 декабря 2007 - 11:14

очуче6ние такоек что МС пытаются усложнить жизнь веб-дизайнерам :)))) каждая новая версия ИЕ отображает одно и тоже по разному :(
0

#14 Пользователь офлайн   podlom 

  • Хостинг-профессионал
  • PipPip
  • Группа: Хостинг-Профессионал
  • Сообщений: 123
  • Регистрация: 01 марта 07

Отправлено 21 декабря 2007 - 11:29

Просмотр сообщенияIton (21.12.2007, 11:14) писал:

очуче6ние такоек что МС пытаются усложнить жизнь веб-дизайнерам :)))) каждая новая версия ИЕ отображает одно и тоже по разному :(

Я думаю, что у них нету такой цели на самом деле. Просто так получается из-за того, что бюджет на развитие этого браузера ограничен, и уровень его возможностей весьма средний.
0

#15 Пользователь офлайн   IGOR 

  • Участник хостинг-жизни
  • Группа: Пользователь хостинга
  • Сообщений: 1
  • Регистрация: 21 декабря 07

Отправлено 21 декабря 2007 - 12:55

Почитай доки по слоям. Поищи в Интернете сайты по верстке слоями. Наверняка кто-то уже сталкивался с подобной задачей и не раз. Короче IMHO сплошной RTFM!
0

#16 Пользователь офлайн   Кот 

  • Активист хостинга
  • Pip
  • Группа: Пользователь хостинга
  • Сообщений: 46
  • Регистрация: 07 декабря 07

Отправлено 21 декабря 2007 - 19:52

Просмотр сообщенияIton (21.12.2007, 11:14) писал:

очуче6ние такоек что МС пытаются усложнить жизнь веб-дизайнерам :)))) каждая новая версия ИЕ отображает одно и тоже по разному :(

к слову - сейчас создатели ОПЕРЫ с МС судятся ;)
надеюсь, не за горами тот день, когда МС вместо ИЕ как оболочку будет использовать...midnight commander :)

IGOR
веришь - иногда достает гуглить изза того, что у Гейтса и Балмера комплекс Ктулху - они хотят зОхавать всех!
Осторожно! Огнеозёрный Кот: жжОт и не краснеет!
Изображение
0

#17 Пользователь офлайн   podlom 

  • Хостинг-профессионал
  • PipPip
  • Группа: Хостинг-Профессионал
  • Сообщений: 123
  • Регистрация: 01 марта 07

Отправлено 23 декабря 2007 - 02:10

Просмотр сообщенияКот (21.12.2007, 19:52) писал:

к слову - сейчас создатели ОПЕРЫ с МС судятся ;)
надеюсь, не за горами тот день, когда МС вместо ИЕ как оболочку будет использовать...midnight commander :)

По-поводу обочек для Winodws могу сказать, чо их дофига на самом деле. И некоторые из них доводилось видеть в работе. Только вот с тем, что будут что-то не Мелкософтовского производства ставить по-умолчанию мало верится что-то :)
0

#18 Пользователь офлайн   Кот 

  • Активист хостинга
  • Pip
  • Группа: Пользователь хостинга
  • Сообщений: 46
  • Регистрация: 07 декабря 07

Отправлено 24 декабря 2007 - 12:47

сдрасте...не в том дело: 1) в основном, то просто темы оформления (то, что ты видел)...да и они еще более глючны, чем ИЕ
2) фишко в том, что в базовой поставке Маздая ВСЕГДА ИЕ и в плане того, как ИЕ интерпретирует код - мелкомяхк всегда можно обвинить в недобросовестной конкуренции
Осторожно! Огнеозёрный Кот: жжОт и не краснеет!
Изображение
0

#19 Пользователь офлайн   Iton 

  • Активист хостинга
  • Pip
  • Группа: Пользователь хостинга
  • Сообщений: 37
  • Регистрация: 07 декабря 07

Отправлено 24 декабря 2007 - 14:56

мелкомягкие в прицнипе сильно наглею. вот зачем мне в базовой поставке педиаМлеер ? :) я Классиком пользуюсь и Винампом. а ИЕ мне зачем? я Оперу юзаю. и вообще у них практически все встроенные утилиты какието ...кривые что-ли...неудобные....
понятно, конечно что они хотят бабла срубить, но все же....
ИМХО надо что-б ывинда поставлялась с минимальной конфигурацией, что-бы весь софт самому ставить и ИЕ был только для того что-бы зайти на сайт и скачать Оперу ;)
0

#20 Пользователь офлайн   podlom 

  • Хостинг-профессионал
  • PipPip
  • Группа: Хостинг-Профессионал
  • Сообщений: 123
  • Регистрация: 01 марта 07

Отправлено 24 декабря 2007 - 17:01

Просмотр сообщенияIton (24.12.2007, 14:56) писал:

мелкомягкие в прицнипе сильно наглею. вот зачем мне в базовой поставке педиаМлеер ? :) я Классиком пользуюсь и Винампом. а ИЕ мне зачем? я Оперу юзаю. и вообще у них практически все встроенные утилиты какието ...кривые что-ли...неудобные....
понятно, конечно что они хотят бабла срубить, но все же....
ИМХО надо что-б ывинда поставлялась с минимальной конфигурацией, что-бы весь софт самому ставить и ИЕ был только для того что-бы зайти на сайт и скачать Оперу ;)

+1 ...или Mozilla FireFox (кому что больше нравится) :)
А у меня с Медиаплеером такая беда приключилась. Купил диск. На нем в автозапуске веб страница. В ней ссылки на файлы в формате mp3 Калечно сделано одним словом.
Так вот под одним юзером работал запуск Media Player, а под другим - нет :(
Короче зашел еще раз под тем пользователем под которым работали ссылки - нажал открыть очередной раз mp3-шку и уже и там где работало стала ошибка вылазить.
0

  • (2 Страниц)
  • +
  • 1
  • 2
  • Вы не можете создать новую тему
  • Вы не можете ответить в тему

1 человек читают эту тему
0 пользователей, 1 гостей, 0 скрытых пользователей