Solved

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

Posted on 2013-02-07
7
438 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
Comment Utility
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
Comment Utility
Want that push the title of the page to the right as well?
0
 
LVL 3

Expert Comment

by:Khilu
Comment Utility
Given code push the "Cookbook" image to the right.
Please pointing me out the exact Title or location where you want changes.
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

Author Comment

by:Donnie Walker
Comment Utility
see attached image
banner.png
0
 
LVL 3

Accepted Solution

by:
Khilu earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
I had a typo on my image that messed up the html. Thanks for putting me on the right track.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
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 add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

763 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now