I have a login page and I want to add a sidebar div to the left side. Currently when I write something in the lefthand side, it is flowing across the page? How do I fix this
Here is my code
<div align="left">
sdfsdfsdfsdfsfsdfsdf
</div>
<div align ="center" style="border: thick none #008080; height: 479px; width: 595px; color: #000000; font-size: medium; font-weight: bold;"><br /><br />
Not a User?
<asp:LinkButton ID="LinkButton1" runat="server" Font-Bold="True"
ForeColor="Blue" CausesValidation="false" onclick="LinkButton1_Click">Sign Up</asp:LinkButton><br /><br />
<center><div class="mainbars"> <div class="vpb_main_wrapper1" top=20 align="center"><br clear="all"></br>
<div><h1 align="center"
style="color: #000000; font-weight: bold; font-size: xx-large; font-family: Calibri;">
LOG IN</h1></div><hr /><br />
<div align="left" style="width:115px; padding-top:10px;float:left; color: #000000; font-size: medium; font-weight: bold; font-family: Calibri;">
UserName</div>
<div align="left" style="width:300px;float:left;">
<input id="txt_username" class="vpb_textAreaBoxInputs" type="text" value="" name="username" runat="server" onclick="return username_onclick()" placeholder="Username"/>
<asp:Label ID="LbelUser" runat="server"></asp:Label>
<asp:RequiredFieldValidator ID="txt_userna" runat="server"
ControlToValidate="txt_username" ErrorMessage="* Enter UserName"></asp:RequiredFieldValidator>
</div><br />................. etc etc
</center>
</div>
Something like this. You'll also need to use a clearfix hack for clearing the floats.
HTML
<div class="container">
<div class="cf">
<div class="sidebar">sidebar</div>
<div class="login">login</div>
</div>
hhjhj
</div>
CSS
.sidebar { float:left; width:300px; background:#eee;}
.login { float:right; width:400px; background:#ccc; }
/**
/* http://nicolasgallagher.com/micro-clearfix-hack/
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after { content: " "; /* 1 */ display: table; /* 2 */ }
.cf:after { clear: both; }
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf { *zoom: 1; }
JSFiddle Demo
Add this line of CSS in each Div
style="float:left;"
Related
I am using tinyMCE editor, and I am using 2 same divs with float:right; in the CSS.
The issue I am having is that when I save the HTML, and open the saved content on any browser, it doesn't look the same as in the editor.
As an example I have attached 2 pictures, note there is a difference in the height of the blue boxes (in the editor and in the output).
Editor:
Output:
Here is the HTML in the editor:
<div class="sub-mw" div="">
1 <br />1<br />1<br />1<br />
<!--#*#TStem1#*#-->
<div id="enews">
<div class="enewstext">News</div>
</div>
<!--#*#TEtem1#*#-->
<br /><br /><br />
<!--#*#TStem1#*#-->
<div id="enews">
<div class="enewstext">News</div>
</div>
<!--#*#TEtem1#*#-->
1<br />1<br />1<br />1<br />1<br /><br />as<br />dasd
<br />asd<br />a<br />da
</div>
Also Here is the css used:
.enewstext {
color: #FFF;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
padding-top: 15px;
padding-bottom: 15px;
background: #0163b1;
width: 100%;
box-shadow: 0px 5px 0px #FFF;
text-indent: 20px;
}
#enews{
background:#3394e1;
width:18%;
height:300px;
float:right;
}
Edit 1:
In this scenario, tracing the issue, it is caused by the <br> tag. It has a smaller height in the tinymce editor than on chrome.
Any Idea on how to fix this ?
I'm currently changing from table based layouts to use div layout instead. I'm struggling with the css. My styles just don't seem to be getting applied even though the css file is loading. What am I doing wrong?
.CategoryHeader
{
font-family: Verdana;
font-size: 10pt;
color: #2151b1;
text-align: left;
padding-bottom:3px;
padding-top:3px;
}
.CriteriaHeader {
font-family: Verdana;
font-size: 10pt;
text-align: left;
padding-bottom:3px;
padding-top:3px;
}
.divTable {
display: table;
border: none;
width:100%;
}
.divTR {
display: table-row;
width: 100%;
}
.divTD {
display: table-cell;
margin-bottom:22px;
}
<div class="divTable">
<div class="divTR">
<div class="divTD">
<LABEL class="CriteriaHeader">Number</LABEL>
</div>
</div>
<div class="divTR">
<div class="divTD">
<asp:TextBox id="txtNumber" runat="server" CssClass="Textbox" ToolTip="Enter Number to search"></asp:TextBox>
</div>
</div>
<div class="divTR">
<div class="divTD">
<LABEL class="CriteriaHeader">Description</LABEL>
</div>
</div>
<div class="divTR">
<ajaxToolkit:ListSearchExtender ID="cboDesc_ListSearchExtender" runat="server"
Enabled="True" TargetControlID="cboDesc" PromptCssClass="ListSearch">
</ajaxToolkit:ListSearchExtender>
<div class="divTD">
<asp:DropDownList id="cboDesc" runat="server" CssClass="DropDownList" ToolTip="Choose description to search"></asp:DropDownList>
</div>
</div>
</div>
<div>
<asp:Button id="btnSearch" runat="server" Text="Submit" CssClass="Button"></asp:Button>
<asp:Button id="btnClear" runat="server" Text="Clear" CssClass="Button"></asp:Button>
</div>
Instead of using so many table property, you can use position:relative/absolute/fixed, display:inline/inline-block. They are absolutely compatible with IE6+ and non-IE browsers. Like table、table-row、table-cell，they are not absolutely for IE browser.
I am trying to display an address which includes the following information: Title, division, address1, address2, town/state/zip, and country (5 seperate lines worth of data). The problem is sometimes the company may only have the title, address1, and town/state/zip yet other times it may be all but address2. This is determined upon a db record request server side. Therefore how can I make my output look proper when some of my labels will be blank? I would like div's that contain an empty span to be essentially collapsed/removed. My only idea of how was to use jquery and a selector to find all divs with blank spans (since thats all an asp.net label really is) and then remove those divs however this seems like such bad form. Is there any way to do this with css? Possible Code would be something like: $('span:empty:only-child').parent('div').remove();
Picture Examples (Ignore spacing/indentation issues which I will fix)
Missing Division, Address2, and Country
All Possible Fields
The Html
<asp:Label runat="server" ID="lblBillingAddressHeader" CssClass="lblBillingAddressHeader" Text="Billing Address:" />
<div style="position:relative; top:150px; left: 113px;">
<div class="test">
<asp:Label runat="server" ID="lblBillingDivision" CssClass="lblBillingShippingDivisionFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress" CssClass="lblBillingShippingFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress2" CssClass="lblBillingShippingFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress3" CssClass="lblBillingShippingFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress4" CssClass="lblBillingShippingFont" />
</div>
</div>
The CSS
.test {
position: relative;
top: 0px;
left: 0px;
height: 12px;
width: 300px;
}
.lblBillingShippingDivisionFont {
font-size: small;
font-weight: bold;
}
.lblBillingShippingFont {
font-size: 10.6px;
}
Could you restruture your HTML?
HTML
<div style="position:relative; top:150px; left: 113px;">
<asp:Label runat="server" ID="lblBillingDivision" CssClass="lblBillingShippingDivisionFont" />
<asp:Label runat="server" ID="lblBillingAddress" CssClass="lblBillingShippingFont" />
<asp:Label runat="server" ID="lblBillingAddress2" CssClass="lblBillingShippingFont" />
<asp:Label runat="server" ID="lblBillingAddress3" CssClass="lblBillingShippingFont" />
<asp:Label runat="server" ID="lblBillingAddress4" CssClass="lblBillingShippingFont" />
</div>
CSS
.lblBillingShippingDivisionFont,
.lblBillingShippingFont {
position: relative;
top: 0px;
left: 0px;
width: 300px;
display: block;
}
.lblBillingShippingDivisionFont {
font-size: small;
font-weight: bold;
}
.lblBillingShippingFont {
font-size: 10.6px;
}
jsFiddle http://jsfiddle.net/LkFSV/
jQuery code:
$(document).ready(function(){
$('div').each(function() {
if ($(this).find('span').text() == '') {
$(this).hide();
}
});
});
http://jsbin.com/axaxut/1/edit
Unfortunately, there are no parent selectors in CSS. If there was, you could do something like:
span:empty:parent { display: none; }
Your best bets are the jQuery that you already have or to do it server side, I would personally say that server side is your best option.
Since this is asp.net code, you can check from server side code if the address2 is empty and simply hide the control.
if(string.IsNullOrEmpty(lblBillingAddress2.Text))
lblBillingAddress2.Visible = false;
I have two div's one has textbox in it and other just plain text. This is how it looks:
. I want to move text div which has language in it to the next line where arrow is showing in the pic. I searched every where cant find any solution the wordwrap is not working. Also i have to do this within css.
Here is the aspx code for both:
<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<asp:textbox id="box" runat="server"></asp:textbox>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
css:
#search
{
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
#txtBox
{
float: left;
}
Here is the solution for anyone who is stuck in same situation:
#text
{
clear: left;
}
clear:left moves the text to next line to the bottom of the textbox. Then you can use margin-left to set the text at any position you want.
You don't want to use float:left in this situation. float:left is for stacking block level HTML elements horizontally.
block level elements automatically stack vertically, which seems to be what you want.
However, the <asp:TextBox> is an inline level element, so you can put a <br /> after it, or wrap it in a <div>.
Solution:
HTML
<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<asp:textbox id="box" runat="server"></asp:textbox>
<br />
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
OR
<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<div>
<asp:textbox id="box" runat="server"></asp:textbox>
</div>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
CSS
.search-class
{ /* Curt is right, the ID="search" is in a naming container, */
/* so use class selector */
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
have you tryed doing:
clear:both on the div with the language?
and maybe you should contain the textbox
/* Containing floats */
.contain:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6 */
* html .contain {
height: 1%;
}
/* IE7 */
*:first-child+html .contain {
min-height: 1px;
}
When ASP.NET controls are rendered to the client, they sometimes produce different IDs (unless specified otherwise in ASP.NET 4).
Looking at your code, I don't see any control with an ID of txtBox, so these styles aren't being applied.
When working with ASP.NET, I find its best to use classes for styling, as these will stay the same after rendering.
<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False" CssClass="search">
<div id="txtBox">
<asp:textbox id="box" runat="server" CssClass="txtBox"></asp:textbox>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
.search
{
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
.txtBox
{
float: left;
}
I haven't tested this code, but you should now see these styles applying correctly, and therefore you can amend them as you wish.
I want to open a modalpopup in frame.I pasted here my frame's htlm code and css style and This code works well with IE 7.0 but not with IE 6.0.In IE 6.0 i see scrollbars in my panel.What can cause this problem?How can i solve it?
I open frame in my main page by these width and height.
<cc1:modalpopupextender ID="mdlDelete" runat="server" PopupControlID="PnlFrameDelete" BackgroundCssClass="modalBackground" OkControlID="btnDeleteOk" CancelControlID="btnDeleteCancel" TargetControlID="btnDelete" >
</cc1:modalpopupextender><asp:Panel ID="PnlFrameDelete" runat="server" style="display:none">
<iframe id="deletefrm" frameborder="0" src="../Frame/deletefrm.aspx" height="98px" width="342px" > </iframe> <div> <asp:Button ID="btnDeleteOk" runat="server" Text="Yes" Width="40px" style="display:none" /> <input id="btnDeleteCancel" type="button" value="No" style="width:20px;display:none" /> </div> </asp:Panel>
<body style="margin: 0px;">
This is the frame's aspx:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:Panel ID="pnlDelete" runat="server" CssClass="modal-dialog"> <div class="container"> <div class="header">
<div class="msg">Warning</div> <asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="$find('mdlDelete').hide(); return false;" /> </div><div class="body"> <h2><asp:Label ID="lblMsg" runat="server" Text="Are u sure?"></asp:Label></h2> </div> <div class="footer"> <div class="right">
<asp:Button ID="btnDeleteOk" runat="server" Text="Yes" Width="40px" OnClientClick="okay();" /> <input id="btnDeleteCancel" type="button" value="No" onclick="cancel();" style="width:40px" /> </div> </div> </div> </asp:Panel> </form>
And this is the CSS:
/* dialog frame */
.modal-dialog
{
position:absolute;
margin:auto;
height:98px;
}
/* dialog contents container */
.modal-dialog .container
{
font-family:tahoma,helvetica,arial,sans-serif;
font-size:11px;
width:340px;
border:solid 1px #99aabd;
background-color:#F2F9FF;
padding: 0px 0px 0px 0px;
}
/* dialog header */
.modal-dialog .header
{
background:url(../images/sprite.gif) repeat-x 0px -1100px;
height:20px;
padding-top:5px;
}
/* dialog header message */
.modal-dialog .header .msg
{
vertical-align:middle;
padding-left:6px;
color:#fff;
font-size:12px;
font-weight:bold;
}
/* dialog body */
.modal-dialog .body
{
height:40px;
background-color:#F2F9FF;
}
/* dialog body message */
.modal-dialog .body h2
{
padding-top:10px;
background-color: #F2F9FF;
font-size:14px;
text-align:center;
font-weight:normal;
}
/* dialog footer */
.modal-dialog .footer
{
height:30px;
background-color: #F2F9FF;
}
/* dialog footer buttons */
.modal-dialog .footer .right
{
background-color: #F2F9FF;
float:none;
text-align:center;
}
/* dialog footer checkbox */
.modal-dialog .footer .left
{
background-color: #F2F9FF;
float:left;
text-align:left;
}
/* dialog close */
.modal-dialog .close
{
right:4px;
background: url(../images/icons.gif) no-repeat -732px 0px;
width:16px;
cursor:hand;
position:absolute;
top:5px;
height:16px;
}
/* dialog close hover */
.modal-dialog .close:hover { background: url(../images/icons.gif) no-repeat -749px 0px; }
/* modal overlay */
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=50);
opacity:0.5;
}
I guess this is due to the well known "Border Bug" in the box model of IE6.
Please, have a look to:
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
or:
http://www.simple-site.eu/test-lab/ie-bugs/ie6-border-bug.html
Well from a quick look I already see that your frame is set to a width of 342px while your container is set to 340 in the CSS. You also set padding on some of the elements within the container. You'll have to include that in the width and height of your container in order to avoid the scrollbars.