Solved

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

Posted on 2013-02-07
7
440 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
  • 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
Use Case: Protecting a Hybrid Cloud Infrastructure

Microsoft Azure is rapidly becoming the norm in dynamic IT environments. This document describes the challenges that organizations face when protecting data in a hybrid cloud IT environment and presents a use case to demonstrate how Acronis Backup protects all data.

 

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Easy responsive table out of existing table 28 55
Target h5 of a div 3 17
How can I increase the size of this logo 5 35
Only three borders showing on image 5 19
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!
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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 position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

773 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