Форум PHP программистов > Один DIV под другим

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

Лена

1.09.2011 - 11:23

Есть фотка пользователя, при наведении на нее появляется блок с информацией. На фотке - зеленый значок(другая картинка). Под большой фотографией - ссылка с именем пользователя. Эта ссылка сейчас располагается не под фотографией, а вверху. Подскажите, пожалуйста, что нужно добавить в id=friend_name, чтобы ссылка стала ПОД фото.
См. аттач (то, что у меня сейчас есть).


<div class="tt">
<a href="#"><img src="1.png" class="avatar"></a>
<img src="2.png" class="icon">
    <span>
        <div class="fr_name">{+name+}</div>
aaaaaaaaaaaaa<br />
ssssssssssssssss  <br />
dddddddddddddd <br />
    </span>
</div>

<div id="friend_name"><a href="' . $url_friend . '">Имя</a></div>



div.tt {
position: relative;
z-index: 20;
color: #008000;
margin:10px;
margin-bottom:80px;
display:block;
}

div.tt:hover {
z-index: 25;
}

div.tt span {
display: none;
}

div.tt:hover span {
background: #FFF;
display: block;
position: absolute;
top: 5.8em;
left: -0.8em;
width: 150px;
padding: 5px 0px;
border: 1px solid #C7C7C7;
color: #000000;
text-align: left;
border:2px solid #aadc55;
}

.avatar{
width: 80px;
height: 80px;
position: absolute;
top:1px;
left:5px;
}

.icon
{
width:35px;
height:35px;
position: absolute;
top:40px;
left:50px;
}

#friend_name
{
/* ЧТО СЮДА ДОБАВИТЬ? */
}

Спустя 1 час, 22 минуты, 43 секунды (1.09.2011 - 11:46) Xes написал(а):

У вас все объеты содержащиеся в блоке class="tt" заданы position: absolute; так если они как бы на другом слое, и не учавствют в задании границ родителя class="tt" поэтому он у вас схлопнулся. А #friend_name пошел сразу на том же слое после него. Вам надо для class="tt" прописат height:150px; Например

Спустя 3 часа, 7 минут, 3 секунды (1.09.2011 - 14:53) sebastjan написал(а):

Ничего ,нигде не надо прописывать.
Надо просто нормально сверстать.
вот вам ваше решение.
ссылка

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

Спустя 5 минут, 22 секунды (1.09.2011 - 14:58) Лена написал(а):

Xes Спасибо, помогло.

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

Спустя 1 час, 21 секунда (1.09.2011 - 15:58) sebastjan написал(а):

Лена маленькая картинка в моём варианте это синяя иконка -круглая.
Лена, вы девушка так сказать очень своебразная, я ни какое задание не собираюсь выполнять.
Показал как более менее прилично сделать.
С вашей стороны - это наглость упрекать "мол я дала задание а вы не в полном объёме сделали".
Надеялся что такие маленькие напутствия помогут понимание что и как оптимально делать,
а не километры ненужного ЦСС, повидемому нет, не помогут.
Это вам стоит выполнить задание по основам ХТМЛ.
И ещё - если для вас основы являются чудесам, я молчу.

Спустя 7 часов, 56 минут, 35 секунд (1.09.2011 - 23:55) Лена написал(а):

sebastjan, вы не так поняли мое предыдущее сообщение.
Я просто высказала сомнение, может ли подойти мне ваш вариант.
Не утрируйте. Наглости в моем сообщении не было и никто вас ни в чем не упрекал. Тем более, в таком виде, в каком вы написали. Прошу прощения, если вызвала у вас негатив, не хотела. Спасибо за потраченное время.
Про абсолютное позиционирование мне как-то советовали здесь же, на форуме, был похожий случай, и тоже говорили, что это - единственно правильное решение. Поэтому заверстала так. Версткой я занимаюсь редко, по мере необходимости, так что знания небольшие. И на что ориентироваться не знаю, книжек по html много, какая из них толковая, я тоже не знаю.

В этом примере у меня адреса картинок, и маленькой, и большой, формируются динамически, на странице таких картинок много. Вывести их как background-image я не могу. С учетом этого я выбрала вариант Xes, пусть он и не оптимальный.

Спустя 4 часа, 20 минут (2.09.2011 - 04:15) sebastjan написал(а):

Извеняюсь, если не правильно понял.

Цитата

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

Что касаеться абсолютно правильного решения, думаю - неверно истолкованно,
такую вёрстку можно как минимум тремя способоми сделать и все они будут правильные и валидные и работать будут в различных броузерах.

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

Спустя 17 часов, 35 минут, 27 секунд (2.09.2011 - 21:50) Лена написал(а):

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


<style>
#blok{height:120px;width:90px;}
#kar{height:113px;width:90px;display:block;margin-left:10px;}
#nam{width:100px;padding:10px;display:none;text-align:center;border:1px solid black;margin-top:-10px;}
.simbol{margin-top:-40px;margin-left:50px;}
</style>
<body>
<div id="blok" onMouseOver="getElementById('nam').style.display='block'" onMouseOut="getElementById('nam').style.display='none'">

 <a href="#" id="kar"><img src="1.png" border="0">
 <img src="2.png" class="simbol" border="0">
 </a>

 <div id="nam">
 <a href="">Ссылка</a><br />
 <a href="">Ссылка</a>
 </div>

</div>

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

Спустя 2 дня, 2 часа, 24 минуты, 57 секунд (5.09.2011 - 00:15) sebastjan написал(а):

Лена
Извени и ещё не посмотрел в делалях твой последний пример.
Что наталкивает на вопрос , так это

#kar{height:113px;width:90px;display:block;margin-left:10px;}

margin-left:10px; Не понимаю зачем?
потом вот ещё #nam{width:100px ширину не обязательно указывать, всё равно как блок и зальёт по всей ширине блока родителя.
Смысл понимаю так, есть страница с неким количеством иконок пользователей, желательно чтоб они были все приблизительно одинаковые по размеру и при наведении на иконку снизу появлялась подпись и работала как ссылка на подробную информацию.
Так что в исходном варианте мы должны иметь картинки превьюшки одинакового размера и конечно ограничить количество букв в появляющейся подписи под превьюшкой, иначе нечень красиво будет выглядеть.
В доктипа ты кажеться используешь СТичь - это жосткое прваило к отработке броузера с хтмл я пользуюсь Transitional//EN- то есть переходный документ.
Вообще лучше уточнить я криво выразился.

попробуй так


<!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=utf-8"><title>xxxxxx</title></head>
<style>
#blok{height:120px;width:90px;}
#kar{height:113px;width:90px;display:block;}
#nam{display:none;text-align:center;border: 1px solid #CC0000;}
.simbol{margin-top:-30px;margin-left:50px;}
</style>
<body>
<div id="blok" onMouseOver="getElementById('nam').style.display='block'" onMouseOut="getElementById('nam').style.display='none'">
 <a href="#" id="kar">
<img src="1.png" border="0">
<img src="2.png" class="simbol" border="0">
</a>
 <a href="#" id="nam">Ссылка<br>xxxxxxx<br>xxxx<br>xxxxxx</a>
</div>
</body>
</html>

Спустя 20 часов, 53 минуты, 54 секунды (5.09.2011 - 21:09) Лена написал(а):

margin-left:10px; Не понимаю зачем?

Я хотела, чтобы всплывающий блок был немного шире(с обеих сторон равномерно) большого фото. Если я делаю margin-left:10px; и у этого блока width:100px, он слева и справа от фото на 10px больше.
Написано, конечно, по-дурацкому, но на войне как на войне )

Если я пишу небольшой кусочек где-то для тренировки, чтобы потом перенести его в проект, я доктипы вообще не указываю, просто начинаю с html. Про Transitional не знала, спасибо. А чем отличаются жесткие правила от переходного документа? На чем это может сказаться? Дайте хотя бы ссылку, почитаю.

В конечном варианте у меня получилась превьюшка + всплывающий блок со ссылками. Их немного было.

Скачала пару книг по CSS, уже начала читать. Если что-то непонятно будет, приду сюда )

Спустя 1 день, 12 часов, 31 минута, 22 секунды (7.09.2011 - 09:41) sebastjan написал(а):

Лена Про доктип лучше здесь почитатьДоктип, хотя честно говоря это всё сомнительно звучит.
Если всё нормально свёрстанно - то хватит за глаза <html>
Сводитсявсё к смыслу - на проверку валидатором.
А ОНО надо

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

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