Breadcrumb positioning problems

Libby_Stark · 2015-10-12 02:03:15 UTC

Hi,

We have created a breadcrumb (which is working correctly with links etc) and added it to our Global Design (we've created a clone to test on). Just having difficulty with getting the breadcrumb positioned correctly.

It either seems to want to go to the very top of the window, or the very bottom of the window. If we ‘inspect element’ and drag and drop the div id from where it is (sitting below the header div but above the main div) to down between within the main content div, above the inner div class, it then positions perfectly.

What do we need to do in the design area so that it can be permanently positioned correctly? I've attached some images to show what we've done.

__________________________________________________

Below is the Design area for our site. In the design, if I put the breadcrumb design at row 101 before 118 in the Image 1 is how it displays.

When I “Inspect the element” on the page and manually move the Breadcrumb it displays as in Image 2.

Image 3 is the CSS file in the Medium CSS (is this correct?)

I have tried many variations and not working. Can anyone see anything glaringly obvious? Please help. Thanks in advance!

Libby & Yvonne

_______________________________

Global Design >> see row 101.

1. <MySource_AREA id_name="exit_area" design_area="exit" print="no">

</MySource_AREA>

2. <MySource_AREA id_name="nested_EES_code" design_area="nest_content"

print="no" />

3. <MySource_AREA id_name="simple_edit_EES" design_area="show_if">

4. <MySource_SET name="condition" value="simple_edit_mode" />

5. <MySource_THEN>

6. <!DOCTYPE html>

7. <html lang="en">

8. <head>

9. <meta charset="utf8"

/>

10. <title>Loading Easy Edit Suite...</title>

11. <MySource_PRINT id_name="nested_EES_code" />

12. </head>

13. <body></body>

14. </html>

15. <MySource_PRINT id_name="exit_area" />

16. </MySource_THEN>

17. </MySource_AREA>

18. <!DOCTYPE html>

19. <html lang="en">

20. <head>

21. <meta charset="windows1251"

/>

22. <![

if IE]><meta httpequiv="

XUACompatible"

content="IE=edge,chrome=1"

/><![endif]>

23. <title><MySource_PRINT id_name="__global__" var="asset_name" /> <

MySource_PRINT id_name="__global__" var="site_name" /></title>

24. <meta name="viewport" content="width=devicewidth,

initialscale=

1.0">

25. <meta name="DC.title" content="<MySource_PRINT id_name="__global__"

var="asset_name" />" >

26. <MySource_AREA id_name="metadata" design_area="metadata" />

27. <MySource_AREA id_name="metadata_custom" design_area="nest_content" />

28. <MySource_AREA id_name="head_scripts" design_area="nest_content" />

29. </head>

30.

31. <MySource_AREA id_name="body_class" design_area="declared_vars" print="no">

32. <MySource_DECLARE name="body_class" value="nojs

inside" type="text"

description="The class to be applied to the body"/>

33. </MySource_AREA>

34.

35.

36.

37. <![

if IE 9]><body class="ie9 <MySource_PRINT id_name="body_class"

var="body_class" /> %globals_get_iframe^contains:true:iframeyes:

iframeno%

people%

globals_asset_metadata_process.relatedpeopleposition%"><![

endif]>

38. <body class="<MySource_PRINT id_name="body_class" var="body_class" />

39. <![

if lt IE 9 ]><div class="lowiemessage">%

globals_asset_contents_raw:19062%</div><![endif]>

40. <div id="pagewrapper">

41. <!noindex>

42. <MySource_AREA id_name="skip_links" design_area="nest_content" />

43.

44. <div class="header" role="banner">

45.

46. <div class="inner">

47.

48. <h1 class="visuallyhidden">Highway 21</h1>

49. <MySource_AREA id_name="header_top" design_area="nest_content" />

50. <div class="headernavigationwrapper">

51. <div class="headernavigation"

role="navigation">

52. <MySource_AREA id_name="main_menu" design_area="menu_normal">

53. <MySource_SET name="wanted_asset_types" value="page_standard"

/>

54. <MySource_SET name="level" value="top" />

55. <MySource_SET name="show_subs" value="always" />

56.

57. <MySource_SET name="settings.class.normal" value="" />

58. <MySource_SET name="settings.class.current" value="" />

59. <MySource_SET name="settings.class.hierarchy" value="" />

60.

61. <h2 class="visuallyhidden">Main Site Navigation</h2>

62. <ul class="headermegamenu"

role="menubar">

63. <li class="mobile"><a href="./?a=79" title="Home">Home</a>

</li>

64. <MySource_ASSET>

65. <li class="<MySource_PRINT var="settings.class" />"

role="menuitem">

66. <a href="<MySource_PRINT var="asset_url" />" title="

<MySource_PRINT var="asset_short_name" />"><MySource_PRINT

var="asset_short_name" /></a>

67.

68. <MySource_SUB design_area="menu_normal">

69. <MySource_SET name="settings.class.normal" value="" />

70. <MySource_SET name="settings.class.current" value="" />

71. <MySource_SET name="settings.class.hierarchy" value="" />

72. <ul class="headermegamenusubmenu">

73. <MySource_ASSET>

74. <li class="<MySource_PRINT var="settings.class" />"

role="menuitem">

75. <div class="submenuitem">

76. <div class="submenuheading">

77. <a href="<MySource_PRINT var="asset_url" />"

title="<MySource_PRINT var="asset_short_name" />"><MySource_PRINT

var="asset_short_name" /></a>

78. </div>

79. <div class="submenucontent">

80. <MySource_PRINT var="asset_metadata_info.summary"

/>

81. </div>

82. </div>

83. </li>

84. </MySource_ASSET>

85. </ul>

86. </MySource_SUB>

87. </li>

88. </MySource_ASSET>

89. </ul>

90. </div>

91. </MySource_AREA>

92. </div>

93. <MySource_AREA id_name="header_message" design_area="nest_content"

/>

94. <MySource_AREA id_name="header_search" design_area="nest_content"

/>

95. <MySource_AREA id_name="user_links" design_area="nest_content" />

96. </div>

97. </div><!/.header >

98. <!endnoindex>

99.

100.

101. <div id="breadcrumb">

102. <MySource_AREA id_name="page_lineage" design_area="asset_lineage">

103. <MySource_SET name="levels_to_print" value="0" />

104. <MySource_SET name="prefix_with_divider" value="false" />

105. <MySource_SET name="suffix_with_divider" value="true" />

106. <MySource_SET name="prefix_with_home_link" value="true" />

107. <MySource_SET name="suffix_with_current_link" value="false" />

108. <MySource_SET name="show_hidden_links" value="false" />

109. <MySource_ASSET>

110. <a href="<MySource_PRINT var="asset_link" />"><MySource_PRINT

var="asset_short_name" /></a>

111. </MySource_ASSET>

112. <MySource_DIVIDER>&nbsp;&gt;&nbsp;</MySource_DIVIDER>

113. </MySource_AREA>

114. <MySource_PRINT var="asset_short_name" />

115. </div>

116.

117.

118. <div id="main" role="main" class="clearfix">

119. <MySource_AREA id_name="body" design_area="body" />

120.

121. </div><!/#main >

122.

123. <!noindex>

124. <MySource_AREA id_name="tools_notifications" design_area="nest_content"

/>

125.

126. <MySource_AREA id_name="apps_widgets" design_area="nest_content" />

127.

128. <div class="footer" role="contentinfo">

129. <MySource_AREA id_name="footer" design_area="nest_content" />

130. </div><!/.footer >

131. <!endnoindex>

132. </div><!/#pagewrapper

>

133. <MySource_AREA id_name="foot_scripts" design_area="nest_content" />

134. <div class="templateholder"

id="templateholder"

style="display: none;">

135. </div>

136. </body>

137. </html>

Image1.jpg (101 KB) Image2.jpg (160 KB) Image3.jpg (142 KB)

Bart · 2015-10-15 23:29:41 UTC

Hi Libby, I think this one may be hard to debug and review and help out with without having access to the actual site where we can inspect and play around with the CSS and HTML. I'm guessing that's what you need help with right? CSS positioning?

Libby_Stark · 2015-10-20 03:08:55 UTC

Hi Bart, Thanks for your response.

We seem to have got our breadcrumb working well, but we just can't seem to position it correctly.

Are we correct in saying that there are two ways to implement a breadcrumb, one using css and paint layouts/keyword replacements, and the other way via the Design asset (My source area design tag), with a bit of css for styling?

We are trying to implement the standard breadcrumb through the design asset, but can't seem to get the positioning right.

In Developer tools, we can drag our breadcrumb div to where we want it to sit in order to get it to position it correctly, but we're not having any luck referencing that position in the design, as the new position seems to only be referenced in the paint layout.

You do have access (Sys Admin) to our site, but I'm guessing that would involve us logging a support ticket.

thanks,

Libby

Bart · 2015-10-20 21:53:44 UTC

Hi Libby,

Sounds like it's mainly CSS and front end styling related, whether you are using a design area or a paint layout with an asset listing to generate the breadcrumb doesn't matter too much in this case (I think), unless your positioning issues are due to the place it is is getting printed in the HTML source code (DOM).

I think the Brisbane team, especially the guys who built the site, should be able to help you and fix it in no time, but yes, I suggest you log a support ticket so that it can be looked at by them. I'll get someone from the team to have a look at this forum post as well to see if they can provide an easy answer for you in the meantime.

Libby_Stark · 2015-10-20 22:40:48 UTC

Thanks Bart. Yvonne has created a test Design called 'Global new' Asset#21364 and has been testing it on Asset#21360 'cache-test-2'. CSS has been applied to Asset#120 global.css

We'll log a ticket in the near future hopefully.

Many thanks! :)