+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / Advanced CSS and ContentPlaceholders

Advanced CSS and ContentPlaceholders

4 posts, 0 answered
  1. Darren
    Darren avatar
    2 posts
    Registered:
    10 Mar 2008
    10 Mar 2008
    Link to this post
    I've found that in my xhtml/css template, my ContentPlaceholders do not stay within the constraints of their parent divs.

    Here are the screenshots:
    reformata.net/purpose_ware/beta/screenshot_1.jpg
    reformata.net/purpose_ware/beta/screenshot_2.jpg

    .master page:
    <%@ Master Language="C#" AutoEventWireup="true" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
        <head runat="server"
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
            <title>PurposeWare: Simple, Easy To Use, Online Church Management Software</title> 
            <meta name="description" content="Simple, easy-to-use, web-based management system for your entire church. Manage members, track visitors & get people plugged into ministry." /> 
            <meta name="keywords" content="" /> 
            <meta name="author" content="" /> 
            <meta name="creator" content="" /> 
     
            <meta name="robots" content="noindex,nofollow"
            <meta name="revisit-after" content="5 days"
             
            <script type="text/javascript" src="App_Themes/pw/jquery-1.2.3.min.js"></script> 
     
            <!--[if gt ie 5.5000]> 
                <link rel="stylesheet" href="App_Themes/pw/css/ie.css" type="text/css"></script> 
            <![endif]--> 
     
            <!--[if lt ie 7]> 
                <link rel="stylesheet" href="App_Themes/pw/css/ie6.css" type="text/css"></script> 
            <![endif]--> 
        </head> 
        <body><form id="pageForm" runat="server"
            <div id="container"
                <div id="header_container"
                    <div id="header_inner"
                        <h1 id="pw_logo"><href="#" title="PurposeWare: Simple, Easy to use, Online Church Management Software">PurposeWare: Simple, Easy to use, Online Church Management Software</a></h1
                        <h3 id="request_demo"><href="#" title="Request A Demo">Request A Demo</a></h3
                        <h3 id="client_login"><href="#" title="Client Login">Client Login</a></h3
                     
                        <div id="search_form"
                            <form action="#" id="search" method="post" accept-charset="utf-8"
                                <input type="text" id="search_input" /> 
                                <h4 id="search_button"><href="javascript:document.search.submit()">Search</a></h4
                            </form> 
                        </div> 
                    </div> 
                     
                    <div id="nav_container"
                        <ul id="nav"
                            <li id="demo"><href="#">Demo</a></li
                            <li id="products"><href="#">Products</a></li
                            <li id="support"><href="#">Support</a></li
                            <li id="company"><href="#">Company</a></li
                            <li id="signup"><href="#">Signup</a></li
                        </ul> 
                    </div> 
                </div> 
                <div id="content_container"
                    <img src="App_Themes/pw/images/content_left_shadow.gif" alt="" id="content_left_shadow" /> 
                    <img src="App_Themes/pw/images/content_right_shadow.gif" alt="" id="content_right_shadow" /> 
                     
                    <div id="content"
                        <div id="welcome_container"
                            <h3 id="welcome_header">Enhance Your Ministry with Purposeware's simple church management system</h3> 
                             
                            <asp:ContentPlaceHolder ID="home_slogan" runat="server"></asp:ContentPlaceHolder> 
                     
                            <h4 id="welcome_learn_more"><href="#">Learn More</a></h4
                        </div> 
                 
                        <div id="home_content"
                            <div id="home_our_services"
                                <h3 id="our_services">Our Services</h3> 
                                <p><em>Purposeware makes membership management easy and painless</em></p
                                <dl id="our_services_list"
                                    <dt>1</dt> 
                                    <dd><a href="#">Effective Ministry Profiles</a></dd
     
                                    <dt>2</dt> 
                                    <dd><a href="#">Robust Visitor Workflow</a></dd
                                     
                                    <dt>3</dt> 
                                    <dd><a href="#">Programmed by Studly Men</a></dd
                                </dl> 
                         
                                <p><a href="#" class="arrow_link">Learn more</a></p
                            </div> 
                     
                            <div id="home_latest_news"
                                <h3 id="latest_news">Latest News</h3> 
                                <h4>The Latest From Purposeware...</h4> 
                         
                                <asp:ContentPlaceHolder ID="latest_news" runat="server"></asp:ContentPlaceHolder> 
                         
                                <style="margin-left: 78px"><href="#" class="arrow_link">Learn more</a></p
                            </div> 
                        </div> 
                    </div> 
                </div> 
                <div id="footer_container"
                    <h5 id="copyright">Copyright 2008 &copy; PurposeWare, Inc. All rights reserved.</h5> 
                    <h5><a href="#">Privacy Policy</a></h5
                    <h5><a href="#">Terms Of Use</a></h5
                    <h5 id="built_by_reformata"><href="#">Built by Reformata Web Design in Boise, Idaho</a></h5
                </div> 
            </div></form
        </body> 
    </html> 


    css:
     
        body, body * { 
            margin: 0; 
            padding: 0; 
        } 
     
        img { 
            display: block; 
        } 
     
        a:active 
        { 
          outline: none; 
        } 
     
        :focus 
        { 
          -moz-outline-style: none; 
        } 
         
        body { 
            background: #49515a url(../images/body_bg.jpg) repeat-x; 
            font-family: Arial; 
        } 
     
        /* divs */ 
         
        div#container { 
            width: 776px; 
            margin: 0 auto; 
            margin-top: 44px; 
        } 
         
        div#header_container { 
            background: #fff url(../images/header_bg.jpg) no-repeat; 
            width: 776px; 
            height: 163px; 
        } 
         
        div#header_inner { 
            width: 764px; 
            height: 116px; 
            margin: 0 auto; 
            padding-top: 6px; 
        } 
         
        div#nav_container { 
            margin-left: 5px; 
        } 
         
        div#content_container { 
            width: 766px; 
            background: #fff url(../images/content_bg_shadow.gif) repeat-y; 
            padding: 0 5px; 
        } 
         
        img#content_left_shadow { 
            float: left; 
            position: relative; 
            left: -5px; 
        } 
         
        img#content_right_shadow { 
            float: right; 
            position: relative; 
            right: -5px; 
        } 
         
        div#content { 
            padding: 25px 0; 
        } 
         
        div#welcome_container { 
            width: 703px; 
            height: 243px; 
            margin: 0 auto; 
            background: #fff url(../images/home_welcome_bg.jpg) no-repeat; 
        } 
         
        div#home_content { 
            margin-left: 60px; 
            margin-top: 20px; 
        } 
         
        div#home_our_services, div#home_latest_news { 
            background: #fff url(../images/home_header_underline_tile.gif) repeat-x 0 60px; 
        } 
         
        div#home_our_services { 
            float: left; 
            width: 220px; 
        } 
         
        div#home_latest_news { 
            margin-left: 270px; 
            width: 380px; 
        } 
         
        div#footer_container { 
            background: #49515a url(../images/bottom_shadow.gif) no-repeat; 
            width: 756px; 
            height: 50px; 
            padding: 18px 10px 0 10px; 
        } 
         
        /* image replacement */ 
     
        h1#pw_logo, h3#request_demo, h3#client_login, h4#search_button, ul#nav li, h3#welcome_header, h4#welcome_learn_more, 
        h3#our_services, h3#latest_news, h5#built_by_reformata { 
            text-indent: -9999em; 
        } 
         
        h1#pw_logo { 
            float: left; 
        } 
         
        h1#pw_logo a { 
            width: 295px; 
            height: 116px; 
            display: block; 
            background: url(../images/pw_logo.jpg) no-repeat; 
        } 
         
        h3#request_demo a, h3#client_login a { 
            width: 110px; 
            height: 32px; 
            display: block; 
            float: left; 
        } 
         
        h3#request_demo a { 
            width: 140px; 
            margin-left: 200px; 
        } 
         
        h4#search_button a { 
            width: 75px; 
            float: right; 
            margin-right: 20px; 
            margin-top: 5px; 
        } 
         
        h4#welcome_learn_more a { 
            width: 160px; 
            height: 40px; 
            display: block; 
            position: relative; 
            top: 105px; 
            left: 35px; 
        } 
         
        h3#our_services, h3#latest_news { 
            margin-bottom: 15px; 
        } 
         
        h3#our_services { 
            width: 197px; 
            height: 57px; 
            display: block; 
            background: url(../images/home_our_services.gif) no-repeat; 
        } 
         
        h3#latest_news { 
            width: 186px; 
            height: 57px; 
            display: block; 
            background: url(../images/home_latest_news.gif) no-repeat; 
        } 
         
        h5#built_by_reformata a { 
            width: 99px; 
            height: 26px; 
            display: block; 
            background: url(../images/footer_built_by_reformata.gif) no-repeat; 
        } 
     
        /* nav */    
     
        ul#nav, ul#nav li {  
            list-style: none; 
        } 
     
        ul#nav { 
            list-style: none; 
            height: 41px; 
            width: 766px; 
        } 
     
        ul#nav li { 
            float: left; 
        } 
     
        ul#nav li a { 
            height: 41px; 
            display: block; 
            outline: none; 
        } 
     
        ul#nav li#demo a { 
            width: 142px; 
            background: url(../images/demo_nav.jpg) no-repeat; 
        } 
         
        ul#nav li#products a { 
            width: 154px; 
            background: url(../images/products_nav.jpg) no-repeat; 
        } 
         
        ul#nav li#support a { 
            width: 164px; 
            background: url(../images/support_nav.jpg) no-repeat; 
        } 
         
        ul#nav li#company a { 
            width: 150px; 
            background: url(../images/company_nav.jpg) no-repeat; 
        } 
         
        ul#nav li#signup a { 
            width: 156px; 
            background: url(../images/signup_nav.jpg) no-repeat; 
        } 
         
        /* typography */ 
         
            dl#our_services_list { 
                margin-top: 10px; 
                margin-bottom: 10px; 
            } 
             
            dl#our_services_list dt { 
                background: #fff url(../images/home_bullet.gif) no-repeat 0 2px; 
                float: left; 
                color: #fff; 
                width: 20px; 
                height: 20px; 
                font-family: Georgia, serif; 
                font-size: 11px; 
                padding-left: 6px; 
                padding-top: 3px; 
            } 
             
            dl#our_services_list dd { 
                margin-bottom: 5px; 
                margin-left: 28px; 
            } 
             
            dl#our_services_list dd a { 
                text-decoration: none; 
                color: #1c3f53; 
                font-family: Arial; 
                font-size: 12px; 
            } 
             
            dl#latest_news_list { 
                margin-top: 10px; 
            } 
             
            dl#latest_news_list dt { 
                float: left; 
                width: 63px; 
                height: 23px; 
                background: #fff url(../images/home_date_bg.gif) no-repeat 0 2px; 
                color: #4b565e; 
                font-family: Arial, sans-serif; 
                font-size: 11px; 
                padding: 8px 0 0 6px; 
            } 
             
            dl#latest_news_list dd { 
                margin-left: 79px; 
                margin-bottom: 10px; 
            } 
             
            a.arrow_link { 
                color: #5a7280; 
                background: #fff url(../images/arrow_bullet.gif) no-repeat 62px 7px; 
                width: 77px; 
                display: block; 
                font-weight: bold; 
                font-size: 11px; 
            } 
             
         
        ol, ul { 
            list-style-position: inside; 
        } 
         
        p, li, dd, h4  { 
            color: #1c3f53; 
            line-height: 18px; 
            font-family: Arial; 
            font-size: 12px; 
        } 
         
        h4 { 
            text-transform: uppercase; 
            font-size: 11px; 
        } 
         
        div#welcome_container p { 
            position: relative; 
            top: 88px; 
            color: #607c8d; 
            width: 390px; 
            left: 37px; 
        } 
         
        div#footer_container h5 { 
            color: #d1dfe7; 
            font-size: 10px; 
            font-weight: normal; 
            float: left; 
            margin-right: 30px; 
        } 
         
        div#footer_container h5#built_by_reformata { 
            margin-right: 0; 
        } 
         
        div#footer_container h5 a { 
            color: #d1dfe7; 
            text-decoration: none; 
        } 
         
        div#footer_container h5#copyright { 
            margin-right: 200px; 
        } 
             
        /* forms */ 
         
        div#search_form { 
            width: 310px; 
            height: 28px; 
            float: right; 
            margin-top: 30px; 
        } 
         
        input#search_input { 
            float: left; 
            width: 188px; 
            height: 12px; 
            margin: 6px 5px 0 8px; 
            border: 0; 
            padding: 3px; 
            padding-top: 4px; 
            background: none; 
            font-family: Arial; 
            font-size: 11px; 
        } 
  2. Pepi
    Pepi avatar
    981 posts
    Registered:
    28 Oct 2016
    11 Mar 2008
    Link to this post
    Hi Darren,

    Try to remove relative position from div#welcome_container p declaration in the CSS:

    div#welcome_container p {    
            color#607c8d;      
            width390px;    
        } 

    Also pay attention to the linking of CSS files. It should be:

    <link rel="stylesheet" href="App_Themes/pw/css/ie6.css" type="text/css" /> 

    not:

    <link rel="stylesheet" href="App_Themes/pw/css/ie6.css" type="text/css"></script> 

    If this does not help, please send us the following information:
    1. Browser type and version.
    2. The exact version of your Sitefinity.
    3. Javascript file used in the master page - App_Themes/pw/jquery-1.2.3.min.js.
    4. CSS files for IE - App_Themes/pw/css/ie.css and App_Themes/pw/css/ie6.css.

    Do let us know how it goes.

    Greetings,
    Pepi
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Darren
    Darren avatar
    2 posts
    Registered:
    10 Mar 2008
    11 Mar 2008
    Link to this post
    Still didn't work--the reason that p has a position relative is because the welcome_container div is a big background image.  Therefore, the P needs to be pushed down a bit and moved from the left.  I was hoping that if I got the id of the rendered AreaContainer Edit Box (#ctl00_home_slogan_des0) and just applied the same CSS style to it, then it would render right.

    Even after I took off the position relative and the specific positioning, the AreaContainer Edit Box still is pushed down.

    I am using Camino (an OSX Gecko-based browser), and Sitefinity 3.1.

    And actually, the IE6 stylesheet and jquery javascript file are referencing non-existent files.  I just throw those in there as part of my templating system.

    Does SiteFinity have trouble working with advanced CSS positioning and image-replacement Divisions?
  4. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    12 Mar 2008
    Link to this post
    Hello Darren,

    Page editor system messages like "No controls have been added to this container. Drag controls here." are wrapped in paragraphs. As you have set position property to relative for P tag and have moved it 88px down, that rule affects Sitefinity system messages at that place as well.

    One solution that I can suggest is to move the slogan paragraph to the bottom and to the left by applying padding to the welcome_container div. Then there will be no need to position the paragraph relatively. For example, you can change your CSS like this: 

    div#welcome_container
        width: 666px
        height: 155px

        padding: 88px 0 0 38px
    ;
        margin: 0 auto
        background: #fff url(../images/home_welcome_bg.jpg) no-repeat;
    }
    div#welcome_container p
        color: #607c8d
        width: 390px;
    }



    Greetings,

    Katia
    the Telerik team


    Instantly find answers to your questions at the new Telerik Support Center
Register for webinar
4 posts, 0 answered