HTML Coding Latest Questionshttps://htmlforum.dev/forum/23-html-coding/HTML Coding Latest QuestionsenВёрстка футера на движке Xenforohttps://htmlforum.dev/topic/82377-vyorstka-futera-na-dvizhke-xenforo/ Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  

.p-footer
{
	.xf-publicFooter();

	a
	{
		.xf-publicFooterLink();
	}
}

.p-footer-inner
{
	.m-pageWidth();
	.m-pageInset();

	padding-top: @xf-paddingMedium;
	padding-bottom: @xf-paddingLarge;
}

.p-footer-row
{
	.m-clearFix();

	margin-bottom: -@xf-paddingLarge;
}

.p-footer-row-main
{
	float: left;
	margin-bottom: @xf-paddingLarge;
}

.p-footer-row-opposite
{
	float: right;
	margin-bottom: @xf-paddingLarge;
}

.p-footer-linkList
{
	.m-listPlain();
	.m-clearFix();

	> li
	{
		float: left;
		margin-right: .5em;

		&:last-child
		{
			margin-right: 0;
		}

		a
		{
			padding: 2px 4px;
			border-radius: @xf-borderRadiusSmall;

			&:hover
			{
				text-decoration: none;
				background-color: fade(@xf-publicFooterLink--color, 10%);
			}
		}
	}
}

.p-footer-rssLink
{
	> span
	{
		position: relative;
		top: -1px;

		display: inline-block;
		width: 1.44em;
		height: 1.44em;
		line-height: 1.44em;
		text-align: center;
		font-size: .8em;
		background-color: #4682B4;
		border-radius: 2px;
	}

	.fa-rss
	{
		color: white;
	}
}

.p-footer-copyright
{
	margin-top: @xf-elementSpacer;
	text-align: center;
	font-size: @xf-fontSizeSmallest;
}

.p-footer-debug
{
	margin-top: @xf-paddingLarge;
	text-align: right;
	font-size: @xf-fontSizeSmallest;

	.pairs > dt { color: inherit; }
}

@media (max-width: @xf-responsiveMedium)
{
	.p-footer-row-main,
	.p-footer-row-opposite
	{
		float: none;
	}

	.p-footer-copyright
	{
		text-align: left;
		padding: 0 4px; // aligns with other links
	}
}

 

IMG_20231113_045740.jpg

]]>82377Mon, 13 Nov 2023 01:10:40 +0000Примеры версткиhttps://htmlforum.dev/topic/82311-primery-verstki/ Нужны сайты с примерами верстки, типа https://css-tricks.com/.

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

Накидайте ссылок.
Редактировать/удалить сообщение
]]>82311Fri, 03 Nov 2023 09:18:02 +0000Список покидает дивhttps://htmlforum.dev/topic/82243-spisok-pokidaet-div/ Решение нашел. 

Цитата
.technology__top{
    background-image: url(../images/tech-bg.png);
    background-repeat: no-repeat;
    background-position: center ;
    background-size: cover;
    min-height: 110vh;
}
 
.technology__top-inner{
    position: relative;
}

Заменил на 

Цитата
.technology__top{
    background-image: url(../images/tech-bg.png);
    background-repeat: no-repeat;
    background-position: center ;
    background-size: cover;
   
}
 
.technology__top-inner{
    position: relative;
    min-height: 110vh;
}

Всем привет. Список выходит из дива. При этом, другие элементы в диве отображаются корректно. Не могу найти причину.

Нужно чтобы список был под кнопкой ПЛЕЙ...

 

 

 

Цитата
<section class="technology">
        <div class="technology__top">
            <div class="container">
                <div class="technology__top-inner">
                    <button class="popup-btn technology__btn">
                        <svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M52.6733 34.5L26.1634 49.6554V19.3446L52.6733 34.5Z" fill="white"/>
                            <circle cx="35" cy="35" r="34" stroke="white" stroke-width="2"/>
                            </svg>
                            <span>Play video</span>
                    </button>
                       
                        <h3 class="technology__title">MICRO TECHNOLOGY</h3>
                        <ol class="technology__list">
                            <li class="technology__list-item">First PVC rail layer </li>
                            <li class="technology__list-item">Second PVC rail layer </li>
                            <li class="technology__list-item">Thin diamond grooving split-pad</li>
                            <li class="technology__list-item">Strong Tarpaulin layer </li>
                            <li class="technology__list-item">V-Drop Stitch core</li>
                        </ol>                  
                        </div>
            </div>
        </div>
                <div class="gallery">
                <div class="container">
                    <div class="gallery__inner">
                        <div class="gallery__box">
                            <p class="gallery__text">
                                Our new Micro technology provides a featherweight and quality construction that can be rolled and packed into a backpack half the width of a standard iSUP package. The reduced pad and our twin Click Fin system make it possible to have a regular sized iSUP packed into minimal space.
                            </p>
                            <div class="gallery-min">
                                <img class="gallery-min__img" src="images/gmin-1.jpg" alt="">
                                <img class="gallery-min__img" src="images/gmin-2.jpg" alt="">
                                <img class="gallery-min__img" src="images/gmin-3.jpg" alt="">
                            </div>
                        </div>
                            <div class="gallery-max">
                                <img classs="gallery-max__img" src="images/gmax-1.jpg" alt="">
                                <img classs="gallery-max__img" src="images/gmax-2.jpg" alt="">
                                <img classs="gallery-max__img" src="images/gmax-3.jpg" alt="">
                                <img classs="gallery-max__img" src="images/gmax-4.jpg" alt="">
                                <img classs="gallery-max__img" src="images/gmax-5.jpg" alt="">
                                <p class="gallery-max__text">ENJOY YOUR LIFE</p>
                                <img classs="gallery-max__img" src="images/gmax-6.jpg" alt="">
                            </div>
                    </div>
                </div>
            </div>
    </section>

 

 

1.jpg

]]>82243Tue, 24 Oct 2023 11:48:58 +0000Помогите правильно задать ширину блоков и элементовhttps://htmlforum.dev/topic/81745-pomogite-pravilno-zadat-shirinu-blokov-i-jelementov/ Здравствуйте, я начал изучение HTML и CSS, столкнулся с проблемой правильной разметки и размеров, сайт состоит из мини блоков в которых я размещаю другие элементы сайта, данные блоки имеют разную ширину, которая в сумме составляет 100vw, но итоговый вариант шире чем окно сайта на пару пикслей, понимаю что не правильно сформировал проблему, пока не очень прошарен, поэтому прикреплю скрины

1. код

2.скрин сайта

3.как должна выглядеть страница (макет фигма)

]]>81745Sat, 26 Aug 2023 14:54:26 +0000Проблема с шириной ячеекhttps://htmlforum.dev/topic/82002-problema-s-shirinoj-jacheek/ Нужно страны сделать также близко, как на картинке, но не знаю как. Размер ячеек задается по умолчанию для всех и не знаю, как сделать чтоб он был индивидуальный. Можно ли отменить наследования размера от столбца у ячейки?

bLozj9x.png

]]>82002Sat, 16 Sep 2023 15:09:59 +0000Как сделать раздел "футер" в самом низу под таблицей?https://htmlforum.dev/topic/81930-kak-sdelat-razdel-futer-v-samom-nizu-pod-tablicej/ Как сделать футер в самом низу (Daniil Orlov знак копирайта).

https://github.com/rgg877/Site/tree/main

 

 

Screenshot_1.png

]]>81930Fri, 08 Sep 2023 12:37:46 +0000Html кнопкаhttps://htmlforum.dev/topic/81815-html-knopka/ Здравствуйте! Сам ковыряю сайт, новичок в этом деле, если залез не в ту ветку заранее извиняюсь.

К вам с таким вопросом:
Есть кнопка, которая открывает новую вкладку с нужным товаром  

<p align="center"><a href="ссылка на товар" target="_blank" class="btn btn-primary btn-xs" role="button"><i class="material-icons-"></i>Добавить</a></p>


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

Пример: нажимаем на кнопку, указанный товар в кнопке идет в корзину в количестве 2 шт. (или 3, чтобы можно было это прописать в кнопке)?

]]>81815Thu, 31 Aug 2023 05:20:53 +0000HTML был 1000px в ширину стал 2000px. Как вернуть?https://htmlforum.dev/topic/81794-html-byl-1000px-v-shirinu-stal-2000px-kak-vernut/ HTML был 1000px  в ширину стал 2000px. Как вернуть?

]]>81794Wed, 30 Aug 2023 12:19:15 +0000Можно ли запрограммировать на css поведение блоков как на приложенном видео?https://htmlforum.dev/topic/81587-mozhno-li-zaprogrammirovat-na-css-povedenie-blokov-kak-na-prilozhennom-video/ Логика изменения блоков на видео мне не вполне понятна. Можно ли это запрограммировать на css, не задавая отдельные стили для каждой ширины окна и для каждого количества блоков?

]]>81587Sun, 20 Aug 2023 18:41:59 +0000Смена background-image при работе с псевдоклассом hoverhttps://htmlforum.dev/topic/81426-smena-background-image-pri-rabote-s-psevdoklassom-hover/ Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью 

background-image: none;
    background: url(../img/check_icon_red.png) left no-repeat;
 
Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была.

image.pngimage.pngДолжна быть в одном ряду с другими

]]>81426Sat, 12 Aug 2023 09:41:20 +0000Ищу чертежный шрифтhttps://htmlforum.dev/topic/10317-%D0%B8%D1%89%D1%83-%D1%87%D0%B5%D1%80%D1%82%D0%B5%D0%B6%D0%BD%D1%8B%D0%B9-%D1%88%D1%80%D0%B8%D1%84%D1%82/Меня попросили по старой дружбе сделать сайта по черчению, не могу найти чертежный шрифт

]]>10317Tue, 16 Sep 2008 16:50:04 +0000маштабированиеhttps://htmlforum.dev/topic/81325-mashtabirovanie/ Как настроить сайт под маштабирование? Когда отдаляешь страницу , все элементы смешиваются , вот код, заодно можете сказать все ли в порядке с кодом? Или где-то дыряво написано

  

<!DOCTYPE html>
<html lang="ru">
	<head>
		<title>Ethereal - Начать играть</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="icon" href="assets/images/favicon.png">
		<link rel="stylesheet" href="assets/css/StartTheGame.css">
		<link rel="stylesheet" href="assets/css/Fonts.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">

	</head>
	<body class="body-main">
		<div class="container">
			<div class="sector1">
				<div class="top">
					<div class="logo">
						<a href="http://mine.template.loc/">Ethereal</a>
					</div>
		
					<img src="assets/images/line.png">
		
					<button class="cabinet">
						<a href="#">Личный Кабинет</a>
					</button>
				</div>
		
				<div class="right">
					<div class="launcher_photo">
						<img src="assets/images/Launcher.png">
					</div>
				</div>
		
				<div class="left">
					<div class="text">
						<h1>Начни играть вместе со<br>всеми!</h1>
						<ul>
							<li>Скачай лаунчер</li>
							<li>Загрузи игру</li>
							<li>Воплоти свои мечти!</li>
						</ul>
					</div>
					<div class="download">
						<a href="#" class="btn">Скачать</a>
						<p>Для</p>
						<img src="assets/images/windows.png">
					</div>
				</div>
			</div>
			<div class="sector2">
				
			</div>
		</div>
		
		<script src="assets/js/raw.githubusercontent.com_micku7zu_vanilla-tilt.js_master_dist_vanilla-tilt.min.js"></script>
		<script src="assets/js/main.js"></script>
	</body>
</html>
*                  { outline: none; }
body               { width: 100%; height: 100vh; margin: 0; padding: 0; background: #efefef; font-family: 'Montserrat',sans-serif; }
a                  { color: white; text-decoration: none;}
.body-main         { position: relative; background: url(../images/background.gif); background-position: center; -webkit-background-size: cover; background-size: cover; }
.container         { width: 100%; height: 200vh; }
.sector1           { width: 100%; height: 100vh; }
.sector2           { width: 100%; height: 100vh; }

.top               { width: 100%; height: 10vh; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; line-height: 40px; }
.logo              { margin-top: 11px; margin-left: 50px; }
.logo a            { font-family: 'SAOUI-Bold'; color: rgba(255,255,255,0.8); text-decoration: none; font-size: 30px; font-weight: 700; transition: all 0.3s; padding: 0px 5px; }
.logo a:hover      { color: rgb(255, 255, 255); text-shadow: 0px 0px 3px rgba(255,255,255,0.5); }

.top img {
    width: 900px;
}

.cabinet {
    font-size: 17px;
    background: transparent;
    border: none;
    font-family: 'JournalSans';
    font-weight: Bold;
    padding: 1em 1.5em;
    color: #ffffff;
    text-transform: uppercase;
    position: relative;
    transition: .5s ease;
  }
  
  .cabinet::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background-color: #2b2b2b;
    transition: .5s ease;
  }
  
  .cabinet:hover {
    color: #1e1e2b;
    transition-delay: .5s;
  }
  
  .cabinet:hover::before {
    width: 100%;
  }
  
  .cabinet::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0;
    width: 100%;
    background-color: #303030;
    transition: .4s ease;
    z-index: -1;
  }
  
  .cabinet:hover::after {
    height: 100%;
    transition-delay: 0.4s;
    color: aliceblue;
  }

.right {
    position: absolute;
    left: 50%;
    height: 90vh;
}

.launcher_photo img {
    width: 600px;
    margin-top: 120px;
}

.left {
    position: absolute;
    right: 50%;
    height: 90vh;
}

.text {
    display: block;
    margin-left: auto;
    margin-right: 170px;
    margin-top: 100px;
}

.text h1 {
    color: white;
}

.text ul {
    color: white;
    font-weight: Bold;
}

.download {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
}

.btn {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-size: 20px;
    font-weight: Bold;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
  }
   
  .btn:hover {
    animation: animate 8s linear infinite;
  }
   
  @keyframes animate {
    0% {
      background-position: 0%;
    }
    100% {
      background-position: 400%;
    }
  }
   
  .btn:before {
    content: "";
    position: absolute;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 40px;
    opacity: 0;
    transition: .5s;
  }
   
  .btn:hover:before {
    filter: blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite;
  }

  .download p {
    color: rgb(82, 82, 82);
    font-size: 21px;
    font-weight: bold;
    margin-top: -43px;
    margin-left: 230px;
  }

  .download img {
    display: block;
    margin-top: -61px;
    margin-left: 300px;
  }

  .left {
    opacity: 0;
    animation: text 4s forwards;
  }

  @keyframes text {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }

.right {
    transform: translateY(-150%);
    animation: ani 2s forwards;
}

@keyframes ani {
    0% {transform: translateY(-150%);}
    100% {transform: translateY(0);}
  }

 

Вот это уходит в разные стороны - 

image.png

image.png

 

И сами блоки какие то странные 

 

image.png

]]>81325Sat, 05 Aug 2023 20:01:52 +0000Как сделать такой скролл?https://htmlforum.dev/topic/81318-kak-sdelat-takoj-skroll/ Вот собственно хочу такой скролл сделать, а разобраться не могу, все уже обыскал, java то ломается то еще чето

 

image.png

]]>81318Sat, 05 Aug 2023 05:03:59 +0000Высота блокаhttps://htmlforum.dev/topic/81248-vysota-bloka/ Крч пытаюсь отредачить фотку на сайте, типо размер и положение, в html добавил

  

		<div class="Launcher">
			<img src="assets/images/Launcher.png">
		</div>

дальше захожу в css и пытаюсь отредачить с помощью 

.Launcher {width: 100px;}

Ну ничего не выходит, не хейтите впервые сайт делаю, Что я делаю не так друзья?

]]>81248Wed, 02 Aug 2023 07:54:43 +0000Как сделать, чтобы на мобильной версии элементы менялись местами?https://htmlforum.dev/topic/81220-kak-sdelat-chtoby-na-mobilnoj-versii-jelementy-menjalis-mestami/ на скриншоте десктопная и мобильная версия вёрстки. Как сделать, чтобы у одного элемента на мобильной версии слева была иконка а справа текст, а у другой слева текст, а справа иконка? Ещё чтобы всё симметрично было, везде размер элементов и отступы одинаковые.

Screenshot_93.png

в общей обёртке если один блочный элемент сверху, у другой снизу, а я сменил обёртке стиль на "display: flex;", а обоим элементам "width: 50%;", то верхний станет слева, а нижний - справа. А как наоборот сделать, чтобы верхний справа, а нижний слева? я придумал только использовать position: absolute. получилось криво. Как сделать, чтобы блок-обёртка подстраивался по высоте под картинку?
https://codepen.io/zfO/pen/oNQJorE
  

<div class="cir_obj_container">
    <div class="cir_obj">
        <div class="img"><img src="https://sun9-9.userapi.com/c4409/u154917110/d_6bb0dab9.jpg"></div>
        <div class="bottom_text">
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
        </div>
    </div>
    <div class="cir_obj reverse">
        <div class="img"><img src="https://sun9-9.userapi.com/c4409/u154917110/d_6bb0dab9.jpg"></div>
        <div class="bottom_text">
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
        </div>
    </div>
    <div class="cir_obj">
        <div class="img"><img src="https://sun9-9.userapi.com/c4409/u154917110/d_6bb0dab9.jpg"></div>
        <div class="bottom_text">
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
        </div>
    </div>
</div>
<style>
.cir_obj_container{
    display: flex;
    width: 100%;
}
 
.cir_obj{
    width: 33%;
    display: inline-block;
    margin: 20px;
}
 
.cir_obj img{
    margin: 20px;
    height: 230px;
    width: auto;
}
 
.cir_obj img{
    width: 100%;
    height: auto;
}
 
@media (max-width: 1280px) {                
    .cir_obj{
        width: 100%;
        display: flex;
        margin: 0px;    
    }
    .cir_obj_container{
        display: block;
    }
    .cir_obj .bottom_text, .cir_obj .img{
        width: 50%;
        margin: 30px;
        
    }
    .cir_obj.reverse .bottom_text{
        width: calc(50% - 60px);
    }
    .cir_obj.reverse .img, .cir_obj.reverse .img img{
        right: 0px;
        position: absolute;
    }
}
<style>

 

Screenshot_95.png

Screenshot_96.png

]]>81220Mon, 31 Jul 2023 17:04:43 +0000проверьте кодhttps://htmlforum.dev/topic/81102-proverte-kod/ Всем привет,

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

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

Заранее благодарю!
 
  
<!DOCTYPE html>
<html>
<head>
    <title>Versandtermin</title>
    <script>
        function getShippingDate() {
            var today = new Date();
            var day = today.getDay();
            var hour = today.getHours();
            var minute = today.getMinutes();
            var shippingDate = document.getElementById("shipping-date");
            var shippingTime = document.getElementById("shipping-time");
            var holidays = ["26.07.2023", "28.07.2023", "01.08.2023", "05.08.2023"];

            if (day >= 1 && day <= 5) {
                if (hour >= 0 && hour <= 9 && minute >= 1 && minute <= 59) {
                    shippingDate.innerHTML = "heute";
                    shippingTime.innerHTML = "ab 12 Uhr";
                } else if (hour >= 10 && hour <= 15 && minute >= 0 && minute <= 59) {
                    shippingDate.innerHTML = "heute";
                    var currentHour = hour + 2;
                    var roundedHour = Math.ceil(currentHour / 0.5) * 0.5;
                    shippingTime.innerHTML = "ab " + roundedHour + " Uhr";
                } else if (hour >= 16 && hour <= 23 && minute >= 1 && minute <= 59) {
                    shippingDate.innerHTML = "morgen";
                    shippingTime.innerHTML = "ab 12 Uhr";
                }
            } else if (day === 5 && hour >= 16 && hour <= 23 && minute >= 1 && minute <= 59) {
                var nextMonday = getNextMonday();
                shippingDate.innerHTML = "Am Montag den " + nextMonday;
                shippingTime.innerHTML = "ab 12 Uhr";
            } else if (day === 6 || day === 0) {
                var nextMonday = getNextMonday();
                shippingDate.innerHTML = "Am Montag den " + nextMonday;
                shippingTime.innerHTML = "ab 12 Uhr";
            } else if ((hour >= 16 && minute >= 0) || isNextDayHoliday()) {
                var nextFreeDay = getNextFreeDay();
                shippingDate.innerHTML = "Am " + nextFreeDay;
                shippingTime.innerHTML = "ab 12 Uhr";
            }
        }

        function getNextMonday() {
            var today = new Date();
            var day = today.getDay();
            var daysUntilNextMonday = 1 + (8 - day) % 7;
            var nextMonday = new Date(today.getFullYear(), today.getMonth(), today.getDate() + daysUntilNextMonday);
            return nextMonday.toLocaleDateString();
        }

        function isNextDayHoliday() {
            var today = new Date();
            var tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
            var holidays = ["26.07.2023", "28.07.2023", "01.08.2023", "05.08.2023"];
            var tomorrowString = tomorrow.toLocaleDateString();
            return holidays.includes(tomorrowString);
        }

        function getNextFreeDay() {
            var today = new Date();
            var nextDay = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
            var holidays = ["26.07.2023", "28.07.2023", "01.08.2023", "05.08.2023"];
            while (holidays.includes(nextDay.toLocaleDateString()) || nextDay.getDay() === 6 || nextDay.getDay() === 0) {
                nextDay.setDate(nextDay.getDate() + 1);
            }
            return nextDay.toLocaleDateString();
        }
    </script>
</head>
<body onload="getShippingDate()">
    <h1>Versandtermin</h1>
    <p>Angestrebter Versand- / Abholtermin: <span id="shipping-date"></span> <span id="shipping-time"></span></p>
</body>
</html>

 

Редактировать/удалить сообщение
]]>81102Wed, 26 Jul 2023 09:59:06 +0000HTML - Зачем этот тег?https://htmlforum.dev/topic/80913-html-zachem-jetot-teg/ Для чего используют тэг <area>?

Только что, XXCMD сказал:

Для чего используют тэг <area>?

Простыми словами ответ плизз+

]]>80913Sun, 16 Jul 2023 15:21:33 +0000Раздвинуть строки таблицыhttps://htmlforum.dev/topic/80584-razdvinut-stroki-tablicy/ Есть таблица, нужно увеличить расстояние между третьей и четвертой строкой, т.е. только одно расстояние. margin-top не работает. Сделать два tbody тоже не получается, т.к. одна из клеточек таблицы должна "расширяться" на 4 строки. 

  <table>
    <tr><td>row 1 cell 1</td><td>row 1 cell 2</td><td rowspan=4>row 1 cell 3<br>must contain<br>several lines</td></tr>
    <tr><td>row 2 cell 1</td><td>row 2 cell 2</td></tr>
    <tr><td>row 3 cell 1</td><td>row 3 cell 2</td></tr>
    <tr style="margin-top: 10px"><td>row 4 cell 1</td><td>row 4 cell 2</td></tr>
    <tr><td>row 5 cell 1</td><td>row 5 cell 2</td><td>row 5 cell 3</td></tr>
    <tr><td>row 6 cell 1</td><td>row 6 cell 2</td><td>row 5 cell 3</td></tr>
  </table>

Всякие там line-height увеличивают расстояние и снизу и сверху, т.е. если задать для одной строки, интервал увеличится и до и после, а нужно увеличить только один интрервал. (между row 3 и cow 4)

]]>80584Mon, 19 Jun 2023 13:43:03 +0000Как разместить div по соседству с другим контейнером?https://htmlforum.dev/topic/80302-kak-razmestit-div-po-sosedstvu-s-drugim-kontejnerom/ Здравствуйте, вот два блока div "class=block1" и "class=block2", как их расположить вместе? 

<div class="test">
  <div class="block1" style="background-color: rgb(210, 180, 140);">
      <p contenteditable="true"><br></p>
  </div>
  <div class="block2">
      <button class="delete">X</button>
  </div>
</div>

<div class="test">
    <div class="block1" style="background-color: rgb(210, 180, 140);">
        <p contenteditable="true"><br></p>
    </div>
    <div class="block2">
        <button class="delete">X</button>
    </div>
</div>

Пример ниже:

screen1.jpg

]]>80302Sat, 27 May 2023 10:21:50 +0000Непонятное поведение фоновой картинкиhttps://htmlforum.dev/topic/80077-neponjatnoe-povedenie-fonovoj-kartinki/ Здравствуйте. Пытаюсь выстроить фоновую картинку так чтобы она была на высоту экрана устройства и закрепленная, то есть при прокрутке страницы всегда оставалась в одном месте.

Вот пример - https://jsfiddle.net/98nym4go/

Как только устанавливаю "background-attachment:fixed;" фоновая картинка почему-то перестает отображаться, а без этого тега она не закрепляется.

Что не так?

]]>80077Sat, 20 May 2023 10:49:59 +0000Помогите пожалуйста сделать расстояние между строкамиhttps://htmlforum.dev/topic/79780-pomogite-pozhalujsta-sdelat-rasstojanie-mezhdu-strokami/ Скидивыю часть кода , вопрос в том что , как сделать небольшое расстояние между строками Имя и Email (не пропуском строки ,а такое же как между "Посетите ли вы наш сайт снова" и переключателями ) или это уже не исправить, не умею еще пользоваться хостингом поэтому заливаю инфу таким образом. Помогите пожалуйста советом что делать...

<fieldset>
<legend>
Данные пользователя:
</legend>
<label>
Имя:
<input type="text" name="name" size="30" maxlength="100">
</label>
<br />
<label>
Email:
<input type="email" name="email" size="30" maxlength="100">
</label>
<br />
</fieldset>

форма пример.png

]]>79780Fri, 28 Apr 2023 09:32:28 +0000Не работает autoplayhttps://htmlforum.dev/topic/79838-ne-rabotaet-autoplay/ Здравствуйте , обясните  пожалуйста почему не работает autoplay, видео само не воспроизводиться при загрузке страницы , вот код

<!DOCTYPE html>
<html>
<head>
<title>HTML5: добавление видео на страницу</title>
</head>
<body>
<video src="C:\Users\Арсений\Desktop\Картинки и Видео\лес.mp4"
poster="C:\Users\Арсений\Desktop\Картинки и Видео\лес.png"
width="400" height="300"
autoplay
preload
controls
loop>
<p>лес после дождя</p>
</video>
</body>
</html>

Пробовал писать autoplay="autoplay" все равно не работает

]]>79838Wed, 03 May 2023 13:47:40 +0000Видео с Youtube на сайтhttps://htmlforum.dev/topic/79884-video-s-youtube-na-sajt/ При переносе сайта на другой Hosting потерял скрипт вывода видео с Youtube через fancybox...Скрипт берёт из текстового файла
адрес и в случайном порядке выводит видео в блок или на страницу...
Сам текстовый файл такого вида-

PHP/HTMLВыделить код 
1
2

<a class ="fancybox fancybox iframe"href="https://youtube.com/embed/1QRV4m1dabg">Video #8 <iframe width="100%" src="//www.youtube.com/embed/1QRV4m1dabg" frameborder="0" allowfullscreen></iframe></a>
<a class ="fancybox fancybox iframe"href="https://youtube.com/embed/mKGDphbiwl4">Video #1 <iframe width="100%" src="//www.youtube.com/embed/mKGDphbiwl4" frameborder="0" allowfullscreen></iframe></a>

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

]]>79884Sun, 07 May 2023 18:43:46 +0000Что надо знать для htmlhttps://htmlforum.dev/topic/79825-chto-nado-znat-dlja-html/ Подскажите что надо знать чтобы переходить с html на css? вроде закончил html, но всё же думаю что не достаточно знаний

]]>79825Tue, 02 May 2023 18:24:56 +0000Недавно начал изучать front-end. Хотелось бы мнения и совета.https://htmlforum.dev/topic/79644-nedavno-nachal-izuchat-front-end-hotelos-by-mnenija-i-soveta/ Меня самого смущает свой способ добавления фотографий в этом документе. Я хотел расположить четыре изображение в ряд + кнопку под каждой. Никаких других способов не нашёл, потому что кнопка вставал слева от изображения, либо изображения не находились в центре. 

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

chrome_0IK96DOetL.jpg

learntohtml.7z

]]>79644Thu, 20 Apr 2023 03:17:50 +0000