Моя первая верстка

moslem · October 12, 2011

Здравствуйте. Вот первый дизайн сверстал, скрин | и верстка http://ram.22web.net/Grafica/. Собственно хотел бы от вас услышать критику, где ошибки, где что не правильно написал и т.д

Edited November 21, 2011 by moslem

vadimcucherencko · October 12, 2011

Здравствуйте. Вот первый дизайн сверстал, скрин | и верстка upjimm.ru/Grafica/. Собственно хотел бы от вас услышать критику, где ошибки, где что не правильно аписал и т.д
И еще у меня вопрос, почему когда проверяю через валидатор, все ошибки такие <a href="/"><div id="header" > </div></a> их где то 20, подскажите как решить эту проблему.
p.s на два враппера не обращайте внимание, нужно было меню сделать полностью, а из за враппера оно обрезалось.

ошибки валидатора у тебя потому что неправильное вложение тегов,лучше прописуй шапку в css. Вот что оставляеш на странице а в стилевом файле прописуй свойства тегу,

#header {

background : #fff url(images/имя.jpg) no-repeat left bottom; -ссылка на изображение

color : #505050;

height : 230px;-высота шапки

width : 700px;-ширина

margin : 0;

padding : 0;

}

Edited October 12, 2011 by vadimcucherencko

MaferoK · October 12, 2011

блочные элементы ( <div> ) в строчных расположены ( <a ..> ) потому и ругается валидатор

zSpx · October 12, 2011

Доктайп <!DOCTYPE HTML> поставьте и будет вам счастье.

В ИЕ7 отступ ссылок меньше. Да и вообще, текстовые ссылки без оформления на таком пустом пространстве, таким маленьким шрифтом смотрятся уныло. Но это по дизайну уже...

ceil100 · October 13, 2011

1.блочные элементы внутри строчных,<a><div></div></a> должно быть наоборот

2.id menus используется несколько раз, можно только один раз в коде

3.у картинок не выставлен атрибут alt

4.поменяйте местами title и link

nightgremlin · October 13, 2011

Не смотря код визуально можно увидеть что верстка не закончена, она не совсем соответствует макету.

1. Нет выделения пунктов меню (горизонтального и вертикального)

Вернее hover есть, но не соответствует макету

2. Окно поиска отсутствует.

nadop · October 13, 2011

Поля логин, пароль выходят за пределы страницы в FireFox (Ubuntu) и цвет не соответствует.

Нет поля поиска.

Кнопка читать далее наползает на текст.

Про меню уже писали.

Edited October 13, 2011 by nadop

nightgremlin · October 13, 2011

Поля логин, пароль выходят за пределы страницы в FireFox (Ubuntu) и цвет не соответствует.
Нет поля поиска.
Кнопка читать далее наползает на текст.
Про меню уже писали.

Про поиск вроде тоже

moslem · October 13, 2011

vadimcucherencko Исправил хедер, сделал только чуть по другому.

MaferoK Теперь буду знать

ceil100 Сделал.

nadop Я через обычный FF проверял вроде бы нормально, через ubuntu не смотрел

nightgremlin поиск чуть позже сделаю, пока HTML не освоил еще хорошо :blush: а вот hover у меня картинка криво показывается, не полностью почему то

Спасибо всем огромное за помощь.

Еще я не понял как сделать верхнее меню вот когда браузер уменьшаешь и скролинг появляетя полоска меню становиться меньше и сбоку место остается как такое исрпавить?

ceil100 · October 13, 2011

в твоем случае:

задай ширину элементу ul 1111px (вроде такая ширина у тебя)

поставь для него margin:auto; чтобы он центрировался

а, то твоя менюшка, на мониторе с высоким разрешением будет уезжать влево,

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

и птичка куда-то вправо уезжает

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

а меню соответственно влево

Edited October 13, 2011 by ceil100

moslem · October 13, 2011

я сделал как ты сказал, для ul сделал ширину 1111px и получилось, ссылки теперь не куда не двигаются, остались только 2 проблемы, полоска меню при увеличение браузера становится меньше и как ты заметил птица влево уходит как это исправить пока не могу додуматься..

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

ceil100 · October 13, 2011

в каком смысле меньше?

при масштабировании, просто уменьшается размер или она у тебя не доходит до краев окна?

при увеличении масштаба, ссылки наезжают друг на друга?

для птички:


#twitter {
    background: url("../img/twitter.png") no-repeat 100% 0;
    height: 118px;
    width: 1050px;
    margin: -170px auto 0; 
}

птичку можно двигать изменяя проценты в background: url("../img/twitter.png") no-repeat 100% 0 ;

а вообще правильней будет поместить ее в wrapper, и из него уже отсчитывать все

и проще тоже

Edited October 13, 2011 by ceil100

moslem · October 13, 2011

когда окно браузера уменьшаю, у меня линия меню становится меньше, до краев не доходит она.

Скрины:

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

ceil100 · October 13, 2011

через какой браузер смотришь?

у меня в firefox все нормально

поменяй код на демке, я посмотрю

div#menu{width:100%;}

так сделай

Edited October 13, 2011 by ceil100

moslem · October 13, 2011

я через хром смотрю, сделал как ты говоришь так же осталось. Не знаю на моем 1280х1024 полоска полностью идет, знакомый зашел с 1024х600 у него полоска говорит до твиттера доходит.

%D0%91%D0%B5%D0%B7%D1%8B%D0%BC%D1%8F%D0%BD%D0%BD%D1%8B%D0%B9.png?rnd=0.07744181898017377&sizeM=7

ceil100 · October 14, 2011

понял я о чем ты

это глюки браузеров

не хотят нормально пересчитывать размеры элементов при масштабировании

ширина #menu в процентах, а ширина списка фиксированна

отсюда и такая фигня

можешь задать минимальную ширину для #menu, правда гарантий нет

не помню даже как с этим бороться

Edited October 14, 2011 by ceil100

Searcher · October 14, 2011

Зачем подчеркивание в меню бордером сделано? Text-decoration то чем не угодил? На кнопках надо бы курсор на палец менять...

Свойства типа text-indent: -9000px - это зверская конструкция. Зачем так?

Ну и имхо ссылки типа ../img/border.png не очень удобны, мало ли структура изменится, лучше просто от корня задавать начиная с "/".

DatFlooseRels · October 15, 2011

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

Анна · October 16, 2011

Свойства типа text-indent: -9000px - это зверская конструкция.

Почему?

paracelso · November 20, 2011

дизайн зачет, не слушай никого

moslem · November 21, 2011

Спасибо.

Переделал верстку по новому, битую ссылку в первом посту поменял на новую, изменения от старой верстки можете посмотреть здесь а сама старая верстка лежит здесь

Edited November 21, 2011 by moslem

Sign In

Моя первая верстка

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information