Ищу совет/помощь Foundation 6

uzeful777

Это мой первый пост здесь, поэтому я надеюсь, что это правильное место. Я пытаюсь научиться создавать адаптивные веб-сайты и только начинаю изучать Zurb's Foundation 6. В любом случае, я собрал простую веб-страницу, но у меня есть пара вопросов, на которые я не могу найти ответы.

Я надеюсь, что эксперты здесь смогут мне помочь.

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

Вопрос 1: Как переместить боковую панель вправо? Вопрос 2: Как я могу добавить место непосредственно перед надписью «Больше видео» в нижней части страницы? Моя тестовая страница находится по адресу test.allvixen.com/p2.html. И мой код:

 <!DOCTYPE html>


<html lang="en">


<head>


<meta charset="utf-8">


<title>Bound Gangbangers</title>


<link rel="stylehseet" href="[URL='https://lumtu.com/yti/cwYYwc3NodHRwOi8vdGVzdC5hbGx2aXhlbi5jb20vY3NzL2ZvdW5kYXRpb24u2bp']http://test.allvixen.com/css/foundation.css[/URL]">


<link rel="stylesheet" href="[URL='https://lumtu.com/yti/cj55jc3NodHRwOi8vdGVzdC5hbGx2aXhlbi5jb20vY3NzL25vcm1hbGl6ZS6lG']http://test.allvixen.com/css/normalize.css[/URL]">


<link rel="stylesheet" href="[URL='https://lumtu.com/yti/cMmmMc3NodHRwOi8vdGVzdC5hbGx2aXhlbi5jb20vY3NzL2ZvdW5kYXRpb24ubWluLlWb']http://test.allvixen.com/css/foundation.min.css[/URL]">


<link rel="stylesheet" href="[URL='https://lumtu.com/yti/cj55jc3NodHRwOi8vdGVzdC5hbGx2aXhlbi5jb20vY3NzL2FwcCwF2']http://test.allvixen.com/css/app.css[/URL]">


<!--[if IE]>


<script src="[URL='https://lumtu.com/yti/a4SS4anNodHRwOi8vaHRtbDVzaGltLmdvb2dsZWNvZGUuY29tL3N2bi90cnVuay9odG1sN1Gd']http://html5shim.googlecode.com/svn/trunk/html5.js[/URL]"></script>


<![endif]-->


<meta content="ширина = ширина устройства" name="viewport">


</head>


<body>


<header id="site-header">


<a href="[URL='https://lumtu.com/yti/bwbbwbS9odHRwOi8vdGVzdC5hbGx2aXhlbi5jibl']http://test.allvixen.com/[/URL]">


<img src="[URL='https://lumtu.com/yti/cq55qcGdodHRwOi8vdGVzdC5hbGx2aXhlbi5jb20vaW1hZ2VzL2hlYWRlcilRW']http://test.allvixen.com/images/header.jpg[/URL]"></a>


</header>


<div class="wrapper">


<div class="large-8 columns">


<a href="[URL='https://lumtu.com/yti/LAaaAL3dodHRwOi8vcHJvbW8uYm91bmRnYW5nYmFuZ3MuY29tL2cvYWxsdml4ZW5yZXZzaGFyZS1iZ2Jhbmdlci8xNjgzMi9tLzAvzLt']http://promo.boundgangbangs.com/g/allvixen:revshare-bgbanger/16832/m/0/h/w[/URL]">


<video id="bound_gangbang_video_1" class="video-js vjs-default-skin"


controls preload="none" width="100%"


poster="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdGVzdC5hbGx2aXhlbi5jb20vaW1hZ2VzLzEuzLz']http://test.allvixen.com/images/1.jpg[/URL]"


data-setup='{"example_option":true}'>


<source src="[URL='https://lumtu.com/yti/cQbbQcGdodHRwOi8vdGVzdC5hbGx2aXhlbi5jb20vdmlkZW8vdGVzdDEuDdz']http://test.allvixen.com/video/test1.mpg[/URL]" type='video/mp4' /></a>


<p>This is just some sample text for whatever purpose. This is just some sample text for whatever purpose.


This is just some sample text for whatever purpose. This is just some sample text for whatever purpose.


This is just some sample text for whatever purpose. This is just some sample text for whatever purpose.


This is just some sample text for whatever purpose. This is just some sample text for whatever purpose.</p>


</div>


<div id="sidebar">


<div class="large-3 columns" style="background-color: pink">


<center>


<p class="text2">SIDE BAR</p> 


<a href="">


<img style="margin-bottom: 5em" src="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdGVzdC5hbGx2aXhlbi5jb20vaW1hZ2VzLzIuzLz']http://test.allvixen.com/images/2.jpg[/URL]" alt="Присоединяйся сейчас" /></a>


<br />


<a href="">


<img src="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdGVzdC5hbGx2aXhlbi5jb20vaW1hZ2VzLzIuzLz']http://test.allvixen.com/images/2.jpg[/URL]" alt="Присоединяйся сейчас"/></a>


</center>


</div>


</div>


</div>


<div class="large-12 columns">


<div class="text3">Other Videos You May Enjoy</div>


<div class="large-3 medium-6 columns" style="padding: 1%">


<a href="" rel="nofollow">


<img src="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdGVzdC5hbGx2aXhlbi5jb20vaW1hZ2VzLzMuzLz']http://test.allvixen.com/images/3.jpg[/URL]" alt="" /></a>


<p>Just some pure simple text describing what the video is all about</p>


</div>


<div class="large-3 medium-6 columns" style="padding: 1%">


<a href="" rel="nofollow">


<img src="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdGVzdC5hbGx2aXhlbi5jb20vaW1hZ2VzLzMuzLz']http://test.allvixen.com/images/3.jpg[/URL]" alt="" /></a>


<p>Just some pure simple text describing what the video is all about</p>


</div>


<div class="large-3 medium-6 columns" style="padding: 1%">


<a href="" rel="nofollow">


<img src="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdGVzdC5hbGx2aXhlbi5jb20vaW1hZ2VzLzMuzLz']http://test.allvixen.com/images/3.jpg[/URL]" alt="" /></a>


<p>Just some pure simple text describing what the video is all about</p>


</div>


<div class="large-3 medium-6 columns" style="padding: 1%">


<a href="" rel="nofollow">


<img src="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdGVzdC5hbGx2aXhlbi5jb20vaW1hZ2VzLzMuzLz']http://test.allvixen.com/images/3.jpg[/URL]" alt="" /></a>


<p>Just some pure simple text describing what the video is all about</p>


</div>


<div class="large-3 medium-6 columns" style="padding: 1%">


<a href="" rel="nofollow">


<img src="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdGVzdC5hbGx2aXhlbi5jb20vaW1hZ2VzLzMuzLz']http://test.allvixen.com/images/3.jpg[/URL]" alt="" /></a>


<p>Just some pure simple text describing what the video is all about</p>


</div>


<div class="large-3 medium-6 columns" style="padding: 1%">


<a href="" rel="nofollow">


<img src="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdGVzdC5hbGx2aXhlbi5jb20vaW1hZ2VzLzMuzLz']http://test.allvixen.com/images/3.jpg[/URL]" alt="" /></a>


<p>Just some pure simple text describing what the video is all about</p>


</div>


<div class="large-3 medium-6 columns" style="padding: 1%">


<a href="" rel="nofollow">


<img src="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdGVzdC5hbGx2aXhlbi5jb20vaW1hZ2VzLzMuzLz']http://test.allvixen.com/images/3.jpg[/URL]" alt="" /></a>


<p>Just some pure simple text describing what the video is all about</p>


</div>


<div class="large-3 medium-6 columns" style="padding: 1%">


<a href="" rel="nofollow">


<img src="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdGVzdC5hbGx2aXhlbi5jb20vaW1hZ2VzLzMuzLz']http://test.allvixen.com/images/3.jpg[/URL]" alt="" /></a>


<p>Just some pure simple text describing what the video is all about</p>


</div> 


</div> 


</div>


</body>


</html>

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

Максим Кирилышев

Тень Смерти, ты не так уж шутил.

. . ты был? Я провел большую часть вчерашнего дня, читая ваш ответ.

Кое-что из этого имело для меня смысл с самого начала.

Некоторые из них мне пришлось прочитать 2-3 раза, прежде чем это приобрело смысл, но, тем не менее, мне нужно переварить массу информации.

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

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

мне. Вы можете рассчитывать на то, что я буду просматривать вашу информацию снова и снова.

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

По мере того, как я углубляюсь в это, могу вас заверить, у меня возникнет еще больше вопросов.

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

Ваши усилия высоко оценены. С уважением . . .

palitra

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

Вам не хватает знаний базового CSS, чтобы внести изменения самостоятельно.

Сделайте себе ОГРОМНУЮ услугу и отбросьте эту дымящуюся кучу дурацкой чепухи с ее ПРЕЗЕНТАТОННЫМ использованием классов, и просто напишите простой HTML + CSS, чтобы у вас был ФАКТИЧЕСКИЙ контроль и вы могли использовать часть кода.

БОЛЕЕ ТАК, что вы можете вытащить всю лишнюю ерунду из разметки (например, эти атрибуты стиля) и фактически использовать семантическую разметку — например, те очевидные заголовки, которые должны быть H2, которые у вас есть в P.

Вот почему у вас, вероятно, примерно на 33% больше HTML, чем нужно для чего-то относительно простого.

Забудьте о фреймворках и научитесь использовать HTML и CSS без этой раздутой ерунды.

ЕДИНСТВЕННОЕ, чему вы можете научиться из фреймворков, таких как bootcrap, Foundation, YUI, — это тому, как НЕ создавать веб-сайт.

Вот почему у вас есть три таблицы стилей, выполняющие работу одной: неправильное использование или полное отсутствие правильных медиа-целей,

Bogdan3

Да, здесь я должен согласиться с @deathshadow — этот макет довольно просто создать, используя не более половины HTML, а CSS для него не должен занимать больше нескольких строк.

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

В зависимости от того, что вы хотите поддерживать, если вы используете решения CSS 3, вы также можете использовать некоторые современные методы отображения, такие как display: flex; - но это не будет работать ни в чем старше IE 10(?) (Я немного не уверен, когда IE начал поддерживать flex - возможно, это было не раньше 11). Однако если вас не интересуют старые браузеры, это не проблема.

egor11

Я был бы признателен, что. Хоть я и новичок, у меня есть кое-какие практические знания в области html и css — возможно, этого достаточно, чтобы доставить мне массу неприятностей. Вы также должны знать, что я не ищу «простых» способов создания веб-сайтов.

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

Fisherman1

Смейся, раз уж ты зеленый, я остановился преждевременно и просто нажал на пост. Это была разбавленная неполная версия. ЕСЛИ у меня будет время позже (без обещаний), я могу быстро переписать его с нуля, чтобы показать вам, что я считаю «правильным» подходом. Я делаю это время от времени.

Europarl_BG

Хорошо, я кое-что догадался, и это может измениться, когда я напишу CSS, но сейчас вы можете просмотреть документ без стиля здесь:
http://www.cutcodedown.com/for_others/vanceVP/noCSS.html

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

(устройства, используемые для доступа пользователей к страницам, браузер всегда является ПА, но ПА не всегда является браузером) ВОТ ЧТО ОНИ ПОЛУЧАЮТ. НЕСМОТРЯ НИ НА ЧТО того, что вы объявляете в своем CSS. Вы можете видеть, что это имеет смысл и полезно, даже если это некрасиво.

В том-то и дело — он «изящно деградирует», чтобы оставаться полезным даже без всех наворотов.

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

Вот почему вам НЕ следует ВСЕГДА используйте тег и

. ЧТО-ТО вы можете сделать, чтобы напомнить себе, что не следует делать что-то плохое (например, вставлять что-нибудь в неправильное место между делами)? СДЕЛАЙ ЭТО! Часто шокирует то, как часто люди просто вставляют что-то в неправильные места между этими элементами.

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

Это сводит с ума любителей минификации, типа «ааа, пробелы!!!» но это делает код более понятным и простым в обслуживании.

Кроме того, в 99% случаев, когда я пишу страницы без минификации, они становятся меньше, чем с ними! Мета области просмотра предназначена для того, чтобы сообщать устройствам с маленькими экранами, что мы знаем, что, черт возьми, мы делаем с проверками размеров шрифтов и разрешения.

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

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

ну... нужно масштабировать. Ссылка CSS в настоящее время больше не нуждается в атрибуте «type», если REL является известным типом со значением по умолчанию, например, таблица стилей по умолчанию имеет значение text/css.

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

Обычно неряшливо/плохо опускать атрибут media или использовать в качестве значения «all». Расположение вашего экрана очень редко имеет хоть малейший смысл при печати, на слух или в любой другой возможной цели.

Я включаю проекцию и телевидение, несмотря на то, что проверка HTML 5 жалуется на то, что они устарели, поскольку ВСЕ ЕЩЕ существует множество устройств, таких как киоски и консоли Nintendo, которые либо переопределят наш стиль своим собственным, либо полностью проигнорируют его, если мы не сможем их включить.

ИМХО, цели для атрибута media не имеют никакого отношения к спецификации разметки!

Тег заголовка часто лучше всего использовать в качестве формата «заголовок страницы — заголовок сайта». Помните, что заголовок существует для того, чтобы быть текстом ссылки в поисковой выдаче, заголовком в окне или вкладке и т. д. и т. п. Это не то место, где можно слепо вставлять бесполезный абзац, когда большинство вещей просто обрежут его.

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

В нашем H1 я добавил пустой интервал в качестве «мешка с песком для изображений», в котором мы будем использовать технику под названием «Гилдер-Левин», чтобы поместить изображение поверх нашего текста, скрывая его.

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

получит текст, люди на невизуальных UA получат текст, а когда дисплей слишком мал для изображения нашего логотипа, МЫ МОЖЕМ ПОКАЗАТЬ ТЕКСТ!!! Или, если хотите, замените изображение на более дружелюбное к меньшему размеру... Классная идея, да? Я добавил div .heightWrapper, чтобы у нас был цветной фон, отличный от верхнего и нижнего колонтитула, который я собираюсь оставить прозрачным.

Таким образом, если контент короче отображаемого, основной цвет не будет идти после нижнего колонтитула.

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

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

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

Это довольно стандартная, если не более старая, практика компоновки, но в отличие от новых методов, таких как flex, она очень надежна — даже начиная с IE 5.2 Mac.

(НЕ то чтобы нам действительно было плевать на все, что было до IE8 или даже IE9, поскольку вы используете

Павел Бокастов

Тень смерти.

. . Я надеюсь, что вы готовы к тому, что вас пригласят задавать вопросы, потому что у меня их много. КСТАТИ . . . Я пытался написать вам в личку пару дней назад.

Не знаю, видели ли вы это.

. . просто к вашему сведению. В любом случае, я пытаюсь переделать второй веб-сайт, чтобы сделать его отзывчивым в соответствии с вашими рекомендациями, и у меня возникла пара проблем, которые я просто не могу понять. Во-первых, сайт, который я переделываю, находится по адресу http://amazingbarbeque.com/

и первая проблема, с которой я столкнулся, — это сделать изображение заголовка отзывчивым. Вы можете посмотреть, как у меня обстоят дела с перекодированием на http://amazingbarbeque.com/index2.html

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

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

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

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

Я попробовал изменить предоставленный вами код (еще раз большое спасибо), но просто не могу понять, как заставить его работать.

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

И мой последний вопрос на данный момент связан с возможностью использования операторов include php с html5 и css3.

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

Можно ли это сделать и сохранить отзывчивость?

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

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

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

. .

Похожие темы	Дата
С чего начать в дизайне?	19.10.2024, 18:10
Редизайн баннера	19.10.2024, 18:10
Как добавить пагинацию?	19.10.2024, 18:10
100% высота в Firefox ведет себя как минимальная высота	19.10.2024, 18:10
Лучший способ подойти к созданию нового веб-сайта	19.10.2024, 18:10
помогите с циклом while	19.10.2024, 18:10
Альтернатива дизайну страницы со 100% высотой области просмотра в альбомном режиме для мобильных устройств.	19.10.2024, 18:10
Что теперь	19.10.2024, 18:10
Пытаетесь найти подходящую партнерскую программу, совет приветствуется?	19.10.2024, 18:10
Переход к якорю в модальном окне с фиксированным заголовком	19.10.2024, 18:10

Ищу совет/помощь Foundation 6

uzeful777

Максим Кирилышев

palitra

Bogdan3

egor11

Fisherman1

Europarl_BG

Павел Бокастов

I AM

Интересно