Problem z stroną. Layout [Modern ACC]

CyCu91 · May 11, 2012

Witam otóż próbowałem przestawić sobie server status z lewego dnego boku do górnego ale jak poważę na screenie niestety ale mi to trochę nie wyszło i nie umiem tego zrobić. Edytowałem trochę i pokaże wam oryginalne liki i te które edytowałem.

To jest oryginalny index.tpl

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta name="Description" content="Information architecture, Web Design, Web Standards." />
<meta name="Keywords" content="your, keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="author" content="Unknown" />
<meta name="Robots" content="index,follow" />
<link rel="shortcut icon" href="{$path}/templates/websitepoketibia1.0/images/go.gif" type="image/x-icon" />
<link rel="stylesheet" href="{$path}/templates/websitepoketibia1.0/images/Refresh.css" type="text/css" />
{$head}

<title>{$title}</title>
	




</head>

<body>

		<!--[if IE]>
		<script type="text/javascript"> 
			var IE6UPDATE_OPTIONS = {
				icons_path: "public/ie6update/images/"
			}
		</script>
		<script type="text/javascript" src="public/ie6update/ie6update.js"></script>
		<![endif]-->
<!-- wrap starts here -->
<div id="wrap">
		<!--header -->
		<div id="header">			
				
			<h1 id="logo-text">Website<span class="gray">PokeTibia</span>1.0</h1>		
			<h2 id="slogan"><b>Desenvolvido por IDE Engine ediçăo Nibelins</b></h2>
			
						
		</div>
		
		<!-- menu -->	
		<div  id="menu">
		
			<ul>
				<li{if $controller == "" || $controller == "home"} id="current"{/if}><a href="{$path}">Pagina Principal</font></a></li>
				{if $logged == 1}
					<li{if $controller == "account"} id="current"{/if}><a href="{$path}/index.php/account">Conta</a></li>
				{else}
					<li{if $controller == "account" && $method == "create"} id="current"{/if}><a href="{$path}/index.php/account/create">Criar Conta</a></li>
					<li{if $controller == "account" && $method == "login"} id="current"{/if}><a href="{$path}/index.php/account/login">Login</a></li>
				{/if}
					<li{if $controller == "character" && $method == "view"} id="current"{/if}><a href="{$path}/index.php/character/view">Pessonagem</a></li>
					<li{if $controller == "character" && $method == "online"} id="current"{/if}><a href="{$path}/index.php/character/online">Quem está online</a></li>
					<li{if $controller == "downloads"} id="current"{/if}><a href="{$path}/index.php/p/v/downloads">Downloads</a></li>
					<li{if $controller == "highscores"} id="current"{/if}><a href="{$path}/index.php/highscores">Top Level</a></li>	
					<li{if $controller == "forum"} id="current"{/if}><a href="{$path}/index.php/forum">Forum</a></li>		
					
			</ul>
		</div>					
			
		<!-- content-wrap starts here -->
		<div id="content-wrap">
				
			<div id="sidebar">
				{$online}
				     <h1><b>Account</b></h1>
				<div class="left-box">
					<ul class="sidemenu">				
						{if $logged == 1}
						<li><a href="{$path}/index.php/account">Conta</a></li>                                   
                                    <li><a href="{$path}/index.php/account/logout">Sair</a></li>
                                    {else}
						<li><a href="{$path}/index.php/account/create">Criar Conta</a></li>
						<li><a href="{$path}/index.php/account/login">Login</a></li>
						{/if}                                  
                             <h1><b>Community</b></h1>
						<li><a href="{$path}/index.php/character/view">Pessonagem</a></li>
                                    <li><a href="{$path}/index.php/p/v/ban">Lista de Banidos</a></li>
                                    <li><a href="{$path}/index.php/p/v/imagens">imagens</a></li>
						<li><a href="{$path}/index.php/video">Videos</a></li>
						<li><a href="{$path}/index.php/houses/main">Houses</a></li>	
						<li><a href="{$path}/index.php/p/v/gallery">Galeria</a></li>
                                    <li><a href="{$path}/index.php/p/v/pokemon">Pokemon</a></li>	
						<li><a href="{$path}/index.php/profile/community">Comunidade</a></li>                             
                                    <li><a href="{$path}/index.php/p/v/downloads">Downloads</a></li>   					    
			           <h1><b>Equipe</b></h1>
                                    <li><a href="{$path}/index.php/p/v/staff">Suport Online</a></li>
                                    {if $admin}
                             <h1><b>Painel Administrativo</b></h1>     
                                    <li>{$admin}</li>
                                    {/if}

                       		</ul>	
					<h1><b>Server status</b></h1>
                                  <br />
					{foreach from=$worlds key=id item=world}
						&nbsp; <b>Mundo:<font color='blue'> {$world}</font> </b><br />
						&nbsp; <b>Estado:</b>  
							{if $serverOnline[$id]}
								<font color='green'><b>Online</b></font><br />
								&nbsp; <b>Uptime:</b> {$serverUptime[$id]} <br />
								&nbsp; <b>Jogadores:</b> {$serverPlayers[$id]}/{$serverMax[$id]}<br /><br />

							{else}
								<font color='red'><b>Offline</b></font><br />
							{/if}
					{/foreach}
					{$poll}
				</div>
							
			</div>
				
			<div id="main" style='padding-top: 10px;'>
				{$main}
			</div>
		
		<!-- content-wrap ends here -->	
		</div>
					
		<!--footer starts here-->
		<div id="footer">
			<a href="{$path}/index.php/credits">créditos</a><br>
			Página processada em: {$renderTime}
			
				
		</div>	

<!-- wrap ends here -->
</div>

</body>
</html>

Oraz plik css

Code:

/********************************************
   HTML ELEMENTS
********************************************/ 

/* Top Elements */
* { margin: 0; padding: 0; }

body {
		background-color: #ffffff;
		background-image: url("fundo.jpg");
		background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center bottom;
            background-position: top bottom;
            font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
	color: #333; 
	text-align: center;
	word-wrap: break-word;
	}



a img{
	border: none;
}

/* links */
a, a:visited {
	text-decoration: none;
	color: #4F82CB; 
	background: inherit;
}
a:hover {
	color: #4EBF37;
	background: inherit;
}

/* headers */
h1, h2, h3 {
	font-family: Tahoma, Verdana, 'Trebuchet MS', Sans-serif;
	font-weight: Bold; 		
}
h1 {
	font-size: 120%;	
}
h2 {
	font-size: 110%;
	text-transform: uppercase;
	color: #88ac0b;
}
h3 {
	font-size: 110%;
	color: #666666; 
}

/* images */
img {

}
img.float-right {
  margin: 5px 0px 10px 10px;  
}
img.float-left {
  margin: 5px 10px 10px 0px;
}

h1, h2, h3, p {
	padding: 10px;		
	margin: 0;
}
ul, ol {
	margin: 5px 20px;
	padding: 0 20px;
	color: #88ac0b;	
}
ul span, ol span {
	color: #666666;
}

code {
  margin: 5px 0;
  padding: 10px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
  /* white-space: pre; */
  background: #FAFAFA;
  border: 1px solid #f2f2f2;  
}
acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}
blockquote {
	margin: 10px;
 	padding: 0 0 0 28px;  
   border: 1px solid #f2f2f2; 
  	background: #FAFAFA url(quote.gif) no-repeat 5px 5px;    
}

/* form elements */
label{
float: left;
width: 120px;
font-weight: bold;
margin-top: 2px;
}

input, textarea{
margin-bottom: 5px;
}
.sub{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}

hr {
border-bottom: none;
}

textarea {
	width:400px;
	padding:2px;
	font: normal 1em Verdana, sans-serif;
	border:1px solid #eee;
	height:100px;
	display:block;
	color:#777;
}
input.button { 
	margin: 0; 
	font: bolder 12px Arial, Sans-serif; 
	border: 1px solid #CCC; 
	padding: 2px 3px; 
	background: #FFF;
	color: #88ac0b;
}

/* search */
form.search {
	position: absolute;
	top: 35px; right: 25px;
	background: transparent;
	border: none;	
}	
form.search input.textbox {
	margin: 0; padding: 1px 2px;
	width: 120px;
	background: #FFF;
	color: #333; 
}
form.search input.button {
	background: #CCC url(headerbg.jpg) repeat-x;
	color: #333;
	border: none;	
	width: 70px; height: 21px;
}

/********************************************
   LAYOUT
********************************************/ 
#wrap {
	width: 770px;
	background: #CCC url(content.jpg) repeat-y center top;
	margin: 0 auto;
	text-align: left;
}
#content-wrap {
	clear: both;
	width: 760px;
	padding: 0; 
	margin: 0 auto;
}
#header {
	width: 770px;
	position: relative;
	height: 190px;
	background: #CCC url(header.jpg) no-repeat center top;
	padding: 0;
	font-size: 14px;
	color: #FFF;
}
#header h1#logo-text {
	position: absolute;
	margin: 0; padding: 0;
	font: bolder 4.0em 'Trebuchet MS', Arial, Sans-serif;
	letter-spacing: -2px;
	color: #000;
	text-transform: none;
	
	/* change the values of top and left to adjust the position of the logo*/
	top: 65px; left: 160px;	
}
#header h2#slogan {
	position: absolute;
	margin: 0; padding: 0;
	font: normal 1.3em 'Trebuchet MS', Arial, Sans-serif;
	text-transform: none;
	color: #000;
	
	/* change the values of top and left to adjust the position of the slogan*/
	top: 125px; left: 240px;		
}

/* Menu */
#menu {
	clear: both;	
	margin: 0; padding: 0 40px 0 0;
	background: url(menu.jpg) repeat-y center top;	
	font: bold 12px/26px Verdana, Arial, Tahoma, Sans-serif;
	height: 26px;
}
#menu ul {
	float: right;
	list-style: none;
	margin:0; padding: 0;
}
#menu ul li {
	display: inline;
}
#menu ul li a {
	display: block;
	float: left;
	padding: 0 8px;
	color: #FFF;	
	text-decoration: none;
}
#menu ul li a:hover {
	background-color: #ECECEC;
	color: #333;	
}
#menu ul li#current a {	
	background-color: #FFF;
	color: #333;
}



/* Main Column */
#main {
	float: right;
	width: 550px;
	overflow: visible;
	overflow: hidden;
	
	
}
#main h1 {
	margin-top: 10px;
	font: Bold 125% Verdana, 'Trebuchet MS', Sans-serif;
	color: #88ac0b;
	padding: 5px 0 5px 25px; 	
	border-bottom: 1px solid #EFF0F1;
	background: #FFF url(square-green.png) no-repeat 3px 50%;	
}

.post-footer {
	background-color: #FAFAFA;
	padding: 5px; margin: 20px 10px 0 10px;
	border: 1px solid #f2f2f2;
	font-size: 95%;
}
.post-footer .date {
	background: url(clock.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
	background: url(comment.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
	background: url(page.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}

/* Sidebar */	
#sidebar {
	float: left;
	width: 26.5%;
	padding: 0; margin: 0;	
}	
#sidebar h1 {
	margin-top: 10px;
	padding: 5px 0 5px 10px; 
	font: bold 1.1em Verdana, 'Trebuchet MS', Sans-serif;
	color: #FFFFFF;
	background: #EEF0F1 url(headerbg.jpg) repeat-x left bottom;	
	border: 1px solid #EFF0F1;
}
#sidebar .left-box {
	border: 1px solid #EFF0F1; 
	margin: 0 0 5px 0;	
}
#sidebar ul.sidemenu {
	list-style: none;
	text-align: left;
	margin: 3px 0 8px 0; padding: 0;
	text-decoration: none;		
}
#sidebar ul.sidemenu li {
	border-bottom: 1px solid #EFF0F1;
	background: url(go.gif) no-repeat 1px 1px;	
	padding: 9px 0 9px 35px;
	margin: 0 2px;	
}
#sidebar ul.sidemenu a {
	font-weight: bolder;
	text-decoration: none;	
	background-image: none;	
	color: #000;
}

/* Footer */	
#footer {
	color: #666666;
	background: #CCC url(footer.jpg) no-repeat center top;
	clear: both;
	width: 770px;
	height: 55px;
	text-align: center;	
	font-size: 92%;
	padding-top: 1px;
}
#footer a { text-decoration: none; }

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes */
.clear { clear: both; }
.gray { color: #000; }

.bar {
font-weight: bold;
margin-top: 5px;
margin-left: 10px;
font-size: 12px;
}

.toolbar {
	padding: 10px;
	border: 1px solid silver;
	font-weight: bold;
	margin-bottom: 15px;
     }

.highlight:hover {
	background-color: lightyellow;
	padding: 3px;
}

.readArchive {
	text-align: center;
	font-weight: bold;
}

.viewComments {
	padding-left: 5px;
	font-family: tahoma;
}

.comment {
	margin-bottom: 10px;
	border: 1px solid silver;
	padding: 5px;
}

.commentBody {
	margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom: 1px dotted silver;
}

.commentFooter {
	font-family: tahoma;
	font-size: 12px;
}

.leftBoard {
	float: left;
	width: 64%;
}

.rightBoard {
	float: left;
}

.forumBoard {
	padding: 3px;
	margin-bottom: 5px;
	border-top: 1px dotted silver;
}

.boardTitle {
	font-weight: bold;
	font-size: 13px;
	font-family: tahoma;
}

.boardDescription {
	padding: 4px;
	float: left;
}

.boardStatus {
	float: left;
	width: 50px;
}

.boardInformation {
	padding: 5px;
	border: 1px dashed silver;
	margin-bottom: 15px;
}

.boardInformationTitle {
	font-weight: bold;
	font-size: 13px;
	font-family: tahoma;
}

.boardInformationDescription {
	padding: 4px;
}

.boardInformationModerators {
	font-family: arial;
	font-size: 11px;
}

.threadTable {
	margin-bottom: 10px;
	padding: 3px;
}

.threadStatus {
	float: left;
	width: 30px;
}

.threadLeft {
	float: left;
	width: 70%;
}

.threadTitle {
	font-weight: bold;
}

.boardPages {
	text-align: center;
}

.threadTable {
	padding: 3px;
	border-top: 1px dotted silver;
	padding-top: 5px;
	margin-top: 20px;
}

.forumPost {
	padding: 5px;
	margin-bottom: 10px;
	border-bottom: 1px solid silver;
}

.forumPostDate {
	font-family: tahoma;
	padding: 2px;
}

.forumPostLeft {
padding: 5px;
valign: top;
border-right: 1px solid silver;
}

.forumPostAuthor {
	font-weigh: bold;
}

.forumPostRight {
	valign: top;
	padding-left: 10px;
}

.forumHistory {
	font-weight: bold;
	padding: 3px;
}

.forumPostText {
	border-bottom: 1px dotted silver;
}

.postToolBar form {
	background: none;
	text-align: right;
	padding-top: 5px;
	bordr: none;
	margin: 0px;
}

quote {
	padding: 4px;
	border: 1px solid silver;
}

.moderatingPanel {
	border: 1px solid silver;
	padding: 5px;
	font-weight: bold;
	margin-bottom: 5px;
}

.postTitle {
	font-weight: bold;
	margin-left: 16%;
	border-bottom: 1px dotted silver;
}

.bugtrackerProgressBar {
	width: 100px;
	height: 8px;
	border: 1px solid silver;
}

.bugtrackerProgress {
	float: left;
	height: 8px;
	background: lightgreen;
}

.bugtrackerRow {
	font-family: tahoma;
}

.bugtrackerBugTable {
	padding: 5px;
	border: 1px solid silver;
	
}

.bugtrackerTitle {
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 10px;
}

.bugtrackerAttr {
	
}

.message {
	border: 1px solid silver;
}

input[type=submit] {
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:100%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px;
}

a o to pliki edytowane przez mnie

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta name="Description" content="Information architecture, Web Design, Web Standards." />
<meta name="Keywords" content="your, keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="author" content="Unknown" />
<meta name="Robots" content="index,follow" />
<link rel="shortcut icon" href="{$path}/templates/websitepoketibia1.0/images/go.gif" type="image/x-icon" />
<link rel="stylesheet" href="{$path}/templates/websitepoketibia1.0/images/Refresh.css" type="text/css" />
{$head}

<title>{$title}</title>
	




</head>

<body>

		<!--[if IE]>
		<script type="text/javascript"> 
			var IE6UPDATE_OPTIONS = {
				icons_path: "public/ie6update/images/"
			}
		</script>
		<script type="text/javascript" src="public/ie6update/ie6update.js"></script>
		<![endif]-->
<!-- wrap starts here -->
<div id="wrap">
		<!--header -->
		<div id="header">			
				
			<h1 id="logo-text">Website<span class="gray">PokeTibia</span>1.0</h1>		
			<h2 id="slogan"><b>Desenvolvido por IDE Engine ediçăo Nibelins</b></h2>
			
						
		</div>
		
		<!-- menu -->	
		<div  id="menu">
		
			<ul>
				<li{if $controller == "" || $controller == "home"} id="current"{/if}><a href="{$path}">Home Page</font></a></li>
				{if $logged == 1}
					<li{if $controller == "account"} id="current"{/if}><a href="{$path}/index.php/account">Account</a></li>
				{else}
					<li{if $controller == "account" && $method == "create"} id="current"{/if}><a href="{$path}/index.php/account/create">Creat Account</a></li>
					<li{if $controller == "account" && $method == "login"} id="current"{/if}><a href="{$path}/index.php/account/login">Login</a></li>
				{/if}
					<li{if $controller == "character" && $method == "view"} id="current"{/if}><a href="{$path}/index.php/character/view">Characters</a></li>
					<li{if $controller == "character" && $method == "online"} id="current"{/if}><a href="{$path}/index.php/character/online">Whou is online</a></li>
					<li{if $controller == "downloads"} id="current"{/if}><a href="{$path}/index.php/p/v/downloads">Download</a></li>
					<li{if $controller == "highscores"} id="current"{/if}><a href="{$path}/index.php/highscores">Highscore</a></li>	
					<li{if $controller == "forum"} id="current"{/if}><a href="{$path}/index.php/forum">Forum</a></li>		
					
			</ul>
		</div>					
			
		<!-- content-wrap starts here -->
		<div id="content-wrap">
				
			<div id="sidebar">
				{$online}
				     <h1><b>Account</b></h1>
				<div class="left-box">
					<ul class="sidemenu">				
						{if $logged == 1}
						<li><a href="{$path}/index.php/account">Account</a></li>                                   
                                    <li><a href="{$path}/index.php/account/logout">Log Out</a></li>
                                    {else}
						<li><a href="{$path}/index.php/account/create">Creat Account</a></li>
						<li><a href="{$path}/index.php/account/login">Login</a></li>
						{/if}                                  
                             <h1><b>Community</b></h1>
						<li><a href="{$path}/index.php/character/view">Characters</a></li>
                                    <li><a href="{$path}/index.php/p/v/ban">Ban List</a></li>
                                    <li><a href="{$path}/index.php/p/v/imagens">Images</a></li>
						<li><a href="{$path}/index.php/video">Videos</a></li>
						<li><a href="{$path}/index.php/houses/main">Houses</a></li>	
						<li><a href="{$path}/index.php/p/v/gallery">Gallery</a></li>
                                    <li><a href="{$path}/index.php/p/v/pokemon">Pokemons</a></li>	
						<li><a href="{$path}/index.php/profile/community">Community</a></li>                             
                                    <li><a href="{$path}/index.php/p/v/downloads">Downloads</a></li>   					    
			           <h1><b>Equipe</b></h1>
                                    <li><a href="{$path}/index.php/p/v/staff">Support Online</a></li>
                                    {if $admin}
                             <h1><b>Admin Panel</b></h1>     
                                    <li>{$admin}</li>
                                    {/if}

                       		</ul>	
					<h1><b>Server status</b></h1>
                                  <br />
					{foreach from=$worlds key=id item=world}
						&nbsp; <b>World:<font color='blue'> {$world}</font> </b><br />
						&nbsp; <b>Status:</b>  
							{if $serverOnline[$id]}
								<font color='green'><b>Online</b></font><br />
								&nbsp; <b>Uptime:</b> {$serverUptime[$id]} <br />
								&nbsp; <b>Jogadores:</b> {$serverPlayers[$id]}/{$serverMax[$id]}<br /><br />

							{else}
								<font color='red'><b>Offline</b></font><br />
							{/if}
					{/foreach}
					{$poll}
				</div>
							
			</div>
				
			<div id="main" style='padding-top: 10px;'>
				{$main}
			</div>
		
		<!-- content-wrap ends here -->	
		</div>
					
		<!--footer starts here-->
		<div id="footer">
			<a href="{$path}/index.php/credits">Credits</a><br>
			Página processada em: {$renderTime}
			
				
		</div>	

<!-- wrap ends here -->
</div>

</body>
</html>

Code:

/********************************************
   HTML ELEMENTS
********************************************/ 

/* Top Elements */
* { margin: 0; padding: 0; }

body {
		background-color: #ffffff;
		background-image: url("fundo.jpg");
		background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center bottom;
            background-position: top bottom;
            font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
	color: #333; 
	text-align: center;
	word-wrap: break-word;
	}



a img{
	border: none;
}

/* links */
a, a:visited {
	text-decoration: none;
	color: #4F82CB; 
	background: inherit;
}
a:hover {
	color: #4EBF37;
	background: inherit;
}

/* headers */
h1, h2, h3 {
	font-family: Tahoma, Verdana, 'Trebuchet MS', Sans-serif;
	font-weight: Bold; 		
}
h1 {
	font-size: 120%;	
}
h2 {
	font-size: 110%;
	text-transform: uppercase;
	color: #88ac0b;
}
h3 {
	font-size: 110%;
	color: #666666; 
}

/* images */
img {

}
img.float-right {
  margin: 5px 0px 10px 10px;  
}
img.float-left {
  margin: 5px 10px 10px 0px;
}

h1, h2, h3, p {
	padding: 10px;		
	margin: 0;
}
ul, ol {
	margin: 5px 20px;
	padding: 0 20px;
	color: #88ac0b;	
}
ul span, ol span {
	color: #666666;
}

code {
  margin: 5px 0;
  padding: 10px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
  /* white-space: pre; */
  background: #FAFAFA;
  border: 1px solid #f2f2f2;  
}
acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}
blockquote {
	margin: 10px;
 	padding: 0 0 0 28px;  
   border: 1px solid #f2f2f2; 
  	background: #FAFAFA url(quote.gif) no-repeat 5px 5px;    
}

/* form elements */
label{
float: left;
width: 120px;
font-weight: bold;
margin-top: 2px;
}

input, textarea{
margin-bottom: 5px;
}
.sub{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}

hr {
border-bottom: none;
}

textarea {
	width:400px;
	padding:2px;
	font: normal 1em Verdana, sans-serif;
	border:1px solid #eee;
	height:100px;
	display:block;
	color:#777;
}
input.button { 
	margin: 0; 
	font: bolder 12px Arial, Sans-serif; 
	border: 1px solid #CCC; 
	padding: 2px 3px; 
	background: #FFF;
	color: #88ac0b;
}

/* search */
form.search {
	position: absolute;
	top: 35px; right: 25px;
	background: transparent;
	border: none;	
}	
form.search input.textbox {
	margin: 0; padding: 1px 2px;
	width: 120px;
	background: #FFF;
	color: #333; 
}
form.search input.button {
	background: #CCC url(headerbg.jpg) repeat-x;
	color: #333;
	border: none;	
	width: 70px; height: 21px;
}

/********************************************
   LAYOUT
********************************************/ 
#wrap {
	width: 770px;
	background: #CCC url(content.jpg) repeat-y center top;
	margin: 0 auto;
	text-align: left;
}
#content-wrap {
	clear: both;
	width: 760px;
	padding: 0; 
	margin: 0 auto;
}
#header {
	width: 770px;
	position: relative;
	height: 190px;
	background: #CCC url(header.jpg) no-repeat center top;
	padding: 0;
	font-size: 14px;
	color: #FFF;
}
#header h1#logo-text {
	position: absolute;
	margin: 0; padding: 0;
	font: bolder 4.0em 'Trebuchet MS', Arial, Sans-serif;
	letter-spacing: -2px;
	color: #000;
	text-transform: none;
	
	/* change the values of top and left to adjust the position of the logo*/
	top: 65px; left: 160px;	
}
#header h2#slogan {
	position: absolute;
	margin: 0; padding: 0;
	font: normal 1.3em 'Trebuchet MS', Arial, Sans-serif;
	text-transform: none;
	color: #000;
	
	/* change the values of top and left to adjust the position of the slogan*/
	top: 125px; left: 240px;		
}

/* Menu */
#menu {
	clear: both;	
	margin: 0; padding: 0 40px 0 0;
	background: url(menu.jpg) repeat-y center top;	
	font: bold 12px/26px Verdana, Arial, Tahoma, Sans-serif;
	height: 26px;
}
#menu ul {
	float: right;
	list-style: none;
	margin:0; padding: 0;
}
#menu ul li {
	display: inline;
}
#menu ul li a {
	display: block;
	float: left;
	padding: 0 8px;
	color: #FFF;	
	text-decoration: none;
}
#menu ul li a:hover {
	background-color: #ECECEC;
	color: #333;	
}
#menu ul li#current a {	
	background-color: #FFF;
	color: #333;
}



/* Main Column */
#main {
	float: right;
	width: 550px;
	overflow: visible;
	overflow: hidden;
	
	
}
#main h1 {
	margin-top: 10px;
	font: Bold 125% Verdana, 'Trebuchet MS', Sans-serif;
	color: #88ac0b;
	padding: 5px 0 5px 25px; 	
	border-bottom: 1px solid #EFF0F1;
	background: #FFF url(square-green.png) no-repeat 3px 50%;	
}

.post-footer {
	background-color: #FAFAFA;
	padding: 5px; margin: 20px 10px 0 10px;
	border: 1px solid #f2f2f2;
	font-size: 95%;
}
.post-footer .date {
	background: url(clock.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
	background: url(comment.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
	background: url(page.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}

/* Sidebar */	
#sidebar {
	float: left;
	width: 26.5%;
	padding: 0; margin: 0;	
}
#sidebar2 {
	float: right;
	width: 26.5%;
	padding: 0; margin: 0;	
}		
#sidebar h1 {
	margin-top: 10px;
	padding: 5px 0 5px 10px; 
	font: bold 1.1em Verdana, 'Trebuchet MS', Sans-serif;
	color: #FFFFFF;
	background: #EEF0F1 url(headerbg.jpg) repeat-x left bottom;	
	border: 1px solid #EFF0F1;
}
#sidebar .left-box {
	border: 1px solid #EFF0F1; 
	margin: 0 0 5px 0;	
}
#sidebar ul.sidemenu {
	list-style: none;
	text-align: left;
	margin: 3px 0 8px 0; padding: 0;
	text-decoration: none;		
}
#sidebar ul.sidemenu li {
	border-bottom: 1px solid #EFF0F1;
	background: url(go.gif) no-repeat 1px 1px;	
	padding: 9px 0 9px 35px;
	margin: 0 2px;	
}
#sidebar ul.sidemenu a {
	font-weight: bolder;
	text-decoration: none;	
	background-image: none;	
	color: #000;
}

/* Footer */	
#footer {
	color: #666666;
	background: #CCC url(footer.jpg) no-repeat center top;
	clear: both;
	width: 770px;
	height: 55px;
	text-align: center;	
	font-size: 92%;
	padding-top: 1px;
}
#footer a { text-decoration: none; }

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes */
.clear { clear: both; }
.gray { color: #000; }

.bar {
font-weight: bold;
margin-top: 5px;
margin-left: 10px;
font-size: 12px;
}

.toolbar {
	padding: 10px;
	border: 1px solid silver;
	font-weight: bold;
	margin-bottom: 15px;
     }

.highlight:hover {
	background-color: lightyellow;
	padding: 3px;
}

.readArchive {
	text-align: center;
	font-weight: bold;
}

.viewComments {
	padding-left: 5px;
	font-family: tahoma;
}

.comment {
	margin-bottom: 10px;
	border: 1px solid silver;
	padding: 5px;
}

.commentBody {
	margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom: 1px dotted silver;
}

.commentFooter {
	font-family: tahoma;
	font-size: 12px;
}

.leftBoard {
	float: left;
	width: 64%;
}

.rightBoard {
	float: left;
}

.forumBoard {
	padding: 3px;
	margin-bottom: 5px;
	border-top: 1px dotted silver;
}

.boardTitle {
	font-weight: bold;
	font-size: 13px;
	font-family: tahoma;
}

.boardDescription {
	padding: 4px;
	float: left;
}

.boardStatus {
	float: left;
	width: 50px;
}

.boardInformation {
	padding: 5px;
	border: 1px dashed silver;
	margin-bottom: 15px;
}

.boardInformationTitle {
	font-weight: bold;
	font-size: 13px;
	font-family: tahoma;
}

.boardInformationDescription {
	padding: 4px;
}

.boardInformationModerators {
	font-family: arial;
	font-size: 11px;
}

.threadTable {
	margin-bottom: 10px;
	padding: 3px;
}

.threadStatus {
	float: left;
	width: 30px;
}

.threadLeft {
	float: left;
	width: 70%;
}

.threadTitle {
	font-weight: bold;
}

.boardPages {
	text-align: center;
}

.threadTable {
	padding: 3px;
	border-top: 1px dotted silver;
	padding-top: 5px;
	margin-top: 20px;
}

.forumPost {
	padding: 5px;
	margin-bottom: 10px;
	border-bottom: 1px solid silver;
}

.forumPostDate {
	font-family: tahoma;
	padding: 2px;
}

.forumPostLeft {
padding: 5px;
valign: top;
border-right: 1px solid silver;
}

.forumPostAuthor {
	font-weigh: bold;
}

.forumPostRight {
	valign: top;
	padding-left: 10px;
}

.forumHistory {
	font-weight: bold;
	padding: 3px;
}

.forumPostText {
	border-bottom: 1px dotted silver;
}

.postToolBar form {
	background: none;
	text-align: right;
	padding-top: 5px;
	bordr: none;
	margin: 0px;
}

quote {
	padding: 4px;
	border: 1px solid silver;
}

.moderatingPanel {
	border: 1px solid silver;
	padding: 5px;
	font-weight: bold;
	margin-bottom: 5px;
}

.postTitle {
	font-weight: bold;
	margin-left: 16%;
	border-bottom: 1px dotted silver;
}

.bugtrackerProgressBar {
	width: 100px;
	height: 8px;
	border: 1px solid silver;
}

.bugtrackerProgress {
	float: left;
	height: 8px;
	background: lightgreen;
}

.bugtrackerRow {
	font-family: tahoma;
}

.bugtrackerBugTable {
	padding: 5px;
	border: 1px solid silver;
	
}

.bugtrackerTitle {
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 10px;
}

.bugtrackerAttr {
	
}

.message {
	border: 1px solid silver;
}

input[type=submit] {
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:100%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px;
}

a o to screen jak wygląda moja strona po moich modyfikacjach

1. To własnie server status którzy przeniosłem z lewego dolnego rogu. Oczywiście serwer status był na czerwonym polu itp jak lewa strona
2. Pisanie news uciekło mi też na prawą stronę nie wiem z jakich przyczyn

3. przez te modyfikacje uciekł mi trochę czerwony pasek

Jeżeli ktoś by pomógł wielkie dzięki .

hemrenus321 · May 11, 2012

proszę bardzo: View attachment paczken.zip

@edit
nie wiem czy bedzie dobrze, bo nie dałeś całęgo laya... jak coś jeszcze poprawić to napisz

CyCu91 · May 12, 2012

dzięki ale znowu malutki problemik :

wysłałem CI na pw layout

hemrenus321 · May 12, 2012

teraz wszystko powinno smigać :d View attachment websitepoketibia1.0.zip

CyCu91 · May 12, 2012

Napisałem CI PW i dzięki

Rep pytanie ++

1. Byś umiał na samej górze dodać przykładowo linijkę o nazwie SHOP
2. Niestety jak naciskam na kategorie kto jest online server status ucieka mi w środkowy dół.

Problem z stroną. Layout [Modern ACC]

CyCu91

New Member

hemrenus321

Advanced OT User

CyCu91

New Member

hemrenus321

Advanced OT User

CyCu91

New Member