removing Title area section SharePoint - css

I want to remove the title area section which is above view all site content not the breadcrumb and move my quick launch next to breadcrumb...having
<td class="ms-titlearealeft" id="TitleAreaImageCell" valign="top" nowrap style="width: 1px; border-style: none; height: 1px;" height="1px"><div style="height:100%" class="ms-titleareaframe"><asp:ContentPlaceHolder id="PlaceHolderPageImage" runat="server"/></div></td>
this blank space above quick launch shows for all the pages.But when I am removing this my breadcrumb is getting towards left section which I don't want..Any idea how to remove this..

create a panel in side the master page
Cut the <tr> section of the place holder witch handles the title paste it inside the panel.
<asp:Panel visible="false" runat="server">
<table><tr><td>hiding placeholders</td></tr></table>
<tr>
<td class="ms-titlearealeft" id="TitleAreaImageCell" valign="middle" nowrap>
<div style="height:100%" class="ms-titleareaframe">
<asp:ContentPlaceHolder id="PlaceHolderPageImage" runat="server" />
</div>
</td>
</asp:Panel>
make sure visiblity of your panel is hidden.
now you can get your quick launch next to bread crumb
Like this way you can hide othe place holders

Are you editing the master page? Why don't you just place a blank image there or something?

Related

Put an asp label under another without space between them

In a column I have a div container which contains two asp labels, one under the other.
<td>
<div>
<h2><asp:Label runat="server" ID="lblEmployeeFullname" Text="Claudie"></asp:Label></h2>
<asp:Label runat="server" ID="lblIdEmployee" Text="34343d-dfadfsf-3433"></asp:Label>
</div>
</td>
There is a blank space between the labels and I am trying to remove it.
Below a screenshot in design mode.
I want them to be together without any space in between.
How can I do this?
This happens by the fact that the 'h2' tag has its own browser-specific margin top/bottom style.
You can disable it something like this:
<h2 style="margin-top:0;margin-bottom:0;">...</h2>
<h2 style="margin-top:0;margin-bottom:0;"><asp:Label runat="server" ID="lblEmployeeFullname" Text="Claudie"></asp:Label></h2>
<asp:Label runat="server" ID="lblIdEmployee" Text="34343d-dfadfsf-3433"></asp:Label>

script does not run on invisible asp:Panel after making it visible (ASP.Net)

I have an asp:Panel that I only make visible after a survey is completed. I have a script in the panel that displays a TripAdvisor widget. When the panel is made visible, the widget does not display. If I set the panel to visible when loading the survey, the widget does appear. How can I get the script to run after I make the panel visible? The asp:Panel code is below.
Thank you very much for any help.
<asp:Panel ID="PanelReviewSite" runat="server" CssClass="Panel" Visible="false">
<table>
<tr>
<td align="center">
<div id="TA_sswidecollectreview991" class="TA_sswidecollectreview">
<ul id="8XReiUtFMK2" class="TA_links R9Huu5J0oLD">
<li id="6lsEHIwyG34" class="RywVDRO81a">Write a review of <a target="_blank" href="http://www.tripadvisor.com/Hotel_Review-......">My Hotel</a></li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=sswidecollectreview&uniq=991&locationId=81234&lang=en_US&border=true"></script>
</td>
</tr>
</table>
</asp:Panel>
Add to panel additional css class with display:none property in definition instead of using Visible property. And reset CssClass property back to Panel on survey completion.

Can DNN Skins have content panes with a blank element instead of a div?

All example skins I've seen use <div id="SomethingSomethingPane" runat="server"></div>. Is it possible to use something other than a div? Ideally I'd like to use something that doesn't require additional HTML mark up, such as an <asp:Literal> tag.
You have four methods at your disposal for creating Panes in a DNN Skin, as of DNN 5
TD
<table>
<tr>
<td id="ContentPane" runat="server"></td>
</tr>
</table>
DIV
<div id="ContentPane" runat="server" />
SPAN
<span id="ContentPane" runat="server" />
P
<p id="ContentPane" runat="server" />
If you need to remove the tag altogether, have some jquery run upon page load that strips that tag (select by ID), although an empty span is pretty harmless in most cases.
References
Page 468 of this book - div, span, td
DNN Source - p, search for "//load the skin panes"
Yes. You can use something other than a div such as a span.

Div alignment Issue in FireFox and Google Chrome

I am using Div in my website to display some links. It works fine in IE, but when i expand that div in firefox and google chrome it goes weird.
Can anybody help me to figure it out. I have googled it but i did not fine any useful solutions.
<td vAlign="top" align="center"><font>-</font></td>
<td align="left" >
<div align="left" style="margin:0 auto; padding:0; display:block;clear:both; position:relative;">
<A class="inkblue" href="javascript:expand(4);">Faculty & Staff</A
</div>
</td>
<td></td>
</tr>
<tr id="e4" style="DISPLAY: none">
<td></td>
This is the code for that section. Please let me know if anything required.
This is the link to site. open it in firefox or chrome and click the link
"Faculty & Staff" under "Campuses" .
I have gone through your site:
I saw that you are using below line double time. Insert this line only one time.
If your are trying to Override some classes then specify different css file name.
<link rel="stylesheet" type="text/css" href="css/nuonline.css">
To overcome your issue:
Currently on click of "Faculty, Events & Campus", you are doing style="display:inline". Rather than doing this way you can remove style attribute itself.
Example:
On click: Remove style attribute style="display:none" for id="e4" or id="e5" or id="e7"
To Reset (that is on next click): Add style attribute as style="display:none" for id="e4" or id="e5" or id="e7"
There is one blank <td></td> remove it and give colspan="2" to next td element

ASP.NET code rendered in Chrome looks different

I was wondering why the following code:
<asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None
AutoPostBack=false DropDownStyle=DropDown EnableViewState="True">
</asp:ComboBox> <asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal>
produces the combobox with label "Days" to the right off of it in IE9 and FireFox but when I run it using Chrome the "Days" label appears below the combo box?
How do I make it to be drawn to the right off the combo box like the rest of the browsers?
First up the Combo Box is not part of the "Standard" asp.net controls. I'm assuming you are using the asp.net AJAX Toolkit for this. As the Combo box is a compound control it does not render "Clean HTML" eg:
<select id="DropDown1"></select> Days
Instead it renders:
<div id="DropDown1" style="display:inline-block;">
<table id="DropDown1_Table"
class="ajax__combobox_inputcontainer"
cellspacing="0"
cellpadding="0"
border="0"
style="display:inline-block;border-width:0px;border-style:None;border-collapse:collapse;position:relative;top:5px;">
<tr>
<td class="ajax__combobox_textboxcontainer">
<input name="DropDown1$TextBox"
type="text"
id="DropDown1_TextBox"
autocomplete="off"
style="width:30px;" />
</td>
<td class="ajax__combobox_buttoncontainer">
<button id="DropDown1_Button"
type="button"
style="visibility:hidden;"></button>
</td>
</tr>
</table>
<input type="hidden"
name="DropDown1$HiddenField"
id="DropDown1_HiddenField"
value="-1" />
</div> Days
Which for me in chrome 14 displays with the Days in the same line as the drop down.
The thing to note is the div wrapping up the combo box control. Either the version on chrome you are using is ignoring the display:inline-block; style or you have some CSS somewhere that is somehow overriding this.
Maybe look at using the standard controls and use jQuery and page methods to roll your own combo box, or better still look at FlexBox.
Which version of chrome on which OS is causing the issue?
If you don't need AJAX functionality just use the standard ASP:Dropdown control.
UPDATE:
Using Microsoft's Combo Box Sample page reproduces your issue in Chrome. Looking at the rendered code it is different in IE and Chrome. This leads me to believe I have a different version of the tool kit to yourself and Microsoft (probably older!)
IE uses display:inline-block while chrome renders display:inline which would be causing the display anomaly.
To work around the issue with the version of the toolkit you are using, I would try the following:
<div style="display:inline-block">
<asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None AutoPostBack=false DropDownStyle=DropDown EnableViewState="True">
</asp:ComboBox>
</div>
<asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal>
I guess no one gets the "correct answer" check for this one.
Here's how I was able to "patch it" -- again, good ol' table came to rescue...
<table width="100%" border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign="bottom" width="1%"><asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None AutoPostBack=false DropDownStyle=DropDown EnableViewState="True"></asp:ComboBox></td>
<td valign="bottom" width="99%"> <asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal></td>
</tr>
</table>
On the side note, I don't know guys how you can use that ASP.NET & VS2010. Both are such a headache and I'm so glad that my short stint with it is over!!!
"why do I need to wrap attributes into quotes"
Yes, you do need to pick up a good book on HTML / CSS and study it.

Resources