[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

html css beginner need help

Posted on 2012-08-18
1
Medium Priority
?
495 Views
Last Modified: 2012-09-01
<div id="col-main">

  <div id="product" class="clearfix content">

    <div id="product-information">

      <p id="add-to-cart-msg"></p>

      <div id="product-header" class="diagonal-divider clearfix">

        <div id="product-header-title">
          <h1 id="product-title">{{ product.title }}</h1>
          

        
          {% if settings.show_vendor %}<h2 id="product-vendor">{{ product.vendor | link_to_vendor }}</h2>{% endif %}
        </div>


        {% if product.available %}
          <form action="/cart/add" method="post" class="variants" id="product-actions">
            <div class="options clearfix">  

              <div class="variants-wrapper clearfix {% if product.variants.size == 1 %}visuallyhidden{% endif %}"> 
                <select id="product-select" name="id">
                  {% for variant in product.variants %}
                  
                  <option value="{{ variant.id }}">{{ variant.title | escape }} - {{ variant.price | money }}</option>
                  {% endfor %}
                </select>
              </div>            
                
              <div id="purchase">
                <p class="price"></p>                                 
                <input class="btn" type="submit" name="add" id="add-to-cart" value="Add to Cart" />
              </div>


            </div><!-- /.options -->
          </form>

        {% else %}
      

    <div id="product-actions" class="sold-out">
            <div id="purchase">
              <p class="price">Pre Order.</p>      
            </div>
          </div>      
        {% endif %}
      </div><!-- /#product-header -->

      
      <div class="description">
        {{ product.description }}
        {% include 'WANT' %} {% include 'social-sharing' %} 
        <div id=”issw”></div>
        
      </div>  
      
       

    </div><!-- /#product-information -->
    
    
    <div id="product-gallery"{% if settings.main_image_display == 'Zoom-in' %} class="zoom-in"{% endif %}>

      <div id="active-wrapper">
        {% if settings.main_image_display == 'Lightbox' %}
        <a href="{{ product.featured_image | product_img_url: 'original' }}" title="{{ product.featured_image.alt | escape }}" rel="fancybox">
        {% endif %}     
          <img style="max-width:303px" src="{{ product.featured_image | product_img_url: 'large' }}" alt="{{ product.title | escape }}" id="large-thumb" />
        {% if settings.main_image_display == 'Lightbox' %}
        
        </a>
        {% endif %}
        <div class="gvproduct" data-id="{{ product.id}}"></div>
      </div>
      


      <ul id="thumbs" {% if product.images.size == 1 %}class="visuallyhidden"{% endif %}>
        {% for image in product.images %}
        {% unless forloop.first and settings.main_image_display == 'Lightbox' %}
        <li>
          <a{% if settings.main_image_display == 'Lightbox' %} rel="fancybox"{% endif %} class="gallery" href="{{ image | product_img_url: 'original' }}" title="{{ image.alt | escape }}">
            <img src="{{ image | product_img_url: 'thumb' }}" alt="{{ image.alt | escape }}" />
          </a>
        </li>
        {% endunless %}
        {% endfor %}
        <div class="gvproduct" data-id="{{ product.id}}"></div>
      </ul>
      
    </div><!-- /#product-gallery -->

  </div><!-- /#product -->

  {% if settings.productspg_related_products %}
  
    {% include 'related-products' %}

  {% elsif settings.productspg_featured_collection != blank %}

    {% assign collection = collections[settings.productspg_featured_collection] %}
    {% assign products   = collection.products %}

    {% if products.size > 0 %}
      <section class="diagonal-divider clearfix">

        {% unless settings.productspg_featured_collection_heading == blank %}
        <header class="section-details clearfix">
          <h1 class="section-title">{{ settings.productspg_featured_collection_heading | link_to: collection.url }}</h1>
        </header> 
        {% endunless %}

        <ul class="product-grid" id="secondary-grid">
          {% for product in products limit: settings.productspg_featured_limit %}
          <li class="{% cycle '', '', '', 'last-in-row' %}">
            {% include 'product-grid-item' %}
          </li>
          {% endfor %}
        </ul> 
        

      </section>
    {% endif %}

  {% endif %}

</div><!-- /#col-main -->

Open in new window


after i changed the script, the css style, page design is not how i want to be,

below the original script
i have attached 2 pics how the page i want to be, and how the page is after i copy new script

<div id="col-main">

  <div id="product" class="clearfix content">

    <div id="product-information">

      <p id="add-to-cart-msg"></p>

      <div id="product-header" class="diagonal-divider clearfix">

        <div id="product-header-title">
          <h1 id="product-title">{{ product.title }}</h1>
          
          {% if settings.show_vendor %}<h2 id="product-vendor">{{ product.vendor | link_to_vendor }}</h2>{% endif %}
        </div>

<div id="variants">
   <form action="/cart/add" method="post">
      <table width="50%" border="0" class="variantstable">
    <thead>
	   <tr>
	      <th>Select</th>
	      <th>Options</th>
	      <th>Your Price</th>
	      <th>Product Availability</th>
	      <th>Handling time</th>
	   </tr>
	</thead>
	<tbody>
           {% for variant in product.variants %}
	      <tr style="background: {% cycle '#fff', '#eee',%};" >
		{% if variant.available == true %}
	           <th><input type="radio" name="id" value="{{variant.id}}" id="radio_{{variant.id}}" {%if forloop.first%} checked="checked" {%endif%} /></th>
		   <th><label for="radio_{{variant.id}}">{{ variant.title }}</label></th>
		   <th>{{ variant.price | money }}</th>
		      {% if variant.inventory_quantity > 0 %}
			<th>In Stock</th>
			<th>Delivery within 24hrs</th>
		      {% else %}
			<th>On Order</th>
			<th>Delivery 1 to 2 weeks</th>
		      {% endif %}
		{% else %}
		   <th>X</th>
		   <th>{{ variant.title }}</th>
		   <th>{{ variant.price | money }}</th>
		   <th colspan="2">Expected Availability: March 2007</th>
		{% endif %}
	      </tr>
	   {% endfor %}
	</tbody>
     </table>
     {% unless product.available == false %}			
     <div><input type="submit" value="Add to Cart" name="Add" id="add" /></div>
     {% endunless %}
   </form>
 </div>
</div>     
      </div><!-- /#product-header -->
      <div class="description">
        {{ product.description }}
        {% include 'WANT' %} {% include 'social-sharing' %} 
        <div id=”issw”></div>
      
      
    </div><!-- /#product-information -->
    <div id="product-gallery"{% if settings.main_image_display == 'Zoom-in' %} class="zoom-in"{% endif %}>

      <div id="active-wrapper">
        {% if settings.main_image_display == 'Lightbox' %}
        <a href="{{ product.featured_image | product_img_url: 'original' }}" title="{{ product.featured_image.alt | escape }}" rel="fancybox">
        {% endif %}     
          <img style="max-width:303px" src="{{ product.featured_image | product_img_url: 'large' }}" alt="{{ product.title | escape }}" id="large-thumb" />
        {% if settings.main_image_display == 'Lightbox' %}
        
        </a>
        {% endif %}
        
        
        
      </div>  
        <div class="gvproduct" data-id="{{ product.id}}"></div>
      </div>
      


      <ul id="thumbs" {% if product.images.size == 1 %}class="visuallyhidden"{% endif %}>
        {% for image in product.images %}
        {% unless forloop.first and settings.main_image_display == 'Lightbox' %}
        <li>
          <a{% if settings.main_image_display == 'Lightbox' %} rel="fancybox"{% endif %} class="gallery" href="{{ image | product_img_url: 'original' }}" title="{{ image.alt | escape }}">
            <img src="{{ image | product_img_url: 'thumb' }}" alt="{{ image.alt | escape }}" />
          </a>
        </li>
        {% endunless %}
        {% endfor %}
        <div class="gvproduct" data-id="{{ product.id}}"></div>
      </ul>
      
    </div><!-- /#product-gallery -->

  </div><!-- /#product -->

  {% if settings.productspg_related_products %}
  
    {% include 'related-products' %}

  {% elsif settings.productspg_featured_collection != blank %}

    {% assign collection = collections[settings.productspg_featured_collection] %}
    {% assign products   = collection.products %}

    {% if products.size > 0 %}
      <section class="diagonal-divider clearfix">

        {% unless settings.productspg_featured_collection_heading == blank %}
        <header class="section-details clearfix">
          <h1 class="section-title">{{ settings.productspg_featured_collection_heading | link_to: collection.url }}</h1>
        </header> 
        {% endunless %}

        <ul class="product-grid" id="secondary-grid">
          {% for product in products limit: settings.productspg_featured_limit %}
          <li class="{% cycle '', '', '', 'last-in-row' %}">
            {% include 'product-grid-item' %}
          </li>
          {% endfor %}
        </ul> 
        

      </section>
    {% endif %}

  {% endif %}

</div><!-- /#col-main -->

Open in new window

how.png
new.png
0
Comment
Question by:ammadeyy2020
1 Comment
 
LVL 9

Accepted Solution

by:
Erdinç Güngör Çorbacı earned 2000 total points
ID: 38308606
I wish you show us a sample html output (code or link)
without css files its hard to understand layout.

But there are some cascading errors. if second code is the modified one -i'm not sure of that-
try this.

there were some faulty div closings.

<div id="col-main">

  <div id="product" class="clearfix content">

    <div id="product-information">

      <p id="add-to-cart-msg"></p>

      <div id="product-header" class="diagonal-divider clearfix">

        <div id="product-header-title">
          <h1 id="product-title">{{ product.title }}</h1>
          
          {% if settings.show_vendor %}<h2 id="product-vendor">{{ product.vendor | link_to_vendor }}</h2>{% endif %}
        </div>

<div id="variants">
   <form action="/cart/add" method="post">
      <table width="50%" border="0" class="variantstable">
    <thead>
	   <tr>
	      <th>Select</th>
	      <th>Options</th>
	      <th>Your Price</th>
	      <th>Product Availability</th>
	      <th>Handling time</th>
	   </tr>
	</thead>
	<tbody>
           {% for variant in product.variants %}
	      <tr style="background: {% cycle '#fff', '#eee',%};" >
		{% if variant.available == true %}
	           <th><input type="radio" name="id" value="{{variant.id}}" id="radio_{{variant.id}}" {%if forloop.first%} checked="checked" {%endif%} /></th>
		   <th><label for="radio_{{variant.id}}">{{ variant.title }}</label></th>
		   <th>{{ variant.price | money }}</th>
		      {% if variant.inventory_quantity > 0 %}
			<th>In Stock</th>
			<th>Delivery within 24hrs</th>
		      {% else %}
			<th>On Order</th>
			<th>Delivery 1 to 2 weeks</th>
		      {% endif %}
		{% else %}
		   <th>X</th>
		   <th>{{ variant.title }}</th>
		   <th>{{ variant.price | money }}</th>
		   <th colspan="2">Expected Availability: March 2007</th>
		{% endif %}
	      </tr>
	   {% endfor %}
	</tbody>
     </table>
     {% unless product.available == false %}			
     <div><input type="submit" value="Add to Cart" name="Add" id="add" /></div>
     {% endunless %}
   </form>
 </div>
    
      </div><!-- /#product-header -->
      <div class="description">
        {{ product.description }}
        {% include 'WANT' %} {% include 'social-sharing' %} 
        <div id=”issw”></div>
      
      
    </div><!-- /#product-information -->
    <div id="product-gallery"{% if settings.main_image_display == 'Zoom-in' %} class="zoom-in"{% endif %}>

      <div id="active-wrapper">
        {% if settings.main_image_display == 'Lightbox' %}
        <a href="{{ product.featured_image | product_img_url: 'original' }}" title="{{ product.featured_image.alt | escape }}" rel="fancybox">
        {% endif %}     
          <img style="max-width:303px" src="{{ product.featured_image | product_img_url: 'large' }}" alt="{{ product.title | escape }}" id="large-thumb" />
        {% if settings.main_image_display == 'Lightbox' %}
        
        </a>
        {% endif %}
      </div>  
        <div class="gvproduct" data-id="{{ product.id}}"></div>
      </div>
      


      <ul id="thumbs" {% if product.images.size == 1 %}class="visuallyhidden"{% endif %}>
        {% for image in product.images %}
        {% unless forloop.first and settings.main_image_display == 'Lightbox' %}
        <li>
          <a{% if settings.main_image_display == 'Lightbox' %} rel="fancybox"{% endif %} class="gallery" href="{{ image | product_img_url: 'original' }}" title="{{ image.alt | escape }}">
            <img src="{{ image | product_img_url: 'thumb' }}" alt="{{ image.alt | escape }}" />
          </a>
        </li>
        {% endunless %}
        {% endfor %}
        <div class="gvproduct" data-id="{{ product.id}}"></div>
      </ul>
      
    </div><!-- /#product-gallery -->

  </div><!-- /#product -->

  {% if settings.productspg_related_products %}
  
    {% include 'related-products' %}

  {% elsif settings.productspg_featured_collection != blank %}

    {% assign collection = collections[settings.productspg_featured_collection] %}
    {% assign products   = collection.products %}

    {% if products.size > 0 %}
      <section class="diagonal-divider clearfix">

        {% unless settings.productspg_featured_collection_heading == blank %}
        <header class="section-details clearfix">
          <h1 class="section-title">{{ settings.productspg_featured_collection_heading | link_to: collection.url }}</h1>
        </header> 
        {% endunless %}

        <ul class="product-grid" id="secondary-grid">
          {% for product in products limit: settings.productspg_featured_limit %}
          <li class="{% cycle '', '', '', 'last-in-row' %}">
            {% include 'product-grid-item' %}
          </li>
          {% endfor %}
        </ul> 
        

      </section>
    {% endif %}

  {% endif %}

</div><!-- /#col-main -->

Open in new window

0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question