CSS хелп

  • Автор Автор 2SHAE
  • Начална дата Начална дата
2

2SHAE

Registered
Начи хора изтеглих си едно темплейтче което е направено със css и кутийките са в ляво а искам да има и в дясно как мога да го направя?Ако искате ше ви покажа кода искам да се увеличи дебелината на всичко в сайта за да мога да си сложа и от дясната страна кутийки само,че нз как плс хелп
 
2SHAE каза:
Начи хора изтеглих си едно темплейтче което е направено със css и кутийките са в ляво а искам да има и в дясно как мога да го направя?Ако искате ше ви покажа кода искам да се увеличи дебелината на всичко в сайта за да мога да си сложа и от дясната страна кутийки само,че нз как плс хелп
Увеличете...
от CSS-то само задаваш шрифт,дебелина,ширина,височчина и т.н.т. а то би трябвало този темплейт да си има и index.php или index.html там ти се намира таблицата само я копираш и стват 2 таблици :)
 
Човек не ми дава да го местя само през css-a обаче като напиша примерно center и то отива в лявата страна :o
 
Ето css файла:

/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/

*
{
margin: 0px;
padding: 0px;
}

a:link {
color: #D72020;
}

a:hover {
text-decoration: none;
color: #FF0000;
}

a:visited {
color: #D72020;
}

body {

background: url(images/back2.jpg);
font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: ;#D72020
}

#content
{
margin: 0 auto;
background: #D72020 url(images/back_all.gif);
width: 878px;
text-align: left;

}


#header {
height: 192px;
text-align: left;
}

#menu
{
background: #ffffff url(images/buttons_back.gif) repeat-x ;
height: 47px;
padding-left: 140px;
}

#menu ul {
list-style: none;
}

#menu li {
display: inline;

}

#menu a {
float: left;
width: 79px;
height: 31px;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 14px;
padding-top: 15px;

}

#menu b {
float: right;
width: 79px;
height: 31px;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 14px;
padding-top: 15px;

}

#menu a:hover {
width: 79px;
height: 25px;
color: #333333;
text-decoration: underline;
}

#menu a:hover {
width: 79px;
height: 25px;
color: #333333;
text-decoration: underline;

}

#logo {
background: #ffffff url(images/header.jpg) no-repeat;
width: 538px;
height: 105px;
text-align: left;
padding-top: 40px;
padding-left: 240px;
}


#logo a {
text-decoration: none;
font-style: italic;
font-size: 24px;
color: #08305D;
}
#logo H2 a
{
font-size: 14px;
}

#left
{
width: 201px;
padding-left: 20px;
padding-top: 10px;
}

#left H3
{
width: 171px;
height: 29px;
font-size: 14px;
font-weight: bold;
padding-left: 35px;
padding-top: 15px;
color: #ffffff;
background: url(images/title.gif) no-repeat
}

#left ul {
list-style: none;
}

#left li ul {
padding-left: 10px;
padding-bottom: 10px;
}

#left li li {
padding: 4px 10px;
}

#left a {
color: #08305D;
}
#left a:visited {
color: #08305D;
}

.backgr
{
background: #F0F0F0;
border: 1px solid #898989;
}

#calendar1 {
padding: 0 10px 20px 10px;
}

#calendar table {
width: 100%;
text-align: center;
}

#calendar thead {
background: #F1F1F1;
}

#calendar tbody td {
border: 1px solid #F1F1F1;
}

#calendar #prev {
text-align: left;
}

#calendar #next {
text-align: right;
}

#calendar tfoot a {
text-decoration: none;
font-weight: bold;
}

#calendar #now {
background: #499FFF;
border: 1px solid #ff0000;
font-weight: bold;
color: #ffffff
}

#right
{
float: right;
width: 390px;
margin: 10px;
background: #F0F0F0;
padding: 10px;
border: 1px solid #898989;
}

#right H4
{
margin: 0;
padding: 0px;
font-size: 12px;
color: #D72020;
}

#right a
{
color: #08305D;;
text-decoration: none;
}

#right p {
margin: 0;
padding: 0;
padding-bottom: 10px;
}

#right h2 {
margin: 0;
padding: 0;
padding-top: 10px;
color: #08305D;;
}
.date {
text-align: right;
color: #808080;
font-size: 11px;
}

.date a {
color: #D72020;
}



#footer {
height: 35px;
clear: both;
padding-top: 20px;
background: url(images/footer.gif) repeat-x;
border-top: 5px solid #08305D;
}

#footer p {
margin: 0;
font-size: 10px;
text-align: center;
color: #ffffff;
}

#footer a {
color: #ffffff;
}



Ето html файла:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Metamorphosis Design Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">

</style></head>
<body>
<div id="content">

<div id="header">
<div id="logo">
<h1><a href="#"></a></h1>
<p> </p>
</div>
<div id="menu">
<ul>
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">Blog</a></li>
<li><a href="#" title="">Gallery</a></li>
<li><a href="#" title="">Friends</a></li>
<li><a href="#" title="">About</a></li>
<li><a href="#" title="">Contact</a></li>
</ul>
</div>
</div>


<div id="main">
<div id="right">
<h2>Welcome To Our Website</h2><br />
<h4><a href="#">METAMORPHOSIS DESIGN</a></h4><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat...
<p class="date"><img src="images/comment.gif" alt="" /> <a href="#">Comments(2)</a> <img src="images/timeicon.gif" alt="" /> 21.02.</p>

<h4><a href="#">FREE WEBSITE TEMPLATES</a></h4><br />
<p>Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
<p>Sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autemr in hendrerit in vulputate velit esse molestie consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat...</p>
<p class="date"><img src="images/comment.gif" alt="" /> <a href="#">Comments(8)</a> <img src="images/timeicon.gif" alt="" /> 13.46.</p>

<h4><a href="#">FLASH TEMPLATES</a></h4><br />
Adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
<p>Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat...</p>
<p class="date"><img src="images/comment.gif" alt="" /> <a href="#">Comments(2)</a> <img src="images/timeicon.gif" alt="" /> 21.02.</p>

<h4><a href="#">FREE WEB TEMPLATES</a></h4><br />
Iipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat...</p>
<p class="date"><img src="images/comment.gif" alt="" /> <a href="#">Comments(8)</a> <img src="images/timeicon.gif" alt="" /> 13.46.</p>
</div>
<div id="left">
<h3>Nunc pellentesque</h3>
<div class="backgr"><ul>
<li><ul>
<li><a href="#">Vivamus id arcu</a></li>
<li><a href="#">Duis congue ultricies</a></li>
<li><a href="#">Purus in mollis purus</a></li>
<li><a href="#">Orci nonummy fringilla</a></li>
<li><a href="#">Pellentesque at lorem</a></li>
<li><a href="#">Enim vivamus convallis</a></li>
<li><a href="#">Ipsum vitae felis</a></li>
<li><a href="#">Integer facilisis</a></li>
<li><a href="#">Sagittis Bibendum Erat</a></li>
<li><a href="#">Malesuada Turpis</a></li>
<li><a href="#">Quis Gravida Massa</a></li>
<li><a href="#">Inerat Viverra Ornare</a></li>
</ul>
</li>
</ul></div>
<br />
<h3>Calendar</h3>
<div class="backgr"><ul>
<li id="calendar">
<div id="calendar1">
<table id="calendar2" summary="Calendar">
<caption>
January 2008
</caption>
<thead>
<tr>
<th abbr="Monday" scope="col" title="Monday">M</th>
<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
<th abbr="Thursday" scope="col" title="Thursday">T</th>
<th abbr="Friday" scope="col" title="Friday">F</th>
<th abbr="Saturday" scope="col" title="Saturday">S</th>
<th abbr="Sunday" scope="col" title="Sunday">S</th>
</tr>
</thead>
<tfoot>
<tr>
<td abbr="Des" colspan="3" id="prev"><a href="#">« Des</a></td>
<td class="pad"> </td>
<td abbr="Feb" colspan="3" id="next" class="pad"><a href="#">Feb »</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="2" class="pad"> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td id="now">21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="pad" colspan="2"> </td>
</tr>
</tbody>
</table>
</div>
</li>
</ul></div>
</div>





</div>

<div id="footer">
<p>Copyright © 2008. Design,Info and PHP Codes by 2SHAE<a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets"></abbr></a></p>
</div>
</div>

</body>
</html>
 
Ако сия и дадеш нещо демо.
ВЪв момента изобщо не мога да загрея кои са ти кутииките.
Гледам имаш left & right за страни.
Иначе овеличаваш width на.
Код: 
#content 
{ 
margin: 0 auto; 
background: #D72020 url(images/back_all.gif); 
width: 878px; 
text-align: left; 
}
И ти се разширивя сайта.
Иначе на кутииките ги копираш същите и сменяш имената и слагаш float: left;
И кутииката я слагаш.
Във <div id="left"> ако изобщо това ти е лявата страна
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе