Как выровнять текст...?

Question

[freeman0204]

Верстаю сайт don-dreyper.16mb.com вот шапка. Использую для сброса стилей eric-meyer-reset.min_.css. Первое что не устроил это:

body
{
    line-height: 1;
}

что привело к отступу под картинкой, я это исправил но как то странно. Может посоветуете более подходящий сброс стилей?


Еще не понятно почему мне нужно ставить разный padding-top для параграфа Language:
например, и формы выбора языка. У них почему то разный отступ изначально, хотя даже стили сброшены. Почему так?
Как можно реализовать выезжание стрелочки возле выбора языка, если слово языка длиннее изначального?* Как на скриншоте.

И по моему в меню справа там где палочки между пунктами меню, она реализована через after я задал размер шрифта как в меню но хочу обрезать немного палочку снизу что бы была по уровню текста меню. Как это можно сделать?

Также стилизую Input:

<div class="language-currency">
						<p>Language:</p>
						<form action="#">
							<div class="custom-select">
								<select name="Language">
									<option>English</option>
									<option>Русский</option>
									<option>Український</option>
								</select>
							</div>
						</form>
						<p>Currency:</p>
						<form action="#">
						<div class="custom-select2">
							<select name="Currency">
								<option>usd</option>
								<option>руб</option>
								<option>грн</option>
							</select>
						</div>
						</form>
					</div>

Как не создавать custom-select и custom-select2 так как там разница только в padding может как то можно обратиться через nth-child?

Answer 1

[Тимофей Белоусов]

Накидал по быстрому? не стал сильно замарачиваться, посмотри чем отличается моя верстка от твоей, учи потоки, пойми как устроена структура элементов, инспектируй блоки в хроме, думаю так быстрее поймешь как все работает. Если что-то приходит в голову сразу тестируйте, например, что произойдет если в абсолютном блоке абсолютно отпозиционировать дочерний блок?! И так далее... Успехов!

Comments

[freeman0204]

Спасибо! Только вот у вас фиксированная ширина. Я изначально делаю адаптив + резина, вот что у меня получилось codepen.io/anon/pen/BoaPYm я иду в правильном направлении в плане резины? Только вот главное меню уже на 1200px перескакивает под картинку. Я знаю что сделаю меню адаптивным т.е. скрытым как в бутстрап, но как то рано оно сдвигается вниз под картинку. Что с этим можно сделать?

[Тимофей Белоусов]

Артур Черешнюк: Ну я не знал всех нюансов верстки, написал же накидал на глаз, забудьте пока про адаптив и резину, научитесь Правильно делать фиксированную верстку, потом уже усложняйте, вот в примере выше, который вы скинули, правильно сделали, что дали бг фону блоков, видите у вас не ровно? Не все линии стыкуются, говорю еще раз, почитайте внимательно про потоки, когда поймете, как все утроено и как все работает, будет на много легче работать. Зачем вы например это написали
.language-currency p{
float: left;
}
Можно ведь просто вставить span, либо просто вместо обтекания, сделать inline-block, все встанет нормально. Не забывайте зачищать после float'от, они создают много проблем, если человек не знает как они работают. Почему вы .language-currency даете обтекание, а .login нет? Такая верстка не будет нормально работать, еще раз напишу, научитесь делать правильно фиксированную верстку, потом уже сложнее...