aligning an image problem, plz help

ukscotth · February 2, 2011

Hi,

Im having troubles getting the seal image on the bottom left of this page aligned properly : http://www.croota.us/

I need to get it lined up with the image to the right of it and the social networking buttons but I cant seem to do it

The site runs off of shopify and heres the code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://opengraphprotocol.org/schema/"
      xmlns:fb="http://www.facebook.com/2008/fbml" >
<!-- 
Vanity Shopify theme by ShopifyConcierge: http://www.shopifyconcierge.com

Revision: 20101219
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <META name="y_key" content="edb482cb10c34907" />
        <meta name="msvalidate.01" content="E646736C5F491FD3361144773F6AD421" />
        <meta property="fb:page_id" content="144431935613347" />
        <meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="Shopify Concierge" />

<link rel="shortcut icon" href="{{ 'mainicon.ico' | asset_url }}" /> 

{% comment %}The 'metadata' snippet sets up title, description and facebook properties depending on template{% endcomment %}
{% include 'metadata' %}

        {{ 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' | script_tag }}
        {{ "http://grapevinereviews.com/assets/gv.js" | script_tag }}
        {{ "http://grapevinereviews.com/assets/gv.css" | stylesheet_tag }} 
{{ 'reset.css' | asset_url | stylesheet_tag }}
{{ 'styles.css' | asset_url | stylesheet_tag }}
<!--[if IE]>
{{ 'ie.css' | asset_url | stylesheet_tag }}
<![endif]-->
<!--[if lt IE 8]>
<style>.wraptocenter span {display: inline-block; height: 100%;}</style>
<![endif]-->

{% comment %}Full version of jQuery Tools that includes jQuery{% endcomment %}
{{ 'http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js' | script_tag }}
{{ 'jquery.text-overflow.js' | asset_url | script_tag }}
{% if template == 'product' %}{{ 'option_selection.js' | shopify_asset_url | script_tag }}{% endif %}
<!--[if lt IE 8]>
<script type="text/javascript">var IE7_PNG_SUFFIX = ".png";</script>
{{ 'http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js' | script_tag }}
{{ 'http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7-squish.js' | script_tag }}
<![endif]-->

{{ content_for_header }}

       
</head>


<body id="{{ template | handleize }}">
<div id="header" class="clearfix">
	{% if settings.use_logo_image %}
		<a href="/" title="{{ shop.name }} Home"><img id="logo-img" src="{{ 'logo.PNG' | asset_url }}" alt="{{shop.name}}" /></a>
	{% else%}
		<h1 id="logo"><a href="/" title="{{ shop.name }} Home">{{shop.name}}</a></h1>
	{% endif %}
	<div id="search-block">
		<ul class="clearfix">
			{% if linklists["eyebrow-menu"].links.size > 0 %}
				{% for link in linklists["eyebrow-menu"].links %}
					<li><a href="{{ link.url }}">{{ link.title | escape }}</a></li>
				{% endfor %}
			{% else %}
				<li><a href="/pages/contact">CONTACT</a></li>
				<li><a href="/pages/policies">POLICIES</a></li>

			{% endif %}
			<li class="last">
				<a id="eyebrow-cart" href="/cart">VIEW CART {% if cart.item_count > 0 %}({{ cart.item_count }} {{ cart.item_count | pluralize: 'item', 'items' }}){% endif %}</a>
			</li>
		</ul>
		<form method="get" action="/search">
			<fieldset>
				<input id="search-input" type="text" value="{% if template == 'search' %}{{ search.terms | escape }}{% endif %}" name="q" />
				<input id="search-button" type="submit" class="small awesome" value="Search" />
			</fieldset>
		</form>
	</div>
</div>

{% include 'main-menu' %}

<div id="content" class="clearfix">
	{{ content_for_layout }}
</div>
<div id="footer" class="clearfix">
	{% for widget in (1..3) %}
		{% capture setting %}footer_widget{{ widget }}{% endcapture %}
		<div id="widget{{ widget }}" class="{{ settings[setting] }}">
		{% case settings[setting] %}
			{% when 'nav' %}
				{% include 'navigation-widget' %}
			{% when 'contact' %}
				{% include 'contact-widget' %}
			{% when 'latest-news' %}
				{% include 'latest-news-widget' %}
			{% when 'sign-up' %}
				{% include 'sign-up-form-widget' %}
			{% when 'testimonials' %}
				{% include 'testimonials-widget' %}
		{% endcase %}
		</div>
	{% endfor %}
</div>
<div id="bottom" >



	{% if (settings.social_facebook != '') or (settings.social_twitter != '') %}
	<ul class="social">
		{% if settings.social_facebook != '' %}<li>
			<a href="{{ settings.social_facebook }}" title="Join {{ shop.name }} on Facebook">{{ 'facebook_32.png' | asset_url | img_tag:'Join us on Facebook' }}</a>
		</li>{% endif %}
		{% if settings.social_twitter != '' %}<li>
			<a href="http://twitter.com/{{ settings.social_twitter }}" title="Follow {{ shop.name }} on Twitter">{{ 'twitter_32.png' | asset_url | img_tag:'Follow us on Twitter' }}</a>
		</li>{% endif %}
                      {% if settings.social_rss != '' %}<li>  
                        <a href="http://www.croota.us/blogs/news.atom/{{ settings.social_rss }}" title="Follow {{ shop.name }} on Feedburner">{{ 'rss_32.png' | asset_url | img_tag:'RSS Feed' }}</a>
		</li>{% endif %}
	</ul>		 



<img src="http://www.impact25.com/seal.jpg" align="left" alt="test"><img src="http://cdn.shopify.com/s/files/1/0062/9712/assets/icons-payment.jpg?1293815841" align="middle" alt="BUY with VISA, MC, AMEX, PayPal & Google Checkout" />



<br />
<br />


	<p>© {{ "now" | date: "%Y" }} {{ shop.name }}. All Rights Reserved. All prices {{ shop.currency }}.</p>


{% endif %}
</div>
<script type="text/javascript">
// <![CDATA[ 
	jQuery(document).ready(function($) {
		$.tools.overlay.conf.effect = "apple";
		$(".ellipsis").ellipsis(true);
		$('#main-menu li').mouseenter(function() {
			$(this).addClass('jshover');
		}).mouseleave(function(){
			$(this).removeClass('jshover');
		});

		// find first menu href that matches the current page
		var menu_a = $(".main-menu a[href='" + location.pathname + "']:eq(0)");
		if (menu_a.length == 0) {
			{% if collection %} // might be in a product page, check for a collection
			menu_a = $(".main-menu a[href='{{ collection.url }}']:eq(0)");
			{% elsif blog %}
			menu_a = $(".main-menu a[href='{{ blog.url }}']:eq(0)");
			{% endif %}
		}

		menu_a.parent().addClass('active');
		$(".sub-menu .active").parent().parent().addClass('active');
	});
// ]]>
</script> 

      
</body>
</html>

Can anyone please help ?

Thanks,

Scott

denno020 · February 3, 2011

I had a play around with your CSS, and I've got it to line up. Is this the best way? Probably not, but I get them displaying all across the same line on the screen.

The part of the CSS that I edited (in styles.css), was

#bottom ul.social{
  float: right;
  list-style: none outside none;
  margin-bottom: 20px;
  margin-top: -7px;              <-- obviously added this line here.
}

To the naked eye, this looks about lined up, but play with that value, it could be -8 or -6 that is needed.

I guess that's a simple way to fix your problem

Denno

Sign In

aligning an image problem, plz help

Recommended Posts

ukscotth

Link to comment

Share on other sites

denno020

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information