Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    I added a light box gallery to my php page here (the music player is set to auto so turn your speakers down):

    http://www.searchsites.ms11.net/media.php

    I'm trying to get the small thumbnail plant pic under the music player moved to the immediate right but the css is making me crazy and I can't think straight.

    Codes for the css and the php page are below:

    CSS

    HTML Code:
    * {
    	margin: 0px;
    	padding: 0px;
    }
    
    body {
    	padding: 16px 0px 10px;
    	background: url('http://www.cutetweet.com/wp-content/uploads/2009/03/twitter-background-free-01.png'); #5f92d2 repeat-x 0% 0%;
    	color: #000;
    	font-family: tahoma, arial, sans-serif;
    	font-size: 13px;
    	text-align: center;
    }
    
    box {
    
    float: right;
    }
    
    a {
    	color: #fff;
    	text-decoration: underline;
    }
    
    a:hover {
    	color: #bfd8f6;
    }
    
    span {
    	display: none;
    }
    
    img {
    	border: none;
    }
    
    ul {
    	list-style-type: none;
            ;
    }
    
    li {
    	list-style-type: none;
    }
    
    p {
    	margin: 10px 0px 5px;
    	text-align: justify;
    	line-height: 14px;
    }
    
    .clearthis {
    	margin : 0px;
    	height : 1px;
    	clear : both;
    	float : none;
    	font-size : 1px;
    	line-height : 0px;
    	overflow : hidden;
    }
    
    input {
    	padding-left: 2px;
    	background-color: #eff3f7;
    	border: 2px solid #eff3f7;
    	color: #537caf;
    	font-family: tahoma, arial, sans-serif;
    	font-size: 10px;
    }
    
    
    
    #container {
    	margin: 0px auto;
    	width: 768px;
    }
    
    
    /* Page Header */
    
    #header_container {
    	margin-bottom: 12px;
    	border: 1px solid #fff;
    	background: url('images/header_background.jpg') repeat-x 0px 0px;
            filter:alpha(opacity=20);
        -moz-opacity:0.8;opacity:0.8;
            font-family: cursive, tahoma, arial, sans-serif;
            
    }
    
    #page_header {
    	width: 766px;
    	height: 187px;
    	background: url('images/lisa.png') no-repeat 10px 4px;
    	overflow: hidden;
            
           
            
            
            
    }
    
    
    /* Page Header : Company Name & Logo */
    
    #header_company {
    	margin-top: 2px;
    	width: 585px;
    	height: 35px;
    	float: left;
    	background: url('images/company_logo.gif') no-repeat 137px 0px;
    	text-align: left;
    }
    
    #header_company h1 {
    	background: url('images/company_name.gif') no-repeat 160px 0px;
    	width: 585px;
    	height: 35px;
    }
    
    
    /* Page Header : Welcome Note */
    
    #header_welcome {
    	padding-left: 142px;
    	float: left;
    	text-align: justify;
    }
    
    #header_welcome h3 {
    	padding: 3px 0px 0px;
    	font-size: 14px;
    }
    
    #header_welcome p {
    	margin-top: 7px;
    }
    
    #header_welcome #welcome_text {
    	width: 447px;
            font-weight: bold;
            font-size: 13px;
            font-style: arial, verdana;
            color: #000;
    }
    
    /* Page Header : Menu */
    
    #header_menu {
    	padding-top: 25px;
    	padding-right: 29px;
    	float: right;
    }
    
    #header_menu li {
    	margin-bottom: 2px;
    	width: 116px;
    	border: 1px solid #dee8f5;
    	text-align: left;
    	clear: both;
    	float: center;
    }
    
    #header_menu li a {
    	display: block;
    	width: 116px;
    	height: 20px;
    	color: #e3ecf8;
    	background-color: #3d6290;
    	text-decoration: none;
    	font-weight: bold;
    	overflow: hidden;
    	line-height: 10px;
    }
    
    #header_menu li a span {
    	display: block;
    	padding-top: 4px;
    	padding-left: 31px;
    }
    
    #header_menu li a:hover {
    	color: #fff;
    	background-color: #2e4a6c;
    }
    
    
    /* Left Sidebar */
    
    #left_sidebar {
    	width: 178px;
    	float: left;
    }
    
    #left_sidebar .box_container {
    	margin-bottom: 11px;
    	border: 1px solid #fff;
    	background-color: #537caf;
    }
    
    
    /* Left Sidebar : User Login */
    
    #userlogin {
    	padding: 7px 8px 11px 12px;
    	color: #f1f5f9;
    	font-weight: bold;
    	text-align: left;
    }
    
    #userlogin h2 {
    	width: 69px;
    	height: 15px;
    	background: url('images/userlogin_title.gi') no-repeat -2px 0px;
    }
    
    #userlogin form {
    	padding-top: 5px;
    }
    
    #userlogin .form_field {
    	padding-left: 1px;
    	padding-top: 7px;
    	width: 155px;
    	float: none;
    	clear: both;
    	text-align: right;
    }
    
    #userlogin form strong {
    	padding-top: 1px;
    	display: block;
    	width: 50px;
    	height: 13px;
    	float: left;
    	text-align: left;
    }
    
    #userlogin form input {
    	width: 93px;
    	float: right;
    }
    
    #userlogin form input.button {
    	padding: 0px;
    	width: 55px;
    	height: 15px;
    	border: none;
    	float: none;
    }
    
    #userlogin #link-password {
    	padding-top: 5px;
    }
    
    #userlogin #link-password a {
    	color: #eef3f9;
    }
    
    #userlogin #link-password a:hover {
    	color: #bfd8f6;
    }
    
    
    /* Left Sidebar : Latest News */
    
    #news {
    	padding: 10px 17px 10px 12px;
    	text-align: left;
    }
    
    #news h2 {
    	width: 76px;
    	height: 19px;
    	background: url('images/news_title.gif') no-repeat 0px 0px;
    }
    
    #news h4 {
    	padding-top: 6px;
    	font-size: 10px;	
    	font-weight: bold;
    }
    
    #news p {
    	margin-top: 5px;
    	margin-bottom: 6px;
    	line-height: 12px;
    }
    
    #news .link-more {
    	text-align: right;
    	font-weight: bold;
    }
    
    
    /* Main Content */
    
    #maincontent_container {
    	border-top : 1px solid #d5dfec;
    	border-left : 1px solid #d5dfec;
    	float: right;
    	text-align: left;
    }
    
    #maincontent {
    	margin: 7px 0px 0px 16px;
    	width: 561px;
    }
    
    #maincontent_top {
    	margin-bottom: 11px;
    	width: 561px;
    	background: url('images/maincontent_verticaldiv.gif') repeat-y 310px 5px;
    }
    
    
    /* How We Started */
    
    #started_container {
    	width: 313px;
    	float: left;
    }
    
    #started {
    	padding-top: 2px;
    	width: 294px;
    }
    
    #started h2 {
    	width: 96px;
    	height: 14px;
    	background: url('images/started_title.gif') no-repeat 0px 0px;
    }
    
    
    /* Repairing */
    
    #right_container {
    	width: 247px;
    height: 500px;
    	float: left;
    	text-align: left;
    }  
    
    #repairing {
    	margin-left: auto;
    	margin-right: 0px;
    	padding-bottom: 5px;
    	width: 238px;
    	float: right;
            background: url('images/bluewall.png') no-repeat 0px 5px;
            border: 0px solid #fff;
         
      }
    
    
    
    
    }
    
    #repairing h2 {
    	width: 125px;
    	height: 19px;
    	background: url('images/repairing_title.gif') no-repeat 0px 4px;
    }
    
    #repairing p {
    	margin-top: 6px;
    }
    
    
    /* Get Special Offer */
    
    #offer_container {
    	margin-left: auto;
    	border: 1px solid #fff;
    	background-color: #436da1;
    	float: right;
    }
    
    #offer {
    	margin: 5px 17px 4px 10px;
    	width: 205px;
    }
    
    #offer h2 {
    	width: 120px;
    	height: 22px;
    	background: url('images/offer_title.gif') no-repeat -1px 0px;
    }
    
    #offer p {
    	margin-top: 1px;
    }
    
    #offer .link-go {
    	text-align: right;
    }
    
    #offer .link-go a {
    	margin-left: auto;
    	display: block;
    	width: 34px;
    	height: 13px;
    	background: url('images/offer_go.gif') no-repeat 0px 0px;
    }
    
    
    /* Featured Products */
    
    #featured_container {
    	border: 1px solid #fff;
    	background-color: #537caf;
    	float: left;
            
    }
    
    #featured {
    	margin: 2px 5px;
    	width: 548px;
    }
    
    #featured h2 {
    	width: 111px;
    	height: 20px;
    	background: url('images/featured_title.gi') no-repeat 0px 0px;
    }
    
    #featured_products ul {
    	padding-bottom: 2px;
    	width: 498px;
    }
    
    #featured_products li {
    	margin: 6px 21px 10px 1px;
    	float: left;
    }
    
    #featured_products li.end {
    	margin-right: 0px;
    }
    
    #featured_products li a {
    	display: block;
    	width: 107px;
    	height: 84px;
    	background-color: #fff;
    	overflow: hidden;
    }
    
    #featured_products li a img {
    	margin: 1px;
    }
    
    #featured_products li h4 {
    	padding-top: 3px;
    	text-align: center;
    	font-size: 10px;
    	font-weight: bold;
    }
    
    .featured_nav {
    	padding-left: 3px;
    	padding-right: 9px;
    	float: left;
    	font-weight: bold;
    }
    
    .featured_nav a {
    	text-decoration: none;
    }
    
    #featured .link-more {
    	padding-right: 3px;
    	font-weight: bold;
    	float: right;
    }
    
    
    /* Page Footer */
    
    #page_footer {
    	margin: 5px;
    	width: 567px;
    	float: right;
    	text-align: center;
    	font-size: 11px;
    }
    PHP

    HTML Code:
    <!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=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    
    
    
    <title>Gutarist / Vocalist</title>
    
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
     <!-- Location of javascript. -->
    <script language="javascript" type="text/javascript" src="swfobject.js" ></script>
    
    <link 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.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    
    
    </head>
    
    <body>
    
    <div id="container">
    
    	<!-- Start of Page Header -->
    
    	<div id="header_container">
    	<div id="page_header">
    
    		<div id="header_company">
    		<h1><span>Title goes here</span></h1>
    		</div>
    
    		<div id="header_menu">
    
    			<ul>
    			<li><a href="http://www.searchsites.ms11.net/index.htm"><span>Home</span></a></li>
    			<li><a href="http://www.searchsites.ms11.net/bio.html"><span>Lisa's Bio</span></a></li>
    			<li><a href="http://www.freewebsitetemplates.com/"><span>Media</span></a></li>
    			<li><a href="http://www.freewebsitetemplates.com/"><span>Blog</span></a></li>
    			<li><a href="http://www.freewebsitetemplates.com/"><span>On The Road</span></a></li>
                            <li><a href="http://www.freewebsitetemplates.com/"><span>Contact 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>
    
    	<!-- End of Page Header -->
    
    
    	<!-- Start of Left Sidebar -->
    
    	<div id="left_sidebar">
    
    		
    
    
    		<!-- Start of Latest News -->
    
    		<div class="box_container">
    		<div id="news">
    
    			<h2><span>Latest News</span></h2>
    
    <h4>
    Nov 09, 2005
    </h4>
    
    <p>Check out Lisa's <a href="http://www.myspace.com/lisaargentieri">MySpace Page</a>.</p>
    				
    
    
    
    
    
    
    			
    
    			<div class="clearthis">&nbsp;</div>
    		</div>
    		</div>
    
    		<!-- End of Latest News -->
    
    
    <div class="box_container">
    		<div id="news">
    
    			<h2><span></span></h2>
    
    <h4>Lisa's Links
    
    </h4>
    
    <a href="www.google.com">Example Link</a><br>
    <a href="www.google.com">Example Link</a><br>
    <a href="www.google.com">Example Link</a><br>
    <a href="www.google.com">Example Link</a><br>
    <a href="www.google.com">Example Link</a><br>
    <a href="www.google.com">Example Link</a><br>
    <a href="www.google.com">Example Link</a><br>
    <a href="www.google.com">Example Link</a><br>
    <a href="www.google.com">Example Link</a><br>
    
      
    
    
    <h4>
    
    </h4>
    
    
    
    			
    
    			
    		</div>
    		</div>
    
    		<!-- End of Latest News -->
    
    
    	</div>
    
    	<!-- End of Left Sidebar -->
    
    
    	<!-- Start of Main Content Area -->
    
    <div id="maincontent_container">
    	<div id="maincontent">
    
    
    		<div id="maincontent_top">
    
    			<!-- Start of How We Started -->
    
    			<div id="started_container">
    			<div id="started">
    
    				<!-- Div that contains player. -->
    <div id="player">
    <h1>No flash player!</h1>
    <p>It looks like you don't have flash player installed. <a href="http://www.macromedia.com/go/getflashplayer" >Click here</a> to go to Macromedia download page.</p>
    
    
    <p><!-- Script that embeds player. -->
    <script language="javascript" type="text/javascript">
    var so = new SWFObject("flashmp3player.swf", "player", "290", "247", "9"); // Location of swf file. You can change player width and height here (using pixels or percents).
    so.addParam("quality","high");
    so.addVariable("content_path","mp3"); // Location of a folder with mp3 files (relative to php script).
    so.addVariable("color_path","default.xml"); // Location of xml file with color settings.
    so.addVariable("script_path","flashmp3player.php"); // Location of php script.
    so.write("player");
    </script></div>
    
    <div id="box"><a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a></div>
    	
    				
    				
    
    			
    
    			<!-- End of How We Started --></div>
    
    
    			
    
    			
    
    		</div>
    
    
    		
    
    
    	</div>
    	</div>
    
    	<!-- End of Main Content Area -->
    
    
    	<!-- Start of Page Footer -->
    
    	<div id="page_footer">
    
    	Copyright 2009 - Lisa A
    
    	</div>
    
    	<!-- End of Page Footer -->
    
    
    	<div class="clearthis">&nbsp;</div>
    
    </div>
    
    </body>
    </html>

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    i think you may get faster results if you post just the code related to the image in question. but in the mean time put a border-style: solid; on the containing div and on the image to make sure you have room to move it or if it has margins that are preventing it from moving. if all is well try the float: left; or float: right; .

    while($get_it !== true){ continue; }

  4. #3
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    Quote Originally Posted by Dorky
    i think you may get faster results if you post just the code related to the image in question. but in the mean time put a border-style: solid; on the containing div and on the image to make sure you have room to move it or if it has margins that are preventing it from moving. if all is well try the float: left; or float: right; .
    you're a freakin' genius! just saw your post and fixed it in 2.2 seconds!

  5. #4
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    cool man

    while($get_it !== true){ continue; }

  6. #5
    Junior Member
    Join Date
    Jul 2009
    Posts
    14
    Member #
    19332
    yep i too get some good tips from this thread.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:09 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com