| |
|
|
| | Сверстал на досуге простенький двух-колонный макет. Что можно было бы сделать лучше(в плане цветов и т.п.)
Код шаблона ниже:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Две колонки</title>
<style type="text/css">
BODY {
padding: 0; /* Отступы для браузера Opera */
margin: 0; /* Обнуляем значения отступов на веб-странице */
font: 12pt "Times New Roman", serif;
}
.container {
min-width: 800px;
}
.header {
background: #8bd814;
margin: 0px;
padding: 10px;
}
.hor_menu {
background: #575757;
color: white;
border-top: 1px dashed #8bd814;
border-bottom: 1px dashed #8bd814;
/*display: none;*/
}
.menu {
background: #8bd814;
margin: 0px;
margin-bottom: 10px;
padding: 0px;
width: 200px;
float: left;
border-right: 1px dashed black;
border-bottom: 1px dashed black;
}
.content {
background: #8bd814;
margin: 0px;
margin-left: 240px;
padding: 10px;
border-left: 1px dashed black;
border-bottom: 1px dashed black;
/*border-top: 1px dashed #575757;*/
}
.bottom {
background: #8bd814;
clear: both;
margin: 0px;
margin-top: 10px;
padding: 10px;
border-top: 1px dashed black;
font: 11pt serif;
text-align: right;
}
.row {
border: 1px dashed black;
display: block;
padding: 10px;
margin: 0px;
margin-bottom: 10px;
background: white;
}
.row_title {
border: 1px solid black;
border-bottom: none;
background: #bfbb9b;
padding: 5px;
font-weight: bold;
display: inline;
}
.row_cont {
border: 1px solid black;
border-bottom: none;
background: #e5e2bd;
padding: 10px;
}
.row_extra {
border: 1px solid black;
background: #bfbb9b;
padding: 5px;
text-align: right;
}
.menu_row {
margin: 10px 0px;
}
.menu_title {
background: #575757;
color: white;
padding: 5px;
padding-left: 10px;
margin: 0px;
}
.menu_cont {
background: #e5e2bd;
text-indent: 13px;
border-bottom: 3px solid #575757;
padding: 10px 0px;
}
.menu_cont a {
display: block;
color: gray;
}
.menu_cont a:hover {
border: 1px dashed #575757;
color: #c3cf4e;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
Header
</div>
<div class="hor_menu">
This is horizontal menu
</div>
<div class="menu">
<div class="menu_row">
<div class="menu_title">
Главное
</div>
<div class="menu_cont">
<a href="1.html">Главная страница</a>
<a href="1.html">Новости</a>
<a href="1.html">Статьи</a>
<a href="1.html">Контакты</a>
<a href="1.html">Обратная связь</a>
</div>
</div>
<div class="menu_row">
<div class="menu_title">
Главное
</div>
<div class="menu_cont">
<a href="1.html">Главная страница</a>
<a href="1.html">Новости</a>
<a href="1.html">Статьи</a>
<a href="1.html">Контакты</a>
<a href="1.html">Обратная связь</a>
</div>
</div>
</div>
<div class="content">
<div class="row">
<div class="row_title">Titul</div>
<div class="row_cont">This is history about me and my friends. We learned in School, and now we studying at TUT.</div>
<div class="row_extra">At 14.07.2010 13:28</div>
</div>
<div class="row">
<div class="row_title">Titul</div>
<div class="row_cont">This is history about me and my friends. We learned in School, and now we studying at TUT.</div>
<div class="row_extra">At 14.07.2010 13:28</div>
</div>
<div class="row">
<div class="row_title">Titul</div>
<div class="row_cont">This is history about me and my friends. We learned in School, and now we studying at TUT.</div>
<div class="row_extra">At 14.07.2010 13:28</div>
</div>
<div class="row">
<div class="row_title">Titul</div>
<div class="row_cont">This is history about me and my friends. We learned in School, and now we studying at TUT.</div>
<div class="row_extra">At 14.07.2010 13:28</div>
</div>
<div class="row">
<div class="row_title">Titul</div>
<div class="row_cont">This is history about me and my friends. We learned in School, and now we studying at TUT.</div>
<div class="row_extra">At 14.07.2010 13:28</div>
</div>
<div class="row">
<div class="row_title">Titul</div>
<div class="row_cont">This is history about me and my friends. We learned in School, and now we studying at TUT.</div>
<div class="row_extra">At 14.07.2010 13:28</div>
</div>
</div>
<div class="bottom">
© Dionis 2010
</div>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: dios™
(16.07.2010 в 13:24)
| | | Ну начнём с того, что в ИЕ6 Titul съезжает сверху, что не очень привлекательно.
Поэтому Вам пока минус 1 :-)) | |
| |
|
|
| |
|
|
| |
для: dios™
(16.07.2010 в 13:24)
| | |
.menu_cont a {
border: 1px solid transparent;
display: block;
color: gray;
}
.menu_cont a:hover {
border: 1px dashed #575757;
color: #c3cf4e;
}
|
| |
| |
|
|
| |
|
|
| |
для: АЯ
(16.07.2010 в 14:02)
| | | скажите плиз зачем здесь выделенное жирным? | |
| |
|
|
| |
|
|
| |
для: psychomc
(29.07.2010 в 01:16)
| | | А что - Вам нравится, когда при наведении на ссылку вся страница в некоторых браузерах дёргается, как парализованная? | |
| |
|
|
| |
|
|
| |
для: АЯ
(29.07.2010 в 01:32)
| | | что за браузеры такие?
в ie6+, opera 9+, firefox 3+ не видел | |
| |
|
|
| |
|
|
| |
для: psychomc
(29.07.2010 в 01:59)
| | | Смотрите Вы чем?
Глазами? Или каким-то иным местом?
Запустите нижеследующий код в перечисленных браузерах и посмотрите.
Разумеется, чем меньше будет толщина бордера, тем менее заметно глазу (или другому месту, коим смотрите) будет дёрганье.
Чтобы уж ТОЧНО увидели (любым местом) - я сделал толщину бордера в 10 пикселей.
<style>
a {display: block; color: black}
a:hover {color: black; border: 10px solid red}
</style>
<a href="#">Link</a>
<hr>
|
Удостоверились, что дёргается?
Уйти от этого "дёрганья" можно, прописав ссылке невидимый (или совпадающий с цветом фона бордер той же толщины, что и для hover:
<style>
a {display: block; color: black; border: 10px solid transparent}
a:hover {color: black; border: 10px solid red}
</style>
<a href="#">Link</a>
<hr>
|
| |
| |
|
|
| |
|
|
| |
для: АЯ
(29.07.2010 в 02:09)
| | | пардон, надо было посмотреть | |
| |
|
|
| |
|
|
| |
для: dios™
(16.07.2010 в 13:24)
| | | лучше начать с того, что длинные файлы лучше в аттаче прикладывать
и в мясе использовать разный текст! и заголовки не в одно слово | |
| |
|
|
| |
|
|
| |
для: AlexSol
(16.07.2010 в 14:08)
| | | ОК, спасибо, учту, а как насчет сочетания цветов и т.п.? | |
| |
|
|
