Jump to content

Верстка страницы 404 - оцените


aaron
 Share

Recommended Posts

Оцените качество верстки страницы 404.

Макет взят с TemplateMonster.

Сама страница - http://halloween.zencoder.ru/

Страничка несложная, конечно. Но хочется услышать отзывы, вдруг что не так? У меня опыта еще не так много, однако.

Link to comment
Share on other sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR...D/xhtml11.dtd">

Почему использовали этот доктайп?

Нравиться. Очень строгий )).

Если серьезно, то считаю, что если использовать доктайп HTML5, то нужно и верстать под html5, с использованием его семантики и тегов.

А в этом стандарте еще не силен. Считаю, что сперва нужно в более старом научиться. Тем более, что HTML5 еще не вошел в силу по настоящему, насколько я знаю.

Вот поэтому.

Link to comment
Share on other sites

<!DOCTYPE html> понимают все браузеры. А верстать под него Вы можете как хотите. Придерживаться строгого синтаксиса это дело профессиональной этики. Можете и с этим доктайпом писать <br/> валидацию всеравно пройдет.

  • Like 1
Link to comment
Share on other sites

<!DOCTYPE html> понимают все браузеры. А верстать под него Вы можете как хотите. Придерживаться строгого синтаксиса это дело профессиональной этики. Можете и с этим доктайпом писать <br/> валидацию всеравно пройдет.

вот за строгий синтаксис этот доктайп мне и нравиться. )

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

Edited by aaron
Link to comment
Share on other sites

А как соотносится Хеллуин и 404? Зачем на 404 странице вообще упоминание про Хеллуин?

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

Link to comment
Share on other sites

А как соотносится Хеллуин и 404? Зачем на 404 странице вообще упоминание про Хеллуин?

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

:rofl: С этими вопросами к дизайнерам TemplateMonster, please. :rofl: :rofl:

Мне все равно, что у них там с фантазией. Моя задача грамотно сверстать то, что они наваяли. ))) А вот о качестве кода моего ни слова здесь не услышал. Значит - все нормально?

Уже не первый раз замечания ко мне по поводу дизайна встречаю. Господа - это не по адресу. Из меня всегда был художник никакой и я с самого детства трезво оценивал свои способности по этому поводу. )))

Может, кто не понял. Я верстаю для практики, а не под заказ, не под конкретный сайт. Нашел в Сети макетик бесплатный, понравилось, захотелось его сверстать и потренироваться - вот и верстаю. ))

Делаю это потому, что считаю - во фриланс идти нужно уже более-менее подготовленным. Чтобы уже уметь что-то, хотя бы несложные шаблоны, о нормально верстать.

Edited by aaron
Link to comment
Share on other sites

Если позволите, то для гибкости я бы сделал:

CSS


html,body{
width: 100%;
height: 100%;
}
body{
font: 62.5% Georgia, "Century Schoolbook L", serif;
background: url(bg.jpg) 0 0 repeat-x #100000;
color: #8b8080;
}
h1,h2{
font-size: 4em;
font-weight: normal;
color: #a71f1f;
}
h1 span{
display: block;
font-size: .5em;
}
h2{
margin-top: 14px;
}
p{
font-size: 2.2em;
letter-spacing: -.025em;
}
a{
color: #fff;
}
.wrap{
width: 80%;/*————————--вот——————*/
margin: 0 auto;
text-align: center;
}
.top{
padding: 90px 0 6px;
}
.middle, .bottom{
position: relative;
}
.middle{
width: 100%;/*————————--вот——————*/
}
.middle img{
width: 100%;/*————————--вот——————*/
}
.middle a, .bottom a:hover{
text-decoration: none;
}
.middle a{
position: absolute;
font-size: 2em;
display: block;
}
.middle a:hover{
text-decoration: underline;
}
.home{
top: 25%;/*————————--вот——————*/
left: 0;/*————————--вот——————*/
}
.map{
top: 49%;/*————————--вот——————*/
left: 20%;/*————————--вот——————*/
}
.search{
top:27%;/*————————--вот——————*/
right: 2%;/*————————--вот——————*/
}
.bottom{
margin-top: -50px;
padding-bottom: 10px;
}

А в HTML в <div class="middle"> добавил <img src="bg-content.jpg"> (ну и соответственно убрал это изображение из свойства фон)

А про сброс стилей почитайте (если не сделали это уже) вот тут http://habrahabr.ru/post/45296/ и комментарии тоже полезны.

Edited by red4pony
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Обсуждения

    • <div class="modal-body"> <?php if (!empty($_SESSION['cart'])): ?> <?php else: ?> <p>Корзина пуста...</p> <?php endif; ?> <?php if (!empty($_SESSION['cart'])): ?> <table class="table"> <thead> <tr> <th scope="col">Изображение</th> <th scope="col">Название</th> <th scope="col">Цена</th> <th scope="col">Количество</th> </tr> </thead> <tbody> <?php foreach ($_SESSION['cart'] as $id => $item): ?> <tr> <td><a href="#"><img class="br-3" src="images/<?= $item['img'] ?>" alt="<?= $item['title'] ?>"></a></td> <td><p><?= $item['title'] ?></p></td> <td><?= $item['price'] ?></td> <td> <?= $id ?> <a id="min-to-cart" href="?cart=minus&id=<?= $id ?>" class="min-to-cart minus-btn badge-light minus-to-cart" data-id="<?php echo $id ?>"></a> <?= $item['qty'] ?> <a id="plus-to-cart" href="?cart=plus&id=<?= $id ?>" class="plus-btn badge-light plus-to-cart" data-id="<?php echo $id ?>"></a> <a href="#" class="delete-btn remove-from-cart badge-light" data-id="<?php echo $id ?>"></a> <button type="button" class="btn delete-btn remove-from-cart" id="remove-from-cart" data-id="<?php echo $id ?>"></button> </td> </tr> <?php endforeach; ?> <tr> <td colspan="4" align="right">Товаров: <span id="modal-cart-qty"><?= $_SESSION['cart.qty'] ?></span> <br> На сумму: <?= $_SESSION['cart.sum'] ?> руб.</td> </tr> </tbody> </table> <form action="telegram.php" method="POST"> <legend>Введите имя, номер телефона и адрес:</legend> <div class="form-group"> <input type="text" class="form-control" id="" name="name" placeholder="Введите имя"> </div> <div class="form-group"> <input type="text" class="form-control" id="" name="phone" placeholder="Введите телефон"> </div> <div class="form-group"> <input type="text" class="form-control" id="" name="address" placeholder="Введите адрес"> </div> <div class="form-group"> <textarea name="msg" placeholder="Ваш комментарий..."></textarea> </div> <button type="submit" class="btn btn-success">Оформить заказ</button> <button type="button" class="btn btn-danger" id="clear-cart">Очистить корзину</button> </form> <!--<script src="common/scripts.js"></script>--> <?php endif; ?> </div> <div class="modal-footer"> <?php foreach ($_SESSION['cart'] as $id => $item): ?> <a href="#" class="delete-btn remove-from-cart badge-light" data-id="<?php echo $id ?>"></a> <?php endforeach; ?> </div>               функция полной очистки работает, видимо потому что этот класс есть изначально, а не появляется из-за сессии   $('.add-to-cart').on('click', function (e){ e.preventDefault(); let id = $(this).data('id'); $.ajax({ url: 'cart.php', type: 'GET', data: {cart: 'add', id: id}, dataType: 'json', success: function (res) { if (res.code == 'ok') { showCart(res.answer); } else { alert(res.answer); } }, error: function () { alert('Error'); } }); }); $('#cart-modal .modal-cart-content .remove-from-cart').on('click', function (e){ e.preventDefault(); let id = $(this).data('id'); console.log(id); }); $('#get-cart').on('click', function (e){ e.preventDefault(); $.ajax({ url: 'cart.php', type: 'GET', data: {cart: 'show'}, success: function (res) { showCart(res); }, error: function () { alert('Error'); } }); }); $('#cart-modal .modal-cart-content').on('click', '#clear-cart', function (){ $.ajax({ url: 'cart.php', type: 'GET', data: {cart: 'clear'}, success: function (res) { showCart(res); }, error: function () { alert('Error'); } }); });
    • Например, добавить  .wrapper li {     clear: both; } http://jsfiddle.net/e3f9ozLr/
    • Добрый день.На сайте после удаления переводчика gtranslate появилась такая вот проблема:при переадресации с http://tto-studio.com.ua/ на https://tto-studio.com.ua/ru/ вылетает такая вот страница <strong>https://tto-studio.com.ua/wp-content/plugins/gtranslate/url_addon/gtranslate.php?glang=ru&gurl=</strong>Что мне делать, как это можно исправить? А точнее — на странице https://tto-studio.com.ua/ru/ в адресной строке я удаляю букву s с http s:// и нажимаю enter. И заместь того чтобы меня кинуло на страницу — https://tto-studio.com.ua/ru/ меня кидает на — https://tto-studio.com.ua/wp-content/plugins/gtranslate/url_addon/gtranslate.php?glang=ru&gurl=
    • Ты в стрелочной функции из-за того что у тебя одно выражение опустил { }. А это ведет к неявному возврату результата выражения.
    • Здравстуйте, каким образом можно получить доступ к Mathcad Application Server для получения доступа к документам и функциям Mathcad через Интернет. Может быть, есть другой способ связать интернет с Mathcad ?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy