Move div in next line using css - asp.net

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.

Related

DIV tags moving when moving other DIV tags

The problem I am getting is that when i am moving a DIV tag another DIV tag is automatically moving aswell which is what i don't want.
This is an image of what is on my screen now:
The Labels, Textboxes is inside 1 DIV tag, The box image is the background of another DIV tag and the button has another DIV tag.
This is my HTML code of this:
<div id="LoginBox" style="background-image: url(Image/LoginBox_v2.png); background-repeat:no-repeat; height: 500px; width: 500px;">
<div id="Information">
<asp:Label ID="lbl_Username" runat="server" Text="Username:"/>
<br />
<asp:TextBox runat="server" ID="tb_Username"/>
<br />
<br />
<asp:Label ID="lbl_Password" runat="server" Text="Password:" />
<br />
<asp:TextBox runat="server" ID="tb_Password" TextMode="Password" />
<div id="container">
<a href="bHomePage.aspx" class="button" id="buttonlogin">
Login
<span class="icons button" />
</a>
</div>
</div>
I want to be able to move the Information DIV tag down inside the box in a good position, but when i try and set the CSS the other DIV tag LoginBox moves down aswell?
Here is my CSS of all the DIV tags at the moment:
#LoginBox {
margin-left: 35%;
margin-top: 0%;
}
#Information {
margin-left: 0%;
margin-top: 0%;
height: 460px;
}
#container {
margin-left: 0%;
width: 125px;
}
Some of the CSS show 0% because i moved back to 0% when it didn't work. I have also tried moving all the objects separate but that didn't work either?
Try adding
overflow: auto;
into your parent div which is LoginBox on your code.
also its better to mention full code here. because there are 3 dives opened but only 2 closed. hope you have other one closed some ware down.
gl!

Validation Summary vertical alignment

I have a two column layout page with a Validation Summary (VS) control above the 2 columns. The VS is centered in the container above the columns, which is what I want, but I also want the different bullet points to be vertically aligned, if possible. I have tried several things, including placing the VS inside a div (inside the container div that is center aligned) with text-align:left;, but that moves the entire div to the side of the container. I have also tried making the div text-align:center; and the VS text-align:left;, but that also moves the entire block all the way to the left. I've also tried the same thing with a table, but no luck.
This is in Firefox by the way. I haven't tested in other browsers, but it needs to work in FF.
Here is pic to show the messed up vertical alignment:
And here is the code for my VS control, without my alignment attempts (if more code is needed, let me know):
<div id="container">
<asp:Label ID="lblStatus" runat="server" ForeColor="Red"></asp:Label>
<asp:ValidationSummary ID="VS1" runat="server" CssClass="validator" ValidationGroup="theform" />
<div id="leftCol">
Could somebody help me vertically align those bullet points in the center of the page?
Since bullet points are part of the list items I don't think you will be able to align them. Why not try something like having a top column with 3 divs and place your validationsummary control in the middle one. Try this
HTML Code
<div id="container" class="container">
<div id="top" class="top">
<div id="topLeft" class="topLeft">
</div>
<div id="topMiddle" class="topMiddle">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
</div>
<div id="topRight" class="topRight">
</div>
</div>
<div id="bottom" class="bottom">
<div id="bottomLeft" class="bottomLeft">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="input value" ControlToValidate="TextBox1" Text="*"></asp:RequiredFieldValidator><br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Need come input for this" ControlToValidate="TextBox2" Text="*"></asp:RequiredFieldValidator><br />
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
<div id="bottomRight" class="bottomRight">
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="please input text" ControlToValidate="TextBox3" Text="*"></asp:RequiredFieldValidator><br />
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="Where is the text?" ControlToValidate="TextBox4" Text="*"></asp:RequiredFieldValidator><br />
<asp:Button ID="Button2" runat="server" Text="Button" />
</div>
</div>
</div>
CSS
.container
{
display: block;
width:800px;
margin:0px;
padding:0px;
}
.top
{
display:inline-block;
width:800px;
}
.bottom
{
display:inline-block;
}
.topMiddle
{
display:inline;
background-color:Yellow;
float:left;
width:300px;
}
.topLeft
{
display:inline;
float:left;
width:250px;
}
.topRight
{
display:inline;
float:left;
width:250px;
}
.bottomLeft
{
display:inline;
width:400px;
float:left;
background-color:Orange;
}
.bottomRight
{
display:inline;
width:400px;
float:left;
background-color:Lime;
}
Hey you may define your parent text-align left center right
according to your design
Try using this one....
<style>
.validator ul li { text-align:left; }
</style>
Edit
Set padding left or margin left to ul as you want...
.validator ul { padding-left: 100px; }

Is there a solid way to top align labels to their controls?

I'm looking for a straight forward css solution that will force labels to top align with their controls in asp. So for example:
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
Would appear something like:
Control Label
[[[[[]]]]]]]]]]]]V
Any ideas?
Wrap them both in a span or div:
<span class="field">
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
</span>
Then:
.field label,
.field select
{
display: inline-block;
vertical-align: top;
/* achieves same as inline-block for IE7 */
*display: inline;
*zoom: 1;
}
You can try putting them in a container, and apply specific styling for spans within that container. The example below might need a little tweaking, but it should point you in the right direction:
div.container span {
display: table-cell;
vertical-align: top;
}
div.container input {
display: table-cell;
vertical-align:middle;
}
And then on the page:
<div class="container">
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
</div>

css alignment troubles with 3 column layout

My site looks like this:
I've coloured the central info bit red, so you can see. It's too far down the page! I can't work out why.
Here's the css (well, actually scss, but you get the idea) for that section:
#searchresult {
.left {
background-color:yellow;
float:left;
margin-right:0.5em;
}
.center {
background-color:red;
#activity {
float:right;
}
}
.right {
background-color:green;
float:right;
width:145px;
margin-left: 1em;
.info, .email {
#include minimal-btn();
a {
padding: 3px 0 0 28px;
}
}
}
}
(If you haven't seen it before, scss is a cool thing that compiles down to css. It works just as you'd think it would.)
Here's the html:
<ItemTemplate>
<div id="searchresult" class="box group">
<div class="left">
<img id="imgLogo" runat="server" alt="Logo" src=""/>
</div>
<div class="right">
<asp:Panel ID="pnlEmail" runat="server">
<div class="minimal email"><asp:HyperLink ID="lnkEmail" runat="server">Email this business</asp:HyperLink></div>
</asp:Panel>
<asp:Panel ID="pnlMicrosite" runat="server">
<div class="minimal info"><asp:HyperLink ID="lnkMicrosite" runat="server">Full company info</asp:HyperLink></div>
</asp:Panel>
<asp:Panel ID="pnlRecommends" runat="server" CssClass="recommends">
<span>Recommends: <strong><asp:Literal ID="litRecommends" runat="server"></asp:Literal></strong></span>
</asp:Panel>
</div>
<div class="center">
<span id="activity">Activity: <asp:Literal ID="litCompanyActivity" runat="server"></asp:Literal></span>
<h3><asp:Literal ID="litCompanyName" runat="server"></asp:Literal></h3>
<em><asp:Literal ID="litCompanyLocation" runat="server"></asp:Literal></em>
</div>
</div>
</ItemTemplate>
I'm pretty new to web design. Css isn't very intuitive for me, and I can't work out what is going on here. In the guide I was following This problem didn't seem to arise.
This is causing the problem:
<h3><asp:Literal ID="litCompanyName" runat="server"></asp:Literal></h3>
specifically, the default margin-top on the h3.
You can remove the margin-top, if that's what you want:
h3 {
margin-top: 0
}
Or, you can set overflow: hidden on .center to prevent collapsing margins, which is the source of your "alignment problem".

styling with div blocks

I have a single line (left screen to right side) that I want to format so that the form look justified regardless the number of elements as the style is repeated (between 2 and 5 elements)
Why are the div tags overlapping each other when I inspect the following rendered HTML?
<div class="grid_7 ">
<div class="grid_2">
<asp:TextBox ID="TextBoxFirstName" runat="server" Text='<%# Bind("F1FirstName")%>'></asp:TextBox>
</div>
<div class="push_1 grid_2 float-left ">
<asp:Label Text="Last Name: " ID="LastName" runat="server" />
</div>
<div class="grid_3 float-left">
<asp:TextBox ID="TextBoxLastName" runat="server" Text='<%# Bind("F2LastName")%>' />
</div>
</div>
[EDIT]`.float-left
{
float:left;
}
.float-right
{
float:right;
}`
.container_12 .push_1 {
left: 80px;
}
.container_12,
.container_16 {
padding: 0 10px 0 10px;
margin-left: auto;
margin-right: auto;
width: 960px;
height: auto;
}
.grid_12 {
display: inline;
float: left;
margin-left: 0px;
margin-right: 0px;
}
All is wrapped in the "container_12" and "grid_12" within that container within the master page. Grids are evenly spaced portions within the container so I will not include that code. Pushes/pulls are left right movements of the div in and all defined with "position:relative" the style float-left was my attempt to manually align these divs and simply assign the property "float-left" Please let me know if more is needed.
You're going to need to provide all applicable styles from your stylesheet.
eg: grid_7, grid_2, grid_3, push_1, etc

Resources