если не сложно,то сделайте мне хэддер google+

dummy · November 9, 2011

буду благодарен,за хэддер как google+ без навигации,просто шапка разделенная на две горизонтальные полосы(черная и серая) в черной названия ссылок,в серой,та которая под черной,окно поиска и возможность вставить иконки

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

буду благодарен,так же за наводку,где и как это сделать самому

sigma77 · November 9, 2011

http://getfirebug.com/

WebMasterOleg · November 15, 2011

окно поиска и возможность вставить иконки

А что за иконки?? Что то не догоняю. Можете объяснить?

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Шапка</title>
	<link rel="stylesheet" type="" href="style.css" media="screen" />
  </head>
  <body>
  <div class="header">
    <ul class="navi">
	  <li><a href="1">+Вы</a></li>
	  <li><a href="2">Веб</a></li>
	  <li><a href="3">Картинки</a></li>
	  <li><a href="4">Видео</a></li>
	  <li><a href="5">Карты</a></li>
	  <li><a href="6">Новости</a></li>
	  <li><a href="7">Gmail</a></li>
	  <li><a href="8">Ещё</a></li>
	</ul>
  </div><!-- header -->
  <div class="wrapper">
    <div class="content">
	  <div class="forma">
		<form method="get" action="./">
		  <img src="logo.png" alt="Поиск" class="search-img">
	      <input type="text" name="search" id="search" class="main-search" />
		  <input type="submit" name="submit" id="submit" class="main-submit" value="Начать поиск">
	    </form>
	  </div><!-- forma -->
	</div><!-- content -->
  </div><!-- wrapper -->
  </body>
</html>

CSS

* {margin:0;  padding:0;}
.navi {
	background:#2D2D2D;
	overflow:hidden;
	padding-left:10px;
}
ul, li {list-style:none; }
li {
	float:left;
	width:auto;
	font:10pt Arial;
	line-height:14pt;
	padding:5px 14px 5px 0;
	display:block;
	text-align:center;
}
li a {
	text-decoration:none;
	color:#CCC;
	height:auto;
	display:block;
}
li a:hover {
	text-decoration:underline;
	color:#FFF;
}
.wrapper {
	min-width:750px;
	max-height:100%;
}
.forma {
	margin:0 auto;
	width:350px;
	padding:200px 0 10px 0;
}
.main-search {
	width:450px;
	height:30px;
	background:#fff;
	border:1px solid #d9d9d9;
	font:12pt Arial;
}
form {width:450px;}
.search-img {margin:0 auto; width:275px;}
.main-submit {
	border:1px solid #DCDCDC;
	width:125px;
	height:35px;
	float:right;
	margin:10px 0 0 0;
}

Вот архив: Архив с исходниками Что не так поправишь надеюсь, ну или пиши, будем разбираться.

Edited November 15, 2011 by WebMasterOleg

gurylyov · November 15, 2011

Там сверстать самому заново куда проще по ходу, чем рипать с их сайта. Ну, я попробовал рипнуть. Вроде норм.

WebMasterOleg · November 15, 2011

Там сверстать самому заново куда проще по ходу, чем рипать с их сайта. Ну, я попробовал рипнуть. Вроде норм.

Ну че, у тя круто получилось)) Как ты сделал чтобы иконки при наведении подсвечивались? Я вот хочу кнопки сделать чтобы при наведении подсвечивались думаю так сделать:

.li a {
  background:url('img/button.png');
  opacity:0.5;
}
.li a:hover {
  background:url('img/button.png');
  opacity:1;
}

Пройдет такой трюк?

И кстати, я там немного не так сделал... надо переделать чуток.

Edited November 15, 2011 by WebMasterOleg

gurylyov · November 15, 2011

Я же написал, что рипнул, а не сверстал вручную. Просто открыл через firebug страницу и вырезал нужные блоки + ВСЕ css сайта.

Ну, по идее у них там на каждую кнопку есть две картинки. Обычное состояние и состояние при наведении. При ховере оно переходит во второе состояние.

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

то есть что-то в этом роде:


.li a {
  background:url('img/button.png');
}
.li a:hover {
  background-position: 0 -16px;}

ни о каких прозрачностях речи не идёт. пример реализации через спрайты можно посмотреть, к примеру, здесь.

Sign In

если не сложно,то сделайте мне хэддер google+

Recommended Posts

dummy

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

WebMasterOleg

Link to comment

Share on other sites

gurylyov

Link to comment

Share on other sites

WebMasterOleg

Link to comment

Share on other sites

gurylyov

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information