Новый проект . . . Новые вопросы с использованием столбцов

Valentin Golishev

Это было заклинание с тех пор, как я приставал сюда.

Я играю в новом проекте и столкнулся с проблемой, с которой понятия не имею, как правильно справиться.

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

Для этих двух столбцов я хочу, чтобы в первом столбце отображалось что-то вроде ВЕСА, а затем во втором столбце я хочу, чтобы оно отображалось примерно как 5 фунтов с некоторым разделением между двумя столбцами.

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

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

 


<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="utf-8">


<meta name="Robots" content="индекс, следовать">


<meta name="viewport" content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 1">


<meta name="description" content="Винтажный блокнот Гарри Поттер/дневник/блокнот в твердом переплете/планировщик повестки дня/календарь на 2017-2018-2019 гг.">


<link rel="stylesheet" href="screen2.css" media="screen,projection,tv">


<title>Vintage Harry Potter Notebook | HouseofHarry.com</title>


<link rel="shortcut icon" href="/images/favicon.png"> 


</head>


<html>


<body>


<div id="contentWrapper">


<h1>


<a href="/">


US Direct Goodies


<span><!-- image sandbag --></span>


<small>All The Great Goodies You Want & Need</small>


</a>


</h1>


<div id="productWrapper">


<img src="images/black-focus-flashlight-torch.jpg" alt="Винтажный блокнот Гарри Поттера/дневник/твердый переплет" /> 


<div id="productInfo">


<h2>E6 XML T6 1800LM 10W 5 Modes Focus Flashlight Torch Black</h2>


</div>


<div id="purchaseInfo">


<div id="total">Your Price:</div><div id="totalPrice">$17.08 USD</div>


<br><br>


<ul>


<li><b>List Price:</b><del>$12.49 USD</del></li> 


<li><b>You Save:</b><span class="price">$3.50</span></li>


</ul>


<form target="paypal" action="[URL='https://lumtu.com/yti/YzJJzY3JodHRwczovL3BheXBhbC5jb20vY2dpLWJpbi93ZW39i']https://www.paypal.com/cgi-bin/webscr[/URL]" method="post">


<input type="hidden" name="cmd" value="_s-xclick">


<input type="hidden" name="hosted_button_id" value="HVDS8AR6EA4GC">


<input type="image" src="images/cart.jpg" alt="корзина" border="0" name="submit" alt="PayPal — более безопасный и простой способ оплаты онлайн!">


<img alt="PayPal – более безопасный и простой способ оплаты онлайн" border="0" src="[URL='https://lumtu.com/yti/acmmcaWZodHRwczovL3BheXBhbG9iamVjdHMuY29tL2VuX1VTL2kvc2NyL3BpeGVsLVGe']https://www.paypalobjects.com/en_US/i/scr/pixel.gif[/URL]" width="1" height="1">


</form> 


FREE SHIPPING WORLDWIDE<br><br>


100% SATISFACTION GUARANTEE<br><br>


100% SECURE PAYMENTS Through PayPal


<!-- purchaseInfo --></div>


<!-- productInfo --></div>


<div id="bar">


<p>Product Description</p>


<!-- bar --></div>


<div id="description">


<p>The beam of light from this flashlight is bright and wide.



The bright beam can be seen miles away in the dark, that you can use it to guide your ways.



Widely used, it is a wonderful tool for household use! This flashlight is features high-quality material that is sturdy and durable enough for extended daily use.</p>


<br><br>


<b>FEATURES</b>


<ul>


<li>This flashlight uses of a 10W bulb, producing very bright beam of light</li>


<li>This flashlight uses a smooth reflector. This reflector provides a more concentrated beam, and therefore a better throw</li>


<li>The body of this flashlight is built of high quality aluminum alloy, and it has a very solid construction</li>


<li>Internal wiring applies the high efficient booster circuit, and can utilize the batteries in the largest extent</li>


<li>Waterproof, suitable for outdoor environment, adverse weather conditions except for diving</li>


<li>Focus function that allows the beam to be focused</li>


</ul>


<div id="specsA">


<b>SPECIFICATIONS:</b><br>


<ul>


<li>Dimensions: </li>


<li>Weight: </li>


<li>Emitter Type: </li>


<li>Lumens: </li>


<li>Power: </li>


<li>Bulb Quantity: </li>


<li>Light Color: </li>


<li>Lightbulb Lifespan: </li>


<li>Modes: </li>


<li>Mode Arrangement: </li>


<li>Lighting Distance: </li>


<li>Battery Configuration: </li>


<li>Input Voltage: </li>


<li>Runtime: </li>


<li>Switch Type: </li>


<li>Switch Location: </li>


<li>Lens: </li>


<li>Reflector: </li>


<li>Material: </li>


<li>Color: </li>


<li>Waterproof: </li>


<li>Lanyard: </li>


<li>Focusing: </li>


</ul>


</div>


<div id="specsB">


<ul> 


<li>(5.71 x 1.50 x 1.10)" / (14.5 x 3.8 x 2.8)cm / (L x Head Dia. x Body Dia.)</li>


<li>168 g / 5.93 oz</li>


<li>T6</li>


<li>1800 Lumens</li>


<li>10W</li>


<li>1</li>


<li>White</li>


<li>100000 hours</li>


<li>5</li>


<li>Hi > Mid >Lo > Strobe >SOS</li>


<li>200m</li>


<li>1 x 18650 battery / 3 x AAA Batteries (not included)</li>


<li>3.7-4.2V</li>


<li>2-3 hours</li>


<li>Clicky / Clickie</li>


<li>Tail-cap</li>


<li>Convex Lens</li>


<li>Aluminum Smooth / SMO Reflector</li>


<li>Aerospace aluminum alloy</li>


<li>Black</li>


<li>Yes</li>


<li>Yes</li>


<li>Yes</li> 


</ul>


</div> 


<b>Package Includes:</b>


<ul>


<li>1 x T6 LED Flashlight</li>


<li>1 X AAA Battery Holder</li>


<li>1 X 18650 Battery Holder</li>


<div id="delivery">Please allow 7 - 10 days delivery time</div> 


<!-- description --></div>


<div id="paymentMethods">


<img src="/images/payment.jpg" alt="Способы оплаты">


<!-- paymentMethods --></div>


<!-- productWrapper --></div>


<!-- contentWrapper --></div>


</body>


</html>

Код (разметка): И мой HTML для страницы выглядит так:

  /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img, fieldset { border:none; } font-family { arial,helvetica,sans-serif; } /* fix for legacy iOS and windows Mobile devices */ @media (max-width:512px) { * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } /* fix for HDX displays like the Kindle Fire HDX */ @media (-webkit-min-device-pixel-ratio:2) and (min-width:1600px), (min-resolution:172dpi) and (min-width:1600px) { html { font-size:200%; } } body { background:#FFF; } #contentWrapper { max-width: 69em; margin: 0 auto; overflow:hidden; -webkit-box-shadow: 0 0 1px 1px #000, 0 0 1.5em 0.1em #000; box-shadow: 0 0 1px 1px #000, 0 0 1.5em 0.1em #000; -webkit-border-radius: 1em; border-radius: 1em; background: #FFF; } * html #contentWrapper { width:55em; } h1 { padding-left: 0; font-size: 100%; -webkit-border-radius: 1em 1em 0 0; border-radius: 1em 1em 0 0; } h1 a { position: relative; display: block; padding: 40px 0; text-decoration: none; font: bold 40px/44px arial,helvetica,sans-serif; color: #000; } h1 span { position: absolute; top: 0; left: 0; width: 100%; height: 109px; background: url(images/header.jpg) center no-repeat; -webkit-border-radius: 0.4em 0.4em 0 0; border-radius: 0.4em 0.4em 0 0; } h1 small { display:block; font:bold 48%/120% arial,helvetica,sans-serif; } h2{ font-size: 1.5em; } .clear-both { clear: both; } #productWrapper { padding: 1em; background: #FFF; } #productInfo { background: #FFF; margin: -32em 0 0 37em; padding-top: 0.5em; width: 30em; height: auto; font-family: arial,helvetica,sans-serif; color: #000; font: 1em; } #purchaseInfo { width: 19em; height: 24em; margin: 2em 0 0 40em; padding: 1em; color: #000; border: 1px solid #0195C5; } #purchaseInfo ul { margin-top: 2em; } #purchaseInfo li { list-style-type: none; max-width: 20em; margin: -1em 0 1em 0; font: 1em; } #purchaseInfo li .price { color: red; font-size: 1.5em; } #purchaseInfo li > b { width: 6em; display: inline-block; } #purchaseInfo li del, li span { text-align: left; display: inline-block; margin-left: 2em; } #total { font-family: arial,helvetica,sans-serif; font-weight: bold; font: 1.5em; padding: 2em 1em 0 0; display: inline; } #totalPrice { font-family: arial,helvetica,sans-serif; font-weight: bold; font-size: 1.75em; color: red; display: inline; padding-bottom: 4em; } #purchaseInfo ul { list-style: none; } #purchaseInfo li { padding-bottom: 1.25em; } #purchaseInfo img { display: block; margin: 0 auto; padding: 2em 0 2em 0; } #bar { width: 100%; background: -webkit-gradient(linear, left top, right top, from(#012C70), to(#000)); height: 2.5em; margin-top: 5em; } #bar p { padding: 0.5em 0 0 1em; font-family: arial,helvetica,sans-serif; font-weight: bold; font-size: 1.1em; color: #FFF; } #description { padding: 1em; } #description p { padding: 0.5em 3em 0 2em; font-family: arial,helvetica,sans-serif; color: #000; font: 1em; } #description ul { margin: 0 0 1.5em 0; padding: 1em; color: #000; } #description li { margin-left: 2em; font-family: arial,helvetica,sans-serif; font-size: 1em; line-height: 1.5em; } #specsA { font-size: 1em; } #specsA ul { list-style: none; margin: 0 0 1.5em 0; padding: 1em; color: #000; } #specsA li { margin-left: 2em; font-family: arial,helvetica,sans-serif; font-size: 1em; line-height: 1.5em; } #specsB { text-decoration: none; margin: -38em 0 0 15em; font-size: 1em; } #specsB ul { list-style: none; margin: 0 0 1.5em 0; padding: 1em; color: #000; } #specB li { margin-left: 2em; font-family: arial,helvetica,sans-serif; font-size: 1em; line-height: 1.5em; } #delivery { width: 100%; text-align: center; margin-top: 2em; font-family: arial,helvetica,sans-serif; font-size: 1.1em; } #paymentMethods { text-align: center; } #footer { width: 100%; text-align:center; padding:1em; height: 2em; background: -webkit-gradient(linear, left top, right top, from(#012C70), to(#000)); } #footer p { font-family: arial,helvetica,sans-serif; color:#FFF; } #footer span { margin-right: 40px; }

Код (разметка): Спасибо, что посмотрели на это.

. .

Nikolay Kapurov

Для этого я создал скрипку: https://jsfiddle.net/6adwcdw4/

Он не реагирует, поэтому я бы на это посмотрел, но ваша большая проблема в том, что вы пытаетесь использовать списки для табличной информации. Лично у меня не возникло бы проблем с использованием для этого таблицы или элементов div с отображением: https://css-tricks.com/almanac/properties/d/display/#display-table

Когда вы думаете о доступности и индексации поисковыми системами двух списков, это не дает правильного понимания информации на странице.

landysh1

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

Сузьте окно браузера до тех пор, пока макет не нарушится.

Это ваша точка останова.

Используйте значения em для запроса Скрытая информация :: Авторизуйтесь для просмотра »
. Внесите изменения в CSS, чтобы исправить макет; затем продолжайте сужать окно, пока оно снова не сломается.

Это ваша следующая точка останова.

Продолжайте сужать и исправлять по мере необходимости, пока ширина окна не достигнет ~320 пикселей. Это мой метод.

У меня это работает, хотя YMMV. ваше здоровье, Гэри

Archvile1

Использование DL не так уж и плохо, даже при старом описании терминов и определений было бы хорошо. Мне просто интересно, почему некоторые очевидные теги H3 являются тегами , почему очевидный

является тегом

...

... или если вы пойдете по табличному пути, один из этих будет ... да, я бы сказал, смиритесь с этим и используйте таблицу, чтобы у вас было правильное семантическое отношение 1:1.

Seeker1

Но затем используйте JavaScript, чтобы взять эту базовую безопасную резервную разметку и превратить ее в версию со сценарием.

Я бы НЕ тратил время, пытаясь реализовать этот сценарий на чистом CSS, вместо этого позволив пользователям создавать сценарии, чтобы они могли просто использовать страницу, как любую обычную галерею.

Причина, по которой я бы не стал использовать чистый CSS, заключается в том, что если пользователь не наводит курсор и не щелкает большими пальцами, решение на чистом CSS ВСЕ ЕЩЕ должно загружать полноразмерное изображение «просмотрено или нет» - и это просто пустая трата пропускной способности.

.

Алексей Кацур

Я бы выбрал dl (список описаний {переработан и переименован в html5}). По сути, это тоже таблица, но первое поле состоит из заголовков ( th ), и для каждого заголовка существует только одно поле данных.

Кажется, dl хорошо подходит для этого.

 


<h2?>Specifications</h2?> <!-- you're not marking your headings properly -->


<dl>


<dt>Dimensions:</dt>


<dd>5.71 x 1.50 x 1.1in / 14.5 x 3.8 x 2.8cm</dd>


<dt>Weight:</dt>


<dd>168 g / 5.93 oz</dd>


...


</dl>

Код (разметка): ура, Гэри

VefbootmemY

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

Поэтому я попробовал , предложенный Гэри.

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

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

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

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

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

В любом случае, если у вас есть возможность взглянуть на готовую страницу (test.allvixen.com/page2.php), я буду очень признателен за любые предложения относительно того, что я могу сделать, чтобы улучшить код или дизайн.

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

Я думаю, что добился некоторого прогресса.

uaseo

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

Сибирофф_Хостинг

Хорошо . . . но позвольте мне задать вам глупый вопрос.

Когда я сужаю браузер и он ломается (я полагаю, под разрывом вы имеете в виду изменение макета?), как мне узнать, какова ширина? Есть ли способ определить это через браузер или что-то в этом роде?

У меня есть еще один вопрос к вам, ребята.

Считается ли хорошим тоном объединять JS с чистым CSS (из-за отсутствия лучшего способа описать это)?

Я рассматриваю возможность использования столбца миниатюр слева или под основным изображением, чтобы при наведении курсора мыши или щелчке по миниатюре отображалось увеличенное изображение в определенном месте.

Я изучил это, и похоже, что это сделано с помощью JS, и мне интересно, можно ли это сделать с помощью CSS или приемлемо ли использовать JS? Заранее спасибо и за всю помощь.

. .

Похожие темы	Дата
Дизайнеру нужно образование или вдохновение?	19.10.2024, 18:10
Интересуюсь иллюстрациями органов	19.10.2024, 18:10
Как переместить весь сайт с длинными URL-адресами в Wordpress?	19.10.2024, 18:10
Вы заинтересованы в новом способе монетизации своего блога?	19.10.2024, 18:10
В чем суть блоггерства?	19.10.2024, 18:10
Попытка создать страницу продаж в Udesign: нужно удалить заголовок + боковую панель: D	19.10.2024, 18:10
Пользовательские шаблоны типов сообщений не работают	19.10.2024, 18:10
какая CMS лучше подойдет для моей задачи	19.10.2024, 18:10
Не веб-дизайнер трясется.... Может кто-нибудь мне помочь?!?	19.10.2024, 18:10
Проблема с меню	19.10.2024, 18:10

Новый проект . . . Новые вопросы с использованием столбцов

Valentin Golishev

Nikolay Kapurov

landysh1

является тегом

...

Archvile1

Seeker1

Алексей Кацур

VefbootmemY

uaseo

Сибирофф_Хостинг

I AM

Интересно