Newbie Template question

Posted by Community Admin on 05-Aug-2018 17:06

Newbie Template question

All Replies

Posted by Community Admin on 22-Aug-2011 00:00
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 acolor: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.
Posted by Community Admin on 25-Aug-2011 00:00
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 >>

Posted by Community Admin on 25-Aug-2011 00:00
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
This thread is closed