Salut. As vrea sa pozitionez forum action in partea dreapta, dar nu am reusit.
Aici este codul html si css:
<style type="text/css">
#container {
clear: both;
margin: 0;
padding: 0;
}
#container a{
float: right;
border: 1px solid #175791;
-moz-border-radius-topright: 2px;
-webkit-border-top-right-radius: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-bottom-left-radius: 2px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}
#container a:hover{
float: right;
background: #a0a0a0;
border: 1px solid #cccccc;
-moz-border-radius-topright: 2px;
-webkit-border-top-right-radius: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-bottom-left-radius: 2px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}
.content {
font-style:normal;
font-family:helvetica, arial, verdana, sans-serif;
background:#333333;
border:1px solid #444444;
-moz-border-radius-topright: 2px;
-webkit-border-top-right-radius: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-bottom-left-radius: 2px;
margin: 30px 0 50px;
padding: 2px 0;
}
.content p {
margin: 10px 0;
padding: 15px 20px;
}
.panel {
left: 0;
display: none;
background-image:url('http://i219.photobucket.com/albums/cc236/iamtheartistt/Blackwiththinwhitestripes.jpg');
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}
.panel p{
margin: 0 0 15px 0;
padding: 0;
}
.panel a, .panel a:visited{
margin: 0;
padding: 0;
text-decoration: none;
border-bottom: 1px solid #00a2ff;
}
.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}
a.trigger{
text-decoration: none;
top: 80px; left: 0;
font-size: 10px;
font-family: verdana, helvetica, arial, sans-serif;
padding: 10px 30px 10px 5px;
font-weight: 700;
background:#1a1a1a url(<a href='http://img214.imageshack.us/img214/2627/plust.png'>http://img214.imageshack.us/img214/2627/plust.png</a>) 85% 55% no-repeat;
border:1px solid #222222;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}
a.trigger:hover{
text-decoration: none;
top: 80px; left: 0;
font-size: 10px;
font-family: verdana, helvetica, arial, sans-serif;
padding: 10px 30px 10px 15px;
font-weight: 700;
background:#222222 url(<a href='http://img214.imageshack.us/img214/2627/plust.png'>http://img214.imageshack.us/img214/2627/plust.png</a>) 85% 55% no-repeat;
border:1px solid #303030;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}
a.active.trigger {
padding: 10px 30px 10px 15px;
border:1px solid #175791;
background:#175791 url(<a href='http://img833.imageshack.us/img833/4629/minusl0.png'>http://img833.imageshack.us/img833/4629/minusl0.png</a>) 85% 55% no-repeat;
-moz-border-radius-topright: 50px;
-webkit-border-top-right-radius: 50px;
-moz-border-radius-bottomright: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}
.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}
.colleft{
float: left;
width: 130px;
line-height: 22px;
}
.colright{
float: right;
width: 130px;
line-height: 22px;
}
</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
</head>
<body>
<div class="panel">
<div class="columns">
<div class="colleft">
<strong>FORUM ACTIONS</strong>
<ul>
<li><a href="{U_SEARCH_UNANSWERED}" title="Vezi posturile fara raspuns.">Posturi fara raspuns</a></li>
<li><a href="{U_SEARCH_NEW}" title="Vezi cele mai noi posturi.">Posturi noi</a></li>
<li><a href="{U_SEARCH_ACTIVE_TOPICS}" title="Vezi cele mai active posturi.">Topicuri active</a></li>
<li><a href="{U_SEARCH_SELF}" title="Vezi posturile facute de tine.">Posturile mele</a></li>
<li><a href="{U_SEARCH_UNREAD}" title="Vezi posturile necitite.">Posturi necitite</a></li>
</ul>
</div>
<div class="colright">
<strong> </strong>
<ul>
<li><a href="{U_MARK_FORUMS}" title="Marcheaza toate forumurile ca citite.">Marcheaza toate forumurule ca fiind citite</a></li>
<li><a href="{U_DELETE_COOKIES}" title="Sterge toate cookie-urile forumului.">Sterge cookie-urile forumului</a></li>
<li><a href="{U_TEAM}" title="Vezi membri staff-ului.">Membrii STAFF</a></li>
<li><a href="SendIM?cold.2010" title="Contact Cold">Contact CoLd-</a></li>
</ul>
</div>
</div>
<div class="columns">
<strong><font color="red">IMPORTANT</font></strong>
<span style="font-family: tahoma; font-size: 11px;">• Forumul este optimizat pentru browserul <a href="http://www.mozilla-europe.org/ro/firefox/" title="Download Mozilla Firefox">Mozilla Firefox</a> si <a href="http://www.google.com/chrome/?hl=ro" title="Download Google Chrome">Google Chrome</a>.
• Pentru orice problema tehnica a forum-ului trimiteti e-mail la <a href="mailto:sebi_bossu2011@yahoo.com" title="Send Mail">Suportul Forumului</a> si in mai putin de 1 ora problema va fi rezolvata.
• Daca nu stiti ce face un anumit buton tineti mouse-ul deasupra lui ca sa va apara un mesaj cu ce face butonul respectiv.
</span>
</div>
<div style="clear: both;"></div>
</div>
<a href="#" title="Forum Actions">ForumActions</a>
