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
Related
I want my header to look like this:
Link | Link | Link Image
-----------------------------------------------------------------------
What I have instead is:
Link | Link | Link
-----------------------------------------------------------------------
Image
ASP code:
<div class="hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" EnableViewState="False" IncludeStyleBlock="true" Orientation="Horizontal" >
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" ImageUrl="~/ICONS/About/home_Icon.png"/>
<asp:MenuItem NavigateUrl="~/About.aspx" ImageUrl="~/ICONS/About/about_Icon.png"/>
<asp:MenuItem NavigateUrl="~/RestrictedPages/AdminMenu.aspx" ImageUrl="~/ICONS/About/admin_Icon.png"></asp:MenuItem>
</Items>
</asp:Menu>
<div class="logo">
<asp:Image ID="Image1" runat="server" ImageUrl="~/ICONS/About/logo.png" />
</div>
</div>
CSS:
div.hideSkiplink {
background-color: #3a4f63;
width: 100%;
}
div.logo {
float: right;
}
Inspecting the element in Firebug shows:
<div class="hideSkiplink">
<a href="#NavigationMenu_SkipLink">
<div id="NavigationMenu" style="float: left;">
<div style="clear: left;"></div>
I think the div with clear: left is being created automatically and that is what is causing the issue.
What can be done to prevent this element from being created or is there a workaround to compensate for its inclusion?
The correct, and complete, answer is:
1) add, as "musium" commented, the following to your CSS
#IDOfYourMenuControl + div {
clear: none !important;
}
This will stop the unexpected
<div style="clear: left";></div>
2) add the following to your asp.menu tag
SkipLinkText=""
This will stop the unexpected
<a id="yourmenuID_SkipLink">
tag from being created.
You're welcome. :-)
Arrange your divs properly
e.g.
<div id="dvParent">
<div style="float:left">
Link | Link | Link
</div>
<div style="float:right">
Image
</div>
<div style="clear:both;"></div>
</div>
http://jsfiddle.net/PhKhg/
I know this question is very old… but I’ve just had the same problem and for me, the following solution worked:
#IDOfYourMenuControl + div {
clear: none !important;
}
nav div:nth-child(a number){
clear:none !important;
}
I have a menu made of an <ul>. Every <li> has inside an <a>, and every <a> has an image and a label.
the image changes on hover (javascript) into a bigger image, so the size of the images is of no help. I would like to align the image vertically on the middle of the menu item. here you have the code:
<script type="text/javascript">
<!--
function changeImage(element, toReplace, withReplace) {
var str = document.getElementById(element).src;
document.getElementById(element).src = str.replace(toReplace, withReplace)
}
// -->
<%# Control Language="C#" AutoEventWireup="true" CodeFile="Menu.ascx.cs" Inherits="UserControls_Menu" %>
<ul id="navmenu">
<li><a id="default" runat="server" href="~/Default.aspx" onmouseover="changeImage('sideBar_Menu1_Image7', 'Calendar24x24.png', 'Calendar32x32.png');"
onmouseout="changeImage('sideBar_Menu1_Image7', 'Calendar32x32.png', 'Calendar24x24.png');">
<div class="divImage">
<asp:Image ID="Image7" runat="server" ImageUrl="~/Images/Calendar24x24.png" />
</div>
<div class="divLabel">
<asp:Label ID="Label6" runat="server" Text="CALENDAR" meta:resourcekey="Label6Resource1"></asp:Label>
</div>
</a></li>
.divImage
{
width: 29px;
height: 29px;
float: left;
text-align: center;
vertical-align: middle;
}
.divLabel
{
float: left;
padding-top: 3px;
}
no matter what I do, align-vertically doesn't work...the only way I made things work was with tables, but then the click only works on the image, it doesn't on the lable too...I tried without divs too, can't find a way
edit 3
http://jsfiddle.net/HerrSerker/td4jy/2/
edit 2
another proposal is
don't put them inside as <img /> element but as background-image with background-position: 10px 50% or something
edit 1
http://jsfiddle.net/HerrSerker/sftGT/1
orig
Don't use float: left floats are not vertically alignable. use display:inline-block instead together with line-height values.
I work on C# Asp.net
Main div
---- table
want to show this div on middle of the form.i want to build a login form.my table contain
User name:**(it's a lable,on browser it's broken like user
name : show why?)**
password:
<div id="main">
<table width="600px" border="1">
<tr>
<td>
<asp:Label ID="Label1" runat="server" CssClass="cssLabel" Text="User Name :"></asp:Label>
</td>
<td>
<asp:Label ID="Label2" runat="server" CssClass="cssLabel" Text="Password :"></asp:Label>
</td>
</tr>
</table>
</div>
want to show div on middle of the form? and why my lable text are going to broken how to solve it?
if u gone to google.com than you see text box take position on middle of the frame.i want this .i want my controls also take position on the middle of the frame.How to do that?
You can use this to show idiv n the middle of the form:-
<div style="margin-left:auto;margin-right:auto;">Put the controls here </div>
You've edited your question now so this doesn't give you the exact code you need, but would help you work it out / others who view your question with a similar problem. So here goes... you need
something like this:
<style type="text/css">
.wrp { width: 100%; text-align: center; }
.frm { text-align: left; width: 500px; margin: auto; border: 1px solid black; }
.fldLbl { white-space: nowrap; }
</style>
<div class="wrp">
<div class="frm">
<span class="fldLbl">User name:</span>
</div>
</div>
try this option, that is style the div with style="width:100%;text-align:center"
I'm helping an artist maintain her website and have inherited some pretty outdated code. Have moved lots of redundant common code to include files and am now working on moving from inline styles to more CSS-driven styles.
For the gallery pages, e.g. http://artistsatlaketahoe.com/abstract.html, a lot of inline styling is used to force the current layout. My preference would be to replace this entirely with CSS that presents the following table-like layout within the "content" div:
[image] [image descriptives and purchase button]
[image] [image descriptives and purchase button]
[image] [image descriptives and purchase button]
I'd like to middle-align the image descriptives & purchase button relative to the image if possible. And then apply some padding above and below each row to stop using tags for vertical spacing.
Any ideas how to create a div that I can use to get this kind of layout?
Thanks!
Using inline style for simplicity, move to CSS to accomplish your goal.
<div>
<img src="#" style="float: left; padding: 10px 10px 10px 0;" />
<div>
<p>Text</p>
<input type="submit" value="Submit" />
</div>
</div>
<div id="container">
<div id="row" style="display:table-row; margin:5px 0; outline:red solid 1px;">
<div id="image" style="float:left; outline:blue solid 1px;"><img src="#" /></div>
<div id="content" style="display:table-cell; padding:5px; outline:green solid 1px; vertical-align:middle;">
Image Description<br />
<input type="button" value="Button" />
</div>
</div>
</div>
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.