Here is the code sample
<div class="Layouts">
<asp:ContentPlaceHolder ID="Center" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server" />
<p> </p>
</div>
The CSS that styles the Layouts div is
.Layouts
{
background-color: White;
margin-top: 17px;
padding-top: 18px;
}
Nothing to crazy there!
The problem I am having is that without the "<p> </p>" the white background does not fill down behind whatever I put in the two ContentPlaceHolders (and no they don't have an over riding background!)
With the <p> </p> it all works as I wish... but not as I expect!
Am I doing something wrong or is it a browser or a Sharepoint issue? Is there a better fix than the space?
Is the ContentPlaceHolder's floated?
If so, try adding: overflow:hidden; to the .Layouts selector.
Related
I am trying to put together a asp.net webforms website for a church fellowship organization and I am having to learn to work with building this website from scratch using Visual Studio Express 2013 for Web's Empty asp.net Website Template and since I have never done websites before, I am having to search through the Internet for examples, most of my programming experience comes from C# and I just don't seem to be able to find a solution for this.
Anyway my problem is that I can't figure out how to Center a asp.net Label on the SiteMasterPage.master
<div class="header1">
<br />
<br />
<h1 class="auto-style1">Calvary Christian FellowshipGA, Inc.</h1>
<div style="align-items: center">
<asp:Label ID="Label1" runat="server" CssClass="ccfgaLabel" ForeColor="#0066FF" Text="Calvary Christian FellowshipGA, Inc."></asp:Label>
</div>
<br />
<br />
<p>
Informational Text here.
</p>
<br />
<p>
More Informational Text here.
</p>
</div>
I've tried a couple things the above being the latest, the only thing I've found that actually worked was to use:
<center>
MY Label
</center>
the only issue with this use of 'center' is that I get the 'center' is deprecated warning. I would like to be able to do this correctly, could someone give me some suggestions how to get this done.
I tried the following from a .css file.
.ccfgaLabel
{
display: inline-block;
width: 230px;
/*margin-left: 10px;*/
margin-left: auto;
margin-right: auto;
}
The only thing that seemed to work in it were the
width: 230px;
and
margin-left: 10px;
I would like to set this up inside the css file since this is all gonna be on a MasterPage.
*Edit: I should point out that the only reason I decided to try a Label was that I wanted a Bordered and Shaded, Box aspect around the Text and I hadn't yet tried to see if bordering and shading was possible just around specific Text centered in the middle of the page.
So, since the comment worked, here's the posted answer.
Instead of your align-items that you set on the wrapper div, use the text-align property, that is used to specify the alignment of inline content:
<div style="text-align: center">
<asp:Label ID="Label1" runat="server" CssClass="ccfgaLabel" ForeColor="#0066FF" Text="Calvary Christian FellowshipGA, Inc."></asp:Label>
</div>
Though I recommend you not to set it as an inline style. Rather, give the div an id or a class and leave the property on the stylesheet.
MDN text-align docs
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
Although almost nobody supports IE6 anymore, I've been given the task to design an IE6-compatible webpage.
Here's the code:
<body style="background-color: #ccccdd;">
<form id="form1" runat="server"
style="margin: 0px 80px 0px 80px;
background-color: #f1f1f1;">
<div id="divPage" style="width: 100%">
<div id="divSelectOption" runat="server">
<div id="divInstruct" style="float: left;
position: relative;
display: inline-block;">
Select your gender:
</div>
<div style="margin-left: 10px;
display: inline-block;">
<asp:RadioButton ID="rbFemale" runat="server" style="display: block;"
Text="Female" GroupName="grpGender" Checked="true" />
<asp:RadioButton ID="rbMale" runat="server" style="display: block;"
Text="Male" GroupName="grpGender" />
</div>
</div>
</div>
</form>
</body>
Here's the problem:
If an IE6 browser opens the page (whether maximized or restored (meaning when the window only covers part of the screen)), all is displayed normally.
However, if the page is loaded when the browser is maximized, and then the user minimizes it, divInstruct gets pushed all the way to the right side of the window.
I apologize in advance if you feel that supporting IE6 is a waste of time, but these are the clients' demands.
I'd appreciate any help.
UPDATE: When I remove width: 100% from divPage's style attribute, the above problem is gone; however, this causes the margin attribute of form1 to stop working. (Only in IE6!)
I'd suggest checking your external css files carefully, if an invalid selector is passed into IE6, it ignores everything after it.
Also, ensure you're applying a css reset so you're starting from the same css state in each browser.
This doesn't feel like a typical IE6 problem to me. It feels like a coding problem that IE6 isn't able to resolve with the grace of its younger browser cousins.
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 a little problem with my site, I have a bar and on it a box that float above the bar, everything works fine in IE, Firefox, Opera, but in Chrome and Safari the box that must be above the bar float by the bar side no above it.
#barraDerecha
{
width:240px;
background-color:#e5e5e5;
border-left:solid 2px #CCC;
border-bottom:solid 2px #CCC;
position:absolute;
margin-top:-10px;
margin-left:717px;
height:auto;
}
#barraDerecha #menu
{
display:block;
position:fixed;
width:220px;
}
barraDerecha is the container and menu is the box that goes above the container
Can somebody help me please?
Thanks in advance
Just in case someone is getting the same chrome behaviour.
It looks like chrome considers that the viewport of an element added to the DOM after the page is loaded (for instance, using jQuery.load()) is restricted to the containing div of this element.
I guess .asp is injecting your barraDerecha after document load, so it positions relative to its container.
Thanks for u answer Thor you can see the example in www.autos.ultimahora.com/altaanuncio.html
I can't put fixed to #barraderecha cause in that way my bar move with the menu
Here is who I use the class:
<div id="barraDerecha" >
<div id="barraRight" runat="server">
<div style="padding:10px;" id="menu" >
<div class="titulosAzules15">
<center>
<asp:Label ID="lblUsted" runat="server" Text="USTED ELIGÍO EL PLAN"></asp:Label>
<br />
<br />
<asp:Image ID="imgPlan" runat="server" />
<br />
<asp:Label ID="lblPrecio" CssClass="DestaquesBordo14" runat="server"></asp:Label>
<br />
</center>
</div>
</div>
</div>
</div>
You have to select a plan and then push on Siguiente button
Pardon me, but isn't #menu within #barraDerecha?
If so, it would only be natural that it would be fixed within #barraDerecha unless you specify the position furthermore.
#barraDecha {
position:fixed; top:0; left:0; }
A better description (perhaps a visual) would help i terms of describing the problem more accurately.