Solved

How do I place a banner on the right side of this page?

Posted on 2013-02-07
7
450 Views
Last Modified: 2013-02-07
I am trying to put a banner on the right side in the brown area above the search box on this page:

http://amycaseycooks.com/cookbooks/

However, nothing I try works. Any help is appreciated.
0
Comment
Question by:Donnie Walker
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 3

Expert Comment

by:Khilu
ID: 38863946
Update  #page-top h1.category-title class in Style.css file.
Add     float: right; property in it

#page-top h1.category-title {
    color: #FFFFFF;
    float: right;
    font-size: 48px;
    font-style: normal;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
}

Open in new window


Hope this will help you
0
 

Author Comment

by:Donnie Walker
ID: 38863970
Want that push the title of the page to the right as well?
0
 
LVL 3

Expert Comment

by:Khilu
ID: 38863993
Given code push the "Cookbook" image to the right.
Please pointing me out the exact Title or location where you want changes.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Donnie Walker
ID: 38864011
see attached image
banner.png
0
 
LVL 3

Accepted Solution

by:
Khilu earned 500 total points
ID: 38864130
Added following HTML in your page.

<div style="float: right;">
 <img src="http://amycaseycooks.com/wp-content/uploads/2012/03/logo.png" />
</div>

Open in new window


after <div id="category-name"> div i have added another div for Banner

Code added on 141 line number.
Hope this will help you

Updated code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Cookbooks | Amy Casey</title>
    <link rel="stylesheet" href="http://amycaseycooks.com/wp-content/themes/MyCuisine-child/style.css"
        type="text/css" media="screen" />
    <link href='http://fonts.googleapis.com/css?family=Goudy+Bookletter+1911' rel='stylesheet'
        type='text/css' />
    <link rel="alternate" type="application/rss+xml" title="Amy Casey RSS Feed" href="http://amycaseycooks.com/feed/" />
    <link rel="alternate" type="application/atom+xml" title="Amy Casey Atom Feed" href="http://amycaseycooks.com/feed/atom/" />
    <link rel="pingback" href="http://amycaseycooks.com/xmlrpc.php" />
    <!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="http://amycaseycooks.com/wp-content/themes/MyCuisine/css/ie6style.css" />
	<script type="text/javascript" src="http://amycaseycooks.com/wp-content/themes/MyCuisine/js/DD_belatedPNG_0.0.8a-min.js"></script>
	<script type="text/javascript">DD_belatedPNG.fix('img#logo, span.overlay, a.zoom-icon, a.more-icon, #menu, #menu-right, #menu-content, ul#top-menu ul, #menu-bar, .footer-widget ul li, span.post-overlay, #content-area, .avatar-overlay, .comment-arrow, .testimonials-item-bottom, #quote, #bottom-shadow, #quote .container');</script>
<![endif]-->
    <!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="http://amycaseycooks.com/wp-content/themes/MyCuisine/css/ie7style.css" />
<![endif]-->
    <!--[if IE 8]>
	<link rel="stylesheet" type="text/css" href="http://amycaseycooks.com/wp-content/themes/MyCuisine/css/ie8style.css" />
<![endif]-->

    <script type="text/javascript">
        document.documentElement.className = 'js';
</script>

    <link rel="alternate" type="application/rss+xml" title="Amy Casey &raquo; Feed" href="http://amycaseycooks.com/feed/" />
    <link rel="alternate" type="application/rss+xml" title="Amy Casey &raquo; Comments Feed"
        href="http://amycaseycooks.com/comments/feed/" />
    <link rel="alternate" type="application/rss+xml" title="Amy Casey &raquo; Cookbooks Comments Feed"
        href="http://amycaseycooks.com/cookbooks/feed/" />
    <meta content="MyCuisine v.2.2" name="generator" />
    <link rel='stylesheet' id='easyrecipe-css' href='http://amycaseycooks.com/wp-content/plugins/easyrecipe/easyrecipe.css?ver=2.2.8'
        type='text/css' media='all' />
    <link rel='stylesheet' id='contact-form-7-css' href='http://amycaseycooks.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.2.1'
        type='text/css' media='all' />
    <link rel='stylesheet' id='et-shortcodes-css-css' href='http://amycaseycooks.com/wp-content/themes/MyCuisine/epanel/shortcodes/shortcodes.css?ver=2.0'
        type='text/css' media='all' />
    <link rel='stylesheet' id='fancybox-css' href='http://amycaseycooks.com/wp-content/themes/MyCuisine/epanel/page_templates/js/fancybox/jquery.fancybox-1.3.4.css?ver=1.3.4'
        type='text/css' media='screen' />
    <link rel='stylesheet' id='et_page_templates-css' href='http://amycaseycooks.com/wp-content/themes/MyCuisine/epanel/page_templates/page_templates.css?ver=1.8'
        type='text/css' media='screen' />
    <style type="text/css">
        </style>

    <script type='text/javascript' src='http://amycaseycooks.com/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>

    <script type='text/javascript' src='http://amycaseycooks.com/wp-content/plugins/easyrecipe/easyrecipe.js?ver=2.2.8'></script>

    <script type='text/javascript' src='http://amycaseycooks.com/wp-includes/js/comment-reply.js?ver=3.4.2'></script>

    <script type='text/javascript' src='http://amycaseycooks.com/wp-content/themes/MyCuisine/epanel/shortcodes/js/et_shortcodes_frontend.js?ver=2.0'></script>

    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://amycaseycooks.com/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://amycaseycooks.com/wp-includes/wlwmanifest.xml" />
    <link rel='prev' title='Writing and Videos' href='http://amycaseycooks.com/food-writing/' />
    <link rel='next' title='Sample Entrees' href='http://amycaseycooks.com/personal-chef-services/sample-entrees/' />
    <meta name="generator" content="WordPress 3.4.2" />
    <link rel='canonical' href='http://amycaseycooks.com/cookbooks/' />
    <meta name="mybigrecipebox" content="off" />
    <!-- used in scripts -->
    <meta name="et_featured_auto_speed" content="8000" />
    <meta name="et_disable_toptier" content="0" />
    <meta name="et_featured_slider_auto" content="1" />
    <meta name="et_cufon" content="1" />
    <link rel="shortcut icon" href="http://amycaseycooks.com/wp-content/uploads/2012/04/favicon1.ico" />
</head>
<body class="page page-id-34 page-parent page-template page-template-page-template-menu-php gecko">
    <div id="page-bg">
        <div id="page-bottom">
            <div id="page-top">
                <div id="main-area">
                    <div class="container">
                        <div class="social">
                            Follow me: <a href="http://www.facebook.com/pages/Amy-Casey-Personal-Chef-and-Food-Writer/376672532354367?ref=tn_tnmn"
                                target="_blank">
                                <img class="socimg" src="http://amycaseycooks.com/wp-content/themes/MyCuisine/images/facebook.png"
                                    width="16" height="21" alt="Follow Amy Casey on Facebook"></a><a href="https://twitter.com/#!/amycaseycooks"
                                        target="_blank"><img class="socimg" src="http://amycaseycooks.com/wp-content/themes/MyCuisine/images/twitter.png"
                                            width="16" height="21" alt="Follow Amy Casey on Twitter"></a></div>
                        <div id="menu-right">
                        </div>
                        <div id="menu-bar">
                            <div id="menu-content" class="clearfix">
                                <a href="http://amycaseycooks.com">
                                    <img src="http://amycaseycooks.com/wp-content/uploads/2012/03/logo.png" alt="MyCuisine Logo"
                                        id="logo" />
                                </a>
                                <ul id="top-menu" class="nav">
                                    <li id="menu-item-42" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-42">
                                        <a href="http://amycaseycooks.com/">Home</a></li>
                                    <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">
                                        <a href="http://amycaseycooks.com/personal-chef-services/">Personal Chef Services</a>
                                        <ul class="sub-menu">
                                            <li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-220">
                                                <a href="http://amycaseycooks.com/personal-chef-services/frequently-asked-questions/">
                                                    Frequently Asked Questions</a></li>
                                            <li id="menu-item-221" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-221">
                                                <a href="http://amycaseycooks.com/personal-chef-services/sample-entrees/">Sample Entrees</a></li>
                                            <li id="menu-item-232" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-232">
                                                <a href="http://amycaseycooks.com/personal-chef-services/portfolio/">Portfolio</a></li>
                                            <li id="menu-item-358" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-358">
                                                <a href="http://amycaseycooks.com/personal-chef-services/testimonials/">Testimonials</a></li>
                                            <li id="menu-item-751" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-751">
                                                <a href="http://amycaseycooks.com/personal-chef-services/personal-chef-consulting/">
                                                    Personal Chef Consulting</a></li>
                                        </ul>
                                    </li>
                                    <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39">
                                        <a href="http://amycaseycooks.com/food-writing/">Writing and Videos</a></li>
                                    <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41">
                                        <a href="http://amycaseycooks.com/bio/">Bio</a></li>
                                    <li id="menu-item-43" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-ancestor current-menu-parent menu-item-43">
                                        <a href="http://amycaseycooks.com/category/recipes/">Recipes</a>
                                        <ul class="sub-menu">
                                            <li id="menu-item-481" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-481">
                                                <a href="http://amycaseycooks.com/category/recipes/">Recipes</a></li>
                                            <li id="menu-item-270" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-34 current_page_item menu-item-270">
                                                <a href="http://amycaseycooks.com/cookbooks/">Cookbooks</a></li>
                                            <li id="menu-item-709" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-709">
                                                <a target="_blank" href="http://www.dinnersforayear.blogspot.com">Dinners for a Year</a></li>
                                            <li id="menu-item-889" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-889">
                                                <a href="http://amycaseycooks.com/cookbooks/buy-the-book/">Buy the Book!</a></li>
                                        </ul>
                                    </li>
                                    <li id="menu-item-564" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-564">
                                        <a href="http://amycaseycooks.com/contact-2/">Contact</a></li>
                                </ul>
                            </div>
                            <!-- end #menu-content-->
                        </div>
                        <!-- end #menu-bar-->
                        <div id="category-name">
                            <h1 class="category-title">
                                Cookbooks</h1>
                            <!-- <div id="book">
    <a href=""><img src="http://www.amycaseycooks.com/wp-content/themes/MyCuisine/images/book.png" height="138" width="382" border="0" alt="Buy the Book!></a> 
    <div> -->
                        </div>
                        <div style="float: right;">
                            <img src="http://amycaseycooks.com/wp-content/uploads/2012/03/logo.png" />
                        </div>
                        <!-- end #category-name -->
                    </div>
                    <!-- end .container -->
                </div>
                <!-- end #main-area -->
            </div>
            <!-- end #page-top -->
        </div>
        <!-- end #page-bottom -->
    </div>
    <!-- end #page-bg -->
    <div id="content-area">
        <div id="breadcrumbs">
            <div class="container clearfix">
                <div id="breadcrumbs-shadow">
                </div>
                <span id="breadcrumbs-text"><a href="http://amycaseycooks.com">Home</a> <span class="raquo">
                    &raquo;</span> Cookbooks </span>
                <div id="search-form">
                    <form method="get" id="searchform" action="http://amycaseycooks.com/">
                    <input type="text" value="Search this website..." name="s" id="searchinput" />
                    <input type="submit" id="searchbutton" value="Search" />
                    </form>
                </div>
                <!-- end #search-form -->
            </div>
            <!-- end .container -->
        </div>
        <!-- end #breadcrumbs -->
        <div class="container fullwidth">
            <div id="content" class="clearfix">
                <div id="left-area">
                    <div class="et_menu_row clearfix">
                        <div class="home-block">
                            <h2 class="category_name">
                                Cookbooks</h2>
                            <div class="et_menu_item">
                                <div class="thumb">
                                    <a href="http://amycaseycooks.com/burgers-with-fresh-tomato-relish/">
                                        <img src="http://amycaseycooks.com/wp-content/uploads/2012/03/burgers-with-fresh-tomato-relish-by-amy-casey-cooks1-117855_56x56.jpg"
                                            class='item-image' alt='Burgers with Fresh Tomato Relish' width='56px' height='56px' />
                                        <span class="overlay"></span></a>
                                </div>
                                <!-- end .thumb -->
                                <h4 class="title">
                                    <a href="http://amycaseycooks.com/burgers-with-fresh-tomato-relish/">Burgers with Fresh
                                        Tomato Relish</a></h4>
                                <p>
                                    I love a good burger! Nothing fancy, just a good...</p>
                            </div>
                            <!-- end .et_menu_item -->
                        </div>
                        <!-- .home-block -->
                    </div>
                    <!-- .et_menu_row -->
                </div>
                <!-- end #left-area -->
            </div>
            <!-- end #content -->
            <div id="bottom-shadow">
            </div>
        </div>
        <!-- end .container -->
    </div>
    <!-- end #content-area -->
    <div id="footer">
        <div class="container">
            <div id="footer-widgets" class="clearfix">
                <div id="customlogowidget-2" class="footer-widget widget_customlogowidget">
                    <p id="footer-logo">
                        <img alt="" src="http://amycaseycooks.com/wp-content/uploads/2012/04/flogo.png" /><span></span></p>
                    <p>
                        Amy Casey personal chef, recipe developer, professional food writer and family food
                        blogger.</p>
                </div>
                <!-- end .footer-widget -->
            </div>
            <!-- end #footer-widgets -->
            <!-- <center><img src="/wp-content/themes/MyCuisine/images/bottom-menu-bg.png"></center> -->
            <div id="footer-bottom" class="clearfix nobg">
                <ul id="bottom-menu" class="menu">
                    <li id="menu-item-33" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-33">
                        <a href="index.php">Home</a></li>
                    <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30">
                        <a href="http://amycaseycooks.com/personal-chef-services/">Personal Chef Services</a></li>
                    <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29">
                        <a href="http://amycaseycooks.com/food-writing/">Writing and Videos</a></li>
                    <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31">
                        <a href="http://amycaseycooks.com/bio/">Bio</a></li>
                    <li id="menu-item-32" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-32">
                        <a href="http://amycaseycooks.com/category/recipes/">Recipes</a></li>
                </ul>
                <p id="copyright">
                    Copyright &copy; 2012 Amy Casey - All Rights Reserved. | Website by <a href="http://www.plumthree.com"
                        target="_blank">PlumThree</a></p>
            </div>
            <!-- end #footer-bottom -->
        </div>
        <!-- end .container -->
    </div>
    <!-- end #footer -->

    <script src="http://amycaseycooks.com/wp-content/themes/MyCuisine/js/cufon-yui.js"
        type="text/javascript"></script>

    <script src="http://amycaseycooks.com/wp-content/themes/MyCuisine/js/League_Gothic_400.font.js"
        type="text/javascript"></script>

    <script src="http://amycaseycooks.com/wp-content/themes/MyCuisine/js/superfish.js"
        type="text/javascript"></script>

    <script src="http://amycaseycooks.com/wp-content/themes/MyCuisine/js/custom.js" type="text/javascript"></script>

    <script type='text/javascript'>        /* <![CDATA[ */
        (function(w) {
            if (!w.SharexyWidget) {
                w.SharexyWidget = {
                    Params: {}
                };
            } w.SharexyWidget.Params['shr_71504700'] = { "user_id": 0, "design": "classic", "layout_static": "h", "type": "st", "mode_float": "l", "size_float": "32", "size_static": "32", "buzz": "1", "services": ["facebook", "twitter", "stumbleupon", "linkedin"], "url": "current", "allways_show_ads": 0, "show_ads_sharing": 0, "show_ads_cursor": 0, "bg_float": "0", "bg_color": "#f1f1f1", "labels": "0", "counters": "1", "counters_float": "0", "retweet@username": "retweetmeme", "popup_bot_a": 0, "publisher_key": 0, "code_id": 71504700, "d": "bottom_post 1" };
        })(window);
        /* ]]> */
            </script>

    <script type='text/javascript'>        /* <![CDATA[ */
        (function(w) {
            if (!w.jQuery) {
                return;
            }
            var jQuery = w.jQuery;
            jQuery('.sharexyWidgetNoindexUniqueClassName').each(function(n, element) {
                var content = jQuery(element).html();
                jQuery(element).html('<noindex>' + content + '</noindex>');
            });
        })(window);
        /* ]]> */</script>

    <script type="text/javascript" src="http://shuttle.sharexy.com/LoaderLite.js"></script>

    <script type='text/javascript' src='http://amycaseycooks.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.js?ver=3.14'></script>

    <script type='text/javascript'>
        /* <![CDATA[ */
        var _wpcf7 = { "loaderUrl": "http:\/\/amycaseycooks.com\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif", "sending": "Sending ..." };
        /* ]]> */
</script>

    <script type='text/javascript' src='http://amycaseycooks.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=3.2.1'></script>

    <script type='text/javascript' src='http://amycaseycooks.com/wp-content/themes/MyCuisine/epanel/page_templates/js/fancybox/jquery.easing-1.3.pack.js?ver=1.3.4'></script>

    <script type='text/javascript' src='http://amycaseycooks.com/wp-content/themes/MyCuisine/epanel/page_templates/js/fancybox/jquery.fancybox-1.3.4.pack.js?ver=1.3.4'></script>

    <script type='text/javascript' src='http://amycaseycooks.com/wp-content/themes/MyCuisine/epanel/page_templates/js/et-ptemplates-frontend.js?ver=1.1'></script>

</body>
</html>

<script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-31012707-1']);
    _gaq.push(['_trackPageview']);

    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

</script>

Open in new window


Cheers
Khilu
0
 

Author Comment

by:Donnie Walker
ID: 38864167
that does not work. It puts it below the title of the page.

I need to have them side by side.

If I do this:

#page-top h1.category-title {
    color: #FFFFFF;
    float: left;
    width: 500px;
    font-size: 48px;
    font-style: normal;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
}

.book {
    float: right;
    margin-top: -50px;
    width: 400px;
    height: 140px;
}

I can get them side by side but when I place my banner inside the .book element it destroys my page.
0
 

Author Closing Comment

by:Donnie Walker
ID: 38864200
I had a typo on my image that messed up the html. Thanks for putting me on the right track.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

728 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