Верстка. Головоломочка

6863 сообщения

#13 лет назад

Как эти точечки сверстать? При условии, что длина строки может варьироваться от нескольких символов до предложения и переноситься на несколько строк...

Задача из разряда, "а слабо?"

Мое решение уже есть, но может кто красивее придумает.

116 сообщений

#13 лет назад

Несовсем понятно про длину строки, но может так: контейнер с фоновой картинкой в 2 пикселя шириной на repeat-x, а текст - непрозрачными плавающими влево и вправо спанами с белым фоном?

6863 сообщения

#13 лет назад

Как поведется это если будет перенос строки? Точечки совсем исчезнут

И что если цвет текста (и соответственно точечек) задается в админке?

116 сообщений

#13 лет назад

Любят жеж люди искать черную кошку в черной комнате.
Цитата ("floppox"):

Как поведется это если будет перенос строки? Точечки совсем исчезнут

Margin спанов решит эту проблему. Все, по сути, сводится к элементарной двухколоночной верстке с тянущейся левой колонкой и прижатым к низу контентом правой.

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

И что если цвет текста (и соответственно точечек) задается в админке?

Сгенерировать двухпиксельной ширины одноцветный прозрачный гиф очень просто.

6863 сообщения

#13 лет назад

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

Margin спанов решит эту проблему.

Каким образом?
Выглядеть должно примерно так:

Короткий текст....................................................... 1

Длинный-длинный-длинный-длинный-длинный-длинный-
длинный-длинный текст............................................ 2

116 сообщений

#13 лет назад

У меня такое впечатление, что либо я не понимаю задачу, либо вы издеваетесь.
ссылка
5 минут раздумий, 5 минут кода. Для недобраузеров можно добавить классов. Что я не так делаю?

359 сообщений

#13 лет назад

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

116 сообщений

#13 лет назад

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

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

Неоднородный фон не намного усложняет задачу, но однозначно добавляет драйва с недобраузерами.

359 сообщений

#13 лет назад

loyanich, хотелось бы услышать как сделать ту же задачу когда в качестве фона страницы используется какое нибудь фото...

6863 сообщения

#13 лет назад

loyanich,

вот а где

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

текст - непрозрачными плавающими влево и вправо спанами

Вредная я )))))))))))))))))))))

116 сообщений

#13 лет назад

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

loyanich, вот а где

Цитата ("loyanich"):
текст - непрозрачными плавающими влево и вправо спанами

Вредная я )))))))))))))))))))))

Я так понимаю, по остальным пунктам претензий нет?
Плавающие спаны я для резины планировал. А сделал фиксом, чтобы быстрее и без извратов. И потом, это не вредность, это дотошность - очень правильная черта.

1895 сообщений

#13 лет назад

Я версткой не занимаюсь, могу только предположить.

1. нужен див фиксированной ширины
2. нужен рисунок с точечками на всю ширину этого дива
3. сверху пишем нужный текст

верстку изучаю для собственных нужд по принципу увидел-перетащил)

вот сразу всплыл пример по памяти: ссылка
там такое есть

20 сообщений

#13 лет назад

Вот так вот можно еще:
ссылка

6863 сообщения

#13 лет назад

AlexSyt, круто. Вот это оно.
К своему стыду, этой фишкой не научилась пользоваться еще и не совсем понимаю, как обрезается. но выглядит супер.

20 сообщений

#13 лет назад

Floppox, почему к стыду? Я сам не пользовался этим методом ниразу. Его я нашел специально по вашей задаче, вот ссылка: ссылка
Так что вместе научились

59 сообщений

#13 лет назад

Реально хороший метод. AlexSyt, спасибо за находку.

828 сообщений

#13 лет назад

<style>

.block {

background("dot.png") repeat-x bottom;

}

.tara {

background: #FFF;

float:left;

}

.price {

background: #FFF;

float:right;

}

</style>



<div class=block>

     <div class=tara>250ml</div>

     <div class=price>129грн</div>

     <div style='clear:both'></div>

</div>

<div class=block>

     <div class=tara>250ml</div>

     <div class=price>129грн</div>

     <div style='clear:both'></div>

</div>

59 сообщений

#13 лет назад

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

828 сообщений

#13 лет назад

madcoding, почему суть теряется? да будет идти на всю ширину, так если ширина определена то поставьте фиксированную ширину на .block.
Точки будут от начало до конца блока, а там где текст, текст будет с фоном (цвет фона будет фоном подложки) тем самым эти места будут закрыты фоном и под текстами точечек не будет.

Собственно не это хочется?

828 сообщений

#13 лет назад

Закрепил так же dot.png
вот код HTML. Соберите и посмотрите, разве не то, что надо?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Test</title>


<style>

 .block {

 	background:url(dot.png)  repeat-x 0 13px;

 }

 .blockFixed {

 	background:url(dot.png)  repeat-x 0 13px;

	width:300px;

	margin:0 auto;

 }

 .tara {

 background: #FFF;

 float:left;

 padding-right:5px;

 }

 .price {

 background: #FFF;

 float:right;

 padding-left:5px;

 }

 </style>

</head>


<body>



 <div class=block>

      <div class=tara>250ml</div>

      <div class=price>129грн</div>

      <div style='clear:both'></div>

 </div>

 <div class=block>

      <div class=tara>250ml</div>

      <div class=price>129грн</div>

      <div style='clear:both'></div>

 </div>

 <div class=block>

      <div class=tara>250ml</div>

      <div class=price>129грн</div>

      <div style='clear:both'></div>

 </div>


 <br />

 <h1><center>FIXED</center></h1>

 <br />



 <div class=blockFixed>

      <div class=tara>250ml</div>

      <div class=price>129грн</div>

      <div style='clear:both'></div>

 </div>

 <div class=blockFixed>

      <div class=tara>250ml</div>

      <div class=price>129грн</div>

      <div style='clear:both'></div>

 </div>

 <div class=blockFixed>

      <div class=tara>250ml</div>

      <div class=price>129грн</div>

      <div style='clear:both'></div>

 </div>

</body>

</html>

1 2

Последняя