I have dropdownlist and text doesnt display on the same level. text is located upper and dropdownlist is located on lower.
here is my code
<div style="display:inline;float:left">Ödeme Kalemi:</div>
<div style="display:inline;float:left">
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>test</asp:ListItem>
<asp:ListItem>test2</asp:ListItem>
</asp:DropDownList>
</div>
<div style="clear:both"></div>
and here is the screenshot
Please help me fix this. I need to align them horizontally.
You can use the following css to display dropdownlist next to label.
<style type="text/css">
.row { clear: both; overflow: hidden; padding: 5px 0; width: 100%; }
.row label { float: left; text-align: right;
margin-right: 10px; width: 150px; }
.row .value { float: left; text-align: left; }
</style>
<div class="row">
<label>Ödeme Kalemi:</label>
<div class="value">
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>test</asp:ListItem>
<asp:ListItem>test2</asp:ListItem>
</asp:DropDownList>
</div>
</div>
Related
I am attempting to put together a web page that has four areas: a header, footer, content, and controls. The header and footer should be fixed at the top and bottom of the page (respectively) and automatically size to their content. The controls should go on the far right side of the page (vertically between the header and footer) and is fixed-width. The content area should fill the remainder of the page.
I had this working, but now whenever I add any kind of content (even just a single-word paragraph element), the controls area moves to almost the very bottom of the page. You can see what I'm referring to here: http://jsfiddle.net/ym8vY/1/
If I leave the controls div completely empty, it lays out exactly how I want it: http://jsfiddle.net/ym8vY/
My body currently looks like:
<header>
<p>Header</p>
</header>
<div class="main">
<div id="streamGraph" class="page">
<div class="page-row">
<div class="page-content-container-outer">
<div class="page-content-container-inner">
<div id="graphContainer" class="page-content"></div>
</div>
</div>
<div class="page-controls-container-outer">
<div class="page-controls-container-inner">
<div class="page-controls"><!-- If anything goes inside here, it breaks -->
<div style="display: table; height: 100%;">
<div style="display: table-row; height: 0;">
<div>
<label for="sampleCount"># Samples:</label>
<input type="text" id="sampleCount" name="sampleCount" value="100" />
</div>
<div>
<label for="tagCount"># Tags:</label>
<input type="text" id="tagCount" name="tagCount" value="25" />
</div>
<div>
<label for="fromDate">From:</label>
<input type="date" id="fromDate" name="fromDate" />
</div>
<div>
<label for="toDate">To:</label>
<input type="date" id="toDate" name="toDate" />
</div>
<button id="tagsButton">Customize Tags</button>
<button id="refreshButton">Apply</button>
</div>
<div style="display: table-row;">
<div id="tagContainer" style="overflow: auto; height: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>Footer</p>
</footer>
And my CSS is:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
display: table;
}
header, .main, footer {
display: table-row;
width: 100%;
}
header, footer {
background: lightgray;
}
.main {
height: 100%;
}
.page {
height: 100%;
display: table;
}
.page-row {
display: table-row;
width: 100%;
}
.page-content-container-outer {
display: table-cell;
width: 100%;
height: 100%;
padding: 10px;
}
.page-controls-container-outer {
display: table-cell;
height: 100%;
padding: 10px;
}
.page-content-container-inner {
border: solid;
border-color: gainsboro;
border-width: 5px;
border-radius: 10px;
width: 100%;
height: 100%;
padding: 5px;
}
.page-controls-container-inner {
border: solid;
border-color: gainsboro;
border-width: 5px;
border-radius: 10px;
height: 100%;
padding: 5px;
}
.page-controls {
height: 100%;
width: 300px;
}
.page-content {
height: 100%;
}
Your right-side div is being pushed down to the baseline. Add vertical-align:top to fix it:
div
{
vertical-align: top;
}
JSFiddle
Side note: The default value for vertical-align is baseline. Always keep this in mind when using cells and inline-blocks.
Add vertical-align:top; to your .page-controls-container-outer class
Change this
<div style="display: table-row; height: 0;">
to this
<div style="display: table-row; height: 0; float:left;">
I am trying to push the footer in to down when the content page height increase.but I am not able to do that. footer is always stick with side bar.because of this my content page overflow over the footer .
My css code is below:
#header
{
height: 150px;
background-color: #375BB0;
}
#nav
{
**strong text**height: 100%;
width: 231px;
float: left;
}
#nav2
{
height: 100%;
width: 250px;
float: right;
}
#content
{
height: 100%;
bottom: 0;
}
#footer
{
clear: both;
height: 50px;
background-color: #CCCCCC;
color: #333333;
text-align: center;
}
My markup code:
<body>
<form id="form1" runat="server">
<div>
<div id="header">
</div>
<div id="nav">
<table class="style1" style="width: 100%; position: static ;" >
</table>
</div>
<div id="nav2">
<table style="border: 1px solid #000066; width: 100%; position: static;background-color:#9DAFD8;" >
</table>
</div>
<div id="content">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer" style="clear: both; height:500px;" >
Copy rihgt # xyzoman.com
</div>
</div>
</form>
Please help me
Try this, I changed 2 things. First, you were making the height of elements at 100% to an element that was 100% to the page, so they would never line up unless the content was bigger than the page, and 2, I made the content display: inline block; so that your menus would be on either side and not just on teh side and then to wrap around the content, but you can change this back if you wanted.. But your main main main issue was the height 100% in the nav css tags!
Everything else stayed the same.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#header
{
height: 150px;
background-color: #375BB0;
}
#nav
{
width: 231px;
float: left;
}
#nav2
{
width: 250px;
float: right;
}
#content
{
display:inline-block;
height: 100%;
bottomL 0;
}
#footer {
display:block;
bottom: 0;
height: 50px;
background-color: #CCCCCC;
color: #333333;
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="header">
</div>
<div id="nav">
<table class="style1" style="width: 100%; position: static ;" >
<tr><td>Table</tr>
</table>
</div>
<div id="nav2">
<table style="border: 1px solid #000066; width: 100%; position: static;background-color:#9DAFD8;" >
<tr><td>Table</tr>
</table>
</div>
<div id="content">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer" style="clear: both; height:500px;" >
Copy rihgt # xyzoman.com
</div>
</div>
</form>
</body>
</html>
I am having styling issue with products loaded in datalist control in Chrome.
While everything looks ok in FF, Chrome gives me weird styling.
Here are the screenshots:
FF: http://gyazo.com/214fcfafbfb91e17ea1f084af84e61e4.png?1341955023
Chrome: http://gyazo.com/4459dc38dc01a18f62780392d8fb3625.png?1341955739
Here is the html markup:
<div class="product-grid">
<asp:DataList ID="dlCatalog" runat="server" RepeatColumns="2" RepeatDirection="Horizontal"
RepeatLayout="Table" ItemStyle-CssClass="item-box">
<ItemTemplate>
<nopCommerce:ProductBox1 ID="ctrlProductBox" Product='<%# Container.DataItem %>'
runat="server" />
</ItemTemplate>
</asp:DataList>
</div>
Here is the CSS:
.product-grid { margin-bottom: 15px; width: 586px; text-align: center; margin-left: -10px; }
.product-grid .item-box { text-align: center; vertical-align: top; padding: 10px 11px 60px 11px; }
.product-grid .product-item { text-align: center; margin: 10px 5px 10px 5px; width: 250px; background: url('images/prod_grid_box_bg.gif') no-repeat 0 100%; }
.product-grid .product-item .product-title { font-weight: bold; font-size: 12px; background: url('images/deal_box_hl.gif') no-repeat 0 0; padding-left: 10px; }
.product-grid .product-item .product-title a { background: url('images/deal_box_hr.gif') no-repeat 100% 0; display: block; height: 2em; line-height: 1.3em; overflow: hidden hidden; padding: 4px 10px 8px 0px; }
.product-grid .product-item .picture { text-align: center; margin-top: 10px; }
.product-grid .product-item .description { margin: 5px 5px 0 5px; text-align: center; padding: 10px 5px 10px 5px; border-top: solid 1px #e3e3e3; color: #555; height: 50px; }
.product-grid .product-item .add-info { vertical-align: bottom; text-align: right; width: 250px; height: 85px; position: relative; }
.product-grid .product-item .add-info .prices { text-align: right; vertical-align: middle; position: absolute; bottom: 15px; right: 10px; }
.product-grid .product-item .add-info .buttons { vertical-align: middle; position: absolute; bottom: 15px; left: 10px; text-align: left; }
.product-grid .product-item .add-info .prices .productPrice { color: green; }
.product-grid .product-item .add-info .prices .oldproductPrice { color: Red; text-decoration: line-through; }
PRODUCT BOX CODE ADDED:
<%# Control Language="C#" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.Modules.ProductBox1Control"
CodeBehind="ProductBox1.ascx.cs" %>
<%# Register TagPrefix="nopCommerce" TagName="ProductPrice2" Src="~/Modules/ProductPrice2.ascx" %>
<script type="text/javascript" language="javascript" src="../Scripts/jquery.expander.js"></script>
<script type="text/javascript">
// you can override default options globally, so they apply to every .expander() call
//$.expander.defaults.slicePoint = 50;
$(document).ready(function () {
// simple example, using all default options unless overridden globally
//$('div.expandable h3').expander();
// *** OR ***
// override default options (also overrides global overrides)
$('div.expandable h3').expander({
slicePoint: 50, // default is 100
expandPrefix: '.....', // default is '... '
expandText: '>>', // default is 'read more'
collapseTimer: 5000, // re-collapses after 5 seconds; default is 0, so no re-collapsing
userCollapseText: '<<' // default is 'read less'
});
});
</script>
<%--<div class="product-item">
<h2 class="product-title">
<asp:HyperLink ID="hlProduct" runat="server" />
</h2>
<div class="picture">
<asp:HyperLink ID="hlImageLink" runat="server" />
</div>
<div class="description">
<asp:Literal runat="server" ID="lShortDescription"></asp:Literal>
</div>
<div class="add-info">
<div class="prices">
<nopCommerce:ProductPrice2 ID="ctrlProductPrice" runat="server" ProductId='<%#Eval("ProductId") %>' />
</div>
<div class="buttons">
<asp:Button runat="server" ID="btnProductDetails" OnCommand="btnProductDetails_Click"
Text="<% $NopResources:Products.ProductDetails %>" ValidationGroup="ProductDetails"
CommandArgument='<%# Eval("ProductId") %>' CssClass="productgridproductdetailbutton" /><br />
<asp:Button runat="server" ID="btnAddToCart" OnCommand="btnAddToCart_Click" Text="<% $NopResources:Products.AddToCart %>"
ValidationGroup="ProductDetails" CommandArgument='<%# Eval("ProductId") %>' CssClass="productgridaddtocartbutton" />
</div>
</div>
</div>--%>
<div class="pblock">
<div class="borderProd">
<div class="expandable">
<h3>
<asp:HyperLink ID="hlProduct" runat="server" />
</h3>
</div>
<asp:Literal runat="server" ID="lShortDescription" Visible="false"></asp:Literal>
</div>
<div class="img">
<a id="hlImageLink" runat="server">
<img id="hlImage" runat="server" style="max-width:170px;max-height:120px"/>
</a>
<div class="body">
</div>
<div class="body">
<nopCommerce:ProductPrice2 ID="ctrlProductPrice" runat="server" ProductId='<%#Eval("ProductId") %>' />
</div>
<asp:Label ID="labUniversal" runat="server" ForeColor="Blue" Text=""></asp:Label>
</div>
</div>
I fixed the problem by setting the height of the item-box to 275px.
Thanks everyone for your help.
I use a User Control to display a bunch of fields in an ASP.NET MVC application.
eg.
<div class="metadata-left metadata">
<div>
Default Domain:</div>
<br />
<div>
Disabled:</div>
<br/>
</div>
<div class="metadata-right metadata">
<div>
<%= Html.EditorFor(c => c.IsDefault) %></div>
<br />
<div>
<%= Html.EditorFor(c => c.IsDisabled) %></div>
<br />
</div>
In the stylesheet, I have the following classes:
.metadata-left
{
float: left;
width: auto;
text-align: right;
}
.metadata-right
{
float: left;
width: 68%;
padding-left: 3%;
text-align: left;
}
.metadata div
{
height: 20px;
}
How do I get these fields to display side by side? Right now I get them all under one column one after another.
You might have more success organising your elements like this
<div class="metadata-field">
<div class="metadata-left metadata">
Default Domain:
</div>
<div class="metadata-right metadata">
<%= Html.EditorFor(c => c.IsDefault) %>
</div>
</div>
<div class="metadata-field">
<div class="metadata-left metadata">
Disabled:
</div>
<div class="metadata-right metadata">
<%= Html.EditorFor(c => c.IsDisabled) %>
</div>
</div>
With CSS:
.metadata-field {
clear:both;
}
.metadata-left
{
float: left;
width: auto;
text-align: right;
}
.metadata-right
{
float: left;
width: 68%;
padding-left: 3%;
text-align: left;
}
.metadata div
{
height: 20px;
}
You can make your adjustments to further change the layout.
See: http://jsfiddle.net/LbTg9/
It is most likely the width of .metadata-left. Add an explicit width to that like:
.metadata-left
{
float: left;
width: 29%;
text-align: right;
}
.metadata-right
{
float: left;
width: 68%;
padding-left: 3%;
text-align: left;
}
Here is my CSS
.FrontSlideShow
{
display:block;
overflow: none;
height: 323px;
margin-bottom: 12px;
background-color:#005596;
background-image: url(/*edited*/);
background-repeat: repeat-x; width:754px; font-family: verdana; font-size:large;
color:#FFFFFF;
clear:both;
}
.FrontSlideShow .SlideShowImage
{
float: left;
vertical-align:text-bottom;
padding-right: 24px;
}
.FrontSlideShow .SlideShowSubTitle
{
vertical-align: text-bottom;
margin-bottom: 10px;
}
Here is the markup
<div class="FrontSlideShow">
<div class="SlideShowMainTitle">
<asp:Label ID="lblSlideTitle" runat="server"></asp:Label>
</div>
<div class="SlideShowImage">
<asp:Image ID="imgSlide" runat="server" />
</div>
<div class="SlideShowSubTitle">
<asp:Label ID="lblSlideDescription" runat="server"></asp:Label>
</div>
<asp:Button ID="btnPrev" runat="server" Text="Prev" /><asp:Button ID="btnNext" runat="server" Text="Next" />
<asp:SlideShowExtender ID="slExtender" runat="server" AutoPlay="true" Loop="true" PlayInterval="3000" TargetControlID="imgSlide" NextButtonID="btnNext" PreviousButtonID="btnPrev"
ImageTitleLabelID="lblSlideTitle" ImageDescriptionLabelID="lblSlideDescription" SlideShowServiceMethod="GetSlides" SlideShowServicePath="~/WebServices/SlideShowService.asmx">
</asp:SlideShowExtender>
<asp:Literal ID="liMarkup" runat="server"></asp:Literal>
</div>
The subtitle div needs to be positioned at the bottom right of the parent container. Any ideas? But all I can get is:
But I want:
Try this:
.FrontSlideShow {
position: relative;
}
.FrontSlideShow .SlideShowSubTitle {
position: absolute;
right : 20px;
bottom: 20px;
}
.FrontSlideShow {
....
position:relative;
....
}
.FrontSlideShow .SlideShowSubTitle {
position:absolute;
top: 300px; // your values
left: 400px;// your values
}
THis way your text will always be consistent and in the same spot