I have a couple divs and they are set up to be sepereate. but when I load the page they all go underneath the first div that is created. So the example below SiteFullControl is the first div, everything just falls underneath here when the page load. any ideas?
<div id="SiteFullControl" >
<fullcontrol:FullAlbum runat="server" ID="FullControlAlbum" />
</div>
<div id="SitePartialControl" >
<partialalbum:partialalbum ID="partialcontrolalbums" runat="server" />
</div>
<div id="SiteViewOnlyAlbums" class="">
<viewonly:viewonly ID="viewonlyalbums" runat="server" />
</div>
<div id="SitePublicAlbums" class="">
<publicalbum:publicalbum ID="publicalbum" runat="server" />
</div>
<div id="SiteFavoriteAlbums" class="">
<favoritealbum:favoritealbum ID="favoritealbum" runat="server" />
</div>
<div id="SiteFriends" class="">
<friends:friends ID="friend" runat="server" />
</div>
<div id="SiteCreateAlbum" class="">
<createalbum:createalbum ID="createalbums" runat="server" />
</div>
Example of whats happen when the page load
<div id="SiteFullControl" >
<fullcontrol:FullAlbum runat="server" ID="FullControlAlbum" />
I checked the css with firebug and it does not have any position for the css.
use this CSS rule, it may work:
display:block;
no more help can be given without accessing CSS properties.
Related
When I deploy an ASPX page with markup alone it creates duplicate Content Editors.
It's a SharePoint 2013 site, and the controls have no javascript or text attached. They're simply created in markup. Upon deployment, a new Content Editor is generated in addition to the old ones. Do I have to uniquely identify the controls beyond an id somehow to prevent this behavior? I'm working on a very old site I inherited, so maybe there's something improperly configured somewhere?
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<div class="main-pages-content">
<div id="mainTabstrip" class="mt-4" style="width: 100%;">
<ul>
<li class="k-state-active">Current Announcements</li>
<li>FAQ</li>
<li>Research FAQ</li>
</ul>
<div class="row">
<div class="col-10">
<WebPartPages:WebPartZone runat="server" Title="loc:Blog" ID="webPartZoneCurrentAnnouncements" FrameType="TitleBarOnly">
<zonetemplate></zonetemplate>
</WebPartPages:WebPartZone>
</div>
</div>
<div class="row">
<div class="col-10">
<WebPartPages:WebPartZone runat="server" Title="loc:FAQ" ID="webPartZonzeFAQ" FrameType="TitleBarOnly">
<zonetemplate>
<WebPartPages:ContentEditorWebPart runat="server" WebPart="true" Title="FAQ Content Editor" ID="contentEditorFAQ" FrameType="None">
</WebPartPages:ContentEditorWebPart>
</zonetemplate>
</WebPartPages:WebPartZone>
</div>
</div>
<div class="row">
<div class="col-10">
<WebPartPages:WebPartZone runat="server" Title="loc:ResearchFAQ" ID="webPartZoneResearchFAQ" FrameType="TitleBarOnly">
<zonetemplate>
<WebPartPages:ContentEditorWebPart runat="server" WebPart="true" Title="Research FAQ Content Editor" ID="contentEditorResearchFAQ" FrameType="None">
</WebPartPages:ContentEditorWebPart>
</zonetemplate>
</WebPartPages:WebPartZone>
</div>
</div>
<SharePoint:ScriptBlock runat="server">if(typeof(MSOLayout_MakeInvisibleIfEmpty) == "function") {MSOLayout_MakeInvisibleIfEmpty();}</SharePoint:ScriptBlock>
</div>
</div>
</asp:Content>
I am designing an ASP.NET page with using some data from SQL Server Database. I used <DataList> to call data and fill any place I want to in the page. My problem is, CSS seems not working for the element in <HeaderTemplate>. I searched some posts but I couldn't find an answer.
I tried to style <p> like you see in the code, and I tried to style the data I called with <span> too. Then I tried to use both of them at the same time as you see. None of them works.
Here is my code:
<div class="col-lg-4">
<img class="img-circle" src="../Images/icons/1.png" alt="Generic placeholder image" height="120" width="120" style="position:relative;">
<h2>Last News</h2>
<asp:DataList ID="DataList1" runat="server">
<HeaderTemplate><p style="text-align:center;"></HeaderTemplate>
<ItemTemplate><span style="text-align:center;"><%#Eval("news_header") %></span></ItemTemplate>
<FooterTemplate></p></FooterTemplate>
</asp:DataList>
<p><a class="btn btn-default" href="haberler.aspx" role="button">Devamını Oku »</a></p>
</div>
UPDATE and SOLUTION:
When I looked at the codes in browser while localhos was working, I saw the problem was table that Datalist creates. So I framed that table with div just out of Datalistcode and write the CSS class to make it work with all screen sizes. Here is the codes:
Asp.Net Side:
<div class="col-lg-4">
<img class="img-circle" src="../Images/icons/1.png" alt="Generic placeholder image" height="120" width="120" style="position:relative;">
<h2>Son Haberler</h2>
<div class="col-lg-12"><asp:DataList ID="DataList1" runat="server">
<HeaderStyle CssClass="deneme2"/>
<ItemTemplate>
<span><%#Eval("haber_baslik_tr") %></span>
</ItemTemplate>
</asp:DataList></div>
<br /><p><a class="btn btn-default" href="haberler.aspx" role="button">Devamını Oku »</a></p>
</div>
CSS Side:
.col-lg-12 table{
width:100%;
}
.col-lg-12 table tbody tr td{
text-align:center;
}
Use DataList.HeaderStyle
<HeaderStyle CssClass="MyHeaderClass">
</HeaderStyle>
I'm working on an aspnet application and twitter bootstrap.
I have a situation where i need to hide a span based on a variable witch I can do correctly. The problem is that the hidden span keeps the width and breaks the next div.
<div class="row-fluid">
<div class='<%= (showTitle ? "span4" : "hide") %>'>
<label>Title</label>
<ASP:DropDownList ID="DpdLstTitle" runat="server" CssClass="span12"></ASP:DropDownList>
</div>
<div class='<%= (showTitle ? "span8" : "span12") %>'>
<label>Name</label>
<ASP:TextBox ID="TboxName" runat="server" MaxLength="80" CssClass="span12" />
</div>
</div>
Any suggestions ?
You will have to add in some css as bootstrap has added a margin to the second row
Probably:
margin-left: 2.127659574468085%;
So you'll have to override it. Insert
margin-left: 0;
Example HTML:
<div class="row-fluid">
<div class='<%= (showTitle ? "span4" : "hide") %>'>
<label>Title</label>
<ASP:DropDownList ID="DpdLstTitle" runat="server" CssClass="span12"></ASP:DropDownList>
</div>
<div class='<%= (showTitle ? "span8" : "span12 hiddenColBefore") %>'>
<label>Name</label>
<ASP:TextBox ID="TboxName" runat="server" MaxLength="80" CssClass="span12" />
</div>
</div>
Example CSS:
.hiddenColBefore {
margin-left: 0 !important;
}
I have a navigationbar that's controled completly by css ul and li.
The first unordered list contains listitems which are always displayed (General Site pages).
on hovering over the listitem (Gamma), the sublistitems appear. These sublistitems are themself in an unordered list of car models with the modelname. Hovering one of these items show me a picture of the car in a seperate div.
When I create the list of cars manually all works fine. The car models en their image are shown correctly.
When I create the unordered list dynamically by a listview. The car names are not shown.
If I place the listview out of the navigation ul. The listview works correct.
I assume it has something to do with the moment that the listview creates the unordered list. Can anyone point me in the right direction?
My ASP.net code
<nav>
<ul class="menu">
<li><a class="active" href="Default.aspx">H</a></li>
<li>Gamma
**<asp:ListView ID="lvGamma" runat="server">
<LayoutTemplate>
<ul>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</ul>
</LayoutTemplate>
<ItemTemplate>
<li><a href='<%# "AixamGamma.aspx?Model=" + Eval("car.NewCarID").ToString %>' class="sublistitem" >
<asp:Label ID="lblModelName" runat="server" Text='<%# Eval("car.ModelName") %>'></asp:Label></a>
<div class="modeldetail">
<div class="redbox">
<div class="whitebox">
<div class="container_12">
<div class="wrapper">
<div class="grid_5">
<h3>
<asp:Label ID="lblModelSlogan" runat="server" Text='<%# Eval("car.Slogan") %>'></asp:Label>
</h3>
</div>
<div class="grid_3">
<div class="wrapper">
<img src='<%# Eval("image.ImageLocationPath") + Eval("image.ImageFileName")%>' alt='<%# Eval("car.ModelName") %>'
class="img-max-h200-w200" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ItemTemplate>
</asp:ListView>**
*<ul>
<li>City</li>
<li>CityS</li>
<li>Crossline</li>
<li>GTO
<div class="modeldetail">
<div class="redbox">
<div class="whitebox">
<div class="container_12">
<div class="wrapper">
<div class="grid_5">
<h2>
De nieuwe Aixam Gto</h2>
<p>
Rijden zonder rijbewijs in een sportief kleedje</p>
</div>
<!--- image width max 220px --->
<div class="grid_3">
<div class="wrapper">
<img src="images/Sliders/Aixam%20GTO.jpg" alt="Gto" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>Crossover</li>
</ul>*
</li>
<li>Tweedehands</li>
<li>Onderhoud/herstelling </li>
<li>Wetgeving</li>
<li>Contact</li>
</ul>
</nav>
the bold part doesn't work except when its placed out the navigation list, the italic part does
thx for the help
I got it working. I've tested the code with the hard coded unordered list AND the listview together in one item. Removing the hard coded list did the trick....
I would like to produce a slight reflection on the two Hyperlink images i have embedded within div tags. What styles would I have to use? Any good links would be great too
Thanks
<div class="paneStyle">
<asp:Label ID="followUs" runat="server" Text="Follow us on:" CssClass="followUsStyle"></asp:Label><br style="line-height:30px;"/>
**<div id="FB" class="IconStyle"><asp:HyperLink ID="facebook" runat="server" ImageUrl="/_layouts/Facebook.png" NavigateUrl="http://www.........w"></asp:HyperLink></div>
<div id="TW" class="IconStyle"><asp:HyperLink ID="twitter" runat="server" ImageUrl="/_layouts/Twitter.png" NavigateUrl ="http:........"></asp:HyperLink></div> **
</div>