Правильная разметка для двух логотипов с заменой изображения Гилдера/Левина

Я разрабатываю сайт с двумя логотипами в заголовке: один выровнен по левому краю, а другой по правому краю. Мне удалось заставить его работать с заменой изображений Гилдера/Левина, но разметка не идеальна, и я не знаю, как действовать дальше. HTML:

 
<h1>

Foo Logo<span></span> <span id="separator">-<span> Bar logo<span id="bar"></span>
</h1>

Код (разметка): CSS:

  h1, h1 span { height:60px; width:300px; } h1 span { background-image: url(images/foo.png); } 

Код (разметка): Адаптивность отлично работает с использованием меньших изображений для небольших дисплеев.

Код для изменения размера логотипов выглядит примерно так (внутри запроса Скрытая информация :: Авторизуйтесь для просмотра »
).

  h1 { float:right; position:relative; /* allow span to be absolute positioned over h1 */ margin:0.25em 0.5em 0 0; padding:0; overflow:hidden; height:60px; width:300px; } h1 span { display:block; position:absolute; top:0; left:0; margin:0 auto; margin-right:1em; height:60px; width:300px; background-image: url(images/foo.png); } #bar { float:left; position:relative; /* allow span to be absolute positioned over #bar */ margin:0 0 0 1em; padding:0; overflow:hidden; height:70px; width:400px; } #bar span { display:block; position:absolute; top:0; left:0; margin:0 auto; height:70px; width:400px; background-image: url(images/bar.png); } 

Код (разметка): Я попробовал это, но у меня возникли проблемы со вторым логотипом, содержащимся в h1.

  <div id="top"><div class="widthWrapper"> <h1> Foo Logo<span></span> </h1> <div id="bar"> Bar logo<span></span> </div> <!-- #top, .widthWrapper --></div></div> 

Код (разметка): какой подход лучше всего подойдет для этого?

И это тот момент, который я ВСЕГДА пытаюсь донести до вас.

СЧИТЫВАНИЕ файлов не всегда важнее размеров.

Вы можете увидеть это, если загрузите через FTP.



что занимает больше времени: загрузка одного файла размером 10 мегабайт или сотни файлов размером 10 000? HTTP имеет те же проблемы с накладными расходами: в реальном мире в среднем для каждого файла после первых восьми требуется 200 мс (пятая секунды), а в худшем случае может потребоваться секунда или более, НЕЗАВИСИМО от скорости соединения.





Вы выполняете пинг или трассировку, умножаете это на три, и это то, сколько времени ДЕЙСТВИТЕЛЬНО занимает каждый запрос (называемый квитированием связи), единственная причина, по которой среднее значение ниже, - это возможность подключаться к более чем одному файлу одновременно, и если вы используете общедоступное подключение, например местную кофейню, (или если, как мой друг, ваша старушка смотрит «Доктора» на Netflix, а ваш 14-летний ребенок торчит за трубкой… хм, проводит исследования для школы) это число резко падает.

Удивительно, как быстро даже домашнее соединение со скоростью 45 Мбит/с может прерваться быстрее, чем попытка CM Punks войти в UFC.



К сожалению, ситуация снова будет только ухудшаться, поскольку НИКТО не строит какую-либо новую инфраструктуру высшего уровня - а так получилось, что я нахожусь на «не той стороне» «раздела трубопровода», а это означает, что я получаю более высокие скорости во Францию через Атлантический кабель, чем я проезжаю 80 миль по дороге в Бостон, Массачусетс.



В основном потому, что трассировка показывает, что трафик на самом деле идет через Атлантику и сначала НАЗАД.

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

Хотя БОЛЬШИНСТВЕННО это просто тот факт, что Time Warner и... хах, какая бы компания ни была на юге, которая переходит из рук в руки чаще, чем бывшее советское марионеточное государство третьего мира.

ведут закулисную войну за сферы влияния, несмотря на «джентльменское соглашение» не конкурировать на одних и тех же рынках.



Конечно, Charter только что выкупил Time Warner, так что только Кристмас знает, как будут развиваться мои собственные затраты на соединение и скорость, поскольку они пытаются взвинтить цены у потребителя, чтобы выплатить всем инвесторам, которые сделали выкуп возможным, поскольку акции обоих только что выросли.



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



вот почему «Сетевой нейтралитет» «Сейчас такая горячая тема среди компьютерных фанатов; пытаясь бороться с неизбежным исходом того, что люди, управляющие делами, прикарманивают больше, чем вкладывают обратно - до такой степени, что компании переходят из рук в руки, как горячие пирожки, как они всегда делают прямо перед крахом.

О, смотрите, это еще одна несостоявшаяся отрасль, которой ФРС может просто передать деньги на помощь, несмотря на то, что у нее нет плана ДЕЙСТВИТЕЛЬНО решить проблемы.



Уже более полутора десятилетий я слышу: «Широкополосная связь здесь, кого это волнует», и ВСЕ ЕЩЕ есть места, где это неправда, ВСЕГДА есть меньшие, более дешевые и менее мощные устройства, попадающие в руки большего количества людей, и стареющая инфраструктура, которая просто не успевает за ней.



с задачей.

Если вам посчастливилось жить в одном из маниакальных миров пикси, где вам была вручена новая инфраструктура, хорошо для вас! Но не обманывайте 80%+ населения мира, которые даже близко не подошли к этому.

Какую целевую аудиторию я упомянул - и почему обычно в моем самом узком медиа-запросе я часто удаляю ВСЕ ненужные изображения, чтобы просто пропустить открытый текст и изображения контента.

Конечно, я живу в районе, где 4G — это «да, верно, наслаждайтесь своей одной башней с нулевой видимостью в любой точке города», 3G — это «наслаждайтесь двумя барами или меньше, где бы вы ни находились», и единственное соединение, которое работает.

надежность - это старомодный GSM.



вот почему предстоящее закрытие GSM с целью вернуть эти частоты для "технологий будущего" означает, по сути, оставить три четверти ОКРУГА без покрытия сотовой связи, поскольку придурки ВСЕ ЕЩЕ не будут вкладывать средства в фактическое внедрение инфраструктура для новой технологии создана до того, как отключат старую!

Можно подумать, что они все еще расплачивались со старым банком, который закрыли, или что-то в этом роде, поскольку они просто клали все деньги в карманы и копили их в зарубежных банках вместо того, чтобы реинвестировать их в бизнес.

Вперед, капитализм на рынках, где нет конкуренции!

Этот код не деградирует корректно. Он показывает изображение вместо текста при его рендеринге без CSS. И еще, пожалуйста, поправьте меня, если я ошибаюсь, но img альтернативный вариант предназначен для описания изображения, а не для отображения в заголовке сайта, и изображение семантически не правильно находиться внутри ч1. Хорошо, опубликую онлайн-версию как можно скорее, возможно, завтра.

Большое спасибо, ваша помощь очень ценна. Я использовал #foo и #bar, чтобы упростить задачу. В шапке два логотипа: один из них — логотип магазина, другой — логотип их дистрибьютора. Оба расположены в заголовке, как показано в этом примере:
http://37.252.122.117/cc/

Я не. У меня есть друзья во всех слоях общества: от бедных, получающих пособие, до людей, зарабатывающих 200 тысяч долларов и больше в год.

Однако, за исключением некоторых моих друзей, у которых даже нет смартфона (используют старые телефоны Nokia и Ericsson), по собственному желанию, а не потому, что они не могут себе позволить лучшее, я думаю, что, пожалуй, худший телефон, который я знаю, — это iPhone.

4. Некоторые, возможно, все еще используют S3, Notes или аналогичные устройства, но обычно люди обновляют свои телефоны в худшем случае каждые 2-3 года, в среднем раз в год, я думаю.

Глядя на цифры, Telenor (крупнейшая телекоммуникационная компания Норвегии) утверждает, что около 8 из 10 имеют смартфоны, из них около 60% имеют смартфоны с возможностями 4G, 30% — с 3G, а количество остальных постоянно сокращается.

, иметь 2G или хуже.

Самый продаваемый мобильный телефон в Норвегии в прошлом году (2015): 1. айфон 6 2. айфон 6с 3. Самсунг С6 Край 4. Самсунг С6 5. Самсунг С5 Это тоже должно вам кое-что сказать.

Я думаю, вы немного неправильно понимаете Норвегию.

Конечно, у нас есть населенные пункты - в Осло, Бергене и других городах, входящих в первую десятку городов (по численности населения), вероятно, проживает не менее 3/5 (если не больше) от общей численности населения.

Однако Норвегия ДЛИННАЯ.

От оконечности Линдеснеса до Нордкаппа его длина составляет 1581 милю.

И большая часть из них по-настоящему не заселена – во всяком случае, это небольшие городки с населением 500 и менее человек.

Для всего этого также требуется высокоскоростной широкополосный доступ или хотя бы какое-то приличное соединение.

Именно поэтому только в Норвегии имеется более 4000 антенн 4G. Это, конечно, стоит денег, которые, похоже, ваша страна более склонна тратить на мелкие дрязги из-за земли, которая вам не принадлежит.



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

Имейте в виду, что вы живете в маленькой стране, может быть, вдвое меньше Техаса, где живу я. Эль-Пасо ближе к Лос-Анджелесу, чем к Далласу.

Более 600 миль малонаселены и представляют собой ранчо на высоких равнинах и сельскохозяйственные угодья.

Небольшая ферма, на которой я когда-то жил, находилась в 10 милях от ближайшего города с населением 1250 человек и в 70 милях от окружного центра в противоположном направлении.

Как сказала бы телекоммуникационная компания, «последняя миля» — это сука. Здесь, в Далласе, у меня интернет со скоростью 60 Мбит/с без ограничения данных, и это базовая услуга.



В худшем случае я загрузил 25 ГБ данных в более чем 20 000 файлов за одну ночь и утро одновременно с обычным просмотром страниц, электронной почтой и т. д. Дело не в том, что у нас нет такой услуги, а в том, что мы не маленький клочок земли с высокой плотностью населения, что делает экономичным предоставление каждому высокоскоростного обслуживания.



Это означает, что если вы не относитесь серьезно к людям, у которых нет высокоскоростного соединения, вы их обманываете.

Угадайте, где делают покупки люди, которым приходится ехать за 70 миль до магазинов? Можете ли вы сказать Интернет? Гэри

Так.

у вас или нет бедных людей, или вы их не знаете? Как именно люди, кроме штатных руководителей, зарабатывающие в пять раз больше среднего дохода (что это такое, 120 тысяч крон / 19 тысяч долларов США?), на самом деле могут позволить себе эти телефоны высокого класса?

Здесь, в Мурике, вы находитесь более чем в 20 милях от крупного городского центра.

(кроме кампусов колледжей, где с предполагаемыми взрослыми, с которыми по-прежнему обращаются как с детьми и которые в основном ведут себя как дети, по-прежнему платят за жизнь мамочка и папочка) Вы не увидите много смартфонов высокого класса в руках Джо Сикспака или Сьюзи Саншайн. Вы ДЕЙСТВИТЕЛЬНО видите много подделок Android низкого и среднего уровня... Например, мой CuBot GT99... или более старые устройства, потому что люди стреляли в них много лет назад. (Предполагая, что вы вообще их видите, учитывая, что во многих сельских частях страны никто не может позволить себе планы обслуживания, если они стоят столько же долларов, сколько недельный запас еды для семьи из трех человек.) Если только вы не занимаетесь только общепитом и/или не знаете только 2% самых богатых людей (или в вашей стране ЕСТЬ только то, что можно было бы считать 2% самых богатых людей в Америке, как и все ваше общество), то то, что вы описываете, звучит как аристократическая страна фантазий.

; совершенно оторван от «Джо на улице» Хотя в последний раз, когда я был в Скандаховии (по общему признанию, это было 20 лет назад), во всем регионе существовал аристократический общественный раскол.

становится довольно ясно, на чьей стороне вы, возможно, были воспитаны. Бедные остаются бедными, а богатые остаются богатыми, а я прямо здесь посередине... разве это не...

Это метод старой школы, а что, если ваши логотипы будут поверх изображения или рисунка? Может быть, попробовать что-то вроде этого?
http://codepen.io/sitechop/pen/VjaeqK

Не знаю, как выглядит ваш дизайн, поэтому я просто сделал несколько случайных вещей. Я добавил разделитель в виде :after на h1, черт возьми. Посмотрите, насколько чище выглядит html:

 
<h1>

<span class="logo-1">Logo</span>

<span class="logo-2">Logo</span>
</h1>

Код (разметка):

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



Лично меня это просто не беспокоит, но я не посещаю так много сайтов, на которых возникает эта проблема (кроме Facebook, но я все равно использую приложение, так что это не особо важно).

Спасибо, кажется, работает с некоторыми модификациями, хотя мне нужно протестировать его на других браузерах.

Знаете ли вы название этого метода замены изображений, чтобы получить дополнительную информацию? Это код: HTML:

 

h1 span, h1 small { 

float:none;

padding:0;

text-align:center;

margin:0 auto;

}

Код (разметка): CSS:

  h1 { overflow:hidden; padding:0 0.75em; } h1 span { white-space:nowrap; overflow:hidden; float:left; height:70px; width:400px; background-image: url(images/bar.png); text-indent:100%; } h1 small { float:right; height:60px; width:300px; background-image: url(images/foo.png); margin-top:0.30em; text-indent:100%; } 

Код (разметка): Как бы вы сделали так, чтобы графика располагалась одна поверх другой для медиазапросов? этот CSS не работает:

  <h1> <span> Foo </span> <small> Bar </small> </h1> 

Код (разметка):

Чаще всего это проблема дизайна, а НЕ метода.

предварительная композиция фона часто может исправить это, как и «достаточно близкое сглаживание», если обращаться с ним правильно.

Если вам НУЖЕН альфа-передний план, вы всегда можете удвоить фон вторым замещающим изображением.

Есть много способов обойти это.

и если вы не можете это обойти, то вы, вероятно, возитесь с дурацкой графической ерундой, созданной каким-то PSD-жокеем, у которого, вероятно, НУЛЕВОЙ чертов бизнес по разработке чертовой штуки для веб-сайтов.

. Типичный художник, ДУМАЮЩИЙСЯ, что он дизайнер, хотя он недостаточно разбирается в HTML, CSS, излучающем цветовом пространстве или доступности.

проектировать только две вещи; и Джек уехал из города...

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

Есть причина, по которой я стараюсь избегать использования альфа-прозрачности на веб-сайтах!

Судя по вашим описаниям проблем с сотовой связью и пропускной способностью, я чувствую все меньше и меньше желания даже посетить США.

Я, как вы знаете, из привилегированной части Европы, где за последние 10 лет были вложены миллиарды инвестиций, чтобы охватить всю страну как минимум приличным 4G - на данный момент я думаю, что охвачено около 87% страны.

, а чего нет, так это в основном очень маленькие деревни (думаю, менее 500 человек) или дикая местность.

Не думаю, что я бы выжил, если бы у меня был своего рода работающий Wi-Fi, чтобы выходить в Интернет со скоростью, близкой к приличной.

Я думаю, это один из главных аргументов в пользу Starbucks и тому подобного: бесплатный Wi-Fi.

Я переписал его, используя Гилдера/Левина.

Код CSS в медиа-запросе не работает при изменении размера окна: HTML:

 
@media (max-width:50em) {

...

h1 span, h1 small {

float:none;

padding:0;

text-align:center;

margin:0 auto;

}

...
}

Код (разметка): CSS:

  h1 span { float:right; position:relative; margin:0.25em 0.5em 0 0; padding:0; overflow:hidden; height:60px; width:300px; } h1 span span { display:block; position:absolute; top:0; left:0; margin:0 auto; margin-right:1em; height:60px; width:300px; background-image: url(images/foo.png); } h1 small { float:left; position:relative; margin:0 0 0 1em; padding:0; overflow:hidden; height:70px; width:400px; } h1 small span { display:block; position:absolute; top:0; left:0; margin:0 auto; height:70px; width:40px; background-image: url(images/bar.png); } 

Код (разметка): раздел медиа-запросов не работает так, как я хочу:

  <h1> <span> Foo<span></span> </span> <small> Bar<span></span> </small> </h1> 

Код (разметка): Код в первом сообщении работает нормально, но эта разметка мне кажется более правильной.

Не уверен, целесообразно ли это сделать или можно оставить первую версию.

Я посмотрю: до и: после, спасибо.

Это потому, что он чертовски работает правильно, в отличие от той дурацкой ерунды с отступами в тексте, которую вы выложили! Делать НЕТ используйте метод отступа текста, поскольку он устраняет одну из ВСЕХ причин даже ИСПОЛЬЗОВАТЬ замену изображений... изображения отключаются, пока CSS все еще включен. Вы получите просто две пустые коробки. СОВЕРШЕННО не в тему!!! Вот почему вы создаете пустой интервал и размещаете его НАД текстом, вместо того, чтобы пытаться удалить текст или переместить его туда, где его нельзя будет увидеть за кадром.



Наши друзья в Канаде и Австралии сталкиваются с ограничениями пропускной способности, люди используют безопасные методы, которые ограничивают пропускную способность, тот факт, что широкополосная связь ВСЕ ЕЩЕ является мифом для большей части континентальной части США, и надвигающийся кризис пропускной способности, потому что НИКТО не строит новые магистральные сети, как они даже не окупилась существующая инфраструктура, а мобильные соединения в большинстве мест являются жалкой шуткой, отключение изображений - вполне обычное дело.



использование текстовых отступов заставляет этих людей идти нах*й, вот почему я говорю любому разработчику, выступающему за сказал технику, чтобы сделать то же самое!
Использование text-indent для замены изображений - это НЕДОСТУПНЫЙ МУСОР!!! На самом деле, хотя, не видя рассматриваемых изображений, ФАКТИЧЕСКОГО текста, который заменяется, и того, чем на самом деле является каждый элемент, практически невозможно сказать вам, какой должна быть правильная разметка для них.

Это тот случай, когда заполнители и капризы просто не помогают.



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

Нет, Норвегия все еще маленькая страна.



Я сравнил с Техасом просто потому, что мне это удобно и я знаком с вопросами создания сети, охватывающей сопредельную территорию США 1650 на 2800 миль плюс Аляску и Гавайи, а также островные территории (в основном тропические, но На Аляске есть острова Арктики и Бореальной зоны). На восточном побережье также есть около 300 барьерных островов; не все заселены.

Мои знания о Норвегии, возможно, и не слишком обширны, но они явно шире, чем ваши знания о США.

Гэри

Я в некоторой степени согласен с этим, но это также немного зависит от того, чего вы пытаетесь достичь.

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



Если я ориентируюсь на норвежских пользователей, то более яркий, красивый и работающий на широком спектре устройств будет немного важнее, чем безупречная работа на P3 с IE7. На самом деле я создаю сайты, которые по большей части находятся «в хорошем состоянии», когда дело касается доступности и отзывчивости, хотя @deathshadow не является поклонником того, что я использую jQuery.



В основном мои страницы работают хорошо как с CSS, JS, так и с отключенными изображениями, если это так.

цель.

Вы можете посмотреть https://www.bergenpchjelp.no

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

Хм... знаете, я не совсем уверен, что отнесу ко второму как к контенту... но опять же без ПОЛНОГО содержание страницы, размеченной ДО того, как возиться с внешним видом, я не могу сказать. Я понятия не имею, как эти изображения связаны с остальной частью страницы... и подходят ли они вообще для обозначения H1. Использование RTL при обратном порядке заголовков тоже кажется довольно странным.

Не правда ли, это несколько недальновидно?



Мой рабочий стол достаточно быстр, чтобы справиться с вирусами, но компьютер, который у меня на работе, — не совсем (вот почему я использую здесь Palemoon с uBlock + NoScript). Только в прошлом году у нас все еще было несколько машин всего с 512 МБ ОЗУ, а другие с 1 ГБ ОЗУ все еще распространены.



Был даже один компьютер с Windows 98, который все еще использовался. Есть много случаев, когда у вас просто нет возможности обновиться, и вам все равно приходится пользоваться компьютером.

Особенно в таких местах, как образовательные, государственные учреждения или благотворительные организации, вам часто приходится иметь дело с очень старым оборудованием.



Кстати, я на самом деле считаю, что обеспечение бесперебойной работы сайтов на медленном оборудовании должно быть частью доступности Интернета, потому что часто пожилые люди, люди с ограниченными возможностями, люди с финансовыми трудностями и т. д. просто не могут позволить себе обновить свое оборудование.



(или даже купить его).

Однако пропускная способность — это еще не все.

Зачастую отображение очень больших изображений (а также больших скриптов и другого раздутого контента) может привести к перегрузке настольного ПК, не говоря уже о мобильных телефонах.

Отключение изображений (и особенно JS) тоже может помочь в этом вопросе.

Большинство мобильных телефонов (помните, что большинство людей не используют флагманы) довольно медленные и с трудом обрабатывают раздутые сайты, независимо от скорости соединения. К тому же, большая часть этих изображений — просто бесполезное украшение фона.

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

которые обычно обслуживаются многими популярными веб-сайтами.

Блокировка хотя бы некоторых из них помогает