Помощь в вёрстке "Шапки"

[koekto93]

Добрый вечер, уважаемые форумчане. Помогите, пожалуйста, новичку.

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

Буду рад советам с пошаговыми инструкциями как это будет лучше сделать в стиле: задаешь фон, размещаешь логотип и т.д или просто дельным советам.

А также как избежать проблем со следующим блоком, где размещена картинка, чтобы она не прижималась к правому краю логотипа, а её можно было выровнять в центре? 

А ещё, как вы можете видеть, на картинке есть линии, на концах которых будут расположены ссылки, как их лучше всего добавить и разместить поверх рисунка? 

 

[Veseloff]

Тут всё проще простого. Давайте так. Вы показываете что сделали и что не получилось, а мы помогаем советами.

[koekto93]

<div id="wrapper">		<header>				<div id="logo">					<a href="/"><img src="images/logo.png"/></a>				</div>								<div id="top">				<div id="menu_top_left">									<table>						<tr><td><img src="images/soska.png"/> Всего родов: 90060</td><td><img src="images/boy.png"/> Мальчиков: 8</td></tr>						<tr><td><img src="images/igrushka.png"/> За сутки: 17</td><td id="girl"><img src="images/girl.png"/> Девочек: 9</td></tr>					</table>				</div>									<div id="menu_top_right">					<p>Автоматическая справочная служба:<br>+ 7 (495) 718-20-88<br></p>					<p id="point"><img src="images/point.png"/><a href="/">  Контактная информация</a></p>									</div>				</div>									<nav>					<ul>						<li><a href="/">Главная</a></li>						<li><a href="/">О центре</a></li>						<li><a href="/">Сотрудники</a></li>						<li><a href="/">Полезная информация</a></li>						<li><a href="/">Отзывы</a></li>					</ul>				</nav>		</header>				<div class="top_area">		</div>				<section>			<aside class="left">			</aside>						<article>			</article>						<aside class="right">			</aside>		</section>		<footer></footer>			</div>

#wrapper {	width: 1280px;	margin: -8px auto;}header {	width: 1280px;	height: 171px;	background: url(images/menu_bg.png) no-repeat;}#logo {	width: 194px;	height: 236px;	float: left;	margin-left: 157px;}#top {	overflow: hidden;	color: #66698b;	font: regular 16px Trebuchet MS Regular, Arial, sens-serif;}#menu_top_left table {		border-spacing: 26px 2px;		float: left;		margin-top: 12px;}#menu_top_right p {		float: right;		margin-right: 160px;		margin-top: 30px;		text-align: right;		padding-left: 50px;}#menu_top_right #point {	margin-top: -27px;}nav ul {	padding-top: 13px;	padding-left: 32px;	overflow: hidden;}nav ul li {	float: left;	list-style-type: none;	color: #66698b;	font: regular 16px Trebuchet MS Regular, Arial, sens-serif;	margin-right: 75px;	}nav .active, nav ul li a:hover {	color: b2b2b2;	text-decoration: none;}nav ul li a {	color: #252c65;	font: regular 16px Trebuchet MS Regular, Arial, sans-serif;}.top_area  {	width: 1077px;	height: 481px;	margin: 0 auto;	background: url(images/roddom.jpg) no-repeat;}

 

Veseloff, про такой вариант я не подумал, он будет намного лучше))) 

 

Вопросы в следующем: правильно ли я поступил, что начал делать ту часть, где есть надписи "Всего родов", "Мальчиков" и т.д через таблицу? Не особо получается подогнать надписи в ячейках, чтобы совпадало с исходной картинкой.

С прилипанием блока к правому краю лого справился)) Теперь нужно создать много блоков <p>, кратных количеству линий, задать каждому индификатор и выравнивать попиксельно?

Edited October 24, 2015 by koekto93

[Jack_V]

Залейте код в онлайн редактор.

[koekto93]

Jack_V, для того, чтобы Вы могли внести изменения в реальном времени?  И каким редактором лучше всего воспользоваться? 

[Pinga]

что то мне подсказывает

https://jsfiddle.net/

подойдет.

Edited October 24, 2015 by Pinga

[Jack_V]

Jack_V, для того, чтобы Вы могли внести изменения в реальном времени?  И каким редактором лучше всего воспользоваться? 

Сотни их. Тот что выше указали - самый стабильный имхо. 

Понимаете, разбирать чужой код - труднее чем написать свой по новой (в общем и целом), чужой код разбери и в голове в воображаемом браузере запусти. Мало у кого есть столько свободного времени.

А в редакторе человек чуть ли не сразу поймет что не так. Цените свое и чужое время.

[koekto93]

Полностью согласен с Вами, Jack_V. Картинки тащил из ВК, поэтому у них появился белый фон. Не знаю в чём проблема, но в ссылке указана цирфа 5, а когда открываешь выставляется 2 и в результате не пускает до моего проекта( 

Вот что получилось в итоге https://jsfiddle.net/koekto93/amcnjqzm/5/

Edited October 25, 2015 by koekto93

[Pinga]

а когда открываешь выставляется 2 и в результате не пускает до моего проекта(

 

Проверка:

ссылка на jsfiddle

 

хмм... Все работает...

Edited October 27, 2015 by Pinga

[koekto93]

значит только у меня такая проблема) 

[Pinga]

Диагональные линии

ссылка

 

и <table> в твоей шапке совершенно не нужен.

твоя шапка

Edited October 29, 2015 by Pinga

[koekto93]

Диагональные линии

ссылка

 

и <table> в твоей шапке совершенно не нужен.

твоя шапка

 

Вау, я уже и не надеялся на ответ!!! Спасибо большое!