Commit 1dd1cd5301f01f5503e85ef0ba3728e74e700578
1 parent
e373676b
Exists in
master
and in
29 other branches
ActionItem0: Iniciando layout
git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@330 3f533792-8f58-4932-b0fe-aaf55b0a4547
Showing
9 changed files
with
361 additions
and
0 deletions
Show diff stats
... | ... | @@ -0,0 +1,86 @@ |
1 | +<html> | |
2 | + <head> | |
3 | + <script src="js/prototype.js" type="text/javascript"></script> | |
4 | +<script src="js/effects.js" type="text/javascript"></script> | |
5 | +<script src="js/dragdrop.js" type="text/javascript"></script> | |
6 | +<script src="js/controls.js" type="text/javascript"></script> | |
7 | +<script src="js/application.js" type="text/javascript"></script> | |
8 | +<script src="js/slider.js" type="text/javascript"></script> | |
9 | +<script src="js/global.js" type="text/javascript"></script> | |
10 | +<script src="js/scriptaculous.js" type="text/javascript"></script> | |
11 | +<link href="css/style.css" media="screen" rel="Stylesheet" type="text/css" /> | |
12 | +<link href="css/box.css" media="screen" rel="Stylesheet" type="text/css" /> | |
13 | + <!--[if lte IE 6]> | |
14 | + <script type="text/javascript"> | |
15 | + var ie6_message = function() | |
16 | + { | |
17 | + var div = document.getElementById('message_div'); | |
18 | + div.innerHTML = "<h3>Você esta usando Internet Explorer 6.</h3><br />"; | |
19 | + div.innerHTML += "<p>Internet Explorer 6 é um navegador antigo e com muitas falhas para ser usado na navegacao deste site.</p>"; | |
20 | + div.innerHTML += "<p>nos sugerimos fortmente que voce mude seu navegador.</p><br />"; | |
21 | + div.innerHTML += "<p>migre seu Internet Explorer para <a href='http://www.getfirefox.com'>Firefox</a></p>"; | |
22 | + div.style.display = "block"; | |
23 | + } | |
24 | + | |
25 | + window.onload = ie6_message; | |
26 | + </script> | |
27 | + <![endif]--> | |
28 | + </head> | |
29 | + | |
30 | + <body> | |
31 | + | |
32 | +<div id="leftcontent"> | |
33 | +<div class="block scrollBOX" id="links"> | |
34 | +<a href="#" onclick="Effect.toggle('BOXlinks','slide',{duration:1}); return false;" class="buttonBOX hide"><span>Esconder</span></a><a href="#" onclick="Effect.Shrink('links',{duration:1}); return false;" class="buttonBOX remove"><span>Remover</span></a><h3>Meus links...</h3> | |
35 | + <div id="BOXlinks"><div class="block_content"> | |
36 | + <p>Aqui fica um conteúdo da informação pessoal do usuário como vai ser tratado, enfim... Vamos colocar imagem ou sei la... Chamar aqui...</p> | |
37 | + <ul> | |
38 | + <li>Links</li> | |
39 | + <li>Links</li> | |
40 | + <li>Links</li> | |
41 | + <li>Links</li> | |
42 | + </ul></div> | |
43 | + </div> | |
44 | +</div> | |
45 | + | |
46 | +</div> | |
47 | + | |
48 | +<div id="centercontent"> | |
49 | + | |
50 | +<div class="block listBOX" id="about"> | |
51 | +<a href="#" onclick="Effect.toggle('BOXabout','slide',{duration:1}); return false;" class="buttonBOX hide"><span>Esconder</span></a> | |
52 | +<h3>Sobre mim...</h3> | |
53 | + <div id="BOXabout"><div class="block_content"> | |
54 | + <p>...</p> | |
55 | + <br /> | |
56 | + </div> | |
57 | + </div> | |
58 | +</div> | |
59 | + | |
60 | + | |
61 | +</div> | |
62 | + | |
63 | +<div id="rightcontent"> | |
64 | + | |
65 | + | |
66 | +<div class="block formBOX" id="comment"> | |
67 | +<a href="#" onclick="Effect.toggle('BOXcomment','slide',{duration:1}); return false;" class="buttonBOX hide"><span>Esconder</span></a> | |
68 | +<h3>Mural de recados</h3> | |
69 | + <div id="BOXcomment"><div class="block_content"> | |
70 | + <p>Deixe seu recado:</p> | |
71 | + <br /> | |
72 | + | |
73 | + </div> | |
74 | + </div> | |
75 | +</div> | |
76 | + | |
77 | + | |
78 | + | |
79 | +</div> | |
80 | + | |
81 | + | |
82 | + </body> | |
83 | + | |
84 | +</html> | |
85 | + | |
86 | + | ... | ... |
... | ... | @@ -0,0 +1,78 @@ |
1 | +#leftcontent div.block span | |
2 | +{ | |
3 | +display: none; | |
4 | +} | |
5 | + | |
6 | +#leftcontent div.block | |
7 | +{ | |
8 | + background: #FFFFFF url("../img/box_bottom_v1_190px.jpg") no-repeat bottom left; | |
9 | + padding-bottom: 10px; | |
10 | + margin-bottom: 10px; | |
11 | +} | |
12 | + | |
13 | +div.block ul | |
14 | +{ | |
15 | + margin-left: 25px; | |
16 | +} | |
17 | + | |
18 | +#leftcontent div.block h3 | |
19 | +{ | |
20 | + color: #FFFFFF; | |
21 | + font-size: 12px; | |
22 | + font-weight: normal; | |
23 | + background: #474747 url("../img/box_top_v1_190px.jpg") no-repeat; | |
24 | + height: 27px; | |
25 | + line-height: 27px; | |
26 | + padding-left: 10px; | |
27 | +} | |
28 | + | |
29 | + | |
30 | +#rightcontent div.block span | |
31 | +{ | |
32 | +display: none; | |
33 | +} | |
34 | + | |
35 | +#rightcontent div.block | |
36 | +{ | |
37 | + background: #FFFFFF url("../img/box_bottom_v1_190px.jpg") no-repeat bottom left; | |
38 | + padding-bottom: 10px; | |
39 | + margin-bottom: 20px; | |
40 | +} | |
41 | + | |
42 | +#rightcontent div.block h3 | |
43 | +{ | |
44 | + color: #FFFFFF; | |
45 | + font-size: 12px; | |
46 | + font-weight: normal; | |
47 | + background: #474747 url("../img/box_top_v1_190px.jpg") no-repeat; | |
48 | + height: 27px; | |
49 | + line-height: 27px; | |
50 | + padding-left: 10px; | |
51 | + margin: 0px; | |
52 | +} | |
53 | + | |
54 | + | |
55 | + | |
56 | +div.block .block_content | |
57 | +{ | |
58 | + background-image: url("../img/box_content_v1.png"); | |
59 | + background-repeat: repeat-x; | |
60 | + background-position: 0 1px; | |
61 | + padding: 5px; | |
62 | +} | |
63 | + | |
64 | + | |
65 | + | |
66 | +/* Inicio personalizacao individual */ | |
67 | + | |
68 | +div#links { | |
69 | +background: blue; | |
70 | +} | |
71 | + | |
72 | +div#comment { | |
73 | +background: green; | |
74 | +} | |
75 | + | |
76 | +div#about { | |
77 | +background: red; | |
78 | +} | ... | ... |
160 KB
... | ... | @@ -0,0 +1,62 @@ |
1 | + @import "all.css"; /* just some basic formatting, no layout stuff */ | |
2 | + | |
3 | + body { | |
4 | +background-color: #474747; | |
5 | + margin:10px 10px 0px 10px; | |
6 | + padding:0px; | |
7 | + } | |
8 | + | |
9 | + #leftcontent { | |
10 | + float: left; | |
11 | + left:10px; | |
12 | + top:50px; | |
13 | + width:190px; | |
14 | + border:0px; | |
15 | + } | |
16 | + | |
17 | + #centercontent { | |
18 | + margin-left: 255px; | |
19 | + margin-right:199px; | |
20 | + border:0px; | |
21 | + /* | |
22 | + IE5x PC mis-implements the box model. Because of that we sometimes have | |
23 | + to perform a little CSS trickery to get pixel-perfect display across browsers. | |
24 | + The following bit of code was proposed by Tantek Celik, and it preys upon a CSS | |
25 | + parsing bug in IE5x PC that will prematurly close a style rule when it runs | |
26 | + into the string "\"}\"". After that string appears in a rule, then, we can override | |
27 | + previously set attribute values and only browsers without the parse bug will | |
28 | + recognize the new values. So any of the name-value pairs above this comment | |
29 | + that we need to override for browsers with correct box-model implementations | |
30 | + will be listed below. | |
31 | + | |
32 | + We use the voice-family property because it is likely to be used very infrequently, | |
33 | + and where it is used it will be set on the body tag. So the second voice-family value | |
34 | + of "inherit" will override our bogus "\"}\"" value and allow the proper value to | |
35 | + cascade down from the body tag. | |
36 | + | |
37 | + The style rule immediately following this rule offers another chance for CSS2 | |
38 | + aware browsers to pick up the values meant for correct box-model implementations. | |
39 | + It uses a CSS2 selector that will be ignored by IE5x PC. | |
40 | + | |
41 | + Read more at http://www.glish.com/css/hacks.asp | |
42 | + */ | |
43 | + | |
44 | + voice-family: "\"}\""; | |
45 | + voice-family: inherit; | |
46 | + margin-left: 255px; | |
47 | + margin-right:201px; | |
48 | + } | |
49 | + html>body #centercontent { | |
50 | + margin-left: 255px; | |
51 | + margin-right:201px; | |
52 | + } | |
53 | + | |
54 | + #rightcontent { | |
55 | + position: absolute; | |
56 | + right:10px; | |
57 | + top:50px; | |
58 | + width:190px; | |
59 | + border:0px; | |
60 | + } | |
61 | + | |
62 | + | ... | ... |
504 Bytes
200 Bytes
1.08 KB
... | ... | @@ -0,0 +1,134 @@ |
1 | +<html> | |
2 | + <head> | |
3 | + <script src="js/prototype.js" type="text/javascript"></script> | |
4 | +<script src="js/effects.js" type="text/javascript"></script> | |
5 | +<script src="js/dragdrop.js" type="text/javascript"></script> | |
6 | +<script src="js/controls.js" type="text/javascript"></script> | |
7 | +<script src="js/application.js" type="text/javascript"></script> | |
8 | +<script src="js/slider.js" type="text/javascript"></script> | |
9 | +<script src="js/global.js" type="text/javascript"></script> | |
10 | +<script src="js/scriptaculous.js" type="text/javascript"></script> | |
11 | +<link href="css/style.css" media="screen" rel="Stylesheet" type="text/css" /> | |
12 | +<link href="css/box.css" media="screen" rel="Stylesheet" type="text/css" /> | |
13 | + | |
14 | + </head> | |
15 | + | |
16 | + <body> | |
17 | + <div id="wrap"> | |
18 | +<div id="banner"> | |
19 | +<img alt="Loading" id="spinner" src="/images/loading.gif" style="display:none; float:right;" /> | |
20 | + | |
21 | + <div id="menu"> | |
22 | + | |
23 | + Skip to: | |
24 | + <a href="#main_content">Content</a> | | |
25 | + <a href="#sidebar">Navigation</a> | | |
26 | + <a href="#footer">Footer</a> | |
27 | + </div> | |
28 | + | |
29 | +</div> | |
30 | + <div id='content'> | |
31 | + | |
32 | + <!-- content --> | |
33 | +<div id="leftcontent"> | |
34 | + <h1>leftcontent</h1> | |
35 | +<pre>#leftcontent { | |
36 | +position: absolute; | |
37 | +left:10px; | |
38 | +top:50px; | |
39 | +width:200px; | |
40 | +background:#fff; | |
41 | +border:1px solid #000; | |
42 | + }</pre> | |
43 | + | |
44 | + | |
45 | +<div class="listbox" id="personal_info"><h3>Informações pessoais</h3><p>Aqui fica um conteúdo da informação pessoal do usuário como vai ser tratado, enfim... Vamos colocar imagem ou sei la... Chamar aqui...</p><ul><li>Links</li><li>Links</li><li>Links</li><li>Links</li></ul></div> | |
46 | + | |
47 | + | |
48 | + | |
49 | + | |
50 | +</div> | |
51 | + | |
52 | +<div id="centercontent"> | |
53 | + <h1>centercontent</h1> | |
54 | +<pre>#centercontent { | |
55 | +background:#fff; | |
56 | +margin-left: 199px; | |
57 | +margin-right:199px; | |
58 | +border:1px solid #000; | |
59 | +voice-family: "\"}\""; | |
60 | +voice-family: inherit; | |
61 | +margin-left: 201px; | |
62 | +margin-right:201px; | |
63 | + } | |
64 | +html>body #centercontent { | |
65 | +margin-left: 201px; | |
66 | +margin-right:201px; | |
67 | + }</pre> | |
68 | + <br /> | |
69 | + | |
70 | +<div class="listbox" id="about"> | |
71 | + <h3>About the author</h3> | |
72 | + <div id="boxcontent"><div> | |
73 | + <p>Drew McLellan is a web developer, author and no-good swindler from | |
74 | + just outside London, England. At the | |
75 | + <a href="http://www.webstandards.org/">Web Standards Project</a> he works | |
76 | + on press, strategy and tools. Drew keeps a | |
77 | + <a href="http://www.allinthehead.com/">personal weblog</a> covering web | |
78 | + development issues and themes.</p> | |
79 | +</div></div></div> | |
80 | + | |
81 | + | |
82 | +</div> | |
83 | + | |
84 | +<div id="rightcontent"> | |
85 | + <h1>rightcontent</h1> | |
86 | +<pre>#rightcontent { | |
87 | +position: absolute; | |
88 | +right:10px; | |
89 | +top:50px; | |
90 | +width:200px; | |
91 | +background:#fff; | |
92 | +border:1px solid #000; | |
93 | + }</pre> | |
94 | + | |
95 | + | |
96 | + | |
97 | + | |
98 | +<div class="listbox" id="personal_info"> | |
99 | +<a href="#" onclick="Effect.toggle('boxcontent','slide',{duration:1}); return false;" class="box_button hide" style="display: block; float: right;"><span>X</span></a><a href="#" onclick="Effect.toggle('boxcontent','slide',{duration:1}); return false;" class="box_button hide" style="display: block; float: right; border: 1px solid red;"><span>v</span></a> | |
100 | +<h3>Informações pessoais</h3> | |
101 | + <div id="boxcontent"><div> | |
102 | + <p>Aqui fica um conteúdo da informação pessoal do usuário como vai ser tratado, enfim... Vamos colocar imagem ou sei la... Chamar aqui...</p> | |
103 | + <ul> | |
104 | + <li>Links</li> | |
105 | + <li>Links</li> | |
106 | + <li>Links</li> | |
107 | + <li>Links</li> | |
108 | + </ul></div> | |
109 | + </div> | |
110 | +</div> | |
111 | + | |
112 | + | |
113 | + | |
114 | +</div> | |
115 | + | |
116 | + <!-- fim content --> | |
117 | + | |
118 | + </div> | |
119 | + | |
120 | + <div id="footer"> | |
121 | + <!-- <a name='footer'/></a> --> | |
122 | + nothing in the footer yet | |
123 | + <a href="/admin/content_viewer/list" style="background-image: | |
124 | +url('/designs/icons/default/back.png');"><span>Back</span></a> | |
125 | + | |
126 | + </div> | |
127 | + </div> | |
128 | + </div> | |
129 | + | |
130 | + </body> | |
131 | + | |
132 | +</html> | |
133 | + | |
134 | + | ... | ... |