Верстка логотипа

[Orarifish]

Здравствуйте!

Подскажите, как правильно нужно верстать логотип?

Есть логотип и снизу текст. У текста шрифт PTSans Regular.

Вопрос: логотип будет правильнее вырезать вместе с текстом (то есть, картинкой)  или логотип--картинка, а текст -- кодом?

Спасибо.

 

И еще вопрос возник: опять же правильно ли тегу header указывать класс, если он один на странице? А вдруг нужно будет (потом, например) добавить еще header? Этот же тег можно несколько раз применять...

Edited September 19, 2014 by Orarifish

[DivMan]

Смотря какой логотип, если сложный,то можно картинкой, если простой, то можно сверстать 

[Orarifish]

Логотип простой. Картинка и снизу небольшой текст.

Ну, а зачем плодить много тегов, можно, ведь написать все одной строкой:

<a href="index.html" class="logo"><img src="images/img.jpg" alt=""></a>

чем так:

<div class="logo"><a href="index.html"><img src="images/img.jpg" alt=""></a></div>

Edited September 19, 2014 by Orarifish

[Galaxy]

Если текст относиться к логотипу, то это все одна картинка.

[swandev]

Если текст относиться к логотипу, то это все одна картинка.

а если мне захочется изменить текст?

[Orarifish]

а если мне захочется изменить текст?

Вырезать еще одну картинку. 

[rus]

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

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

вы можете указывать, можете не указывать класс для хеадер - это ваше личное дело.

[Orarifish]

Спасибо. Еще вопросы:

1.Что правильнее использовать overflow:hidden или clear:both?

Например, есть блок (wrapper), а в нем к примеру, лого стоит по левую сторону(float:left), а другой блок -- по правую (float:right)

<div class="wrapper">    <div class="logo"></div>    <div class="block"></div></div>

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

Edited September 19, 2014 by Orarifish

[DivMan]

В данном случае, правильно будет так

 

.wrapper:after{

     content:"";

    display:block;

    clear:both;

    height:0;

}

[rus]

1) я не понимаю, для чего в данном примере нужен overflow или clear: http://jsfiddle.net/1w63qrga/ поясните?

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

clear:both; как правило используется для отмены обтекания, т.е., если вы подряд несколько блоков смещаете влево, а последний хотите что бы был на "новой строке", ну т.е. без обтекания - тут можно применить clear:both;

overflow:hidden; - я чаще всего использую в том случае, если блок выходит за рамки родителя, тогда родителю ставлю overflow:hidden;

[Orarifish]

я не понимаю, для чего в данном примере нужен overflow или clear

Потому что, как я понимаю, родительский блок тогда будет иметь нулевую высоту...точнее, как будто в нем ничего нет. Ведь, блоки logo и block будут "вырваны" из общего потока.

[rus]

тьфу ты, не посмотрел что это враппер ))) думал что речь продолжается про хеадер ))

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

тогда вот так: http://jsfiddle.net/1w63qrga/2/

[Orarifish]

Ну, а почему clear:both, а не overflow:hidden? Я всегда указываю overflow:hidden

Спрашиваю не просто так: выполняю тестовое задание (боюсь ошибиться))) )

Edited September 19, 2014 by Orarifish

[Vessel]

Ну, а почему clear:both, а не overflow:hidden? Я всегда указываю overflow:hidden

Спрашиваю не просто так: выполняю тестовое задание (боюсь ошибиться))) )

 

При прочих равных условиях отдаю предпочтение 

 

.parent:after {

     content: "";

     display: table;

     clear: both;

}

 

hidden кушает абсолютно спозиционированные элементы, аутлайны и тени у боксов.

[rus]

потому что hidden не очищает поток, а:

создаёт отдельный контекст форматирования для выбранного элемента, тем самым локализуя действие свойства float внутри элемента к которому применён.

 

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

[Orarifish]

Вот еще нюанс: всегда ли нужно input заключать в тег form? 

Ведь, form предназначен для обмена данными, а в данном случае, никаких обменов данных нет (то есть, кнопки "Отправить" нет).

[Vessel]

Вот еще нюанс: всегда ли нужно input заключать в тег form? 

Ведь, form предназначен для обмена данными, а в данном случае, никаких обменов данных нет (то есть, кнопки "Отправить" нет).

 

Как по мне, то лучше взять за привычку помещать инпуты в ФОРМ. Это придаст коду универсальности, ведь дальше с ним будет еще кто-то работать, что-то добавлять, редактировать. Лучше всего работать постоянно с универсальными шаблонными решениями.

Edited September 19, 2014 by Vessel

[rus]

что значит "в данном случае"?

[Orarifish]

что значит "в данном случае"?

Ну, например, Москва -- дальше идет поле со списком городов. И все.

Просто нужно выбрать в каком городе ты находишься. И все. Без всяких там кнопок "Отправить"... 

Edited September 19, 2014 by Orarifish

[rus]

а почему тогда именно инпут, а не список (ul->li)?

[Orarifish]

В данном случае, правильно будет так   .wrapper:after{      content:"";     display:block;     clear:both;     height:0; }

А если, в правом блоке картинка? 

[DivMan]

 

В данном случае, правильно будет так   .wrapper:after{      content:"";     display:block;     clear:both;     height:0; }

А если, в правом блоке картинка? 

 

И что? я не понял 

[Orarifish]

И что? я не понял

Да ничего. Я разобралась. Спасибо.

Edited September 19, 2014 by Orarifish