?
Solved

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

Posted on 2013-02-07
7
Medium Priority
?
454 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
Technology Partners: 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 1500 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

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!

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... …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month10 days, 3 hours left to enroll

762 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