WHEN I added a lamp gallery to the php page in this article (the music player is placed to auto and so turn your audio system down):
http: //www. searchsites. ms11. net/media. php
I’m getting the small thumbnail place pic under the particular music player moved into the immediate right but the css is producing me crazy in addition to I can’t believe straight.
Codes for that css and the actual php page are usually below:
CSS
*
margin: 0px;
padding: 0px;
human body
padding: 16px 0px 10px;
track record: url('http: //www. cutetweet. com/wp-content/uploads/2009/03/twitter-background-free-01. png'); #5f92d2 repeat-x 0% 0%;
coloration: #000;
font-family: tahoma, arial, sans-serif;
font-size: 13px;
text-align: center;
box
float: perfect;
a
color: #fff;
text-decoration: underline;
your: hover
color: #bfd8f6;
span
display: none;
img
line: none;
ul
list-style-type: not one;
;
li
list-style-type: not one;
p
margin: 10px 0px 5px;
text-align: vindicate;
line-height: 14px;
. clearthis
margin: 0px;
height: 1px;
very clear: both;
float: not one;
font-size: 1px;
line-height: 0px;
overflow: hidden;
input
padding-left: 2px;
background-color: #eff3f7;
line: 2px solid #eff3f7;
coloration: #537caf;
font-family: tahoma, arial, sans-serif;
font-size: 10px;
#container
margin: 0px auto;
thicker: 768px;
/* Web site Header */
#header_container
margin-bottom: 12px;
line: 1px solid #fff;
track record: url('images/header_background. jpg') repeat-x 0px 0px;
sift: alpha(opacity=20);
-moz-opacity: 0. SEVEN; opacity: 0. SEVEN;
font-family: cursive, tahoma, arial, sans-serif;
#page_header
thicker: 766px;
height: 187px;
track record: url('images/lisa. png') no-repeat 10px 4px;
overflow: hidden;
/* Web site Header: Company Label & Logo */
#header_company
margin-top: 2px;
thicker: 585px;
height: 35px;
float: left;
background: url('images/company_logo. gif') no-repeat 137px 0px;
text-align: remaining;
#header_company h1
track record: url('images/company_name. gif') no-repeat 160px 0px;
thicker: 585px;
height: 35px;
/* Web site Header: Welcome Be aware */
#header_welcome
padding-left: 142px;
float: left;
text-align: vindicate;
#header_welcome h3
underlay: 3px 0px 0px;
font-size: 14px;
#header_welcome p
margin-top: 7px;
#header_welcome #welcome_text
thicker: 447px;
font-weight: striking;
font-size: 13px;
font-style: arial, verdana;
coloration: #000;
/* Web site Header: Menu */
#header_menu
padding-top: 25px;
padding-right: 29px;
float: right;
#header_menu li
margin-bottom: 2px;
thicker: 116px;
border: 1px sturdy #dee8f5;
text-align: remaining;
clear: both;
float: center;
#header_menu li your
display: block;
thicker: 116px;
height: 20px;
coloration: #e3ecf8;
background-color: #3d6290;
text-decoration: not one;
font-weight: bold;
overflow: hidden;
line-height: 10px;
#header_menu li your span
display: prohibit;
padding-top: 4px;
padding-left: 31px;
#header_menu li your: hover
color: #fff;
background-color: #2e4a6c;
/* Remaining Sidebar */
#left_sidebar
thicker: 178px;
float: remaining;
#left_sidebar. box_container
margin-bottom: 11px;
line: 1px solid #fff;
background-color: #537caf;
/* Remaining Sidebar: User Login */
#userlogin
underlay: 7px 8px 11px 12px;
coloration: #f1f5f9;
font-weight: striking;
text-align: left;
#userlogin h2
thicker: 69px;
height: 15px;
track record: url('images/userlogin_title. gi') no-repeat -2px 0px;
#userlogin mode
padding-top: 5px;
#userlogin. form_field
padding-left: 1px;
padding-top: 7px;
thicker: 155px;
float: not one;
clear: both;
text-align: perfect;
#userlogin form robust
padding-top: 1px;
display: block;
width: 50px;
peak: 13px;
float: remaining;
text-align: left;
#userlogin mode input
width: 93px;
float: right;
#userlogin mode input. button
underlay: 0px;
width: 55px;
peak: 15px;
border: not one;
float: none;
#userlogin #link-password
padding-top: 5px;
#userlogin #link-password your
color: #eef3f9;
#userlogin #link-password your: hover
color: #bfd8f6;
/* Remaining Sidebar: Latest News */
#news
underlay: 10px 17px 10px 12px;
text-align: remaining;
#news h2
thicker: 76px;
height: 19px;
track record: url('images/news_title. gif') no-repeat 0px 0px;
#news h4
padding-top: 6px;
font-size: 10px;
font-weight: striking;
#news p
margin-top: 5px;
margin-bottom: 6px;
line-height: 12px;
#news. link-more
text-align: perfect;
font-weight: bold;
/* Primary Content */
#maincontent_container
border-top: 1px sturdy #d5dfec;
border-left: 1px sturdy #d5dfec;
float: perfect;
text-align: left;
#maincontent
margin: 7px 0px 0px 16px;
thicker: 561px;
#maincontent_top
margin-bottom: 11px;
thicker: 561px;
background: url('images/maincontent_verticaldiv. gif') repeat-y 310px 5px;
/* The best way We Started */
#started_container
thicker: 313px;
float: remaining;
#started
padding-top: 2px;
thicker: 294px;
#started h2
thicker: 96px;
height: 14px;
track record: url('images/started_title. gif') no-repeat 0px 0px;
/* Fixing */
#right_container
thicker: 247px;
height: 500px;
float: left;
text-align: remaining;
#repairing
margin-left: vehicle;
margin-right: 0px;
padding-bottom: 5px;
thicker: 238px;
float: perfect;
background: url('images/bluewall. png') no-repeat 0px 5px;
line: 0px solid #fff;
#repairing h2
thicker: 125px;
height: 19px;
track record: url('images/repairing_title. gif') no-repeat 0px 4px;
#repairing p
margin-top: 6px;
/* Have Special Offer */
#offer_container
margin-left: vehicle;
border: 1px sturdy #fff;
background-color: #436da1;
float: right;
#offer
margin: 5px 17px 4px 10px;
thicker: 205px;
#offer h2
thicker: 120px;
height: 22px;
track record: url('images/offer_title. gif') no-repeat -1px 0px;
#offer p
margin-top: 1px;
#offer. link-go
text-align: perfect;
#offer. link-go your
margin-left: auto;
display: block;
width: 34px;
peak: 13px;
background: url('images/offer_go. gif') no-repeat 0px 0px;
/* Included Products */
#featured_container
line: 1px solid #fff;
background-color: #537caf;
float: left;
#featured
margin: 2px 5px;
thicker: 548px;
#featured h2
thicker: 111px;
height: 20px;
track record: url('images/featured_title. gi') no-repeat 0px 0px;
#featured_products ul
padding-bottom: 2px;
thicker: 498px;
#featured_products li
margin: 6px 21px 10px 1px;
float: left;
#featured_products li. ending
margin-right: 0px;
#featured_products li your
display: block;
thicker: 107px;
height: 84px;
background-color: #fff;
overflow: hidden;
#featured_products li your img
margin: 1px;
#featured_products li h4
padding-top: 3px;
text-align: center;
font-size: 10px;
font-weight: striking;
. featured_nav
padding-left: 3px;
padding-right: 9px;
float: left;
font-weight: striking;
. featured_nav a
text-decoration: not one;
#featured. link-more
padding-right: 3px;
font-weight: striking;
float: right;
/* Web site Footer */
#page_footer
margin: 5px;
width: 567px;
float: right;
text-align: center;
font-size: 11px;
PHP
<! DOCTYPE web coding PUBLIC " -//W3C//DTD XHTML JUST ONE. 0 Strict//EN" " http: //www. w3. org/TR/xhtml1/DTD/xhtml1-strict. dtd" >< web coding xmlns=" http: //www. w3. org/1999/xhtml" >
< head>
< meta http-equiv=" Content-Type" content=" text/html; charset=iso-8859-1" />
< meta http-equiv=" Content-Style-Type" content=" text/css" />< title> Gutarist / Vocalist< /title>
< connection rel=" stylesheet" href=" model. css" type=" text/css" media=" screen" />
<! -- Location of javascript. -->
< script language=" javascript" type=" text/javascript" src=" swfobject. js" > < /script>< connection rel=" stylesheet" href=" css/lightbox. css" type=" text/css" media=" screen" />
< script type=" text/javascript" src=" js/prototype. js" > < /script>
< script type=" text/javascript" src=" js/scriptaculous. jsload=effects, builder" > < /script>
< script type=" text/javascript" src=" js/lightbox. js" > < /script>< /head>
< body>
< div id=" container" >
<! -- Start off of Page Header -->
< div id=" header_container" >
< div id=" page_header" >< div id=" header_company" >
< h1> < span> Concept goes here< /span> < /h1>
< /div>< div id=" header_menu" >
< ul>
< li> < your href=" http: //www. searchsites. ms11. net/index. htm" > < span> Home< /span> < /a> < /li>
< li> < your href=" http: //www. searchsites. ms11. net/bio. html" > < span> Lisa's Bio< /span> < /a> < /li>
< li> < your href=" http: //www. freewebsitetemplates. com/" > < span> Media< /span> < /a> < /li>
< li> < your href=" http: //www. freewebsitetemplates. com/" > < span> Blog< /span> < /a> < /li>
< li> < your href=" http: //www. freewebsitetemplates. com/" > < span> Around the Road< /span> < /a> < /li>
< li> < your href=" http: //www. freewebsitetemplates. com/" > < span> Phone Me< /span> < /a> < /li>
< /ul>< /div>
< div id=" header_welcome" >
< h3> < /h3>< div id=" welcome_text" >
< p> Media< /a> < /p>
< p>
< /p>< /div>
< /div>
< /div>
< /div><! -- Ending of Page Header -->
<! -- Start off of Left Sidebar -->
< div id=" left_sidebar" >
<! -- Start off of Latest Information -->
< div class=" box_container" >
< div id=" news" >< h2> < span> Most up-to-da