Форум PHP программистов > проблема с позицией

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Gradus

31.07.2011 - 22:27

Проблема в том что очень длинные ссылки из за того что их родитель с position: relative; сжимаются и вместо того что бы показываться над окном они пропадают под ним, если же мы меняем местами position, то казалось бы всё нормально НО так как у нас есть скрол и при его прокрутке ссылки не остаются на картинке , а остаются на месте а должны быть привязаны к местоположению картинки.
вот http://bm61.16mb.com/test/index.htm ужас этот

Спустя 3 минуты, 39 секунд (31.07.2011 - 21:31) Winston написал(а):

Можешь код дать? А то в исходник страницы лень лезть

Спустя 10 минут, 25 секунд (31.07.2011 - 21:41) Gradus написал(а):

<html><head><title>титл</title>
<style>
.text-field {
        padding: 15px;
        float:left;
overflow-y: auto;
 overflow-x: hidden;
 height:600px; 
width:400px;
}
.tooltip {
        display: inline-block;
        vertical-align: top;
        margin: 0 5px 5px 0;
}
.prev_menu {
  position: relative;
  height: auto;
  padding: 3px;
}
.manua{
position: absolute;
}
</style>
</head>
<body>
<div class="text-field">
<div class="tooltip">
          <div class="prev_menu">
<div class="manua">
              <a href="" target="_blank">ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</a>
</div>
        </div>
<img src="http://bm61.16mb.com/test/files/tumblr_kyjc25RIls1qb0c40.jpg" />
        </div>
		<div class="tooltip">
          <div class="prev_menu">
<div class="manua">
              <a href="" target="_blank">ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</a>
</div>
        </div>
<img src="http://bm61.16mb.com/test/files/tumblr_kyjc25RIls1qb0c40.jpg" />
        </div>
		<div class="tooltip">
          <div class="prev_menu">
<div class="manua">
              <a href="" target="_blank">ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</a>
</div>
        </div>
<img src="http://bm61.16mb.com/test/files/tumblr_kyjc25RIls1qb0c40.jpg" />
        </div>
		
</div>
</body></html>

Спустя 4 минуты, 4 секунды (31.07.2011 - 21:45) Winston написал(а):

Вообщем, у тебя ссылки оказались fixed ?
А тебе нужно, чтобы они оставались на картинке при прокрутке ?

Спустя 5 минут, 27 секунд (31.07.2011 - 21:51) Gradus написал(а):

PHPprogrammer, ага.Выставляю классу prev_menu position: absolute;, а классу manua position: relative; то ссылки остаются на картинке при прокрутке, но text-field перекрывает их т.е. они не полностью отображаются.

Спустя 13 минут, 37 секунд (31.07.2011 - 22:04) Winston написал(а):

overflow-x: auto; для text-field не катит ?
А растягивать область можно, чтобы полностью отобразить ссылки ?

Спустя 10 минут, 46 секунд (31.07.2011 - 22:15) Gradus написал(а):

неа, по x нельзя

Спустя 3 минуты, 2 секунды (31.07.2011 - 22:18) Winston написал(а):

Вообщем я твой код со страницы выдрал :ph34r:
Если попробовать

.tooltip {
	
	display: inline-block;
	vertical-align: top;
	margin: 0 5px 5px 0;
    width: 100px;
    display: table;
    height: 10px;
}

.prev_menu {
  position: relative;
  display: inline-block;
  margin-left: -160px;
  width: 180px;
  height: auto;
  color: #fff;
  top: 55px;
  margin-left: 10px;
  background-color: #111;
  padding: 3px;
  border: 0px;
}

И добавить

.tooltip  img{
	border: 2px inset; 
}

Или х.ня выходит ?

Спустя 1 час, 24 минуты, 50 секунд (31.07.2011 - 23:43) Gradus написал(а):

выйдет как я и говорил

часть ссылки прячется под дивом
http://bm61.16mb.com/test/index2.htm

Спустя 3 минуты, 38 секунд (31.07.2011 - 23:46) Winston написал(а):

Примени тот код, что я в последнем посте написал для этого примера

Спустя 8 минут, 1 секунда (31.07.2011 - 23:54) Gradus написал(а):

всё равно так же

http://bm61.16mb.com/test/index2.htm

Спустя 1 минута, 1 секунда (31.07.2011 - 23:55) Winston написал(а):

А если обрезать длинные ссылки ?

Спустя 7 минут, 36 секунд (1.08.2011 - 00:03) Gradus написал(а):

не вариант

Ещё двое верстальщиков пытались решить проблему, но безуспешно.
Не ужели это тот момент не решабильный именно в вёрстке ?)

Спустя 45 минут, 9 секунд (1.08.2011 - 00:48) Winston написал(а):

Так, что это за порнография будет? Если ссылка шире изображения значит изображение делаем такой же ширины

Цитата (Gradus @ 1.08.2011 - 00:03)

Не ужели это тот момент не решабильный именно в вёрстке

Такого не бывает

Спустя 4 минуты, 5 секунд (1.08.2011 - 00:52) Gradus написал(а):

Цитата

Так, что это за порнография будет? Если ссылка шире изображения значит изображение делаем такой же ширины blink.gif ?

неа, ссылка поверх изображения. саму картинку не изменяем

Цитата

Такого не бывает smile.gif

Хотелось бы вырить

Спустя 2 минуты, 35 секунд (1.08.2011 - 00:55) Winston написал(а):

Цитата (Gradus @ 1.08.2011 - 00:52)

неа, ссылка поверх изображения. саму картинку не изменяем

Хм... Ссылка поверх изображения, а картинка неизменная.
Что не так ?

Спустя 4 часа, 3 минуты, 10 секунд (1.08.2011 - 04:58) sebastjan написал(а):

PHPprogrammer

Автору не нравиться что текст по длине больше картинки не помещаеться в одну строку на картинке

Спустя 46 минут, 16 секунд (1.08.2011 - 05:44) bulgakov написал(а):

Дык если размер контента больше чем ширина блока соответственно тут или скрывать контент или менять ширину блока...

Спустя 7 часов, 17 минут, 10 секунд (1.08.2011 - 13:01) sebastjan написал(а):

Где автор увидел такой вариант для меня загадка.
Чтоб так по верх картинки, да ещё и чекбоксы?
Всё это дело используют или выше картинки или ниже,текст как ссылка но обрезан по длине
и врап.(то есть не в одну строку)
А это никуда не годиться.

Спустя 4 часа, 50 минут, 35 секунд (1.08.2011 - 17:52) Gradus написал(а):

Цитата

Что не так ?

видишь третья ссылка скрылась ?) вот в чём проблема.
bulgakov ага , но нельзя ни то ни другое иначе будет совершенно не то что задумано.
sebastjan, вы вообще о чём ? мы видимо о разных вещах толкуем.

Спустя 1 час, 40 минут, 8 секунд (1.08.2011 - 19:32) sebastjan написал(а):

Gradus
Что значит скрылась.
Это о том что текс выходит за пределы блока?!

Это что за бред.
Вы или мысль свою изложите доступно пониманию или учите хтмл.

Цитата

bulgakov ага , но нельзя ни то ни другое иначе будет совершенно не то что задумано.

Не воспринимайте резко, но просто слов нет

Спустя 15 минут, 19 секунд (1.08.2011 - 19:47) Gradus написал(а):

Цитата

Это о том что текс выходит за пределы блока?!

и ? или просто кеп ?

Цитата

Что значит скрылась.

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

Цитата

Вы или мысль свою изложите доступно пониманию или учите хтмл.

мыслей у вас по теме нету только не довольство наверное это не от понимания,так что это скорей вам совет учить css т.к. вы один не понимаете и возмущаетесь.

Спустя 31 минута, 14 секунд (1.08.2011 - 20:19) sebastjan написал(а):

да я бы с радостью, но ваш пример с руками непонятен.
Вы что хотите, что то скрыть или что то частично скрыть.
Вижу блок-картинка,
поверх ещё один блок с формой и текстом.
Что же надо?
Чтоб текст уместился в блок или...или ....
Ещё раз пожалуйста и более понятно.
Уверяю что вас не понимают, вот из этого и проблеммы.

Спустя 3 часа, 43 минуты, 40 секунд (2.08.2011 - 00:02) sebastjan написал(а):

Надоело мне ждать обьяснений.
Вот наколякал.
Цвет,индекс,позиция, всё что хочешь можно изменять.
И не километр твоего ненужного хтмл :)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title><style type="text/css">
.sloi {width: 300px;height: 200px;padding: 5px; border: solid 1px black; overflow-y: auto;overflow-x: hidden;height:200px;position: absolute;} 
.fater{background-color: #33FFFF;width: 280px;margin-bottom: 20px;}
.muter_1{
	width: 270px;
	border: 1pt solid #CC0000;
	display: block;
	background-color: #FF6600;
	z-index: 10;
	top: 0px;
	position: relative;
}
.muter_2{
	background-color: #00CC00;
	width: 270px;
	display: block;
	z-index: 9;
	top: -10px;
	position: relative;
	right: -10px;
}
 </style>
 </head>
 <body> 

 <div class="sloi">
   
   <div class="fater">
   <div class="muter_1">aaaaaaa aaaa aaaa aaaaaa aaa aaa aa aaa aaa aa aaa aaa aaa</div>
   <div class="muter_2">xxxx xxxx xxxxx xxxxx xxxxxxxxx xx xxxxxx xxxx xxx xx xx xx xx x</div>
   </div>

   <div class="fater">
   <div class="muter_1">aaaaaaa aaaa aaaa aaaaaa aaa aaa aa aaa aaa aa aaa aaa aaa</div>
   <div class="muter_2">xxxx xxxx xxxxx xxxxx xxxxxxxxx xx xxxxxx xxxx xxx xx xx xx xx x</div>
   </div>

   <div class="fater">
   <div class="muter_1">aaaaaaa aaaa aaaa aaaaaa aaa aaa aa aaa aaa aa aaa aaa aaa</div>
   <div class="muter_2">xxxx xxxx xxxxx xxxxx xxxxxxxxx xx xxxxxx xxxx xxx xx xx xx xx x</div>
   </div>

 </div> 
 </body>
 </html>

Спустя 11 часов, 48 минут, 41 секунда (2.08.2011 - 11:51) Gradus написал(а):

господяяя, вот не понимаете о чём речь и всё равно надо что ни будь написать или упрекнуть.

Цитата

И не километр твоего ненужного хтмл

где ?Это мне надо сказать так про ваш код, зачем его выложили не понятно.

Цитата

Надоело мне ждать

Вот на картинках может понятней будет

красным нарисовано то что должно быть

Спустя 13 часов, 19 минут, 37 секунд (3.08.2011 - 01:11) sebastjan написал(а):

Цитата

красным нарисовано то что должно быть

Вы хотите чтоб текст выходил за поле блока на котором он находится?

А код выложил затем чтоб вы немного подумали или хотя бы воспользовались гуглом,
что можно и как можно.
Кто же вас поймёт? Если вы показываете рисунок и говорите --вот как надо, чтоб текс выезжал за поле блока в котором он находиться.
Если уж такие затруднения с объяснением, покажите где таке реализованно, наверное будет понятней.

Спустя 1 час, 6 минут, 39 секунд (3.08.2011 - 02:17) sebastjan написал(а):

Цитата

Есть див определённой высотой и шириной, в нём куча картинок со скролом за счёт overflow-y.
Каждая картинка в диве, а на картинке но в этом же диве див-меню (position: relative;) в этом меню длинные ссылки (с position:absolute)
Проблема в том что очень длинные ссылки из за того что их родитель с position: relative; сжимаются и вместо того что бы показываться над окном они пропадают под ним, если же мы меняем местами position, то казалось бы всё нормально НО так как у нас есть скрол и при его прокрутке ссылки не остаются на картинке , а остаются на месте а должны быть привязаны к местоположению картинки.
вот http://bm61.16mb.com/test/index.htm ужас этот

Если уж так хочеться то можется.
Реализуеться без overflow на яваскрипте, делаеться динамическая прокрутка слоя или слоёв.
При позиционировании с определённых кординат показываем длинный текс на слое, при достижении ограничивающих кординат,обрезаете текс.

Можно применить плавное появление и плавное исчезновение.
Желаю удачи.

Спустя 7 часов, 20 минут, 52 секунды (3.08.2011 - 09:38) Gradus написал(а):

Цитата

А код выложил затем чтоб вы немного подумали

мда... логика однако, вот вам в ответ:

<html></html>

поразмысляйте, подумайте что можно, а что нет и гугл в помощь.
js применять только в самую последнюю очередь буду попробую ещё с z-index побаловаться

Цитата

Желаю удачи.

и вам

Спустя 7 часов, 22 минуты, 37 секунд (3.08.2011 - 17:01) sebastjan написал(а):

Я кстати без сорказма сказал про гугли и про пример позиционирования , исходил из увиденного вашего хтмл, что говорит о совершенном незнании вёрстки, поэтому и привёл пример.
Не верите мне? Обратитесь на любой ресурс по обсуждению вёрстки.

Спустя 16 часов, 30 минут, 20 секунд (4.08.2011 - 09:31) Gradus написал(а):

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

_____________
ДАВАЙ ДЕНЬГИ
R543264623869

Быстрый ответ:

Здесь расположена полная версия этой страницы.