I have two listboxes and two buttons. Each listbox is in its own div and the two buttons are in their own div. One listbox should be on the left and the two buttons should be to the right of that with the other listbox to the right of the buttons. This is the markup I am using, but it is putting the 2nd listbox below the Remove button.
<p>Available Colors</p>
<div style="float:left; margin:5px;">
<asp:ListBox ID="lstAvailableColors" runat="server"></asp:ListBox>
</div>
<div>
<asp:Button ID="btnAdd" runat="server" Text="Add" /><br />
<asp:Button ID="btnRemove" runat="server" Text="Remove" />
</div>
<div style="margin:5px;">
<asp:ListBox ID="lstSelectedColors" runat="server"></asp:ListBox>
</div>
You should probably float them all left to get the layout you described. divs are by default rendered with block-display, which will put a linebreak between #2 and #3, if you don't float them.
Float all three divs to the left.
Also, you must set an explicit width for floated elements.
The fisrt div with a listbox will float to the left and the other divs will take up the remaining space on the page which will be to the right of the div that is floated left.
Is it a 3 column layout you need?
If so you need something like this
<div style="float:left; width:66%">
<div style="float:left; width:50%"></div>
<div style="float:right; width:50%"></div>
</div>
<div style="float:right; width:33%"></div>
Related
How can I show the label 'RegularExpressionValidator' on the right to the input
box and align the input box?
Putting it outside the div makes the label to the left on the other side.
<style type="text/css" media="all">
<!--
label{
display:inline-block;
width:100px;
}
-->
</style>
...........
<div style="text-align:center;">
<label>Phone:</label>
<asp:RequiredFieldValidator id="req_Phone" ControlToValidate="formWphone">*</asp:RequiredFieldValidator>
<asp:textbox id="formWphone" runat="server" />
<asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="formWphone"
ValidationExpression= "">Enter valid Phone number</asp:RegularExpressionValidator>
</div>
Your issue is that you've center-aligned all of the content in the wrapper div:
<div style="text-align:center;">
When extra text is added, it changes the width of the content to be centered.
Try changing this to:
<div style="text-align:left;">
or remove the style altogether.
Then if you need some space on the left, add some padding or margin to the container div.
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>
This is sort of a general web development question that I need some experts' advice on. This is probably quite a no brainer for some of you, but I am having trouble getting this to display properly.
I have a database table set up where each entry has 5 text fields, and one image. What I want to do is use the repeater to display the text on the left hand side of the div, and the image on the right hand side of the div (basically aligned with the center of the text).
Company Name
Description1
Description2
Description3 Image goes about here.
Description4
Description5
I have the repeater all configured properly and ready to go, it's displaying the text just fine in a well formatted way. However, I'm having trouble getting that image to display properly. Do I need to use text wrapping here to accomplish this? I'm pretty stuck and don't know where to proceed. I can post my ASP.net code here if desired.
Thank you so much in advance. Very helpful site for new programmers.
I'm assuming you can't set a fixed height on your column divs? Is so, and if you're happy to use an HTML table (many aren't) then your life will be much simpler than trying to vertically align an image inside a floated div using CSS. Try this:
<!DOCTYPE html>
<html>
<body>
<table style="width:960px; margin:auto 0;">
<tr>
<td style="width:75%;">
<asp:repeater...>
</asp:repeater>
</td>
<td style="width:25%;" valign="middle">
<asp:Image .../>
</td>
</tr>
</table>
Notice the valign="middle" attribute on the right td. Although valign is deprecated in HTML5, it still works in all modern browsers and all supported versions of IE.
NOTE: many will argue that tables aren't SEO friendly or that tables aren't intended for this, plus it's not strictly html5 compliant, so you'll need to way that up. Personally, because it just works and solves a simple problem that CSS can't without silly hacks, I'd use it without worrying too much.
If you want to have the div with the text inside to the left and the image to the right, you can use "Float: Left" to the div with the text inside and "float:right" to the div of the image. This should look like this :
<div style="float: left;"> <--- float:left
<table>
<asp:Repeater ID="TournoiAvenirRep" runat="server">
<ItemTemplate>
<tr>
<td>...</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
<div style="float:right"> <--- float:right
<img src='...' />
</div>
And if you want to have an other div BUT not on the same line , you must add a "clear:both" to the new div :
<div style="float: left;">
<table>
<asp:Repeater ID="TournoiAvenirRep" runat="server">
<ItemTemplate>
<tr>
<td>...</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
<div style="float:right">
<img src='...' />
</div>
<div style="clear:both"> <------ here clear both
...
</div>
Hope this will help you ! , vinc
EDIT : If you want learn more about css positioning and float you can go to W3 school, they have some nice tuto about it.
This is a CSS issue. You'll need two floated divs, something like this:
<div class="clearfix">
<div style="float:left; width:75%;">
<asp:Repeater ID="MyRepeater" runat="server" [etc] />
</div>
<div style="float:right; width:25%;">
<asp:Image ID="MyImage" runat="server" [etc] />
</div>
</div>
If you want specific examples, please see http://www.vanseodesign.com/css/vertical-centering/.
I am using ASP.NET 2.0.
I have Image and ImageButton Side by Side by like this.
<div style="width:80px">
<asp:Image ID="innerImgDesk1" runat="server" ImageUrl="~/images/advlefttop.png" Width ="60px"/>
<asp:ImageButton ID="ImgDeskIndicator1" runat="server" Width="20px" ImageUrl="~/images/Indicators/blue.png"/>
</div>
I want the ASP.NET Imagebutton on top of Image. I should see image button kind of indicator, where Imagebutton color will be changing. But Image color remains same.
Currently using the above code, it displays like below.
I want it to be displayed like below,
Could anyone tell me What I should do to display ImageButton on Image.
Thank you
Try setting the image as background image of the div tag like the following code:
<div style="width:80px; background: url(images/advlefttop.png)">
<asp:ImageButton ID="ImgDeskIndicator1" runat="server" Width="20px" ImageUrl="~/images/Indicators/blue.png"/>
</div>
Hope this helps!
Corix
if you are just worried about displaying button over image-button than you can do this by using div absolute position like
<div style="position:relative">
<div style="position:absolute">image button</div>
<div style="position:absolute> button</div>
</div>
I am using JQGrid within an ASP .NET MVC application. The grid itself is working great. However, the header height of the grid (or first grid on the page) is growing to match the height of my left navigation menu. Here is most of the Site.Master layout that I have. I just don't see why this is happening.
<div class="page">
<div>
<div id="left">
<div id="leftnavmenu">
<%= Html.MvcSiteMap().Menu("MvcSiteMapProvider", "activenav")%>
</div>
<div id="leftnav-msg">
Message goes here
</div>
</div>
<div id="main">
<div id="mainsitename">
<div id="mainsitenameimage"></div>
<div id="mainsitename1">Intake Tool</div>
</div>
<div id="mainpagetitle">
<%--<%=Html.MvcSiteMap().SiteMapPath(" > ") %>--%>
<asp:ContentPlaceHolder ID="PageTitle" runat="server" />
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="maintabledata">
<asp:ContentPlaceHolder ID="TableContent" runat="server" />
</div>
<div id="footer"></div>
</div>
</div>
</div>
I assume that #left has a float:left style, while #main does not. This appears to be a bug with jqGrid. There's another post that deals with the exact same issue.
I have actually created a jsFiddle example that illustrates the problem.
In the other post Oleg suggests that you use float:left on both side-by-side <div>s, with another div with clear:both after them. This would not work in my case, because I want the right div to expand to the whole remaining width of the browser window. Floated <div>s must have explicit widths associated with them (if not, they take on the width of the widest element inside them).
One work-around that worked for me is to set a height of the floated <div> to something small (1px) and set an explicit height for the content of that div. This is illustrated in the jsFiddle above.