это content div class image-areas ul class titles li href Untitled li

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
это в #content
<div class="image-areas">
<ul class="titles">
<li><a href="#">Untitled</a></li>
<li class="cur"><a href="#">Шестерёнка</a></li>
<li><a href="#">Какбэ окно</a></li>
</ul>
<div class="main">
<img class="main-img" src="img/tmp/dog.jpg" alt="" />
<div class="tipbox-white" style="left:50px;top:275px;">
<form action="#" class="area-form">
<p><input class="txt" value="Untitled area" /></p>
<div class="editor">
<a href="#" class="editor-btn-b">B</a>
<a href="#" class="editor-btn-i">I</a>
<a href="#" class="editor-btn-u">U</a>
<a href="#" class="editor-btn-s">ABC</a>
</div>
<p><textarea cols="10" rows="5"></textarea></p>
<p class="buttons">
<span class="button2"><input type="button" value="Save" /></span>
<span class="button2"><input type="button" value="Cancel" /></span>
</p>
</form>
<div class="pointer-left"></div>
</div>
<div class="tipbox-white" style="left:375px;top:300px;">
<form action="#" class="area-form">
<p><input class="txt" value="Какбэ окно" /></p>
<ul class="editor">
<li><a href="#" class="editor-btn-b">B</a></li>
<li><a href="#" class="editor-btn-i">I</a></li>
<li><a href="#" class="editor-btn-u">U</a></li>
<li><a href="#" class="editor-btn-s">ABC</a></li>
</ul>
<p><textarea cols="10" rows="5">Шестереночка какбэ намекае, опиши меня</textarea></p>
<p class="buttons">
<span class="button2"><input type="button" value="Save" /></span>
<span class="button2"><input type="button" value="Cancel" /></span>
<span class="button2 right"><input type="button" value="Remove" /></span>
</p>
</form>
<div class="pointer-right"></div>
</div>
<div class="area" style="width:100px;height:75px;left:10px;top:175px;"><div class="filled"></div></div>
<div class="area" style="width:100px;height:75px;left:640px;top:200px;"><div class="filled"></div></div>
<div class="area" style="width:100px;height:100px;left:400px;top:50px;"></div>
</div>
<a class="close" href="#"><img src="img/close.gif" alt="Close" /></a>
</div><!-- /image-areas -->
CSS:
/* --------------- image-areas --------------- */
.image-areas { position: relative; zoom: 1; overflow: hidden;
background-color: #B4B4B4; border: 1px solid #000; padding: 30px; }
.image-areas a.close { position: absolute; right: 4px; top: 4px; cursor: pointer; }
.image-areas .titles { zoom: 1; overflow: hidden; list-style-type: none; margin: 0;}
.image-areas .titles li { float: left; list-style: none; line-height: 17px; width: 115px; padding: 0 3px 3px 0; }
.image-areas .titles a { display: block; zoom: 1; padding: 0 7px;
font-size: 85%; color: #5E5E5E; text-decoration: none; background-color: #F1F1F1;
border: 1px solid #000; }
.image-areas .titles li.cur a { background-color: #FFF; }
.image-areas .titles a:hover { background-color: #FFF; color: #F90; /*text-decoration: underline;*/ }
.image-areas .main { position: relative; }
.image-areas .main-img { border: 1px solid #606060; }
.image-areas .area { position: absolute; border: 2px solid #FF9600; }
.image-areas .area .filled { width: 100%; height: 100%;
background-color: #FF9600; filter: alpha(opacity = 50); opacity: 0.5; -moz-opacity: 0.5;}
.image-areas .tipbox-white { width: 300px; }
.image-areas .area-form { margin: 0; }
.image-areas .area-form p { margin-bottom: 10px; overflow: hidden; zoom: 1; }
.image-areas .area-form input.txt { width: 288px; }
.image-areas .area-form textarea{ width: 288px; float: left; }
.image-areas .area-form .buttons { margin: 0; zoom: 1; }
.image-areas .area-form .button2 { float: left; margin-right: 5px; }
.image-areas .area-form .button2 input { padding: 0 22px 2px 20px; }
.image-areas .area-form .buttons .right { float: right; margin: 0;}
.image-areas .editor { zoom: 1; overflow: hidden; margin:0; line-height: 20px;
background-color: #F0F0EE; border: 1px solid #D8D8D8; border-bottom: none; }
.image-areas .editor li { list-style-type: none; float: left;}
.image-areas .editor a { color: #000; padding: 5px; text-decoration: none; font-size: 108%; }
.image-areas .editor a:hover { background-color: #B4B4B4; }
.image-areas .editor .editor-btn-b { font-weight: bold; }
.image-areas .editor .editor-btn-i { font-style: italic; font-weight: bold; }
.image-areas .editor .editor-btn-u { text-decoration: underline; font-weight: bold; }
.image-areas .editor .editor-btn-s { text-decoration: line-through; font-weight: normal; font-size: 85%; }
/* --------------- белые тип-боксы, можно перенести в соотв. часть CSS --------------- */
div.tipbox-white {
position: absolute;
padding: 10px;
min-width: 200px;
_width: 200px;
color: #000;
background-color: #fff;
border: 1px solid #000;
}
div.tipbox-white div.pointer-left{
position: absolute;
width: 23px;
height: 12px;
overflow: hidden;
top: -12px;
left: -1px;
background: url(img/tipbox-white.gif);
}
div.tipbox-white div.pointer-right {
position: absolute;
width: 23px;
height: 12px;
overflow: hidden;
top: -12px;
right: -1px;
background: url(img/tipbox-white.gif);
}