psywalker
-
Posts
13,707 -
Joined
-
Last visited
-
Days Won
58
Content Type
Profiles
Forums
Calendar
Store
Everything posted by psywalker
-
Не понял задачу, покажи на скрине.
-
А можно кстати массив сделать, ага. Но тогда вопрос, как то нужно каждую ссылку по отдельному диапазону кидать, мало того, чтобы они ещё и не пересикались сами по себе А где пример?
-
да уж, задачка не из лёгких, для меня уж тем-более, но подождём экспертов, наверное варианты будут
-
Может цветом?
-
Небольшая, но очень интересная задачка по верстке.
psywalker replied to Great Rash's question in HTML Coding
Блин, тогда точно не перезвонят. Но будем надеяться -
Сэляви
-
Вот это уже меняет дело, тогда вопросы ещё имеются 3) Что делать, как мне задавать тада координаты, если сумма ширины 100%? 4) Вот это совсем хреново, я предполагал в будущем раскидать их по разным координатам как раз при помощи Айди. Тогда вопрос Как поступить в данном случае?
-
1) Объясни плиз 2) Ну вот представь себе, только 4 дива идут лишь на каркас, не многовато-ли? 3) Бабочку считаю, что нужно было делать именно ПНГ и засовывать в нужную колонку.
-
С подачи Great Rash лёд тронулся. Но также появилось ряд вопросов. Для начала предлагаю решить конкретную задачу с только лишь одной ссылкой, нужно довести до ума эту вещь, а потом уже думать о большем. Поэтому код таков. <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Head-Math</title> <style type="text/css"> *{ margin: 0; padding: 0;} body { padding-top: 50px; } #head { width: 919px; height: 171px; background: #4e5453; position: relative; margin: 0 auto; overflow: hidden; } .wrap { position: relative; height: 100%; } #logo { width: 356px; height: 74px; border: 1px solid #000; position: absolute; left: 50%; top: 50%; margin-left: -178px; margin-top: -37px; } #logo img { display: block; border: none;} a { color: #fff; border: 1px solid #0F0; position: absolute; font-size: 13px; } </style> </head> <body> <div id="head"><div class="wrap"> <a href="#" id="logo"><img src="logo.jpg" alt="Андрей Пронин"></a> <a href="#" id="desing">Дизайн</a> </div></div> <script type="text/javascript"> var head = document.getElementById('head') var desing = document.getElementById('desing') var topA = 0; var leftA = 0; cikl: while (true) { var leftA = Math.round(Math.random()*919) var topA = Math.round(Math.random()*146) if (leftA < 250 ) { desing.style.left = leftA + 'px'; while (true) { var topA = Math.round(Math.random()*146) if (topA < 146 ) { desing.style.top = topA + 'px'; break cikl; } } } if (leftA > 250 && leftA < 650) { desing.style.left = leftA + 'px'; while (true) { var topA = Math.round(Math.random()*146) if (topA < 35 ) { desing.style.top = topA + 'px'; break cikl; } if (topA > 125 ) { desing.style.top = topA + 'px'; break cikl; } } } if (leftA > 650 ) { desing.style.left = leftA + 'px'; while (true) { var topA = Math.round(Math.random()*171) if (topA < 171 ) { desing.style.top = topA + 'px'; break cikl; } } } } </script> </body> </html> Как видно при обновлении экрана ссылка гуляет по шапке и не попадает на логотип, как и задумывалось. Вопросы: 1) Как наладить отступы у ссылки так, чтобы она всё же не попадала за границы шапки и не попадала в граничные пределы логотипа? 2) Какие ещё будут идеи, уважаемые камрады? Если можно, с наглядными примерами
-
Небольшая, но очень интересная задачка по верстке.
psywalker replied to Great Rash's question in HTML Coding
Да, ответ интересно было бы узнать, явно. -
Небольшая, но очень интересная задачка по верстке.
psywalker replied to Great Rash's question in HTML Coding
Ну значит задача эта явно с подковыркой. Так как те свойства, которые нам бы помогли расширить родителя, использовать по условиям нельзя. Значит остаётся только такой вариант или типа того. -
Небольшая, но очень интересная задачка по верстке.
psywalker replied to Great Rash's question in HTML Coding
НЕТ же, ты опять ошибаешься, ты не улавливаешь суть. Блоки не с фиксированной шириной, а ОНИ САМИ её подстроили под родителя. Пойми эту тонкость. Да, они очень помогли в основных браузерах. Но думаю ещё повозится, может удастся без них справится -
Небольшая, но очень интересная задачка по верстке.
psywalker replied to Great Rash's question in HTML Coding
Вот и я о томже, задача выполнена или нет? В том то и дело, что я ничего не изменял. Я лишь следовал задаче, и НЕ проще. Потому что задача именно в том и состоит, чтобы вместить в родителя блоки любой ширины, а не чётко заданной. -
Небольшая, но очень интересная задачка по верстке.
psywalker replied to Great Rash's question in HTML Coding
Ну извини, это уже из разряда фантастики, ты уж выбирай, задача состояла именно вместить в родителя, вот тебе и решение соответствующее. Я проверил везде, вроде бы нормально, протестите и вы. -
Выравнивание меню из списка. Абсолютное позиционирование. Как?
psywalker replied to setevoi's question in HTML Coding
ТС, скриншот того, что хочешь получить. -
1) В том то и дело, что я не знаю, что писать вместо тра-ля-ля , мне нужно, чтобы ссылки меняли координаты до тех пор, пока не выдут из диапозона (left > 255 && left < 610) 2) А я просто ещё азов то не знаю, как следует, и вот хотелось бы увидеть ответ или хотябы хорошую наводку в качестве примера для моего тупого мозга.
-
Небольшая, но очень интересная задачка по верстке.
psywalker replied to Great Rash's question in HTML Coding
Готово дружище <!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" xml:lang="en" lang="en"> <head> <title>An XHTML 1.0 Strict standard template</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> * { margin: 0; padding: 0; font: 12px Tahoma, Arial, sans-serif; } body { margin: 10px; } .main-box { width: 150px; border: 1px solid; display: inline-block; //display: inline; } *html .main-box {display: inline;} *html .a{display: inline; zoom:1;} *html .b {display: inline;zoom:1;} *html .c {display: inline;zoom:1;} *+html .main-box {display: inline;} *+html .a{display: inline; zoom:1;} *+html .b {display: inline;zoom:1;} *+html .c {display: inline;zoom:1;} .a, .b, .c { width: 50px; height: 50px; border: 1px solid; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; float: left; } .a { background: red; } .b { background: green; } .c { background: blue; } </style> </head> <body> <div class="main-box"> <div class="a"></div><div class="b"></div><div class="c"></div> </div> </body> </html> -
Да, очень интересная, хотелось бы увидеть решение или хотябы для начала ответить на мои вопросы в пред.посте, чтобы лёд у меня тронулся.
-
Небольшая, но очень интересная задачка по верстке.
psywalker replied to Great Rash's question in HTML Coding
Ну помойму только дополнительный контейнер -
Небольшая, но очень интересная задачка по верстке.
psywalker replied to Great Rash's question in HTML Coding
Shugich: Да, это вариант. Интересно прокатил бы он на собеседовании... Я об этом варианте даже не задумывался. Погодите, а что толку то, ведь всё равно в сумме по ширине блоки больше, чем контейнер. Если бы можно было родительский сделать побольше по ширине, то вот такой вариант <!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" xml:lang="en" lang="en"> <head> <title>An XHTML 1.0 Strict standard template</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> * { margin: 0; padding: 0; font: 12px Tahoma, Arial, sans-serif; } body { margin: 10px; } .main-box { width: 156px; border: 1px solid; white-space: nowrap; } .a, .b, .c { width: 50px; height: 50px; border: 1px solid; display: inline-block; } .a { background: red; } .b { background: green; } .c { background: blue; } </style> </head> <body> <div class="main-box"> <div class="a"></div><div class="b"></div><div class="c"></div> </div> </body> </html> -
Great Rash А покажи плиз свой вариант. А вот отдельный вопрос Я сделал набросок, но меня не устраивает очень многое. 1) Как мне например сказать, что если: if(left>255){ if(left<610){ То мы генерируем координаты заново, пока не будет нужных? } } 2) Как же всё таки расчитать размер текста внутри ссылки? Сам набросок: Просто понажимайте f5, всё увидите. <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Head-Math</title> <style type="text/css"> *{ margin: 0; padding: 0;} body { padding-top: 50px; } #head { width: 919px; height: 171px; background: #4e5453; position: relative; margin: 0 auto; overflow: hidden; } #logo { width: 356px; height: 74px; border: 1px solid #000; position: absolute; left: 50%; top: 50%; margin-left: -178px; margin-top: -37px; } #logo img { display: block; border: none;} a { color: #fff; border: 1px solid #0F0; position: absolute; } </style> </head> <body> <div id="head"> <a href="#" id="logo"><img src="logo.jpg" alt="Андрей Пронин"></a> <a href="#" id="desing">Дизайн</a> </div> <script type="text/javascript"> var head = document.getElementById('head') var desing = document.getElementById('desing') var top = 0; var left = 0; left = Math.round(Math.random()*919) top = Math.round(Math.random()*171) if(left>255){ if(left<610){ } } desing.style.top = top+'px' desing.style.left = left+'px' </script> </body> </html>
-
Да ерунда, мне самому интересна задача, я щас попробую вариант накидать, если чё нить получится, выложу.
-
аа, понятненько, спасиб
-
Думаю нужно воспользоваться объектом Math для случайной генерации координат в пределах шапки, но не задевая логотип. И с каждым обновлением страницы он будет генерировать разные координаты.
-
Ну тогда и не парься, работай в своём PSPad и всё.