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

Forums / Designing & Styling / Newbie Template question

Newbie Template question

3 posts, 0 answered
  1. Debbie Wright
    Debbie Wright avatar
    3 posts
    Registered:
    27 Aug 2007
    22 Aug 2011
    Link to this post
    hi,

    I'm having an issue with css in my 4.1 sitefinity install.
    I'm using a website template that I've used on a lot of .net 2.0 sites, but never a 4.0 site.
    this is a typical three column layout, nav on the left, content in the middle, feature on the right, with an overall header
    I've loaded it into sitefinity for use on a clients site, and it looks great, with one problem:
    the overall container has white backgound that is supposed to expand when the content block expands, however it is not expanding (using min-height and overflow:visible)
    I can someone take a look at the below masterpage and css code, give me a pointer as to what I'm doing wrong?
    or is there a generic template that is similar that I can download and modify?
    thank you

    masterpage:
    01.<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/Dtd/xhtml11.dtd">
    02.<html xmlns="http://www.w3.org/1999/xhtml" >
    03.<head id="Head1" runat="server">
    04.    <title></title>
    05.    <asp:ContentPlaceHolder ID="head" runat="server">
    06.    </asp:ContentPlaceHolder>
    07.</head>
    08.<body>
    09.    <form id="form1" runat="server">
    10.        <div id="outerContainer">
    11.            <div id="container" >   
    12.                <div id="Header"><a href="">Site Map</a> | <a href="">Contact Us</a> | <a href="">Privacy</a>
    13.                </div>
    14.                <div id="SubHeader">1016 North Lincoln Avenue - Pittsburgh, PA 15233 - Toll Free Phone: 1-800-366-1904</div>
    15.                <div id="Banner"><asp:ContentPlaceHolder ID="cphBanner" runat="server">                      
    16.                             
    17.                       </asp:ContentPlaceHolder></div>
    18.                <div id="left"
    19.                      <asp:ContentPlaceHolder ID="cphLeft" runat="server">                      
    20.                             
    21.                       </asp:ContentPlaceHolder>
    22.                      <div class="address">
    23.                        © 2011 Dawar Technologies<br />
    24.                        All Rights Reserved<br />
    25.                      </div>
    26.                </div>
    27.                <div id="Content"  >              
    28.                    <asp:contentplaceholder id="cphMain" runat="server">
    29.                    </asp:contentplaceholder>
    30.                    <div id="ContentBottom"></div>
    31.                </div>
    32.                <div id="right" >               
    33.                    <asp:ContentPlaceHolder ID="cphRight" runat="server">
    34.                    </asp:ContentPlaceHolder>
    35.                </div>                               
    36.            </div
    37.        </div>
    38.    </form>  
    39.</body>
    40.</html>

    relevant css:
    001.#outerContainer
    002.{
    003.    position: relative; top: 0; left: 0;
    004.    width:1000px;
    005.    text-align:center;
    006.    background-image:url('../images/bodyTop.gif');
    007.    background-repeat:no-repeat;
    008.    background-color:White;
    009.    padding:0px 0px 0px 0px;
    010.    margin:0px 0px 0px 0px;
    011.    margin-left:auto;
    012.    margin-right:auto;
    013.    margin:auto;
    014.    min-height:1000px;
    015. 
    016.}
    017. 
    018.#container
    019.{
    020.    position: absolute; top: 0px; left: 0;
    021.    width:1000px;
    022.    min-height:1000px;
    023.        height:auto !important;
    024.        background-color:White;
    025.    overflow:visible;
    026.    text-align: left;
    027.    background-color:White;
    028.    margin-left:auto;
    029.    margin-right:auto;
    030.}
    031.#Header
    032.{
    033.    background-color:#5a5959;
    034.    vertical-align:middle;
    035.    text-align:right;
    036.    height:20px;
    037.    width:995px;
    038.    z-index:1;
    039.    color:White;
    040.    padding:2px 5px 0px 0px;   
    041.}
    042.#Header a{color:White; text-decoration:none; font-weight:bold; }
    043. 
    044.#SubHeader
    045.{
    046.width:995px;   
    047.    height: 20px;
    048.    vertical-align: middle;
    049.    text-align:right;
    050.    padding:2px 5px 0px 0px;
    051.}
    052.#Banner
    053.{
    054.    background-image: url( '../images/banner.gif' );
    055.    background-repeat: no-repeat;
    056.    position:absolute;
    057.    left:201px;
    058.    top:44px;
    059.    height:147px;
    060.    width:798px;
    061.    }
    062.#left
    063.{
    064.    position: absolute;
    065.    left:0px;
    066.    top: 44px; 
    067.    width:191px;
    068.    text-align:left;
    069.    color:#3c4a56;
    070.    background-image: url('../images/nav2.gif');
    071.    background-repeat:no-repeat;
    072.    background-attachment:scroll;
    073.    overflow:visible;
    074.    min-height:956px;
    075.    padding-left:10px;
    076.    }
    077.#Content
    078.{  
    079.    position: relative;
    080. min-height:550px;
    081.float:left;
    082.    font-family: Arial, Helvetica, Geneva;
    083.    z-index:1;
    084.    left:204px;
    085.    top:191px;
    086.    font-family: Arial, Helvetica, Geneva;
    087.    padding:10px 10px 10px 10px;
    088.    width:608px;
    089.    margin:0px 0px 10px 0px;   
    090.    z-index:1;
    091.}
    092. 
    093.#ContentBottom
    094.{       background-image: url('../images/mainBottom.gif');
    095.    background-repeat:no-repeat;
    096.    height:22px;
    097.    width:760px;
    098.    position:absolute;
    099.    margin:10px 0px 0px -10px;
    100.}
    101. 
    102. 
    103.#right
    104.{   background-image: url('../images/right-background.gif');
    105.    background-repeat:no-repeat;
    106.    top:147px;
    107.    position: relative;
    108.    vertical-align:top;
    109.    font-family: Arial, Helvetica, Geneva;
    110.    font-size: 10px;
    111.    font-style: normal;
    112.    color: #000066;
    113.    width:161px;
    114.    float: right;
    115.    min-height:789px;
    116.    padding-top:20px;
    117.    padding-left:10px;
    118.}
  2. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    25 Aug 2011
    Link to this post
    Hello Debbie Wright,

    There should be no difference between the CSS for .net 2 sites and the CSS for .net 4 ones. How did you link the CSS to your site? I suppose you've used the embedded Basic theme of Sitefinity which interferes with your CSS. You can read more about how to create, register and apply a theme in Sitefinity 4 in our online Designer's Guide.

    Let us know if the problem persists after you apply your theme.

    Regards,

    Katia
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. Debbie Wright
    Debbie Wright avatar
    3 posts
    Registered:
    27 Aug 2007
    25 Aug 2011
    Link to this post
    Thank you for the response.
    No, I'd imported the css file as part of the custom template and theme, so I was applying it through sitefinity.
    I finally was able to track down the problem yesterday, it was the css field "Top".
    for some reason that was causing the the height to be calculated wrong. once I removed it, everything looks normal.

    Thank you
3 posts, 0 answered