Solved

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

Posted on 2013-02-07
7
439 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Fixed div within Bootstrap carousel item 11 55
CSS Divs in Safari 3 41
Centering a nested div 16 60
bootstrap footer centering and expand problems 7 30
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

863 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

25 Experts available now in Live!

Get 1:1 Help Now