12 Replies - 811 Views - Last Post: 29 August 2013 - 02:25 PM

#1 inphiniti  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 23-January 11

CSS - DIVs

Posted 29 August 2013 - 07:08 AM

I am Having some issues with my Div's. I Have 4 Divs (see picture)Posted Image problem is when div2's height changes it effects div 3. I would like to have div 3 positioned under div1 but the picture size in div1 changes from product to product is there anyway to relate the vertical position in div3 relative to div1 without having div 2's height override it? Do i do this with z-index? Any help greatly appreciated.

Is This A Good Question/Topic? 0
  • +

Replies To: CSS - DIVs

#2 DarenR  Icon User is offline

  • D.I.C Lover

Reputation: 498
  • View blog
  • Posts: 3,317
  • Joined: 12-January 10

Re: CSS - DIVs

Posted 29 August 2013 - 07:10 AM

you need to show your code for help

put it in [code] tags
Was This Post Helpful? 0
  • +
  • -

#3 inphiniti  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 23-January 11

Re: CSS - DIVs

Posted 29 August 2013 - 07:11 AM

and here it is when div3's height is larger
Posted Image
Was This Post Helpful? 0
  • +
  • -

#4 inphiniti  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 23-January 11

Re: CSS - DIVs

Posted 29 August 2013 - 07:29 AM

Div1
#ProductImage {
text-align: center;
float: left;
width: 250px;
text-align: center;
margin-left: 10px;
margin-right: 30px;
padding-right: 5px;
margin-bottom: 10px;
margin-top: 20px;}


Div2
#ProductDescription {
margin-top: 10px;
margin-left: 300px;
z-index: 2;
padding-right: 25px;
}


Div3
#SKUTable2 {
margin-top: 20px;
clear: left;
float: left;
width: 250px;
}

This post has been edited by andrewsw: 29 August 2013 - 10:22 AM
Reason for edit:: Corrected CODE tags

Was This Post Helpful? 0
  • +
  • -

#5 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1004
  • View blog
  • Posts: 3,562
  • Joined: 05-June 09

Re: CSS - DIVs

Posted 29 August 2013 - 09:58 AM

Your easiest way will be to have a container at the left and a container at the right, containing 2 divs on top of each other.
Was This Post Helpful? 1
  • +
  • -

#6 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3834
  • View blog
  • Posts: 13,581
  • Joined: 12-December 12

Re: CSS - DIVs

Posted 29 August 2013 - 10:34 AM

Investigate "css 2 column layout". Here is one of many results.

You might consider the left-side a sidebar as it is likely to be much narrower than the main content on the right (I'm assuming) and, I also assume, occupy the full height of the page. Considering it as a sidebar is not essential, but may make it easier to find suitable examples.
Was This Post Helpful? 1
  • +
  • -

#7 inphiniti  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 23-January 11

Re: CSS - DIVs

Posted 29 August 2013 - 12:08 PM

theres other way of doin huh? I thought I would have been able to get away with fixing the z-index of the divs 1 + 3
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3834
  • View blog
  • Posts: 13,581
  • Joined: 12-December 12

Re: CSS - DIVs

Posted 29 August 2013 - 12:14 PM

z-index won't help:

Quote

z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative.


http://coding.smashi...rehensive-look/
Was This Post Helpful? 0
  • +
  • -

#9 inphiniti  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 23-January 11

Re: CSS - DIVs

Posted 29 August 2013 - 12:26 PM

This is my product details page;
details.php

<?php /*?></head>

<body><?php */?>
<div id="Container">
<section class="banner_area">
<div id="Details">
    <?php /*?><?php echo($cartweaver->cartLinks());?><?php */?>
<?php include("cw2/CWIncDetails.php");?>
</div>
</section>
<?php include("footer_withoutproduct.php");?>



Its currently in my container and this is the include CWIncDetails.php....
<?php 
/* 
================================================================
Application Info: 
Cartweaver© 2002 - 2005, All Rights Reserved.
Developer Info: 
	Application Dynamics Inc.
	1560 NE 10th
	East Wenatchee, WA 98802
	Support Info: http://www.cartweaver.com/go/phphelp

Cartweaver Version: 2.4  -  Date: 11/27/2005
================================================================
Name: CWIncDetails.php
Description: 
	This page displays individual products along with all
	of the product's associated SKUs. If a product has only 1 or
	2 Option Groups, then select menus are shown for the customer to
	choose the desired SKUs. If more than 2 Option Groups are available
	for one product, then a crosstab table is displayed with all
	of the SKUs available. Options are handled through the
	CWFunProductOptions include file.
================================================================
*/ 
include("CWLibrary/CWFunProductOptions.php");
/* [ START ] DISPLAY PRODUCT */ 
if($rsCWGetProduct_recordCount != 0) {
	$imageSRC = $imageRoot . $row_rsCWGetProductImage["prdctImage_FileName"];
	$imagePath = expandPath($imageSRC);
?>
<?php /* Check for Weekly Web Specials and display graphic if so */
if ($row_rsCWGetProduct["product_WeeklySpecial"] == 1) { ?>
	<div id="Weekly_special">
		<img src="http://demo.ortho-direct.com/weekly/weekly_special.gif" alt="Weekly Web Special" />
    </div>
<?php } ?>
<?php /* Check for Flyer Specials and display graphic if so (also make sure this is not a web special) */
if ($row_rsCWGetProduct["product_FlyerSpecial"] == 1 && $row_rsCWGetProduct["product_WeeklySpecial"] != 1) { ?>
	<div id="Weekly_special">
		<img src="http://demo.ortho-direct.com/images/specials_flyer_burst.jpg" alt="Special Price" />
    </div>
<?php } ?>
<!-- Display Common Product data -->
<div id="ProductImage">
 <?php if (file_exists($imagePath) && is_file($imagePath)){ ?>
			<img name="prodimgrp" src="<?php echo($imageSRC);?>" alt="<?php echo($row_rsCWGetProduct["product_Name"]);?>"> 
		<?php }?> 
</div>
<div id="ProductDescription">
	<!-- Anchor point for when form is submitted -->
	<a name="skus"></a>
	<div id="Manufacturer">
		<?php 
		$mfg = strtoupper($row_rsCWGetProduct["product_mfg"]);
		if ($mfg == "ORTHODENT") {
			echo('<img src="images/OrthodentLogo.gif" alt="Orthodent" width="100" height="15" />');
		} else if ($mfg == "SELECT DENTAL") {
			echo('<img src="images/SelectLogo.gif" alt="Select Dental" width="100" height="25" />');
		} else if ($mfg == "BLAZER") {
			echo('<img src="images/BlazerLogo.gif" alt="Blazer Products" width="100" height="24" />');
		} else {
			echo($mfg);
		}
		?>
		</div>
	<h1><?php echo($row_rsCWGetProduct["product_Name"]);?></h1>
	<h2><?php echo($row_rsCWGetProduct["product_Subheader"]);?></h2>
	<p><?php echo($row_rsCWGetProduct["product_Description"]);?></p>
</div>
<div id="ProductOptions">
	<?php
	/* WEEKLY SPECIALS */
	/* If Weekly Special and Discount and Regular Price fields are not NULL or 0... */
			if ($row_rsCWGetProduct["product_WeeklySpecial"] == 1 && $row_rsCWGetProduct["product_WeeklySpecialPrice"] != NULL && $row_rsCWGetProduct["product_RegularPrice"] != NULL
				&& $row_rsCWGetProduct["product_WeeklySpecialPrice"] != 0 && $row_rsCWGetProduct["product_RegularPrice"] != 0) {
				echo('<span class="regprice">Reg. ' . cartweaverMoney($row_rsCWGetProduct["product_RegularPrice"]) . '<br></span>
					<span class="webspecialprice">Web Special- ' . cartweaverMoney($row_rsCWGetProduct["product_WeeklySpecialPrice"]) . '</span>');
			}
	/* FLYER SPECIALS */
	/* If Flyer Special and Flyer Discount and Catalog Regular Price fields are not NULL or 0... */
			if ($row_rsCWGetProduct["product_FlyerSpecial"] == 1 && $row_rsCWGetProduct["product_FlyerSpecialPrice"] != NULL && $row_rsCWGetProduct["product_CatalogRegularPrice"] != NULL
				&& $row_rsCWGetProduct["product_FlyerSpecialPrice"] != 0 && $row_rsCWGetProduct["product_CatalogRegularPrice"] != 0 && $row_rsCWGetProduct["product_WeeklySpecial"] != 1) {
				echo('<span class="regprice">Reg. ' . cartweaverMoney($row_rsCWGetProduct["product_CatalogRegularPrice"]) . '<br></span>
					<span class="webspecialprice">Special Price- ' . cartweaverMoney($row_rsCWGetProduct["product_FlyerSpecialPrice"]) . '</span>');
			} else if ($row_rsCWGetProduct["product_FlyerSpecial"] == 1 && $row_rsCWGetProduct["product_FlyerSpecialPrice"] == 0 && $row_rsCWGetProduct["product_CatalogRegularPrice"] == 0 && $row_rsCWGetProduct["product_WeeklySpecial"] != 1) {
				echo('<span class="specialPrice">Special Low Prices!</span>');
			}
	?>
	<!-- [ START ] SKUs DATA TABLE --> 
	<?php 
		if (strtolower($cartweaver->settings->detailsDisplay) != "tables") { 
			include("CWLibrary/CWFunPriceList.php");
			echo(getPriceList($row_rsCWGetProduct["product_ID"], $cartweaver->settings->allowBackOrders, $cartweaver->db));
		} 
	/*  [ START ] ==	ERROR ALERTS and CONFIRMATION NOTICE =========================  */
	if ($cartweaver->getCWError()){
	/* If fields were left blank or in correct data entered, show "Field Alert" */
?>
	<p><span class="errorMessage"><?php foreach($cartweaver->cwError as $key => $value) echo($value);?></span></p> 
	<?php 
	}
	if ($urlResult >= 0) {
	echo("<p><strong>* $urlResult");
		if ($urlResult > 1 or $urlResult == 0) {
			echo(" items ");
		}else{
			echo(" item ");
		}
		echo("added to your cart! * <a href=\"" . $cartweaver->settings->targetGoToCart . "?cartid=" . $_SESSION["CartId"] . "&returnurl=" . $cartweaver->thisPageQS . "\">[Go To Cart]</a></strong></p> ");
	} 

/*  [ END] ==  ERROR ALERTS and CONFIRMATION NOTICE =========================  */
/* ===================== [ BEGIN MULTI SKU DISPLAY ]=========================================== */ 
?>
</div>
<div id="SKUTable2">
<?php
if ($displayUpsell == 1){
 /* If there are upsell products associsted with this Product, display them. */
  if ($rsCWGetupsell_recordCount != 0) { 
		echo('<span class="upsell">');
		if($rsCWGetupsell_recordCount > 1){
			echo("Related Products:");	   
		}else{
			echo("Related Products:");
		}
		   echo("</span><br><br>");
		$rsCWGetupsell_currentRow = 0;
		?> <?php /*?><div id="Related-products"> <?php
		do { ?>
		<div class="upsellimages">
        <?php
		$rsCWGetupsell_currentRow++;
			$upsell_imageSRC = "cw2/assets/product_thumb/" . $row_rsCWGetupsell["prdctImage_FileName"];
			echo("<a href=\"" . $cartweaver->thisPage . "?prodId=" . $row_rsCWGetupsell["upsell_relProdId"] . "\">"); ?>
			<img src="<?php echo($upsell_imageSRC);?>" alt="<?php echo($row_rsCWGetupsell["product_Name"]);?>"></a> <br />
			<?php
		
		  echo("<a href=\"" . $cartweaver->thisPage . "?prodId=" . $row_rsCWGetupsell["upsell_relProdId"] . "\">" . $row_rsCWGetupsell["product_Name"] . "</a>");
		  ?> </div> <?php
		  //if (($rsCWGetupsell_recordCount > 1) && ($rsCWGetupsell_recordCount != $rsCWGetupsell_currentRow)){ echo("<br />");}
	   } while ($row_rsCWGetupsell = $cartweaver->db->db_fetch_assoc($rsCWGetupsell));
	   ?> </div> <?php */?>
	   <section class="widget_area_details">
    	<ul> <?php $flag=0; 
		do { ?>
		<li>
        <div class="picbox">
        <?php				
		$flag++;
		$rsCWGetupsell_currentRow++;				
			$upsell_imageSRC = "cw2/assets/product_thumb/" . $row_rsCWGetupsell["prdctImage_FileName"];
			echo("<a href=\"" . $cartweaver->thisPage . "?prodId=" . $row_rsCWGetupsell["upsell_relProdId"] . "\">"); ?>
			<img src="<?php echo($upsell_imageSRC);?>" alt="<?php echo($row_rsCWGetupsell["product_Name"]);?>"></a> <br />
			<?php
		
		  echo("<a href=\"" . $cartweaver->thisPage . "?prodId=" . $row_rsCWGetupsell["upsell_relProdId"] . "\">" . $row_rsCWGetupsell["product_Name"] . "</a>");
		  
		  ?> </div>
          </li> <?php
		  if($flag==4)
		  	{
		  		break;
			}
		  //if (($rsCWGetupsell_recordCount > 1) && ($rsCWGetupsell_recordCount != $rsCWGetupsell_currentRow)){ echo("<br />");}
	   } while ($row_rsCWGetupsell = $cartweaver->db->db_fetch_assoc($rsCWGetupsell));
	   ?> </ul></section> <?php
	  echo("
    <br /><br />");
 }/* END IF - rsCWGetupsell.RecordCount NEQ 0 */	
}/* END if ($displayUpsell == 1) */
?>

<?php 
/* [ END ] DISPLAY PRODUCT */ 
}else{ 
	echo("<p>No product selected.</p> ");
}
/* End Check for Product ID */ 
?>
</div>
<div id="SKUTable">
<form action="<?php echo($cartweaver->thisPage . "?cartid=" . $_SESSION["CartId"]);?>" method="post" name="addToCart" id="addToCart">
<?php cwProductOptions($productId);?>
	<input name="prodId" type="hidden" value="<?php echo($productId);?>">
	<input name="submit" type="hidden" value="Add to Cart">
	<br />
    
	<!-- <input name="submit" type="image" id="addToCart" value="Add to Cart" class="imageButton" src="/images/add_to_cart.jpg" /> -->
	<!-- <input name="submit" type="submit" class="butAddToCart" value="Add to Cart"> -->
	<input name="imageButton" type="image" id="imageButton" value="imageButton" class="imageButton" src="images/add_to_cart.jpg" />
    
</form>
</div>





the cw2/CWIncDetails.php file is a Cartweaver script... im not the good with php but know enough to get by.... would i have to start taking apart the 'CWIncDetails.php file to put it section by section into the 'details.php' file so I can put it into a Left column / Right Column or is there a way I can just do it in the CWIncDetails.php File?
Was This Post Helpful? 0
  • +
  • -

#10 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3834
  • View blog
  • Posts: 13,581
  • Joined: 12-December 12

Re: CSS - DIVs

Posted 29 August 2013 - 01:47 PM

I can advise you how I would proceed:

  • Ignore PHP.
  • Investigate 2 column css layouts; find one that seems nearest to what I want and whose description seems to fit in with how I want it to behave.
  • Build a sample page - HTML and css only, borrowing images and text from the existing page.
  • If this sample page isn't working out, look at other 2-column approaches.
  • Once I'm happy with the page, plan how I'm going to modify the PHP to create it.

Most of the PHP shouldn't need to change, mainly just the HTML layout - the HTML-tags to use and what class-names to give these elements.

This post has been edited by andrewsw: 29 August 2013 - 01:48 PM

Was This Post Helpful? 1
  • +
  • -

#11 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3834
  • View blog
  • Posts: 13,581
  • Joined: 12-December 12

Re: CSS - DIVs

Posted 29 August 2013 - 01:53 PM

..and, yes, you'll probably need to modify all 3 PHP pages, but you need to take care: the other 2 are likely to be used in a number of other pages.

I would try not to modify the footer at all, unless I really had to.
If you are modifying a particular page or pages, and not the whole site, then I would consider copying CWIncDetails.php.

Sorry to say, but it'll take a bit of planning :)

This post has been edited by andrewsw: 29 August 2013 - 02:00 PM

Was This Post Helpful? 0
  • +
  • -

#12 inphiniti  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 23-January 11

Re: CSS - DIVs

Posted 29 August 2013 - 01:56 PM

yea was afraid of that... thanks for the help and info. though :)
Was This Post Helpful? 0
  • +
  • -

#13 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3834
  • View blog
  • Posts: 13,581
  • Joined: 12-December 12

Re: CSS - DIVs

Posted 29 August 2013 - 02:25 PM

View Postinphiniti, on 29 August 2013 - 08:56 PM, said:

yea was afraid of that... thanks for the help and info. though :)

Well, I suppose you could to try to short-circuit my recommendation, by viewing the (HTML) source for the current page, saving it as a separate page and then use this as your starting point.

It's up to you - good luck!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1