I have been looking for a solution for this for like a day or two but as I'm not used to coding web applications I can't seem to find the problem..
I have a hunch it has to do with that I do float two divs to the left.
Question is why doesn't my main div enclose the whole page?
This is my html..!
<body onLoad="initializePage()">
<script type="text/javascript">
$('#Button1').click(function() {
});
</script>
<input type="button" id="Button1" value="korv" onClick="hidedivs()" />
<div id="main">
<div id="searchholder">
<div id="slider" class="searching"></div>
</div>
<div class="left">
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table id="mytable" cellspacing="0">
<thead>
<tr>
<th scope="col" abbr="Sidor/Artiklar" class="nobg">Sidor/Artiklar</th>
<th scope="col" abbr="Mozrank">MozRank</th>
<th scope="col" abbr="PR">PR</th>
<th scope="col" abbr="Dual 1.8GHz">Fri tillgång</th>
<th scope="col" colspan="2" abbr="Dual 2.5GHz">Välj själv</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr data_id='<%# DataBinder.Eval(Container.DataItem, "pr_domain")%>'>
<th scope="row" abbr="Model" class="spec"><%# DataBinder.Eval(Container.DataItem, "namn_domain")%> </th>
<td class="alt" ><%# DataBinder.Eval(Container.DataItem, "moz_domain")%></td>
<td class="alt"><%# DataBinder.Eval(Container.DataItem, "pr_domain")%></td>
<td class="alt"><b></b>
<input type='<%# DataBinder.Eval(Container.DataItem, "type_domain")%>' name='<%# DataBinder.Eval(Container.DataItem, "idtag_domain")%>' value='<%# DataBinder.Eval(Container.DataItem, "faccess_domain")%>' onClick="calculatePrice();disableTB(this.name);" />
"Fri tillgång" </td>
<td class="alt"><input type="radio" name='<%# DataBinder.Eval(Container.DataItem, "idtag_domain")%>' value="0" onclick="calculatePrice();enableTB(this.name, this.checked)" />
"Skriv ditt antal själv" </td>
<td class="alt" data_id='<%# DataBinder.Eval(Container.DataItem, "pr_domain")%>'><input type="text" name='<%# DataBinder.Eval(Container.DataItem, "moz_domain")%>' id='<%# DataBinder.Eval(Container.DataItem, "idtag_domain")%>' Enabled="false" Width="40px" onKeyUp="calculatePrice()" style="background-color:#eeeeee" /></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
<div id="pricingdetails" class="price">Priset för dina artiklar blir: </div>
</div>
And my .css styles are
.price
{
font-family:"Verdana";
font-size:40px;
color:Green;
float: left;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
color: #797268;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
background: -moz-linear-gradient(center top , #FFFFFF 0%, #EDEDED 100%) repeat scroll 0 0 transparent;
display: inline;
}
div.searchholder
{
position: absolute;
top: 0px;
left: 50%;
margin-left: -70px;
width: 480px;
}
div.main
{
}
div.left
{
float: left;
}
.searching
{
}
The issue here is that since the elements inside your #main div are floated, they're considered in a different flow than your div, and thus it doesn't resize to fit them. Ways to fix this are:
Add overflow: hidden; to your #main styling.
Float your #main by adding float: left;.
Append this to your #main div: <div style = "clear: both;"></div> (this is the least preferable method).
You need to clear the floats of the child elements for #main
Instead of doing what some of the others have suggested (adding an element for the purpose of clearing your floats; bad practice), use a pseudo-element. Just use the following CSS and voila!
#main::after {
clear:both;
content: "";
display: table;
}
Here's a fiddle. This pink background is there to show the result of the above for #main.
Your main div (#main) isn't floated yet you have floated elements inside it.
To clear the float add the CSS:
#main {
overflow: hidden;
}
Add a clear before the ending tag.
<div style="clear:both"></div>
Related
Has anybody got any idea of how to merge the borders of the 3 elements so that they join together.This is what I currently have:
<div style="float: left; padding-left: 0px; padding-bottom: 2px;">
<table id="table": cellpadding="0" cellspacing="0" border="0">
<tr align="center" valign="middle" >
<td style="padding-left: 1px; padding-right: 0px; padding-bottom: 1px;">
<div id="schedulePrevDay" title="Previous Day" class="borderRad_3Left"> </div>
<asp:TextBox ID="txtDate" runat="server" CssClass="compactDate" MaxLength="10" Width="65px"></asp:TextBox>
<div id="scheduleNextDay" title="Next Day" class="borderRad_3Right"> </div>
</td>
</tr>
</table>
</div>
It seems to me that you're using border-right and border-left 1px solid #fff. So, just remove the border from there:
#schedulePrevDay{
border-right: none;
}
#scheduleNextDay{
border-left: none;
}
Or, you may use negative margin on them.
Maybe a negative margin as Bhojendra Nepal suggested, so it will look something like this
<div style="float: left; padding-left: 0px; padding-bottom: 2px;">
<table id="table": cellpadding="0" cellspacing="0" border="0">
<tr align="center" valign="middle" >
<td style="padding-left: 1px; padding-right: 0px; padding-bottom: 1px;">
<div id="schedulePrevDay" title="Previous Day" class="borderRad_3Left" style="margin-right:-1px;"> </div>
<asp:TextBox ID="txtDate" runat="server" CssClass="compactDate" MaxLength="10" Width="65px"></asp:TextBox>
<div id="scheduleNextDay" title="Next Day" class="borderRad_3Right" style="margin-left:-1px;"> </div>
</td>
</tr>
</table>
Ive used styles but you should also check if there is no padding, margin or borders on these elements before doing a negative margin.
I have the following html page in which I have a menu at the top which is perfectly aligned. It is followed by an iframe which has some HTML5 animation and it is not aligning to the center in FF and IE, although it is working perfectly fine on Chrome and Safari. I have used the align="center" attribute everywhere required. How can I get the iframe to align itself to the center in FF and IE? Any help is appreciated.
The HTML file:
<!DOCTYE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/style_all.css" />
</head>
<body align="center">
<table align="center" id="menu">
<tr>
<td> HOME </td>
<td> | </td>
<td> ABOUT US </td>
<td> | </td>
<td> HR SERVICES </td>
<td> | </td>
<td> SPORTS & ENTERTAINMENT </td>
<td> | </td>
<td> CONTACT US </td>
</tr>
</table>
<center>
<table width="100%" align="center" style="margin: 0 auto; text-align: -moz-center;" align="-moz-center">
<tr>
<td height="100%">
<iframe frameborder="0" scrolling="no" src="HTML/homepage.html" width="100%" height="600px"> </iframe>
</td>
</tr>
</table>
</center>
<table width="100%" align="center">
<tr>
<td align="left">
<p> Copyrights © HUMAN CAPITAL RESOURCE </p>
</td>
<td align="right">
<p>Created by PENTAFUSE INDIA PVT LTD </p>
</td>
</tr>
</table>
</body>
</html>
The CSS file:
a
{
text-align:center;
font-size:16pt;
color:white;
}
body
{
background-image: url('../Media/bgimage.jpg') ;
}
a
{
text-decoration:none;
}
a:hover
{
color:#646464;
}
p
{
color: white;
font-size: 10pt;
}
html, body
{
margin: auto;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
table
{
vertical-align:center;
vertical-align:-moz-center;
margin: 0 auto;
}
You can use margin: 0 auto, but at first you have to use iframe (iframe is inline element by default) a block element.
iframe
{
display: block;
width: yourWidth; // place your width here
height: yourHeight; // place your height here
margin: 0 auto;
}
// Thanks for edit suggestion goes to #webeno (comments in css)
I have a apsx page and in that page I have two buttons called save and cancel, i need to display this with some css style, my script is
<table>
<tr>
<td align="right" class="bar">
<table>
<tr>
<td>
<asp:Button ID="btnSave" runat="server" Text="Save"/>
</td>
<td>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</td>
</tr>
and my css script is
.bar
{
background-position: center;
border-width: 1px;
border-color: #CCCCCC;
vertical-align: middle;
height: 30px;
border-top-style: solid;
}
and am getting the style as
I have few more controls above these save and cancel buttons...the problems is this save and cancel buttons with the bar style comes right after the controls above them....
now these buttons are displaying at the center of the page and I need to display these save and cancel buttons with the bar style at the bottom of the page....how can I do this..
note:I put the position:absolute, it will disturb the alignments in other forms, coz am using this same bar style in all my forms......in other forms I have the controls that fills the page and automatically the save cancel buttons are coming at the bottom, but here I have only 4 controls...so the save and cancel button is at center, thats what am trying to display at the buttom
Here's the solution in JSFiddle:
http://jsfiddle.net/SX7n3/6/
For one, lose the table...
<div id="content">
Hello World!
</div>
<div class="clear"> </div>
<div class="bar">
<div class="buttons">
<button type="button" id="submit">Submit</button>
<button type="button" id="cancel">Cancel</button>
</div>
</div>
.content
{
min-height:800px;
width: 100%;
}
.bar
{
padding-top: 4px;
border-width: 1px;
border-color: #000;
background-color: #ccc;
height: 30px;
border-style: solid;
}
.buttons
{
float: right;
}
.clear
{
clear: both;
}
Your question is not clear, what I got you want to move buttons at bottom of page:
<div class="bottomBar">
<table>
<tr>
<td align="right" class="bar">
<table>
<tr>
<td>
<asp:Button ID="btnSave" runat="server" Text="Save"/>
</td>
<td>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</td>
</tr>
</div>
and css
.bottomBar
{
float :bottom;
}
.bar
{
background-position: center;
border-width: 1px;
border-color: #CCCCCC;
vertical-align: middle;
height: 30px;
border-top-style: solid;
}
Add those two lines to your .bar:
.bar
{
position:absolute;
bottom:0;
/* the rest of your code */
}
Hi now you can define table align right and two class create in css as like this
Css
.bar
{
background-position: center;
border-width: 1px;
border-color: #CCCCCC;
vertical-align: middle;
height: 30px;
border-top-style: solid;
}
.save{width:100px;
height:20px;
background:green;
display: inline-block;}
.cancel{width:100px;
height:20px;
background:red;
display: inline-block;}
HTML
<table align="right">
<tr>
<td align="right" class="bar">
<table>
<tr>
<td>
<asp:Button ID="btnSave" runat="server" Text="Save" class="save"/>
</td>
<td>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" class="cancel"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
Live demo http://jsfiddle.net/rohitazad/a9uym/
I have written an application from which you can write checks and I have the following markup on one of the pages to view and edit some of the fields of the check.
#CheckInformation {
border: 1px solid #aaa;
padding: 10px;
background-color: #E2F0F9;
margin-top: 15px;
}
#CheckInformation #PropertyAddress {
font-size: .87em;
width: 200px;
float: left;
text-align: center;
}
#CheckInformation .label-column {
width: 100px;
}
#CheckInformation .payto-col {
width: 570px;
}
#CheckInformation .line {
border-bottom: 1px solid #aaa;
}
#CheckInformation #PayTo {
width: 540px;
}
#CheckInformation #Address {
width: 200px;
height: 45px;
}
#CheckInformation #Memo {
width: 400px;
}
#CheckInformation #NumberWords {
margin: 3px;
font-style: italic;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet" />
<div id="CheckInformation">
<table>
<tr>
<td class="top" colspan="2" rowspan="2">
<div id="PropertyAddress">
1234 Main St
<br />Some city, State 50000
</div>
</td>
<td class="text-right label-column">Date</td>
<td>
<input type="text"></input>
</td>
</tr>
<tr>
<td class="text-right">Check Number</td>
<td>
<input type="text"></input>
</td>
</tr>
<tr>
<td>Pay to</td>
<td class="payto-col line">
Some person
</td>
<td class="text-right">Amount</td>
<td class="text-right line">
70.00
</td>
</tr>
<tr>
<td></td>
<td class="line" colspan="3">
<div id="NumberWords">Zero Dollars & Zero Cents</div>
</td>
</tr>
<tr>
<td class="top">Address</td>
<td colspan="3">
<div id="Address">
1234 Main St
<br />Some city, State 50000
</div>
</td>
</tr>
<tr>
<td>Memo</td>
<td colspan="3">
<input type="text"></input>
</td>
</tr>
</table>
</div>
It is supposed to have a bottom border on the tds that displays who the check was written to and the amount but not on the labels for those cells. It actually sees to appear correctly in IE and FireFox but in Chrome, I get a bottom border under the Amount label as well.
Running IE 9, FireFox 6.0.2, and Chrome 16.0.912.63
Anyone else see the issue?
Adding table{border-collapse:separate} seems to fix it but I don't know why. I'll update the answer if I figure out more.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
ok simple question about including large mostly static html and asp.net code I am using as of right now #include and I was wondering if iframes would be a better way of handling what I wish to do or is there a better way to do it. here is the current way i'm handling the includes
default.aspx
<%# Page Language="C#" AutoEventWireup="true" ValidateRequest="false" %>
<%# Import Namespace="YAF.Classes.Core" %>
<script runat="server">
protected void Page_Load(object sender, System.EventArgs e)
{
btnSearch.Attributes.Add("onclick", Page.ClientScript.GetPostBackEventReference(btnSearch, "") + ";this.disabled = true;");
if (forum.PageUserID != 1)
{
Page.FindControl("divGuest").Visible = false;
Page.FindControl("divUser").Visible = true;
lblUserName.Text = forum.PageUserName;
}
else
{
Page.FindControl("divGuest").Visible = true;
Page.FindControl("divUser").Visible = false;
lblUserName.Text = null;
}
}
public void Page_Error(object sender, System.EventArgs e)
{
Exception x = Server.GetLastError();
YAF.Classes.Data.DB.eventlog_create(YafServices.InitializeDb.Initialized ? (int?)YafContext.Current.PageUserID : null, this, x);
YAF.Classes.Core.CreateMail.CreateLogEmail(x);
}
protected void btnSearch_Click(object sender, EventArgs e)
{
if (txtSearch.Text.Length > 4)
{
if(ddlCriteria.SelectedValue == "Posts")
Response.Redirect("default.aspx?g=search&search=" + txtSearch.Text);
if(ddlCriteria.SelectedValue == "Posted By")
Response.Redirect("default.aspx?g=search&postedby=" + txtSearch.Text);
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="YafHead" runat="server">
<meta id="YafMetaDescription" runat="server" name="description" content="Yet Another Forum.NET -- A bulletin board system written in ASP.NET" />
<meta id="YafMetaKeywords" runat="server" name="keywords" content="Yet Another Forum.net, Forum, ASP.NET, BB, Bulletin Board, opensource" />
<title>Forums</title>
<style type="text/css">
.sbutton
{
background-color:#361800;
border:medium none;
border-collapse:collapse;
color:#FFFFFF;
font-family:Tahoma,Arial,Helvetica;
font-size:10px;
font-weight:bold;
vertical-align:middle;
}
</style>
<link href="images/favicon.ico" type="image/ico" rel="shortcut icon" />
<link rel="stylesheet" href="navTopStyle.css" type="text/css" media="screen" />
</head>
<body style="margin: 0">
<form id="form1" runat="server" enctype="multipart/form-data">
<table align="center" style="background-color: #ffffff" cellpadding="0" cellspacing="0"
width="790px">
<tr>
<td>
<!--#include file="CComHeader.html"-->
</td>
</tr>
<tr>
<td>
<YAF:Forum runat="server" ID="forum"></YAF:Forum>
</td>
</tr>
</table>
</form>
</body>
</html>
CComHeader.html
<table cellpadding="0" cellspacing="0" width="790px">
<tr>
<td align="left">
<img src="images/smokechair.jpg" alt="Cigar.com" /><img src="images/cigarcomTitle.gif"
alt="Cigar.com" />
</td>
<td align="right">
<table width="310px" height="73px" cellpadding="0" cellspacing="0" style="padding-right: 6px">
<tr>
<td width="109px" class="welcome" align="left">
Welcome to Cigar.com
</td>
<td width="195px" class="welcome" align="left">
<div runat="server" id="divUser">
<table cellpadding="0" cellspacing="0" align="right">
<tr>
<td width="126px" align="left">
<asp:Label ID="lblUserName" CssClass="welcome" runat="server"></asp:Label></td>
<td width="65px" align="left">
Help</td>
</tr>
</table>
</div>
<div runat="server" id="divGuest">
Sign In | Join |
Help
</div>
</td>
</tr>
<tr>
<td colspan="2">
<table cellpadding="0" cellspacing="0" >
<tr>
<td width="234px" align="right">
<asp:DropDownList ID="ddlCriteria" runat="server">
<asp:ListItem>Posts</asp:ListItem>
<asp:ListItem>Posted By</asp:ListItem>
</asp:DropDownList>
<asp:TextBox Width="120px" ID="txtSearch" runat="server"></asp:TextBox>
</td>
<td width="70px" align="center">
<asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="sbutton" OnClick="btnSearch_Click" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<!--#include file="commonTabBar.html" -->
</td>
</tr>
</table>
commonTabBar.html
<div class="CommonTabBar">
<script language="javascript">
function tabOver(e) {
if (e.className != 'CommonSimpleTabStripSelectedTab')
e.className = 'CommonSimpleTabStripTabHover';
}
function tabOut(e) {
if (e.className != 'CommonSimpleTabStripSelectedTab')
e.className = 'CommonSimpleTabStripTab';
}
function tabOverSub(e) {
if (e.className != 'CommonSimpleTabStripSelectedTabSub')
e.className = 'CommonSimpleTabStripTabHoverSub';
}
function tabOutSub(e) {
if (e.className != 'CommonSimpleTabStripSelectedTabSub')
e.className = 'CommonSimpleTabStripTabSub';
}
</script>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr valign="middle">
<td class="CommonSimpleTabStripTab" style="padding: 0px">
</td>
<td class="CommonSimpleTabStripTab" onmouseover="tabOver(this);" onmouseout="tabOut(this);"
onclick="window.location = 'http://www.cigar.com/index.asp'">
<a style="float: right; display: block; height: 30px; line-height: 30px; padding-left: 12px;
padding-right: 12px; vertical-align: middle;" href="http://www.cigar.com/index.asp">
Home</a>
</td>
<td class="CommonSimpleTabStripTab" onmouseover="tabOver(this); document.getElementById('ComDropDown2').style.display = 'inline';"
onmouseout="tabOut(this); document.getElementById('ComDropDown2').style.display = 'none';">
<a style="float: right; display: block; height: 30px; line-height: 30px; padding-left: 12px;
padding-right: 12px; vertical-align: middle;" href="http://www.cigar.com/cigars/index.asp">
Cigars</a>
<div id="ComDropDown2" style="border: 1px solid rgb(71, 42, 24); margin: 28px 0px 0px;
display: none; background-color: rgb(235, 230, 208); color: rgb(71, 42, 24);
position: absolute; float: left; z-index: 200;" onmouseover="document.getElementById('ComDropDown2').style.display = 'inline';"
onmouseout="document.getElementById('ComDropDown2').style.display = 'none';">
<ul style="margin: 0px; padding: 0px; width: 100px;">
<li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left;
list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); "
onclick="window.location = 'http://www.cigar.com/cigars/index.asp'"><a href="http://www.cigar.com/cigars/index.asp"
style="line-height: 25px; color: rgb(71, 42, 24);" id="BrandsLink">Brands </a>
</li>
<li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left;
list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); "
onclick="window.location = 'http://www.cigar.com/cigars/privatelabel.asp?brand=419'">
<a href="http://www.cigar.com/cigars/privatelabel.asp?brand=419" style="line-height: 25px;
color: rgb(71, 42, 24);" id="SamplersLink">Aging Room </a></li>
<li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left;
list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); "
onclick="window.location = 'http://www.cigar.com/cigars/samplers.asp'"><a href="http://www.cigar.com/cigars/samplers.asp"
style="line-height: 25px; color: rgb(71, 42, 24);" id="SamplersLink">Samplers
</a></li>
<li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left;
list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); "
onclick="window.location = 'http://www.cigar.com/cigars/suggestions.asp'"><a href="http://www.cigar.com/cigars/suggestions.asp"
style="line-height: 25px; color: rgb(71, 42, 24);" id="SuggestionsLink">Suggestions
</a></li>
<li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left;
list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); "
onclick="window.location = 'http://www.cigar.com/DailyDeal/ccCigarDeals.asp'"><a
href="http://www.cigar.com/DailyDeal/ccCigarDeals.asp" style="line-height: 25px;
color: rgb(71, 42, 24);" id="SuggestionsLink">Suggestions </a></li>
</ul>
</div>
Redid the example I was trying to make this into a UC but I ran into a problem with the server script and it not allowing me to obfuscate it more.
There's no reason to use IFRAMEs in this scenario. Their disadvantages are:
They are fixed in size
They don't count for the SEO on your page
You can't access the DOM for items in them (to do scripting)
So I would "include" a file. With ASP.NET your best bet is User Controls or Master Pages.
Using an iframe will cause the client browser to make another HTTP request in order to retrieve its contents. Unless you have a really specific need (like sticking your code into someone else's website) you probably never want to use an iframe.
I don't really see the point of iframes, but I'm open to suggestion. If you need dynamic content, you can use AJAX and normal divs. If your server for some reason needs to include content from another domain or server, you can use curl.