Recommended Posts

Отступ у картинки

post-218-1239048113_thumb.png

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Отступ у картинки</title>
</head>
<body>

<div style="background: #ccc"><img src="http://forum.htmlbook.ru/style_images/elegance/logo4.gif" alt=""></div>

</body>
</html>

Решения:

1. img { display: block }

2. img { vertical-align: bottom }

3. div { line-height: 0; }

Причина:

Картинка выравнивается по базовой линии текста. Это "струна", на которую одеваются буквы. Хвостик буквы "р" опущен ниже буквы "о", а картинка равняется наравне с буквами о, и, а, и т.д.

Кусочек фона под картинкой - место для букв по типу р, у, ф, некоторые части которых опущены ниже базовой линии.

Edited by Great Rash

Share this post


Link to post
Share on other sites

Параграфы в ячейках таблицы

post-218-1239049059_thumb.png

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Параграфы в ячейках таблицы</title>
</head>
<body>

<table style="border: 1px solid red;">
<tr>
<td>
<p style="background: #ccc;">Text</p>
</td>
</tr>
</table>

</body>
</html>

Решения

1. Если отступы нужны, то указываем p { margin: 1em 0px }

2. Если не нужны, то указываем p { margin: 0px }

Причина

Так исторически сложилось. Тяжелое детство.

Share this post


Link to post
Share on other sites

Картинка в ссылке

post-218-1239220719_thumb.png

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Картинка в ссылке</title>
</head>
<body>
<a href="#"><img src="http://forum.htmlbook.ru/style_images/elegance/logo4.gif" alt=""></a>
</body>
</html>

Решения

1. img { border: none }

Причина

Наследие былых времен. Исторически сложилось.

Share this post


Link to post
Share on other sites

Плавающая картинка в блоке

post-218-1239527809_thumb.png

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Плавающая картинка в блоке</title>
</head>
<body>
<div style="border: 1px solid red;">
<img src="http://forum.htmlbook.ru/style_images/elegance/logo4.gif" alt="" style="float: left">
Test
</div>
</body>
</html>

Нужно получить:

Картинка должна расширять бордюр.

Решение:

div { overflow: hidden }

Для IE6 - zoom:1, в Conditional comments

Причина:

Плавающий блок не принадлежит общему потоку элементов в странице. Overflow: hidden дает указание браузеру не выпускать плавающий блок за свои пределы.

Edited by Justnewone

Share this post


Link to post
Share on other sites

Защита картинки от копирования

Нужно получить:

Картинку нельзя скопировать с сайта и сохранить на носитель пользователя

Решение:

1. Нет. Все что видим на экране, можно скопировать через "Print Screen" в буфер обмена.

2. Не выкладывать картинку в интернет

Стили для SELECT, CHECKBOX, RADIO, кнопки BROWSE у FILE

Нужно получить:

Стилизировать через CSS все эти элементы.

Решение:

Создать эмуляцию всех этих элементов средствами HTML.

Причина:

Стили этих элементов берутся из операционной системы пользователя, и стилизация этих элементов через CSS очень сильно ограничена.

Share this post


Link to post
Share on other sites

Базовый путь для картинок, файлов и прочего

Нужно получить:

Для картинок, файлов и прочего, указать один раз путь, где они лежат, и потом использовать просто название картинки

Решение:

1. Использовать тег <BASE>

2. Использовать серверные скрипты.

Share this post


Link to post
Share on other sites

CSS селекторы с *

Проблема:

IE может существенно тормозить и "залипать" при больших объемах кода.

Решение:

1. Не использовать такие селекторы вообще

2. Использовать классы или перечисление тегов.

Почему так происходит:

IE пытается актуализировать отображение страницы при пролистывании, применяя стили к элементам. Звездочка означает, что применять нужно ко всем элементам, соответственно вся страница будет попадать под действие этого селектора, а значит, что чем больше тегов, тем существеннее будут задержки.

Share this post


Link to post
Share on other sites

Плавающие блоки разной высоты

Проблема:

При построении галерей или списка товаров в интернет-магазине (или чего-то подобного) если у плавающих элементов разная высота или высота высчитывается по контенту, то, при уменьшении окна браузера, блоки выстраиваются неравномерно. Лучше всего это видно из иллюстрации:

float-broken.jpg

Решение:

1. Задать всем блокам одинаковую минимальную высоту равную самому высокому блоку.

2. Не использовать float-блоки, а использовать inline-блоки. Подробнее об этом в этой статье.

Или её перевод inline-block

Share this post


Link to post
Share on other sites

Дефолтный текст в инпуте

Проблема:

Необходимо сделать так чтоб по дефолту в <input> показывался некий текст, а когда элемент получает фокус нужно чтоб текст пропадал.

post-8922-0-89051900-1303889209_thumb.gi

Решение:

Использовать новый атрибут тега <input> - placeholder, который был добавлен в HTML5.


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>placeholder</title>
</head>
<body>

<form action="" method="post">
<fieldset>
<input type="text" placeholder="Default value" />
</fieldset>
</form>

</body>
</html>

Это решение будет работать только в последних версиях браузеров!

Кроссбраузерное решение с поддержкой старых браузеров:

Если нужна поддержка старых браузеров, то наилучшим выходом будет задействовать JavaScript, используя DOM-свойство элемента <input> defaultValue.


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>placeholder</title>

<script type="text/javascript">
function setClear(elem) {
if (elem.value == elem.defaultValue) {
elem.value = '';
}
}

function setDefault(elem) {
if (!elem.value) {
elem.value = elem.defaultValue;
}
}
</script>
</head>
<body>

<form action="" method="post">
<fieldset>
<input type="text" value="Default value" onfocus="setClear(this);" onblur="setDefault(this);" />
</fieldset>
</form>

</body>
</html>

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

  • Member Statistics

    46,511
    Total Members
    3,128
    Most Online
    anasteisa
    Newest Member
    anasteisa
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Если в кратце, проблема возникает из за того что когда заходим на страницу изначально текущий урл страницы
      http://localhost:3004/tablets/tablet_1
      Если мы покликаем по табам (у которых тоже реализован роутинг и к урлу добавляется еще значение)
      То урл будет менять свое значение например на 
      http://localhost:3004/tablets/tablet_1/characteristics
      И вот, допустим у нас сейчас этот урл и если страница перезагрзиться, то реакт будет считать что текущий урл уже
      http://localhost:3004/tablets/tablet_1/characteristics
      а не 
      http://localhost:3004/tablets/tablet_1 как предполагается
      И из за этого возникают проблемы
      Могут быть вот такие страницы 
      localhost:3004/tablets/tablet_1/characteristics/characteristics А так быть не должно. Подскажите как решить такую проблему
      Если подробнее:
      Делаю Интернет-магазин на Реакте (в рамках учебного проекта)
      На данный момент сделал роуты для нескольких страниц 
      [JS]
      <Route path="/" ... /> // главная страница
      <Route path="/tablets"  ... />  // страница категорий
      <Route path="/tablets/:id"  ... /> // детальная страница товара
      [/JS]
      И это все работает хорошо Проблема с роутингом началась когда я начал делать табы на детальной странице товара. Их я тоже хотел сделать через роутинг.
      [JS]
      <Route path="/tablets/:id/characteristics"  ... />
      <Route path="/tablets/:id/opinion"  ... />
      <Route path="/tablets/:id"  ... /> // по дефолту
      [/JS]
      Пути у табов:
      [JS]
      to=`${ текущий урл страницы }/characteristics` // Таб "Характеристки"
      to=`${ текущий урл страницы }/opinion` // Таб Отзывы
      to=`${ текущий урл страницы }` // Таб "Описание" (по дефолту)
      [/JS] http://skrinshoter.ru/s/221019/1f36Q0Gw И это работает исправно, до тех пор пока страница не перезагрузиться.
      Прикол в том, что если мы кликали по табам, урл менялся и допустим стал таким : http://localhost:3004/tablets/tablet_1/characteristics
      И потом вдруг страницу перезагрузили А при перезагрузке страницы текущий адрес получается уже http://localhost:3004/tablets/tablet_1/characteristics     а не   http://localhost:3004/tablets/tablet_1     как задумывалось.     Из-за этого возникают проблемы когда кликаешь по табам:     адрес получается уже      http://localhost:3004/tablets/tablet_1/characteristics/characteristics     http://skrinshoter.ru/s/221019/eTe8ZW5F Вот в этом и проблема. Как такое решить?
      Дело в том что location.pathname я передаю через props дочернему компоненту, он принимает его и в state я добавляю ему
      [JS]`${ this.props.pathName }/characteristics`[/JS]Вот код, как это выглядит:
        class App extends Component {   render() {     <Switch>         <Route path="/" exact={true} component={ CategoriesList }/>       <Route path="/tablets/:id/characteristics"         render={ ({ match, location }) => {           const { id } = match.params;           return <DetailPage itemId={ id } currentTab="characteristics" pathName={ location.pathname } />         }}/>       <Route path="/tablets/:id/opinion"         render={ ({ match, location }) => {           const { id } = match.params;           return <DetailPage itemId={ id } currentTab="opinion" pathName={ location.pathname } />         }}/>       <Route path="/tablets/:id"         render={ ({ match, location }) => {           const { id } = match.params;           return <DetailPage itemId={ id } currentTab="description" pathName={ location.pathname } />         }}/>       <Route path="/tablets"         render={({ location }) =>           <CategoryPage             goodList={goodsList.tablets}             title="Tablets"             location={ location }             exact={true}             />}       />     </Switch>   } } class DetailPage extends Component {   state = {     tabs: {       opinion: {         tabId: 'opinionTab',         tabTitle: 'Отзывы',         tabPathTo: `${ this.props.pathName }/opinion`,         tabContent: 'Контент отзывов'       },       characteristics: {         tabId: 'characteristicsTab',         tabTitle: 'Характеристики',         tabPathTo: `${ this.props.pathName }/characteristics`,         tabContent: 'Контент Характеристик'       },       description: {         tabId: 'descriptionTab',         tabTitle: 'Описание',         tabPathTo: `${ this.props.pathName }`,         tabContent: 'Контент описания'       }     }   };   findCurrentGood(goodsList, itemId) {     for (let key in goodsList) {       goodsList[key].forEach(category => {         if (category.id === itemId) {           this.currentGood = category         }       })     }   }   findCurrentTab() {     for (let key in this.state.tabs) {       if (key === this.props.currentTab) {         this.activeTab = this.state.tabs[key];       }     }   }   render() {     const { goodsList, itemId, currentTab, pathName } = this.props;     const { tabs } = this.state;     this.findCurrentGood(goodsList, itemId);     this.findCurrentTab();               return() {       <div className="tabs">             <div className="tabs__menu">               {                 Object.keys(tabs).map(tab => {                   const tabClass = classNames('tabs__link', {                     'tabs__link--active' : tab === currentTab                   });                   return (                     <Link key={ tabs[tab].tabId }                           to={  tabs[tab].tabPathTo }                           className={ tabClass } >                       { tabs[tab].tabTitle }                     </Link>                   )                 })               }             </div>             <div className="tabs__content">               <h3 className="info__title">{ this.activeTab.tabTitle }</h3>               <div className="info__text">                 { this.activeTab.tabContent }               </div>             </div>           </div>     }   } }  
    • Создали Landing Page на тематику "Межевание земельного участка" Сделано: - С нуля разработана концепция и структура Landing page;
      - Разработан стильный и современный дизайн;
      - Наполнили контентом;
      - Качественная верстка и программирование сайта (быстрая загрузка, чистый, валидный код);
      - Подобрали хостинг и домен для клиента, установили и настроили сайт, установили админку Клиент на выходе получил полностью готовый для работы Landing Page Срок изготовления - 2 недели Если вам нужен качественно представить свою услугу, товары или компанию пишите по контактам ниже, сделаем вам крутой веб-ресурс, будь то Landing Page, Сайт многостраничник, Интернет-магазин.
      По невысокой цене и разумные сроки
      Контакты: Телеграм: @Nikker
      Скайп: smo_perviy
      E-Mail: Golllandec@gmail.com    
    • Здравствуйте. Предоставьте, пожалуйста, ссылку на сайт
  • Popular Contributors