Верстка

Winkler · September 9, 2011

Вот попробовал сверстать этот макет от Verder http://freeway-design.ru/files/spit.png .

Косяк с полоской в хэдере очевиден, пока не придумал решения лучше. По-идее под любое разрешение монитора (но не факт ).

На всякий случай вот код.

Укажите на косяки и оцените верстку пожалуйста http://winkler.at.ua/

Это старый код, может новичкам нужно на грабли посмотреть))


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Spitfire</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>

<body>

<div id="wrapper">
	<div id="header">
    	<div class="logo">
        	<a class="logo" href=""><span> </span></a>
        </div>
        <div class="flag">
            <div class="photos_videos"><a href=""><img src="img/photos_videos.png"  alt="photos and videos"/></a></div>
        </div>   
	</div><!-- #header-->
	<div id="middle">
    	<div id="nav">
        	<ul>
            	<li class="search_airplanes"><a href="">SEARCH AIRPLANES</a></li>
                <li>|</li>
                <li class="restoration"><a href="">RESTORATION</a></li> 
                <li>|</li>
                <li class="maintenance"><a href="">MAINTENANCE</a></li> 
                <li>|</li>
                <li class="exhibitions"><a href="">EXHIBITIONS & AIRSHOW</a></li> 
                <li>|</li>
                <li class="contacts"><a href="">CONTACTS AND FEEDBACK</a></li> 
            </ul>
        </div>
		<div id="container">
			<div id="content">
				<div class="text1">
                	<span class="title">We invite for cooperation</span>
                	<p>We invite professionals and enthusiasts and history buffs, fans of aviation. 
                       Any help is invaluable. Together, we will not let die the RAF Legends.</p>
				</div>
                <div class="about_museums">
                	<span class="title">ABOUT MUSEUM</span>
                	<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised 
                       words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden 
                       in the middle of text.</p>
					<a href="">Full information</a>
				</div>
                <div id="news">
                	<img src="img/recent_news.png" alt="recent news" class="recent_news" />
                    <div class="new">
                    	<img class="new_pic" src="img/pic1.jpg" alt="image" />
                        <span class="time">05.12.11</span>
                        <a href="">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point 
                                   of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</a>
                    	<div class="bgl"></div><div class="bgr"></div> <!-- тень -->
                    </div>
                    <div class="new">
                    	<img class="new_pic" src="img/pic2.jpg" alt="image" />
                        <span class="time">04.27.11</span>
                        <a href="">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, 
                                   making it over 2000 years old. </a>
                    	<div class="bgl"></div><div class="bgr"></div>
                    </div>
                    <div class="new">
                    	<img class="new_pic" src="img/pic3.jpg" alt="image" />
                        <span class="time">04.20.11</span>
                        <a href="">Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem 
                                   Ipsum. </a>
                    	<div class="bgl"></div>
                    	<div class="bgr"></div>
                    </div>
                    <a href="" class="all_event">All event and news</a>
                </div>
			</div><!-- #content-->
		</div><!-- #container-->

		<div class="sidebar" id="sideRight">
			<div class="grey_text">BATTLE OF BRITAIN LEGENDS</div>
                        <div class="dark_blue">Latest video from Dunkirk Airshow</div>
                        <div class="video_img"><a href=""><img src="img/spit_05.jpg" alt="Video" /></a></div>
                        <a href="">Watch all videos</a>
                        <div class="youtube"><a href=""><img src="img/spit_09.jpg" alt="Youtube" /></a></div>
                        <div class="banner"><a href=""><img src="img/spit_13.jpg" alt="Banner" /></a></div>
                        <span>Newsletters:</span>
                        <div class="newsletters">
                        	 <input type="text" onblur="if(this.value=='') 	this.value='Your e-mail'" onfocus="if(this.value=='Your e-mail') this.value='';" name="input" value="Your e-mail" id="input" />
            	                 <input type="image" src="img/ok.jpg" name="submit" value="" id="submit" />
                        </div>
		</div><!-- .sidebar#sideRight -->
	</div><!-- #middle-->
</div><!-- #wrapper -->

<div id="footer">
	<div class="footer">
    	<p class="copy">©2010 - Spitfire & Hawker Hurricane Manchester Museum. All rights reserved.</p>
	<p><a href="">Terms and conditions</a> | <a href="">Contacts and feedback</a></p>
    </div>
</div><!-- #footer -->

</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Spitfire</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>

<body>

<div id="wrapper">
	<div id="header">
    	<div class="plane">
            <div class="logo">
                <a class="logo" href=""><span> </span></a>
            </div>
        </div>
        <div class="right"></div>  
        <div class="photos_videos"><a href=""><img src="img/photos_videos.png"  alt="photos and videos"/></a></div>     
	</div><!-- #header-->
	<div id="middle">
    	<div id="nav">
        	<ul>
            	<li class="search_airplanes"><a href="">SEARCH AIRPLANES</a></li>
                <li class="pestoration"><a href="">RESTORATION</a></li> 
                <li class="maintenance"><a href="">MAINTENANCE</a></li> 
                <li class="exhibitions"><a href="">EXHIBITIONS & AIRSHOW</a></li> 
                <li class="contacts"><a href="" class="contacts">CONTACTS AND FEEDBACK</a></li> 
            </ul>
        </div>
		<div id="container">
			<div id="content">
				<div class="little_block">
                	<span class="title">We invite for cooperation</span>
                	<p>We invite professionals and enthusiasts and history buffs, fans of aviation. 
                       Any help is invaluable. Together, we will not let die the RAF Legends.</p>
				</div>
                <div class="about_museum">
                	<span class="title">ABOUT MUSEUM</span>
                	<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised 
                       words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden 
                       in the middle of text.</p>
					<a href="">Full information</a>
				</div>
                <div id="news">
                	<img src="img/recent_news.png" alt="recent news" class="recent_news" />
                    <div class="new">
                    	<div class="angle_l"></div><div class="angle_r"></div>
                    	<img class="new_pic" src="img/pic1.jpg" alt="image" />
                        <span class="time">05.12.11</span>
                        <a href="">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point 
                                   of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</a>
                    	<div class="shadow_l"></div><div class="shadow_r"></div> <!-- тень -->
                    </div>
                    <div class="new">
                    	<div class="angle_l"></div><div class="angle_r"></div>
                    	<img class="new_pic" src="img/pic2.jpg" alt="image" />
                        <span class="time">04.27.11</span>
                        <a href="">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, 
                                   making it over 2000 years old. </a>
                    	<div class="shadow_l"></div><div class="shadow_r"></div>
                    </div>
                    <div class="new">
                    	<div class="angle_l"></div><div class="angle_r"></div>
                    	<img class="new_pic" src="img/pic3.jpg" alt="image" />
                        <span class="time">04.20.11</span>
                        <a href="">Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem 
                                   Ipsum. </a>
                    	<div class="shadow_l"></div><div class="shadow_r"></div>
                    </div>
                    <a href="" class="all_event">All event and news</a>
                </div>
			</div><!-- #content-->
		</div><!-- #container-->

		<div class="sidebar" id="sideRight">
				<div class="upper_text">BATTLE OF BRITAIN LEGENDS</div>
            	<div class="lower_blue">Latest video from Dunkirk Airshow</div>
           		 <div class="video_img"><a href=""><img src="img/spit_05.jpg" alt="Video" /></a></div>
           		 <a href="">Watch all videos</a>
           		 <div class="youtube"><a href=""><img src="img/spit_09.jpg" alt="Youtube" /></a></div>
           		 <div class="banner"><a href=""><img src="img/spit_13.jpg" alt="Banner" /></a></div>
            	         <span>Newsletters:</span>
                   	 <div class="newsletters">
             		 <input type="text" onblur="if(this.value=='') 	this.value='Your e-mail'" onfocus="if(this.value=='Your e-mail') this.value='';" name="input" value="Your e-mail" id="input" />
            		 <input type="image" src="img/ok.jpg" name="submit" value="" id="submit" />
           		</div>
		</div><!-- .sidebar#sideRight -->
	</div><!-- #middle-->
</div><!-- #wrapper -->

<div id="footer">
	<div class="footer">
    	<p class="copy">©2010 - Spitfire & Hawker Hurricane Manchester Museum. All rights reserved.</p>
	<p><a href="">Terms and conditions</a> | <a href="">Contacts and feedback</a></p>
    </div>
</div><!-- #footer -->

</body>
</html>

Edited September 10, 2011 by Winkler

zSpx · September 9, 2011

1. Нету text-shadow, если по ТЗ это критично.

2. Обрезанные тени в блоках RECENT EVENTS

3.

<ul>
                <li class="search_airplanes"><a href="">SEARCH AIRPLANES</a></li>
                <li>|</li>
                <li class="restoration"><a href="">RESTORATION</a></li> 
                <li>|</li>
                <li class="maintenance"><a href="">MAINTENANCE</a></li> 
                <li>|</li>
                <li class="exhibitions"><a href="">EXHIBITIONS & AIRSHOW</a></li> 
                <li>|</li>
                <li class="contacts"><a href="">CONTACTS AND FEEDBACK</a></li> 
 </ul>

Эмм, да тут бордером оформляется...

4.

class="grey_text" class="dark_blue"

Лучше отучитесь использовать имена классов по визуальному представлению.

Больше не смотрел...

Winkler · September 9, 2011

1. Нету text-shadow, если по ТЗ это критично.

Ознакомился с text-shadow. Вроде поправил)

2. Обрезанные тени в блоках RECENT EVENTS

Не совсем понял. Разрезал тень на две половины(снизу слева и справа),между ними повторяющийся фон, чтобы блок тянулся в ширину. А так тени вроде целы.

Эмм, да тут бордером оформляется...

Да вот оно как делается оказывается,а я голову ломал))

Лучше отучитесь использовать имена классов по визуальному представлению.

Впредь постараемся не допустить такой оплошности.

zSpx, спасибо!

Nanto · September 9, 2011

А чё тут верстать-то?

Отключаем графику и видим простенькую структуру...

Гуру Verder опять халтуру выдал погуляться? Футер нормально тянущийся (если уж так приспичило "резину" делать) трудно было слепить?

Ну и зачем было делать "полную резину"? Вот что на 1600:

Я, конечно понимаю - такой "диз" предполагает "резину" :lol: Но не тянуть же его до широкоэкранников?

А для "полурезины" уж хотя бы заглушки (с fadeout (в смысле градиент прозрачности)) для футера и хэдера по краям приделал бы (я про гуру британского дизайна)... Но это можно и вёрсткой сделать, кстати.

И «ОК» на кнопке "уехал" - неаккуратно!

Verder · September 10, 2011

А чё тут верстать-то?
Отключаем графику и видим простенькую структуру...
Гуру Verder опять халтуру выдал погуляться? Футер нормально тянущийся (если уж так приспичило "резину" делать) трудно было слепить?
Ну и зачем было делать "полную резину"? Вот что на 1600:
Я, конечно понимаю - такой "диз" предполагает "резину" Но не тянуть же его до широкоэкранников?
А для "полурезины" уж хотя бы заглушки (с fadeout (в смысле градиент прозрачности)) для футера и хэдера по краям приделал бы (я про гуру британского дизайна)... Но это можно и вёрсткой сделать, кстати.
И «ОК» на кнопке "уехал" - неаккуратно!

Для тех кто в танке - футер с репитом, "приделывать fadeout" (уже одно это говорит о твоих знаниях) тут нахрен не надо, все тянется под любое разрешение.

P.S.

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

Может это ручки кривоваты? Так иди подучись. А то кроме вот этого ужаса - http://www.nanto.xclan.ru/ - больше от тебя никто ничего не видел. Зато слов-то умных сколько знаешь... fadeout в фотошопе... :rofl: overflow:hidding... :rofl:

Так что расслабься, твои потуги никто серьезно воспринимает.

Edited September 10, 2011 by Verder

Temiks · September 10, 2011

Nanto, если в макете правильно вырезать фон, то выглядит все нормально, без косяков (к примеру)

ps. Verder спасибо за макет

Winkler · September 10, 2011

С кнопкой ОК проглядел..Поправил везде немного.

А вот как меню под разные разрешения сделать - додуматься не могу.

Это вроде оптимальные отступы, по 3.5% от бордеров. Больше отступ - при 1024х768 менюха не влазит.

Может у кого действенный пример есть как это делать?

И да, Verder, за макет спасибо.))

Verder · September 10, 2011

С кнопкой ОК проглядел..Поправил везде немного.
А вот как меню под разные разрешения сделать - додуматься не могу.
Это вроде оптимальные отступы, по 3.5% от бордеров. Больше отступ - при 1024х768 менюха не влазит.
Может у кого действенный пример есть как это делать?
И да, Verder, за макет спасибо.))

С меню все очень просто.

Там 5 пунктов, то есть по 20% каждый. Просто для каждого li ставишь:

display: block;

width: 20%;

float: left;

text-align: center;

И не надо никаких паддингов, они будут и так.

А бордер не нужен (с ними конечно в 1024 не влезет), используй для li background: url (...) right no-repeat; для имитации бордера.

Edited September 10, 2011 by Verder

Gaspode · September 10, 2011

display: block; <<<
width: 20%;
float: left; <<<
text-align: center;

Первое-то зачем?

Temiks · September 10, 2011

С меню все очень просто.
Там 5 пунктов, то есть по 20% каждый. Просто для каждого li ставишь:
display: block;
width: 20%;
float: left;
text-align: center;
И не надо никаких паддингов, они будут и так.

А если в меню будет больше пяти пунктов, то можно и через таблицу сделать, хотя можно и через список, на данном форуме уже приводились примеры

Verder · September 10, 2011

display: block; <<<
width: 20%;
float: left; <<<
text-align: center;
Первое-то зачем?

Да, собственно, необязательно. Это я о своем думал.

zSpx · September 10, 2011

А бордер не нужен (с ними конечно в 1024 не влезет), используй для li background: url (...) right no-repeat; для имитации бордера.

Влезет) Если бордер у ссылки прописывать, а не у li.

Не совсем понял. Разрезал тень на две половины(снизу слева и справа),между ними повторяющийся фон, чтобы блок тянулся в ширину. А так тени вроде целы.

Вот

Edited September 10, 2011 by zSpx

Verder · September 10, 2011

А бордер не нужен (с ними конечно в 1024 не влезет), используй для li background: url (...) right no-repeat; для имитации бордера.
Влезет) Если бордер у ссылки прописывать, а не у li.

Тогда линку надо block и height писать.

Softlink · September 10, 2011

ну можно и так как-нибудь

Winkler · September 10, 2011

Вроде более-менее прилично получилось всё поправить.

Спасибо всем за советы, многому научился за один макет))

Non Stop · September 11, 2011

Хороший дизайн. Правда футер не нравится и прозрачная полоска в хедере идет вертикальными полосами.

Verder · September 11, 2011

Хороший дизайн. Правда футер не нравится и прозрачная полоска в хедере идет вертикальными полосами.

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

Nanto · September 11, 2011

Ага, а горизонтальные полосы в хедере? Их тоже нет в исходнике?

7ion · September 11, 2011

Мелкая придирка - в input type="text" у newsletters, если ввести длинное слово буквы заезжают поверх скругления и дальше.

Winkler · September 11, 2011

Мелкая придирка - в input type="text" у newsletters, если ввести длинное слово буквы заезжают поверх скругления и дальше.

Поправил))

Насчёт хедера - лучше уже не будет :mellow:

Edited September 11, 2011 by Winkler

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

Join the conversation

Обсуждения

Important Information