Newbie Template question

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">

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

All Replies