Geers

Geers
Рейтинг
487
Регистрация
12.04.2011
CSS красивое оформление блока

Можно в css заменить код на этот:

#menu a {
	color: #0295b6;
   font-size: 12px;
   text-decoration: none;
   border-bottom: 1px dotted;
   font-weight: bold;
}
#menu a:hover {
	color: #ff8400;
	font-size: 12px;
   font-weight: bold;
}

И получится что-то типа такого:

:)

---------- Добавлено 28.04.2012 в 03:04 ----------

Держи: http://cl112400.tmweb.ru/

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>Пацоны ваще ребята :)</title>
</head>
<body>
<div id="menu"><div id="container">Новости студии</div>
  <div class="date">28 февраля</div>
  <a href="/">Первая новость</a><br />
  <div class="date">28 февраля</div>
  <a href="/">Вторая новость</a><br />
  <div class="date">28 февраля</div>
  <a href="/">Третья новость</a><br />
  <div class="date">28 февраля</div>
  <a href="/">Четвертая новость</a><br />
  <div class="all"><a href="/">Все новости</a></div><br />
  </div>
</body>
</html>

CSS

html,body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background-color: #edfaff;
}
#container{
	color: #00000;
	font-family: Tahoma;
	font-weight: normal;
	font-size: 18px;
	 padding-bottom: 20px;
	 margin-top: -50px;
	 margin-left: -10px;
	 text-shadow:0 1px 0px #fff;
}
.date{
	font-family: Tahoma;
	font-weight: normal;
	font-size: 11px;
	margin-bottom: -10px;
	color: maroon;
}
#menu .all{
	float: right;
	margin-top: 6px;
}

#menu .all a{
 color: #ff8400;
 font-size: 13px;
}
#menu .all a:hover{
 color: #0295b6;
 font-size: 13px;
 border-bottom: 0 dotted;
}
#menu {
	background-color: #FFFFFF;
	margin: 50px;
	padding: 15px;
	font-family: Tahoma;
   font-size: 18px;
   width: 150px;
   border-radius: 6px;
   -moz-border-radius: 6px;
   box-shadow: 0 3px 10px #e1e5e8, 0 0 10px #F6F5F5 inset;
   line-height:25px;
}
#menu a {
	color: #0295b6;
   font-size: 12px;
   text-decoration: none;
   border-bottom: 1px dotted;
   font-weight: bold;
}
#menu a:hover {
	color: #ff8400;
	font-size: 12px;
   font-weight: bold;
}

CSS красивое оформление блока
Pasha199:
Geers, в том то и дело что думаю отделять название блока от ссылок или нет)) думаю как лучше будет) отделять или нет)

Смысла в этом никакого нет. ;)

CSS красивое оформление блока
Pasha199:
Geers, очень хороший вариант, спасибо =)
Как думаете стоит ли еще чем то отделить заголовок блока от ссылок?

Я не люблю думать)

Покажите что надо, я покажу как реализовать в коде. :)

CSS красивое оформление блока
Pasha199:
Geers, весь вечер думаю как его красиво оформить)

И без единого графического элемента. :)

http://cl112394.tmweb.ru/

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>Пацоны ваще ребята :)</title>
</head>
<body>
<div id="menu">Услуги студии
  <a href="/">Сайт-визитка</a>
  <a href="/">Официальный сайт</a>
  <a href="/">Сайт-магазин</a>
  <a href="/">Корпоративный сайт</a>
  </div>
</body>
</html>

CSS

html,body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background-color: #edfaff;
}
#menu {
   float: left;
	background-color: #FFFFFF;
	margin: 50px;
	padding: 15px;
	font-family: Tahoma;
   font-size: 18px;
   width: 150px;
   border-radius: 6px;
   -moz-border-radius: 6px;
   box-shadow: 0 3px 10px #e1e5e8, 0 0 10px #F6F5F5 inset;
   line-height:25px;
}
#menu a {
	color: #0295b6;
   font-size: 12px;
   font-weight: bold;
}
#menu a:hover {
	color: #ff8400;
	text-decoration: none;
   font-size: 12px;
   font-weight: bold;
}
CSS красивое оформление блока
Pasha199:
Geers, можно css, можно чисто графически.

Сейчас сделаю все на css, здесь графика нафик не нужна. :)

CSS красивое оформление блока

Вам код css чтоли нужен?

Юмор: приколы, баяны, картинки, видео. Часть 12.
Roman77:
тётка выскочила машины тормознуть, чтобы водитель с камерой мог налево повернуть.

А вы всегда так убойно шутите?)

Юмор: приколы, баяны, картинки, видео. Часть 12.
Toster_Alex:
Тут оба хороши. Она видела, что дорога имеет 4 полосы, но с самого начала смотрела в абсолютно другую сторону, хватило же мозгов. А водитель скорой действительно мог бы на знаки внимание обратить, снизить скорость и догадаться, почему газелист тормознул перед пешеходным переходом.

Два дурака, а дорога одна.

Мне кажется во всем виновата дура газель) вместе с ясным солнечным днем)

kuprum у тебя недержание что ли? Заспамил весь раздел.
Vadik(R):
Аееее, пятничный отжиг! 🍿


У меня тоже. А при чем тут он?

В том, что как и в FF можно открывать неактивные ссылки не методом copy-paste.;)

Юмор: приколы, баяны, картинки, видео. Часть 12.
Vitkus:
Не слепая, а тупая

Она найдет когда нибудь свой капот)

1... 113811391140114111421143114411451146 ...1301
Всего: 13009