shamil_ozdemirov

HTML код <div id='wrap'> <div id='header'>Шапка сайта</div> <div id='outer'> <div div='inner'> <p> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </p> <p> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </p> <p> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </p> <p> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </p> <p> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </p> <p> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </p> </div> </div> <div id='footer'>Подвал сайта</div> </div> CSS код html,body{ height:100%; } #wrap{ min-height:100%; max-width:960px; background:#81B763; margin:auto; position:relative; } #header{ height:150px; background:#4D815D; } #footer{ background:#E5174E; height:100px; position:absolute; bottom:0; width:100%; } #outer{ padding-bottom:110px; min-height:100%; }

Thank you

здоров John106 скинь мне этот макет

Вот kitti скачай посмотри index.html

вот Ирина скачайте посмотрите index.html

Вот так - https://jsfiddle.net/Shamil_2017/5sony12d/

вот так вы хотели: https://jsfiddle.net/Shamil_2017/oxtLhs5n/6/

учи php

потому что empty в данном случае false

.

Вот Вот так вы хотели? index.html

Бывает)

добавь после no-repeat еще 100% 0; и еще одно правило background-size:auto 100%;

div Элементу с атрибутом id='nav10300589'; в css напиши margin-top:20px; Suntsev, верстка не качественная.

Добавь к идентификатору #up свойство overflow:hidden;

Да можно)

у класса .part сделай паддинги по меньше

Делаю верстку валидно и кроссбраузерно на чистом html и css (пока что javaScript не знаю).

Вот html код чуть чуть изменил <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>claymore</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <nav> <div class="brand"></div> <ul class="list"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Service</a></li> <li><a href="#">Features</a></li> <li><a href="#">Price</a></li> <li><a href="#">Contact</a></li> <li><a id="login" href="#">Login</a></li> </ul> </nav> <div id="mock"></div> <div class="slider-content"> <h2>Quam eleifend metus commodo</h2> <p>luctus at sit amet urna. Quisque non augue tincidunt, egest as massa non, elementum sem. Suspendisse mollis nulla eu lorem ultricies dapibus.</p> <div class='or1'> <a href="#" class="Purchas">Purchase now</a> <a href="#" class="Learn">Learn more</a> <div class="or">or</div> </div> </div> </header> <div id="fon"></div> </body> </html> и вот css a, a:hover { text-decoration: none; color: #ffffff; } body { padding: 0; margin: 0; } #fon{ height: 894px; background: url(img/bg.jpg) no-repeat center bottom; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; background-size: cover; } header { width: 940px; padding: 0; margin: 0 auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } nav { position:absolute; z-index: 1; } .brand { width: 154px; height: 56px; background: url(img/Claymore.png) no-repeat; position: relative; top: 69px; padding: 0; margin: 0; } .list { width: 558px; position: relative; list-style: none; padding: 0; margin: 0; left: 428px; top: 35px; } .list li { display: inline; margin-right: 16px; font: 14pt sans-serif; transition: linear; position: relative; } .list li a:after { content: ""; width: 0; height: 2px; position: absolute; left: 0; top: 30px; background: #1abc9c; transition: linear; } .list li a:hover:after{ width: 100%; } #login { font: bold 14pt sans-serif; margin-left: 20px; transition: linear; position: relative; } #login:after { content: ""; width: 0; height: 2px; position: absolute; left: 0; top: 30px; background: #1abc9c; transition: linear; } #login:hover:after{ width: 100%; } #mock { width: 415px; height: 538px; background: url(img/BodyWhite.png) no-repeat; position: absolute; top: 321px; } .slider-content { position: absolute; overflow:hidden; width: 487px; font: 14pt sans-serif; color: #ffffff; top: 350px; left: 450px; } a.Purchas { color: #fff; text-decoration: none; user-select: none; background: #1abc9c; padding: .7em 1.5em; outline: none; border-radius: 3px; display:inline-block; } a.Purchas:hover { background: #69e0c8; } a.Purchas:active { background: rgb(152,15,0); } .Learn { color: #fff; text-decoration: none; user-select: none; background: #3498db; padding: .7em 2.1em; outline: none; border-radius: 3px; display:inline-block; } a.Learn:hover { background: #67bcf4; } a.Learn:active { background: rgb(152,15,0); } .or1{ position:relative; float:left; } .or{ position:absolute; top:20%; left:50%; margin-left:-13px; width: 29px; height: 29px; line-height:29px; background: url(img/or.png) no-repeat; color: #4a5b6d; text-align:center; }

Пока что нет)

Спасибо by chris

by chris можешь показать свой вариант) и еще забыл написать это все нужно вывести в консоле

Помогите нужно срочно