- 17, May 2024
- #1
Я полностью переработал код проекта, над которым работал, и мне нужна помощь в его точной настройке.
Мой стиль выглядит так:
Код (разметка): И мой html выглядит так:
Код (разметка): Мой первый вопрос касается выравнивания моего #mainContent.
Если вы проверите код, мне пришлось заставить #mainContent располагаться вверху там, где я хотел.
Что я делаю не так или как мне сделать так, чтобы все выстроилось в линию, не принуждая к этому?
Моя следующая проблема заключается в том, что я пытаюсь научиться делать сайты адаптивными, и хотя я думаю, что добился небольшого прогресса, многое из этого просто не воспринимается.
В любом случае, медиа-запрос у меня частично настроен (надеюсь). Мой первый вопрос: правильно ли я его настроил?
Мой второй вопрос: есть ли какие-то стандартные точки останова, которые мне следует использовать?
Мой последний вопрос о том, как я настроил медиа-запрос: нижний колонтитул выстраивается прямо под ползунком, а не внизу, где он должен быть, и кроме принудительного перемещения его вниз, устанавливающего поле, я понятия не имею, что мне нужно.
делаю неправильно.
И, наконец, я хотел бы узнать, чего мне будет стоить, если один из экспертов напишет код, который возьмет мой список навигации и сделает его таким, чтобы при уменьшении страницы отображался гамбургер?
Один из участников пытался объяснить мне, как это сделать, но я не понял.
Я думаю, что он был расстроен моим невежеством, и я не уверен, что виню его.
Я не самый острый нож в ящике стола, но я просто не понимаю, как он должен работать.
Поэтому вместо того, чтобы еще больше отчуждать себя, я готов заплатить кому-нибудь за это, если цена будет разумной.
В противном случае я просто оставлю настройку сайта для просмотра на рабочем столе. Заранее спасибо за любую помощь в этом.
. .
Мой стиль выглядит так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL='https://lumtu.com/yti/dk55kdGRodHRwOi8vdzMub3JnL1RSL3hodG1sMS9EVEQveGh0bWwxLXN0cmljdCjlm']http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
<html xmlns="[URL='https://lumtu.com/yti/b0hh0bWxodHRwOi8vdzMub3JnLzE5OTkveGvkT']http://www.w3.org/1999/xhtml[/URL]" xml:lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="приложение/xhtml+xml; кодировка = utf-8" />
<meta name="viewport" content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 1">
<title>Butler County's Best RC Flying Club-The BAMS</title>
<meta name="description" content="Мы приветствуем всех, кто интересуется полетами на радиоуправляемых самолетах с неподвижным крылом, в лучшем радиоуправляемом летном клубе округа Батлер." />
<meta name="keywords" content="радиоуправление, самолеты на радиоуправлении, радиоуправляемые самолеты, аэроклуб, клуб радиоуправления, полеты на радиоуправлении, аэроклуб на радиоуправлении, аэроклуб на радиоуправлении" />
<meta name="robots" content="индекс, следовать" />
<link rel="stylesheet" type="text/css" href="screenA.css" media="screen" />
<link rel="shortcut icon" href="favicon.png">
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body>
<div id="contentWrapper">
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/beautiful_fall_day_for_flying.jpg" alt="Прекрасный осенний день для полета" title="Прекрасный осенний день для полета" id="wows1_0"/></li>
<li><img src="data1/images/enjoying_a_day_of_flying.jpg" alt="Наслаждаемся днем полета" title="Наслаждаемся днем полета" id="wows1_1"/></li>
<li><img src="data1/images/ready_for_flight.jpg" alt="Готов к полету" title="Готов к полету" id="wows1_2"/></li>
<li><a href="[URL='https://lumtu.com/yti/d8SS8dmlodHRwOi8vd293c2xpZGVyLmNvbNmL']http://wowslider.com/vi[/URL]"><img src="data1/images/pilot_skills_demonstrated.jpg" alt="jquery слайдер" title="Продемонстрированные навыки пилота" id="wows1_3"/></a></li>
<li><img src="data1/images/preparing_for_a_fall_flight.jpg" alt="Подготовка к осеннему полету" title="Подготовка к осеннему полету" id="wows1_4"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="Прекрасный осенний день для полета"><span><img src="data1/tooltips/beautiful_fall_day_for_flying.jpg" alt="Прекрасный осенний день для полета"/>1</span></a>
<a href="#" title="Наслаждаемся днем полета"><span><img src="data1/tooltips/enjoying_a_day_of_flying.jpg" alt="Наслаждаемся днем полета"/>2</span></a>
<a href="#" title="Готов к полету"><span><img src="data1/tooltips/ready_for_flight.jpg" alt="Готов к полету"/>3</span></a>
<a href="#" title="Продемонстрированные навыки пилота"><span><img src="data1/tooltips/pilot_skills_demonstrated.jpg" alt="Продемонстрированные навыки пилота"/>4</span></a>
<a href="#" title="Подготовка к осеннему полету"><span><img src="data1/tooltips/preparing_for_a_fall_flight.jpg" alt="Подготовка к осеннему полету"/>5</span></a>
</div></div><div class="ws_script" style="position:absolute;left:-99%"><a href="[URL='https://lumtu.com/yti/d8SS8dmlodHRwOi8vd293c2xpZGVyLmNvbNmL']http://wowslider.com/vi[/URL]">carousel slider</a> by WOWSlider.com v8.2</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
<div id="leftColumn">
<?php include("nav-menu.php"); ?>
<br>
<!-- end #leftColumn --></div>
<div class="weatherLink">
<span style="display: block !important; padding-left: 3em; width: 215px; text-align: center; font-family: sans-serif; font-size: 12px;"><a href="[URL='https://lumtu.com/yti/ZgbbgZTFodHRwOi8vd3VuZGVyZ3JvdW5kLmNvbS9jZ2ktYmluL2ZpbmR3ZWF0aGVyL2dldEZvcmVjYXN0P3F1ZXJ5PXptdzoxNjA2MS4xLjk5OTk5JmJhbm5lcnR5cGVjbGljaz13dV90cmF2ZWxfcGxhGcf']http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:16061.1.99999&bannertypeclick=wu_travel_plane1[/URL]" title="Прогноз погоды в Уэст-Санбери, Пенсильвания" target="_blank"><img src="[URL='https://lumtu.com/yti/cU22Uc3RodHRwOi8vd2VhdGhlcnN0aWNrZXIud3VuZGVyZ3JvdW5kLmNvbS93ZWF0aGVyc3RpY2tlci9jZ2ktYmluL2Jhbm5lci9iYW4vd3hCYW5uZXI_YmFubmVydHlwZT13dV90cmF2ZWxfcGxhbmUxJnB3c2NvZGU9S1BBQlVUTEUzJkZvcmNlZENpdHk9VkHd']http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_travel_plane1&pwscode=KPABUTLE3&ForcedCity=West[/URL] Sunbury&ForcedState=PA&zip=16061&language=EN" alt="Узнайте больше о погоде в Уэст-Санбери, Пенсильвания" width="215" /></a><br><a href="[URL='https://lumtu.com/yti/ZgbbgZTFodHRwOi8vd3VuZGVyZ3JvdW5kLmNvbS9jZ2ktYmluL2ZpbmR3ZWF0aGVyL2dldEZvcmVjYXN0P3F1ZXJ5PXptdzoxNjA2MS4xLjk5OTk5JmJhbm5lcnR5cGVjbGljaz13dV90cmF2ZWxfcGxhGcf']http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:16061.1.99999&bannertypeclick=wu_travel_plane1[/URL]" title="Получайте последние обновления прогноза погоды" style="font-family: sans-serif; font-size: 12px" target="_blank">Click for weather forecast</a></span></span>
</div>
<div id="mainContent">
<h1>Welcome To The BAMS</h1><br>
<center><h2> A Fixed Wing, Radio Controlled Airplane Flying Club</h2></center>
<p>If you are interested in building or flying fixed wing, radio control (R/C) airplanes or just enjoy great company, then you have come to the right place! The BAMS (Butler Aircraft Modelers Society) is an excellent club to help you get started in this hobby.
</p>
<p>If you are already a pilot, you will find The BAMS to be a very diverse group of pilots who are interested in the many different facets of this wonderful hobby. We fly anything from foamies to big balsa planes and everything in between.
You will find that with us, there is no more satisfying sense of accomplishment than seeing the creation that you built fly for the first time! All of our members enjoy the hobby and enjoy spending time and sharing their experience and know-how with others that are interested too.</p>
<p>
The simple truth of the matter is that you just will not find a friendlier group of fliers anywhere.</p>
<p>
If you are new to the sport of radio controlled airplanes, we offer an excellent training program during the warmer months. Because we know how difficult and expensive it can be to try to learn to fly rc airplanes on your own, we do everything we can to teach, support and assist new pilots. We believe that in order to truly enjoy this hobby/sport, you need to learn not only how to fly safely, but to properly build and maintain your aircraft. And you can always count on our members to help out when yo need it.</p>
<p>
Please take a few minutes to browse around our website and get to know a little about our club. If you are interested in learning more about radio controlled airplanes, feel free to visit us at the field. We invite you to join our club and enjoy some fun with us along with the benefits of being a member of The BAMS!</p>
<p>
Our park-like field is just north of Butler, located between Routes 308 and 38. It features large beautiful grass runways, a covered pavilion with picnic tables, and full restroom facilities. We utilize the field for more than just flying. Our members fly year-round and during the flying season, we conduct monthly business and membership meetings at the field. We also hold monthly picnic's for our members and their families.</p>
<p>
If you would like to come out and visit with us, <a href="field.php">click here</a> for a map to our field.</p>
<p>
Again, if you want to learn to safely operate and fly radio controlled airplanes, join The BAMS and get the training you need. Take part in our new pilot training program that is second to none. Our training starts in May of each year.</p>
<p>
If you would like to participate in our training program or just want more information, please feel free to contact Club President, Carl McCall, by email at [email protected] and he will get you signed up and ready to start flying.</p>
<!--end #mainContent --></div>
<div id="footer">
All contents © 2016 . . . All Rights Reserved.
</div>
<!-- end #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; } /* 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 { margin: 0; padding: 0; border: 0; width: 100%; background: #88A0BB; min-width: 600px; font-size: 110%; } a { color: #000; } a:hover { color: blue; text-decoration: none; } h1, h2, h3 { margin: .8em 0 .2em 0; padding: 0; } h1 { font-size: 2.5em; text-align: center; } h2 { font-size: 1.5em; margin-top: -1em; } p { margin:.4em 0 .8em 0; padding-top: 1.25em; font-size: 110%; } #contentWrapper { max-width: 60em; margin: 0 auto; padding-top: 0.1em; overflow: hidden; background: #FFF; -webkit-box-shadow: 0 0 1px 1px #000, 0 0 1.5em 0.1em #321; box-shadow: 0 0 1px 1px #000, 0 0 1.5em 0.1em #321; } #leftColumn { background: #FFF; width: 16em; margin: 2em 0 0 1em; background: url("/images/logo.jpg") no-repeat; } #leftColumn ul { padding: 12em 0 3em 1em; width: 13.5em; list-style-type: none; } #leftColumn ul li a { text-decoration: none; color: #000; padding: 1em; background-color: #FFF; display: block; } #leftColumn ul li a:visited { color: #000; } #leftColumn ul li a:hover { color: #000; font-weight: bold; background-color: #E7E7E7; } .weatherLink { padding-left: -4em; } #mainContent { width: 39em; margin: -66em 0 0 20em; padding-bottom: 3em; } #footer { margin-top: 1.5em; text-align: center; font-size: 0.8em; font-family: arial,helvetica,sans-serif; height: 2em; padding: 1em 0 0.5em 0; background: #ECECFF; } #footer span { margin-right: 40px; } @media (max-width:50em) { body { min-width:192px; /* CSS3 possible, so let it go narrower */ } h1 { font-size: 225%; } h2 { font-size: 100%; } #leftColumn { display: none; } .weatherLink { display: none; } #mainContent { float: left; width: auto; margin: 1em 1em 0 1em; } #footer { width: 100%; } } Код (разметка): Мой первый вопрос касается выравнивания моего #mainContent.
Если вы проверите код, мне пришлось заставить #mainContent располагаться вверху там, где я хотел.
Что я делаю не так или как мне сделать так, чтобы все выстроилось в линию, не принуждая к этому?
Моя следующая проблема заключается в том, что я пытаюсь научиться делать сайты адаптивными, и хотя я думаю, что добился небольшого прогресса, многое из этого просто не воспринимается.
В любом случае, медиа-запрос у меня частично настроен (надеюсь). Мой первый вопрос: правильно ли я его настроил?
Мой второй вопрос: есть ли какие-то стандартные точки останова, которые мне следует использовать?
Мой последний вопрос о том, как я настроил медиа-запрос: нижний колонтитул выстраивается прямо под ползунком, а не внизу, где он должен быть, и кроме принудительного перемещения его вниз, устанавливающего поле, я понятия не имею, что мне нужно.
делаю неправильно.
И, наконец, я хотел бы узнать, чего мне будет стоить, если один из экспертов напишет код, который возьмет мой список навигации и сделает его таким, чтобы при уменьшении страницы отображался гамбургер?
Один из участников пытался объяснить мне, как это сделать, но я не понял.
Я думаю, что он был расстроен моим невежеством, и я не уверен, что виню его.
Я не самый острый нож в ящике стола, но я просто не понимаю, как он должен работать.
Поэтому вместо того, чтобы еще больше отчуждать себя, я готов заплатить кому-нибудь за это, если цена будет разумной.
В противном случае я просто оставлю настройку сайта для просмотра на рабочем столе. Заранее спасибо за любую помощь в этом.
. .
![[Лина Залевская] Работаю на себя: платить или не платить? (2019)](/assets/images/icons/forum4.png){kind=icon}
![Интераура - Достижение Наивысшего Состояния Анахаты [эксклюзив]](/assets/images/icons/forum7.png){kind=icon}
![Ultimate Base Searcher 4.0 [Самый вкусный софт!] by Грач {Стабильная версия}](/assets/images/icons/forum6.png){kind=icon}
