Есть лого, как его сделать средствами html и css?

Статус
В этой теме нельзя размещать новые ответы.
Cribble

Cribble

Постоялец
Регистрация
25 Июл 2006
Сообщения
110
Реакции
41
Собственно сабж. Нужно сделать без картинок.
logo_mini_obrez.gif Как реализовать?
 
Вот пример реализации, цвета и размеры подставишь свои.

HTML: 
CSS-code:
-----------------
div#logo {
  font-weight: bold;
  font-size: 20px;
  width: 130px;
}
span.grey{font-color:#999; background-color:grey;}
span.red{font-color:#fff; background-color:red;}
span.under{display:block;text-align:right; font-size:10px;}

HTML-code:
-----------------
<div id="logo">
<span class="grey">МИР</span><span class="red">МЕДИА</span>
<span class="under">холдинг</span>
</div>
 
Вот вариант. В дримвивере можешь править шрифт, положение, размеры, пропорции.
Код: 
<!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>Untitled Document</title>
<style type="text/css">
body {background:#aaa}
.logo {
   position:relative; 
   background:#fff;
   width: 131px;
   height: 43px;
 }
.logo * {
	position:absolute;
	font-weight:bold;
	font-family:Arial, sans-serif;
	height: 3px;
}
.logo .gray {left:2px; top:2px;  width:49px; height:30px; background:#999; }
.logo .gray .mir {
	left:4px;
	top:4px;
	color:#333;
	font-size: 19px;
}
.logo .red {left:51px; top:2px;  width:78px; height:30px; background:#f00}
.logo .red .meida {
	left: 4px;
	top: 4px;
	color:#fff;
	font-size: 19px;
} 
.logo .hold {
	left:84px;
	top:30px;
	color:#333;
	font-size: 11px;
}


</style>
</head>

<body>
<div class="logo">
  <div class="gray">
      <div class="mir">МИР</div>
  </div>
  <div class="red">
       <div class="meida">МЕДИА</div>   
  </div>
  <div class="hold">холдинг</div>
</div>

</body>
</html>
 
HTML: 
<html>
  <head>
    <style type="text/css">
      #mir, #media { height:35px; font:25px Impact; line-height:35px; text-align:center; float:left; }
      #mir   { width:46px; background:#c0bfc4; }
      #media { width:74px; background:#d41122; color:#fff;}
      #hold  { width:120px; background:#fff; font:11px Impact; text-align:right; }
    </style>
    
  </head>
  <body>
    <div id="hold">
      <div id="mir">MIR</div>
      <div id="media">MEDIA</div>
      HOLDING
    </div>
  </body>
</html>
 
Ребята тут дивы не нужны, ведь это не блочные елементы, а строковые. Значит нужен span.
 
-=JC=- написал(а):
Ребята тут дивы не нужны, ведь это не блочные елементы, а строковые. Значит нужен span.
Нажмите для раскрытия...
Какая, в данном случае, разница юзать span или div? У тебя же самого из 4-х элементов 2 блочных :)
Дело вкуса, что использовать. Я, например, считаю, что див-ами верстать удобнее, если что-то придется потом поменять/добавить - например размеры, паддинги, маргины и т.д.
 
megadude написал(а):
Какая, в данном случае, разница юзать span или div? У тебя же самого из 4-х элементов 2 блочных :)
Дело вкуса, что использовать. Я, например, считаю, что див-ами верстать удобнее, если что-то придется потом поменять/добавить - например размеры, паддинги, маргины и т.д.
Нажмите для раскрытия...

Спанами это тоже можно делать! Див определяет структуру, это семантичесский елемент. И вообще мы отошли от темы, прекращаем оффтоп.
 
Только средствами HTML
********************

<table width="120" border="0" cellpadding="1" cellspacing="0">
<tr>
<td bgcolor="#FFFFFF">
<table width="100%" border="0">
<tr>
<td bgcolor="#CCCCCC" width="50%" height="50%" align="center"><font face="Arial, Helvetica, sans-serif" font size="4"><b>МИР</b></font></td>
<td bgcolor="#CC0000" width="50%" height="50%" align="center"><font face="Arial, Helvetica, sans-serif" font size="4" color="#FFFFFF"><b>МЕДИА</b></font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" align="right" valign="top"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><b>холдинг</b></font></td>
</tr>
</table>
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху