ได้ลองพยายามทำหลายครั้งแล้วครับแต่ไม่ได้เรื่องเลยก็เลยอยากให้ทุกๆท่านช่วยครับweb-ของผมเอง
นี้คือตัวอย่างที่ผมต้องการแก้ไข web ผม ให้มีเมนู ด้านขวาเป็นแบบนี้ครับ
นี้คือ css ของผมครับ
body {
font-family: Tahoma, Verdana, sans-serif;
line-height: 1.3em;
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
background: url(../images/bg.png) top center repeat;
/*background: #0f3f7d;*/
text-align: center;
}
.clr {
clear: both;
}
body.contentpane {
background: #FEFEFE;
text-align: left;
}
body.contentpane .contentpaneopen {
width: 97%;
}
body.contentpane .contentpaneopen .contentheading {
}
.moduletable {
margin: 0 auto;
}
select.button {
width: auto;
padding: 0;
}
td {
font-family: Tahoma, Verdana, sans-serif;
color: #000;
font-size: 11px;
}
.sectiontableentry1 {
color: #333;
background: #eff4e9;
}
.sectiontableentry2 {
color: #333;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li{
line-height: 20px;
padding-left: 12px;
padding-top: 0px;
}
a:link, a:visited {
text-decoration: underline;
font-weight: normal;
color: #555;
outline: none;
}
a:hover {
text-decoration: none;
font-weight: normal;
color: #ea5800;
/*color: #333;*/
}
p {
margin-top: 0;
margin-bottom: 5px;
text-align: justify;
}
.center {
text-align: center;
margin: 0 auto;
padding: 0;
width: 940px;
}
div#wrapper {
margin: 0 auto;
width: 940px;
text-align: left;
background: url(../images/content.jpg) top center repeat-y;
}
#area {
padding: 0;
margin: 0 auto;
text-align: center;
}
#top {
width: 940px;
height: 68px;
margin: 0 auto;
padding: 0;
text-align: right;
font-size: 0;
}
#banner {
float: left;
width: 468px;
height: 64px;
overflow: hidden;
padding: 4px 0 0 0;
}
#search {
float: right;
width: 177px;
padding: 45px 0 0 0;
}
#search form {
margin:0;
padding:0;
}
#search .moduletable {
margin:0;
padding:0;
}
#search .search .button {
background: transparent url(../images/searchbut.jpg) top center no-repeat;
width: 51px;
height: 16px;
font-size: 10px;
color: #666;
padding: 0;
border: none;
margin: 0 0 0 6px;
text-align: center;
}
#search .search .inputbox {
background: transparent url(../images/searchbg.jpg) top center no-repeat;
width: 120px;
height: 14px;
font-size: 10px;
color: #666;
padding: 2px 0 0 0;
border: none;
}
/*รูปส่วนหัว ปรับขนาด สูง ยาว */
#header {
height: 250px;
background: url(../images/header.jpg) top center no-repeat;
margin: 0 auto;
width: 940px;
padding: 10px 0;
}
/*รูปส่วนหัว*/
#image {
background:#ffffff /*url(../images/headerimg.jpg) bottom center no-repeat;*/
height: 250px;
width: 920px;
margin: 0 auto;
padding: 0;
}
.maintable {
margin: 0 auto;
width: 906px;
text-align: left;
}
#sitename {
padding: 70px 0 0 80px;
text-align: left;
margin: 0 auto;
width: 800px;
}
#sitename p {
font-weight: normal;
font-family: Georgia, Verdana, Arial, sans-serif;
font-size: 26px;
padding: 0;
margin: 0;
letter-spacing: 1px;
color: #444;
text-decoration: none;
outline: none;
line-height: 36px;
}
#menucenter {
text-align: left;
margin: 0 auto;
padding: 0;
background: url(../images/menu.jpg) top center no-repeat;
width: 940px;
height: 37px;
}
#menucenter .menu_m {
float: left;
padding: 0;
margin: 0;
}
#topnavi{
}
#topnavi ul {
margin: 0;
padding: 0 4px;
list-style: none;
}
#topnavi ul li {
float: left;
margin: 0;
padding: 0;
height: 37px;
background: url(../images/menu_li.jpg) center right no-repeat;
}
#topnavi ul li a{
font-family: Tahoma, Verdana, sans-serif;
font-size: 11px;
float: left;
display: block;
line-height: 36px;
padding: 0 8px 0 8px;
color: #525252;
text-decoration: none;
font-weight: normal;
}
#topnavi ul li a:hover,#topnavi ul li a.current{
color: #222;
cursor: pointer;
}
#topnavi ul li a span{
}
#topnavi ul li a:hover span,#topnavi ul li a.current span {
}
/*ขนาดส่วนเมนู ซ้าย ขวา*/
/*#leftmenu, #rightmenu {
margin: 0;
width: 185px;
float: left;
text-align: left;
padding: 0;
overflow: hidden;
}*/
#leftmenu {
margin: 0;
width: 180px;
float: left;
text-align: left;
padding: 0;
/* background: #66CCFF;*/
overflow: hidden;
}
#rightmenu {
margin: 0;
width: 180px;
float: left;
text-align: left;
padding: 0;
overflow: hidden;
}
/* #leftmenu div.module div div, #rightmenu div.module div div {
background: transparent url(../images/l_r_bottom.gif) bottom center no-repeat;
padding:0 0 5px 0;
margin:0;
}
#leftmenu div.module div div div, #rightmenu div.module div div div {
background: url(../images/l_r_top.gif) top center no-repeat;
padding:0 0 5px 0;
margin:0;
}
#leftmenu div.module div, #rightmenu div.module div{
background: transparent url(../images/l_r_middle.gif) top left repeat-y;
padding:0;
margin:0;
}*/
/*ขนาดส่วนContent กลาง*/
#main {
float: left;
width: 548px;
padding: 0 6px;
text-align: left;
}
#main_full {
float: left;
width: 718px;
padding: 0 0 0 10px;
text-align: left;
/** แก้ไข ล้นจอที่นี้ **/
overflow: Auto;
}
#content {
width: 920px;
margin: 0 auto;
text-align: left;
/**text-align: center;**/
padding: 10px;
/*background: transparent url(../images/content.png) top center no-repeat;*/
}
#content_bottom {
width: 940px;
height: 2px;
background: url(../images/content_bottom.jpg) top center no-repeat;
margin: 0 auto;
text-align: left;
}
#footer {
margin: 0 auto;
width: 920px;
height: 20px;
text-align: left;
/**text-align: center;**/
vertical-align: top;
padding: 10px 0;
}
a.mainlevel:link, a.mainlevel:visited {
line-height: 18px;
padding: 0 0 2px 8px;
text-decoration: none;
color: #666;
font-weight: normal;
font-size: 11px;
text-align: left;
background: url(../images/menu_row.jpg) center left no-repeat;
margin: 0;
height: 18px;
display: block;
}
a#active_menu.mainlevel:link, a#active_menu.mainlevel:visited {
color: #ea5800;
text-align: left;
/*color: #333;*/
}
a#active_menu.sublevel:link, a#active_menu.sublevel:visited {
color: #ea5800;
text-align: left;
/*color: #333;*/
}
a.mainlevel:hover {
color: #ea5800;
text-align: left;
/*color: #333;*/
}
a.sublevel:link, a.sublevel:visited {
text-decoration: none;
color: #666;
margin: 0 0 0 -4px;
font-size: 11px;
background: url(../images/submenu_row.jpg) bottom left no-repeat;
font-weight: normal;
display: block;
line-height: 18px;
padding: 0 0 0 18px;
border: none;
height: 18px;
text-align: left;
}
a.sublevel:hover {
color: #333;
text-align: left;
}
table.contentpaneopen {
margin: 2px 8px;
border-spacing: 0;
padding: 0;
border-collapse: collapse;
text-align: justify;
}
table.contentpaneopen td.contentheading {
padding: 0;
font-family: Tahoma, Arial, Verdana, sans-serif;
font-size:13px;
vertical-align: middle;
color:#333333;
text-align: left;
padding-left:15px;
font-weight:normal;
height: 28px;
width: 525px;
background: /*#66CCFF*/ url(../images/menu-header1.gif) repeat-y left top;
text-transform: uppercase;
letter-spacing: 1px;
}
/** general module title **/
table.moduletable th {
padding: 0;
font-family: Tahoma, Arial, Verdana, Times, serif;
color:#09345a;
font-size:13px;
line-height:20px;
background: /*#66CCFF*/url(../images/h3-1.gif) repeat-y left top;
height:28px;
width: 525px;
text-align:left;
padding-left:15px;
font-weight:normal;
vertical-align: middle;
/*text-transform: uppercase;
letter-spacing: 1px;*/
}
/** general module title for content top 1 and 2.
position:user2 an user3**/
#content_top1 table.moduletable th {
padding: 0;
font-family: Tahoma, Arial, Verdana, Times, serif;
color:#09345a;
font-size:13px;
line-height:20px;
background: /*#66CCFF*/ url(../images/menu-header11.gif) repeat-y left top;
height:28px;
width: 525px;
text-align:left;
padding-left:15px;
font-weight:normal;
vertical-align: middle;
/*text-transform: uppercase;
letter-spacing: 1px;*/
}
/** general module title for content top 1 and 2.
position:user2 an user3 **/
#content_top2 table.moduletable th {
padding: 0;
font-family: Tahoma, Arial, Verdana, Times, serif;
color:#09345a;
font-size:13px;
line-height:20px;
background: /*#66CCFF*/ url(../images/menu-header11.gif) repeat-y left top;
height:28px;
width: 525px;
text-align:left;
padding-left:15px;
font-weight:normal;
vertical-align: middle;
/*text-transform: uppercase;
letter-spacing: 1px;*/
}
/** specific module td table for content top 1 and 2.
position:user2 an user3 **/
#content_top1 table.moduletable td,
#content_top2 table.moduletable td {
padding: 0;
font-family: Tahoma, Arial, Verdana, Times, serif;
font-size: 13px;
line-height:20px;
vertical-align: middle;
color:#09345a;
text-align: left;
font-weight: normal;
height: 28px;
width: 548px;
padding-left:15px;
/*background:#FFFFFF;*/
border: 1px solid #66CCFF;
/*text-transform: uppercase;
letter-spacing: 1px;*/
}
.button {
color: #333;
font-size: 10px;
border: 1px solid #555;
}
.inputbox {
border: 1px solid #555;
color: #333;
padding: 2px;
}
input[type="checkbox"] {
border: none;
}
.copyright {
color: #555;
font-family: Tahoma, Verdana, sans-serif;
font-size: 11px;
padding: 0;
margin: 0 23px;
text-align: center;
}
.back_button {
float: left;
text-align: center;
font-size: 11px;
font-weight: normal;
width: auto;
padding: 0px 10px;
line-height: 20px;
margin: 10px 0 50px 0;
}
.componentheading {
height: 22px;
padding: 8px 0 0 10px;
font-family: Tahoma, Arial, sans-serif;
font-size: 14px;
margin: 0;
text-align: left;
color: #555;
}
.wrapper {
width: 700px;
height: 600px;
}
.module div div div h3 {
color: #736969;
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
text-align: left;
height: 30px;
text-decoration: none;
padding: 0 0 0 10px;
background: url(../images/h3-1.gif) top center no-repeat;
font-weight: normal;
line-height: 30px;
margin: 0;
}
.module {
padding: 0;
margin: 0;
}
.module div {
padding: 0;
margin: 0 0 14px 0;
}
.module div div {
margin:0;
width: 100%;
padding: 0;
background: url(../images/column_bottom.jpg) bottom center no-repeat;
}
.module div div div {
margin:0;
padding: 0 0 4px 0;
background: url(../images/column_top.jpg) top center no-repeat;
text-align: center;
}
.module div div div div{
border: none;
padding: 0;
margin: 0;
}
.module div div div table {
margin: 0;
padding: 0 8px;
list-style: none;
background: none;
}
.module div div div div {
padding: 0 0 1px 0;
background: none;
}
.module div div div div.syndicate {
margin: 0;
padding: 10px 0 10px 0;
}
.module div div div form {
padding: 0;
margin: 0;
text-align: center;
}
.module div div div form table {
padding: 0 10px;
width: 100%;
text-align: left;
}
/* footer links*/
a.sgfooter:link, a.sgfooter:visited {
color: #555;
font-size: 11px;
font-family: Tahoma, Verdana, sans-serif;
text-decoration: none;
}
a.sgfooter:hover {
color: #555;
font-family: Tahoma, Verdana, sans-serif;
text-decoration: none;
}
/*แก้ไขด้านล่าง*/
#footer {
margin: 0 auto;
width: 940px;
height: 60px;
text-align: right;
color: #ffffff;
vertical-align: top;
/*padding:10px 0 20px 0;*/
/*background:#66CCFF;*/
/*border:#66CCFF solid 2px;*/
background: url(../images/footerliveblue.jpg);
}
/*banner*/
.sgf {
font-size: 11px;
font-family: Tahoma, Verdana, sans-serif;
color: #555;
text-decoration: none;
}
.sgf1 {
font-size: 11px;
font-family: Tahoma, Verdana, sans-serif;
color: #555;
text-align: left;
}
a.sglink:link, a.sglink:visited {
color: #FFF;
font-size: 11px;
font-family: Tahoma, Verdana, sans-serif;
text-decoration: none;
}
a.sglink:hover {
text-decoration: none;
}
a img {
border: 0;
}
.pathway {
border: 0;
color: #333333;
font-family: Tahoma, Verdana, sans-serif;
font-weight:normal;
padding:2px 4px 2px 10px;
}
a.pathway:link, a.pathway:visited {
color: #333333;
font-size: 11px;
line-height: 18px;
font-family: Tahoma, Verdana, sans-serif;
font-weight: normal;
padding: 2px 4px 2px 4px;
}
a.pathway:hover {
color: #fefefe;
font-family: Tahoma, Verdana, sans-serif;
font-weight:normal;
background-color:#2a519e;
}
.pagenav {
font-size:12px;
font-weight:normal;
}
#topnavigation a.topnavigation:link, a.topnavigation:visited {
font-family: Tahoma, Verdana, sans-serif;
font-size: 10px;
font-weight: normal;
letter-spacing : 1px;
color: #fefefe;
padding-right:5px;
text-decoration:none;
}
#topnavigation a.topnavigation:hover {
color: #b9f15d;
border-bottom: none;
text-decoration:none;
}
#topnavigation a.topnavigation:active {
color: #51c0f5;
text-decoration:none;
}
a.toclink:link, a.toclink:visited {
line-height:normal;
font-size:11px;
font-family: Tahoma, Verdana, sans-serif;
color: #000000;
text-decoration: underline;
}
a.toclink:hover {
text-decoration: none;
}
table.contenttoc {
padding: 2px;
margin-left: 2px;
margin-bottom: 2px;
}
table.contenttoc th {
color: #333;
text-align: left;
padding-top: 2px;
padding-left: 4px;
height: 21px;
font-weight: normal;
font-size: 11px;
text-transform: uppercase;
}
.sectiontableheader {
height: 20px;
padding-right:3px;
font-weight :normal;
}
table.contentpane td.contentdescription {
font-size:12px;
line-height:18px;
}
table.contentpane td.componentheading {
height: 20px;
padding: 0 0 3px 0;
color: #555;
text-align: left;
padding-bottom:3px;
white-space: nowrap;
font-family: Tahoma, Verdana, sans-serif;
font-size: 14px;
font-weight: normal;
}
table.contentpane td {
padding-top:1px;
padding-bottom:2px;
font-size:12px;
}
table.contentpaneopen td {
line-height: 14px;
font-size: 12px;
}
.height {
height: 100%;
}
.small {
font-size: 10px;
color: #555;
font-weight: normal;
text-align: left;
}
table.contentpaneopen td.createdate {
color: #555555;
font-size: 10px;
font-weight: normal;
height: 20px;
padding-top: 0;
vertical-align: top;
}
table.contentpaneopen td.modifydate {
color: #555555;
font-size: 10px;
font-weight: normal;
height: 20px;
text-align: right;
vertical-align: bottom;
}
table.contentpaneopen td a.readon{
display: block;
float: right;
line-height: 14px;
font-size: 10px;
text-decoration: none;
padding: 1px 2px 1px 2px;
}
table.contentpaneopen td a.readon:hover{
color: #333;
}
h4 {
font-size: 10px;
text-transform: uppercase;
}
table.contentpaneopen td.buttonheading {
}
.pagenav_next, .pagenav_prev {
font-size: 12px;
color: #666;
}
Mambo 
