przykładowy szablon css ze strony www w inny sposób

[olenkaa7]

Szablon ze strony http://www.freecsstemplates.org/css-templates/40/ Name: outoftheblue

Kod:

Kod: Zaznacz cały

#
/** BASIC */
#
body {
#
font: normal small Arial, Helvetica, sans-serif;
#
color: #83895C;
#
}
#
 
#
h1, h2, h3, h4, h5, h6 {
#
margin-top: 0;
#
padding-top: 0;
#
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
#
color: #CC6600;
#
}
#
 
#
a {
#
text-decoration: none;
#
color: #CC6600;
#
border-bottom: 1px solid #EBA45E;
#
}
#
 
#
a:hover {
#
border: none;
#
}
#
 
#
/** HEADER */
#
#header {
#
width: 700px;
#
height: 80px;
#
margin: 0 auto;
#
}
#
 
#
#header h1 {
#
margin: 0;
#
padding: 30px 10px 0 20px;
#
text-transform: lowercase;
#
font-size: 36px;
#
letter-spacing: -.05em;
#
color: #83895C;
#
}
#
 
#
/** MENU */
#
#menu {
#
width: 700px;
#
margin: -2.25em auto 0 auto;
#
}
#
 
#
#menu ul {
#
margin: 0;
#
padding: 0;
#
list-style: none;
#
text-align: right;
#
}
#
 
#
#menu li {
#
display: inline;
#
}
#
 
#
#menu a {
#
padding: 0 10px 0 11px;
#
border: none;
#
border-left: 1px solid #83895C;
#
color: #83895C;
#
}
#
 
#
#menu a:hover {
#
color: #83895C;
#
}
#
 
#
#menu .first a {
#
border: none;
#
}
#
 
#
/** CONTENT */
#
#content {
#
width: 720px;
#
margin: 0 auto;
#
background: #EFEBDF url(images/img01.gif);
#
}
#
 
#
#content * {
#
line-height: 140%;
#
}
#
 
#
#columnA {
#
float: left;
#
width: 440px;
#
padding: 25px 20px 0 30px;
#
background: url(images/img02.gif) no-repeat left top;
#
}
#
 
#
#columnB {
#
float: right;
#
width: 200px;
#
padding: 25px 20px 0 10px;
#
background: url(images/img03.gif) no-repeat left top;
#
}
#
 
#
#columnB * {
#
color: #EFEBDF;
#
}
#
 
#
#columnB ul {
#
margin-left: 0;
#
padding-left: 0;
#
list-style: inside circle;
#
}
#
 
#
#columnB a {
#
border-bottom-color: #EBD8B7;
#
color: #FFFFFF;
#
 
#
}
#
 
#
/** FOOTER */
#
#footer {
#
width: 720px;
#
height: 50px;
#
margin: 0 auto;
#
background: url(images/img04.gif) no-repeat left top;
#
}
#
 
#
#footer p {
#
margin: 0;
#
padding: 35px 0 0 20px;
#
font: bold 9px Arial, Helvetica, sans-serif;
#
}

Zrobiłam u siebie (tylko sam layout bez tekstów):
Kod:

Kod: Zaznacz cały

#content{
   width: 720px;
   margin: 0 auto;
   background: url(images/img01.gif) repeat-y top left;
   height: 450px;
}

#columnA{
   float: left;
   width: 490px;
   height: 30px;
   background: url(images/img02.gif) no-repeat top left;
}

#columnB{
   float: right;
   width: 230px;
   height: 30px;
   background: url(images/img03.gif) no-repeat top left;
}

#footer {
   margin: 0 auto;
   width: 720px;
   height: 50px;
   background: url(images/img04.gif) no-repeat left top;

}

Może tak być? Czy można zrobić layout css, tak jak mi wygodnie jak powyżej?

[Cibeek]

nie bardzo wiadomo o co chodzi;p css jest wlasnie do tego stworzony