Jump to content

provoloka

Newbie
 View Profile  See their activity

  • Posts

    10

  • Joined

  • Last visited

 Content Type 

Everything posted by provoloka

  1. provoloka
    На самом деле статье больше полугода так точно) Так, что надо пенять только на себя самого) Вспомнил, точно, была эта статья. И вспомнил, почему меня не устроил 2-й вариант. Там не указаны абсолют и рилэйтив, и в результате выходит что-то типа такого http://jsfiddle.net/kfp42/
  2. provoloka
    Оххо, круто, пару часов назад все выглядело по другому и было именно (и только) со спаном. Да!
  3. provoloka
    Знаю, что знатоки любят головоломки по верстке, поэтому предлагаю вот такую задачку, которую сегодня пришлось решать. И, что порадовало и удивило, успешно) Чтобы все было по честному, результат будет сделан картинкой (чтобы не повадно было посмотреть css), html-код я прикладываю. Итак, есть такая статья «Как сделать, чтобы цвет маркеров в списке отличался от цвета текста?», там предложен способ с тэгом span. А можно ли добиться того же эффекта без спана? И, естественно, без картинок, чистым css? Что скажете? В общем, предлагаю подумать над css. Уверен, что решение будет в ближайшие пару часов. Если нет, тогда поделюсь своим, которое, имхо, вполне удачное. Просто очень интересно, в правильном и изящном ли направлении я думал при решении. Код: <ul class="vers"> <li>Обычный маркер</li> <li class="act">Зеленый маркер</li> <li>И никакого спана! <ul class="vers"> <li class="act">Во внутреннем списке зеленый маркер тоже гууд.</li> <li>И никаких картинок.</li> </ul> </li> </ul> Результат:
  4. provoloka
    не, к сожалению, ошибка все-таки появлялась, по крайней мере в больших длинных страницах - повторю - только в 2 браузерах - файрфокс и сафари (на айфоне). в конечном счете нашел решение - увеличил сам подвал с 50 до 60 пикс., в css добавил стиль для изображений в футере - прижать ко дну. и все приколотилось железно. видимо, я сформулировал недостаточно четко. я имел в виду, что при нажатии на решетку прижатый ко дну футер отлипает и поднимается на 5 пикселей. и та же беда происходит с прижатым к потолку меню - тоже поднимается вверх, за границы браузера.
  5. provoloka
    пересмотрел - ошибся - на 5 пкс, а не на 10.
  6. provoloka
    Здравствуйте, уважаемые эксперты. Вы мне один раз уже очень замечательно помогли. Сегодня, полдня потратив на попытку решить проблему с помощью интернета, решил вновь обратиться к вашей помощи. итак, проблема следующая. документ, вверху оглавление, внутри - содержание. при нажатии на знак решетки (#) в файерфоксе и на айфоне экран смещается вверх, если фотошоп не врет - 10 px. Это существенно. в других браузерах - кажись всё ок. примерный код следующий: <!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=windows-1251" /> <style> html,body, div,dl,dt,dd,ul,ol,li,form,table,tr,td, h1,h2,h3,h4,h5,h6,pre,p,span,b,i,a, input,textarea,fieldset { margin: 0; padding: 0; outline: none;} html { height: 100%; } body { height: 100%; background: url(bg.gif); min-width: 920px; position: relative; } div.head { float: right; padding-top: 0px; padding-right: 0px; } #sidebar { float: left; min-width: 60px; width: 20%; padding: 0px; margin: 0px 0px 0px 0px; height: 100%; } #content { margin: 0px 5px 100px 25%; padding: 5px; } div.space { padding-top: 80px; width: 100px; } div.wrap { padding: 0 50px; background: url(bgleft.gif) left repeat-y; position: relative; min-height: 100%; overflow: hidden; } div.wrap div.wrap_shadow { position: absolute; width: 50px; top: 0; right: 0; bottom: 0; background: url(bgright.gif) right repeat-y; } div.wrap div.wrap_shadow-left{ width: 50px; position: absolute; top: 0px; left: 0px; background: url(bglefttop.gif) left top no-repeat; } div.wrap div.wrap_shadow-right{ width: 50px; height: 426px; position: absolute; top: 0px; right: 0px; background: url(bgrighttop.gif) right top no-repeat; } .leftmenu { line-height: 1px; } div#foot { position: absolute; height: 50px; right: 50px; bottom: 0; float: right; } .noborder { border: 0px; } </style> <title>test site</title> </head> <body> <!-- wrapper --> <div class="wrap"> <div class="wrap_shadow-left"> <img src="menu/logot.gif" class="noborder" width="50px" height="230px" alt="leftlogo" /> </div> <div class="wrap_shadow"> <div class="wrap_shadow-right"> </div> </div> <!-- center --> <div class="center"> <!-- header --> <div class="head"> <a href=""><img src="menu/link1.gif" class="noborder" alt="menu link1" width="91" height="48" /></a><a href=""><img src="menu/link2.gif" class="noborder" alt="menu link2" width="71" height="48" /></a><a href=""><img src="menu/link3.gif" class="noborder" alt="menu link3" width="131" height="48" /></a><a href=""><img src="menu/link4.gif" class="noborder" alt="menu link4" width="91" height="48" /></a> </div> <div class="space"></div> <!-- out header --> <!-- content --> <div id="sidebar"> <p class="leftmenu"> <a href="2"><img class="noborder" src='menu/sidebar1.gif' onmouseover="this.src='menu/sidebar1a.gif'" alt="sidebar1" width="180" height="48" onmouseout="this.src='menu/sidebar1.gif'" /></a><br /> <a href="3"><img class="noborder" src='menu/sidebar2.gif' alt="sidebar2" onmouseover="this.src='menu/sidebar2a.gif'" width="180" height="38" onmouseout="this.src='menu/sidebar2.gif'" /></a><br /> <a href="44"><img class="noborder" src='menu/sidebar3.gif' alt="sidebar3" onmouseover="this.src='menu/sidebar3a.gif'" width="180" height="28" onmouseout="this.src='menu/sidebar3.gif'" /></a><br /> <a href="2"><img class="noborder" src='menu/sidebar4.gif' alt="sidebar2" onmouseover="this.src='menu/sidebar4a.gif'" width="180" height="44" onmouseout="this.src='menu/sidebar4.gif'" /></a><br /> <a href="44"><img class="noborder" src='menu/sidebar5.gif' alt="sidebar2" onmouseover="this.src='menu/sidebar5a.gif'" width="180" height="41" onmouseout="this.src='menu/sidebar5.gif'" /></a><br /> </p> </div> <div id="content"> <h1>Notes and Potential Issues</h1> <p><a href="#2" name="1">Сссылка, нажав на которую все съезжает вверх на 10px</a> The following notes and warnings highlight missing or conflicting information which caused the validator to perform some guesswork prior to validation, or other things affecting the output below. If the guess or fallback is incorrect, it could make validation results entirely incoherent. It is highly recommended to check these potential issues, and, if necessary, fix them and re-validate the document. Using Direct Input mode: UTF-8 character encoding assumed Unlike the “by URI” and “by File Upload” modes, the “Direct Input” mode of the validator provides validated content in the form of characters pasted or typed in the validator's form field. This will automatically make the data UTF-8, and therefore the validator does not need to determine the character encoding of your document, and will ignore any charset information specified. If you notice a discrepancy in detected character encoding between the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document. Congratulations The uploaded document was successfully checked as XHTML 1.0 Strict. This means that the resource in question identified itself as "XHTML 1.0 Strict" and that we successfully performed a formal validation using an SGML, HTML5 and/or XML Parser(s) (depending on the markup language used). "valid" Icon(s) on your Web page If you notice a discrepancy in detected character encoding between the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document. Congratulations The uploaded document was successfully checked as XHTML 1.0 Strict. This means that the resource in question identified itself as "XHTML 1.0 Strict" and that we successfully performed a formal validation using an SGML, HTML5 and/or XML Parser(s) (depending on the markup language used). "valid" Icon(s) on your Web page If you notice a discrepancy in detected character encoding between the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document. Congratulations The uploaded document was successfully checked as XHTML 1.0 Strict. This means that the resource in question identified itself as "XHTML 1.0 Strict" and that we successfully performed a formal validation using an SGML, HTML5 and/or XML Parser(s) (depending on the markup language used). "valid" Icon(s) on your Web page To show your readers that you have taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the HTML you could use to add this icon to your Web page:</p> <p><a href="#1" name="2">То же самое</a> of icons, with links to alternate formats and colors, is available: If you like, you can download a copy of the icons to keep in your local web directory, and change the HTML fragment above to reference your local image rather than the one on this server. Validating CSS Style Sheets</p> </div> <!-- footer --> <div id="foot"><a href=""><img src="foot.gif" class="noborder" width="292px" height="50px" alt="foot img" /></a></div> <!-- out footer --> </div> </div> <!-- out center / out wrapper--> </body> </html> очень прошу - помогите, пожалуйста.
  7. provoloka
    В общем повозюкался немного на выходных, в конечном счете собрал вот такие коды. Протестировал разными браузерами, все вроде так, как должно быть. Обращаюсь к тем, у кого опыта побольше. Подскажите, есть ли тут какие-то ошибки, фигня какая-нибудь, которую я не вижу. может что-то лишнее, может о чем-то серьезном забыл??? Спасибо. стили html,body, div,dl,dt,dd,ul,ol,li,form,table,tr,td, h1,h2,h3,h4,h5,h6,pre,p,span,b,i,a, input,textarea,fieldset { margin: 0; padding: 0; outline: none;} html { height: 100%; } body { height: 100%; background: url(bg.gif); min-width: 920px; position: relative; } div.head { float: right; padding-top: 0px; padding-right: 0px; } #sidebar { float: left; min-width: 60px; width: 20%; padding: 0px; margin: 0px 0px 0px 0px; height: 100%; } #content { margin: 0px 5px 100px 25%; padding: 5px; } div.space { padding-top: 80px; width: 100px; } div.wrap { padding: 0 50px; background: url(bgleft.gif) left repeat-y; position: relative; min-height: 100%; overflow: hidden; } div.wrap div.wrap_shadow { position: absolute; width: 50px; top: 0; right: 0; bottom: 0; background: url(bgright.gif) right repeat-y; } div.wrap div.wrap_shadow-left{ width: 50px; position: absolute; top: 0px; left: 0px; background: url(bglefttop.gif) left top no-repeat; } div.wrap div.wrap_shadow-right{ width: 50px; height: 426px; position: absolute; top: 0px; right: 0px; background: url(bgrighttop.gif) right top no-repeat; } .leftmenu { line-height: 1px; } div#foot { position: absolute; height: 50px; right: 50px; bottom: 0; float: right; } .noborder { border: 0px; } они же для ie6 HTML DIV.wrap { OVERFLOW: visible; HEIGHT: 100% } HTML BODY { background: url(bgright.gif) repeat-y 100% 0 #b7946a; margin: 0; height: 100%; } HTML div.center { background: url(bg.gif); height: 100%; } HTML DIV.wrap DIV.wrap_shadow-right { RIGHT: -1px } HTML DIV#head { white-space: nowrap } HTML #sidebar { width: 220px; } HTML #content { margin: 0px 5px 60px 250px; padding: 5px; } HTML div#foot { right: 49px; } HTML .noborder { border: 0px; } html код <!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=windows-1251" /> <link type="text/css" href="style/styles.css" rel="stylesheet" media="all" /> <title>test site</title> <!--[if IE 6]><link type="text/css" href="style/ie.css" rel="stylesheet" media="all" /><![endif]--> </head> <body> <!-- wrapper --> <div class="wrap"> <div class="wrap_shadow-left"> <img src="menu/logot.gif" class="noborder" width="50" height="230" alt="leftlogo" /> </div> <div class="wrap_shadow"> <div class="wrap_shadow-right"> </div> </div> <!-- center --> <div class="center"> <!-- header --> <div class="head"> <a href=""><img src="menu/link1.gif" class="noborder" alt="menu link1" width="91" height="48" /></a><a href=""><img src="menu/link2.gif" class="noborder" alt="menu link2" width="71" height="48" /></a><a href=""><img src="menu/link3.gif" class="noborder" alt="menu link3" width="131" height="48" /></a><a href=""><img src="menu/link4.gif" class="noborder" alt="menu link4" width="91" height="48" /></a> </div> <div class="space"></div> <!-- out header --> <!-- content --> <div id="sidebar"> <p class="leftmenu"> <a href=""><img class="noborder" src='menu/sidebar1.gif' onmouseover="this.src='menu/sidebar1a.gif'" alt="sidebar1" width="180" height="48" onmouseout="this.src='menu/sidebar1.gif'" /></a><br /> <a href=""><img class="noborder" src='menu/sidebar2.gif' alt="sidebar2" onmouseover="this.src='menu/sidebar2a.gif'" width="180" height="38" onmouseout="this.src='menu/sidebar2.gif'" /></a><br /> <a href=""><img class="noborder" src='menu/sidebar3.gif' alt="sidebar2" onmouseover="this.src='menu/sidebar3a.gif'" width="180" height="28" onmouseout="this.src='menu/sidebar3.gif'" /></a><br /> <a href=""><img class="noborder" src='menu/sidebar4.gif' alt="sidebar2" onmouseover="this.src='menu/sidebar4a.gif'" width="180" height="44" onmouseout="this.src='menu/sidebar4.gif'" /></a><br /> <a href=""><img class="noborder" src='menu/sidebar5.gif' alt="sidebar2" onmouseover="this.src='menu/sidebar5a.gif'" width="180" height="41" onmouseout="this.src='menu/sidebar5.gif'" /></a><br /> </p> </div> <div id="content"> <h1>Notes and Potential Issues</h1> <p>The following notes and warnings highlight missing or conflicting information which caused the validator to perform some guesswork prior to validation, or other things affecting the output below. If the guess or fallback is incorrect, it could make validation results entirely incoherent. It is highly recommended to check these potential issues, and, if necessary, fix them and re-validate the document. Using Direct Input mode: UTF-8 character encoding assumed Unlike the “by URI” and “by File Upload” modes, the “Direct Input” mode of the validator provides validated content in the form of characters pasted or typed in the validator's form field. This will automatically make the data UTF-8, and therefore the validator does not need to determine the character encoding of your document, and will ignore any charset information specified. If you notice a discrepancy in detected character encoding between the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document. Congratulations The uploaded document was successfully checked as XHTML 1.0 Strict. This means that the resource in question identified itself as "XHTML 1.0 Strict" and that we successfully performed a formal validation using an SGML, HTML5 and/or XML Parser(s) (depending on the markup language used). "valid" Icon(s) on your Web page To show your readers that you have taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the HTML you could use to add this icon to your Web page: </p> <p>A full list of icons, with links to alternate formats and colors, is available: If you like, you can download a copy of the icons to keep in your local web directory, and change the HTML fragment above to reference your local image rather than the one on this server. Validating CSS Style Sheets If you use CSS in your document, you can check it using the W3C CSS Validation Service.</p> </div> <!-- footer --> <div id="foot"><a href=""><img src="menu/footimg.gif" class="noborder" width="292" height="50" alt="foot img" /></a></div> <!-- out footer --> </div> </div> <!-- out center / out wrapper--> </body> </html> п.с. спасибо psywalkeру за код полей.
  8. provoloka
    помог способ с неперносом картинок по строкам, а - в одну линию. странно, но - работает. Боюсь, что он просто не сможет в нём разобраться. - именно так (ну, процентов на 67 - не понятно). в частности - я вообще не понял почему при изменении размера полей на 50 (в оригинальном варианте - 69px) - ну плюс, естественно, всех остальных шестьдесятдевяток, все встает ровно, кроме левого блока контента... почему???? именно так. причем, вдобавок, хочется (что важно) и очень интересно (что не менее важно). существет ли какой-то... как бы это выразиться... грамотный учебник с примерами и объяснениями с нуля, потому что этот сайт от корки до горки прочитан. интересует именно часть с блоками, то есть оформление текстов, ссылок, вложенные аттрибуты и прочее - это все более менее понятно. а вот какие правила при построении - с этим уже хуже.
  9. provoloka
    чуть-чуть шарю. но пока - на уровне подогнать чужой код под свои нужды, самому с нуля - к сожаленю пока недо. страница http://psywalker.ru/Portfolio/Business-group/main-page.html - красивая. но все равно - не о том. я подумал - наверное имеет смысл двигаться с самого начала. как сделать так, чтобы картинки в верхнем (горизонтальном) меню прилипали друг у другу. у меня пока что появляется появляется разрыв, который marginaми не лечится.
  10. provoloka
    Привет всем. вот какой вопрос. Я много лето назад сделал сайт в таблицах ("дизайн", извините за выражение, - на картинке ссверху). Возникла необходимость перевести в дивы. в них я ни то, что не силен, просто - слабак. не справляюсь. постоянно что-то куда-то съезжает, фоновое изображение тупит, верхнее меню не слипается, футер при незаполненности содержанием поскакивает. Даже и не знаю, как сформулировать. Но руки опускаются. что делать? помогите, пожалуста. п.с. не могу приложить адрес сайта, т.к. не захостен. п.п.с. да, сорри, забыл внести в топик, что тема - не найденное прекрасное решение, а вопрос, просьюа о помощи.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept