I have modified my master page to move the site collection title from the body, to be inside my upper suite bar. So I move the following h1 div code to be inside the Suite bar DIV as follow:-
<div id="suiteLinksBox">
<SharePoint:DelegateControl id="ID_SuiteLinksDelegate" ControlId="SuiteLinksDelegate" runat="server" />
</div>
<h1 id="pageTitle" class="ms-core-pageTitle" style="color:white;float:left">
<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">
<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">
<SharePoint:SPTitleBreadcrumb
runat="server"
RenderCurrentNodeAsLink="true"
SiteMapProvider="SPContentMapProvider"
CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider">
<PATHSEPARATORTEMPLATE>
<SharePoint:ClusteredDirectionalSeparatorArrow runat="server" />
</PATHSEPARATORTEMPLATE>
</SharePoint:SPTitleBreadcrumb>
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
<SharePoint:AjaxDelta BlockElement="true" id="DeltaPlaceHolderPageDescription" CssClass="ms-displayInlineBlock ms-normalWrap" runat="server">
<a href="javascript:;" id="ms-pageDescriptionDiv" style="display:none;">
<span id="ms-pageDescriptionImage"> </span>
</a>
<span class="ms-accessible" id="ms-pageDescription">
<asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server" />
</span>
<SharePoint:ScriptBlock runat="server">
_spBodyOnLoadFunctionNames.push("setupPageDescriptionCallout");
</SharePoint:ScriptBlock>
</SharePoint:AjaxDelta>
</h1>
The result is that the Site title (in my case the Dicusion forum) will be on the right side of the screen although i have defined float:left for the h1 div, so is there a way to move it to the left just beside the logo ?
Can anyone advice please, if he know how to do it ?
pageTitle {position: absolute; left: 400px; top: 30px} will work fine
Related
I use Master Page in my Project.But Master Page contents are not same in all pages.In Home.aspx page it's margin is 0px and in other page isn't. Texts are Bold and Big Size in one page and Small in another Page. Why this occur?
My Master.master page Code :
<body style="margin:0px; text-align: left;">
<form id="form1" runat="server">
<div>
<div class="auto-style1" style="background-color: #3399FF; height: 42px;">
<h2>
<asp:Label ID="homeLabel" runat="server" Text="Home"></asp:Label>
</asp:Label>
<asp:Label ID="file_sharedLabel" runat="server" Text="Files Shared"></asp:Label>
<asp:Label ID="blogLabel" runat="server" Text="Blogs"></asp:Label>
</h2>
</div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
And Two picture of Home.aspx and Members.aspx are
What happens I don't Catch .
Again, it is hard to tell what is going on without the actual HTML from your child pages. However, judging from the picture, you are probably looking for a margin value on a an element between your <asp:ContentPlaceHolder> tags.
It looks like your second page is using a <table> of some sort.
Make sure your table has:
style="margin-top: 0px;"
Or
<table class="noTopMargin"> ...
<style>
.noTopMargin { margin-top: 0px; }
</style>
As for the font-size and font-weight being messed up, it is possible that your second page has a <style> declaration somewhere which is screwing it all up. Also make sure that your browser zoom is the same between both pages.
I have a markup which contains div with some images as shown. Currently each section of div appears vertically. But, i want to show the items on left & text on right as shown in screen dump.
HTML Markup:
<div id="divgetpaidnow" style="float:none;width:200px;" class="paymentclass" paytype="GetPaidNow" paytypeid="1">
<asp:Image ID="Image1" src="images/getpaidnow.jpg" runat="server" class="paymentimg" />
<div>
</div>
<asp:RadioButton ID="rdo1" Text="Get Paid Now" runat="server" class="myradio" GroupName="rdoPaymentgroup" />
<div class="payTypeFooterText" style="float:none;"> <strong>Get Paid Now:</strong><br />
Instant Cash, visit one of our Mall Locations and get Paid Today
</div>
</div>
<div id="divamazon" style="float: none;" class="paymentclass" paytype="Amazon" paytypeid="2">
<asp:Image ID="Image2" src="images/amazon.jpg" runat="server" class="paymentimg" />
<div style="margin-top: 10px;">
</div>
<asp:RadioButton ID="rdo2" Text="Recommended" runat="server" class="myradio" GroupName="rdoPaymentgroup" />
<div class="payTypeFooterText">
<strong>Amazon Gift Card:</strong><br />
Get paid quickly via electronic gift card and receive an extra 5%</div>
</div>
css:
.payTypeFooterText
{
width: 120px;
font-style: normal;
font-size: 10px;
}
.myradio
{
color: grey;
font-size: 12px;
text-decoration: none;
}
Just these two css other class names are used for accessing elements using JQUERY.
Help Appreciated!
You can use css property float to align content on pages
<div>
<div style='float:left;'>
----content---
</div>
<div style='float:right;'>
----content---
</div>
</div>
Have a common class for all the divs and use display:inline-block
div{
display:inline-block;
background:red;
}
DEMO
At the top of my screen, I have an ASP.NET Hyperlink with an image representing the company and the application. I want to use CSS layers to place text or some control displaying text on top of the hyperlink/image at bottom right hand corner representing the productEdition.
I can't post the ASP.NET Hyperlink markup because it causes error but it has an ImageUrl. Oh, it's in a panel. See below:
<asp:panel ID="toppanel" CssClass='wrapper' runat="server">
<!--Top Menu-->
<asp:panel id="menupanel" runat="server" CssClass="menusubwrapper">
<asp:HyperLink ID="HeaderLink" runat="server" ImageUrl="~/images/Header.gif" NavigateURl="~/Default.aspx" ToolTip="Home Page">
</asp:HyperLink>
</asp:panel>
Using the techniques in some of the answers, I have this working - the text is on top of the picture but it's all the way to the left. I need it to be all the way to the right.
<asp:panel ID="toppanel" CssClass='wrapper' runat="server">
<!--Top Menu-->
<asp:panel id="menupanel" runat="server" CssClass="menusubwrapper">
<div id="Header" style="position: relative; z-index: 1">
<%--div style="position:absolute;z-index:1">--%>
<asp:HyperLink ID="HeaderLink" runat="server" ImageUrl="~/images/Header.gif"
NavigateURl="~/Default.aspx" ToolTip="Home Page">
</asp:HyperLink>
<div style="position:absolute;top:60px; right:400px; width:600px; height:100px; z-index:2;font-size:200%">
<b>Testing...</b>
</div>
<%--</div>--%>
</div>`
You could create a div to overlap the image with the Edition in it. You can read about overlapping elements here: http://www.w3schools.com/css/css_positioning.asp
Hope this helps and Good Luck!
You could have a DIV wrapping around the linked image as well as around the text (also within a DIV). Give the wrapping DIV a style "position:relative" and give the text DIV absolute positioning. Or, instead of using absolute positioning, you could float it right or left, center it, using margins, etc.
Here are a few tutorials for you:
http://www.html.net/tutorials/css/lesson15.php
OR
http://www.xul.fr/en/css/text-over-image.php
Here's the solution:
<div id="Header" style="position: relative; z-index: 1">
<asp:HyperLink ID="HeaderLink" runat="server" ImageUrl="~/images/Header.gif"
NavigateURl="~/Default.aspx" ToolTip="Home Page"/>
<div style="position:absolute;top:60px; left:800px; width:600px; height:100px; z-index:2;font-size:200%">
<%--<b>Testing...</b>--%>
<asp:Label runat="server" ></asp:Label>
</div>
</div>
i set some css rules and html tags, that looks desirable in the design view. But when a child form of the masterpage loads the page, it looks different. Can a child css rules dominate the properties of a parent css rules.
style type="text/css">
#container{position:relative;}
img#border{position:absolute;
}
#placeH{position:absolute; left:344px;
top: 325px;
height: 168px;
width: 708px;
bottom:287px;
}
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<div align="center" id="container">
<asp:Image ID="Header" runat="server" ImageUrl="~/header.png" Width="1196px"
Height="280px" />
</div>
<div id="border">
<asp:Image ID="Image1" runat="server" ImageUrl="~/border.png"/>// the border
that i try to set here appears fine in the masterpage design view..but on the childs
design view,,it appears at the bottom left of the page
</div>
<div id="placeH">
<form id="form1" runat="server">
<asp:ContentPlaceHolder id="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</form>
</div>
</body>
the only thing that I can see from here is that. You have some CSS that may not behave as you expect.
img#border{position:absolute;}
This will apply to an <img/> tag with the id="border". In the above HTML, you have an img inside a div with an id="border. You CSS for this should look something like.
div#border > img { postition:absolute; } if you want it applied to the image only.
or
#border { position:absolute; } if you want it applied to the whole div.
It is actually quite hard to see in the above HTML with the snippets. If the above does not solve it, paste the whole thing for me.
I think you should change the style of placeH into this.
#placeH{
position:absolute;
left:344px;
top: 325px;
height: 168px;
width: 708px;
}
^^
And yes, css from master page is applied for the child page.
i have 6 content place holder in my master page.
i need to set the background color [body] for all my content place holder in my master page to light gold color. so that all my content page wil content this color[body]
how do do it
The best way would be css:
body {
background: #FFD700;
}
As an alternative to Dave's solution, you could have a div at the top level inside your placeholders:
<asp:Content ID="first" ContentPlaceHolderID="_firstContainer" runat="server">
<div class='content'>
// do presentation
</div>
</asp:Content>
With css:
.content{
background: #FFD700;
}
You could wrap each content placeholder in a div in the master page then style each div so that the background colour is light gold.
<div class="goldcontent">
<asp:ContentPlaceholder ID="Content1" runat="server"></asp:ContentPlaceholder>
</div>
<%-- other controls --%>
<div class="goldcontent">
<asp:ContentPlaceholder ID="Content2" runat="server"></asp:ContentPlaceholder>
</div>
<%-- etc --%>
Then in your css file
div .goldcontent
{
background-color: # FFD700;
}