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