I'm having problems with setting the div and body tags to dynamically expand over the inner contain.
Here is the HTML and CSS that I'm using, it is a little longer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title></title>
</head>
<style>
body, p, b, ul, li, div
{
padding:0;
margin:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
}
body
{
background:white;
}
.clearfix {
min-height: 1px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
#searchform
{
position:absolute;
height:110px;
clear:both;
}
#b2_sbox_middle
{
width:980px;
height:99px;
background:url('img.jpg') repeat-x;
border:1px solid #00CCCC;
}
#b2_inner_sf
{
margin-top:10px;
}
#sf_ch_container
{
clear:both;
margin-left:27px;
font-size:18px;
}
#sf_ch_formtitle
{
float:left;
width:202px;
font-size:18px;
text-align:left;
}
#sf_ch_stype
{
float:left;
}
.stype
{
float:left;
margin-left:27px;
text-align: left;
}
</style>
<body>
<div align="center" class="clearfix">
<div id="searchform" align="center" style="top:105px; width:980px; margin-left:-490px; left:50%;" class="clearfix">
<div id="b2_sbox_middle">
<div id="b2_inner_sf" class="clearfix" style="border:0px solid;">
<div id="sf_ch_container" class="clearfix">
<div id="sf_ch_formtitle">SEARCH </div>
<div id="sf_ch_stype"> SEARCH</div>
</div>
<div class="stype">
<input name="text" class="search-input" type="text" value="key" size="20" maxlength="50" />
</div>
<div class="stype" >
<input name="text2" class="search-input" type="text" value="key" size="20" maxlength="40" />
</div>
<div class="stype" >
<input name="text2" class="search-input" type="text" value="key" size="20" maxlength="40" />
</div>
<div class="stype" >
<input name="text2" class="search-input" type="text" value="key" size="20" maxlength="40" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you run the code in Firefox or Chrome press F12 and watch the height of the body tag and of the first div after the body, you will see that none have dynamically changed their height to include the inner content.
I don't know where the problems is in the CSS.
And a second problem, if you make a preview using IE v.6 you will see that all the input fileds are disorder wich I don't understand why??
Any help will be much appreciated!!
Since #searchform is absolutely positioned, its parents will have a height of 0. You can try:
body, body>div{min-height:100%;}
Here's a fiddle: http://jsfiddle.net/jEfMx/
Related
I just started developing a personal homepage for my own. Everything went well until I wanted to write text outside the menu border and header (that means somehow center of the page). If I add any paragraph in HTML file, it actually moves the menu items & Header and then places the text. I don't know what's going wrong.
<!--
All the html code will go in this file. This is the main core file of any website.
-->
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<html charset="utf-8">
<title>Welcome to Fatah's world!</title>
<link rel="stylesheet" href="main_design.css"/>
<!--<img src="bricks.JPG" alt="blue bricks" width="300" height="1000">-->
<style type="text/css">
</style>
</head>
<body>
<p>This is a paragraph i am trying to place in my page, but it doesn't stay in the accurate position.</p>
<h1 id="style_header">Welcome to my green world!</h1></div>
<div id="menu_area" >
<div id="home">HOME</div><br /><br /><br />
<div id="about_me">ABOUT ME</div><br /><br /> <br />
<div id="gallery">GALLERY</div><br /><br /> <br />
<div id="contact_me">CONTACT ME</div><br /><br /> <br />
<div id="my_diary">MY DIARY</div><br /><br /> <br />
<div id="blog">BLOG</div><br /><br /> <br />
</div>
<div id="footer">Developed by Jabir Al Fatah</div>
</body>
/*
All the css properties will go in this file. CSS properties design the site to look it prettier.
*/
#style_header{
background-color:blue;
text-align:center;
padding:20px;
margin:-8px;
border:4px solid red;
}
#paragraph{
text-align:center;
}
#menu_area{
border:4px solid red;
margin:-8px;
background-color:#FFD700;
padding-top:30px;
margin-top:4px;
height:600px;
width:150px;
}
body{
background-image:url(green.JPG);
background-repeat:no-repeat;
}
#footer{
background-color:blue;
margin:-8px;
border:2px solid red;
text-align:center;
}
#home{
font:bold 20px Tahoma;
text-align:left;
}
#about_me{
font:bold 20px Tahoma;
text-align:left;
}
#gallery{
font:bold 20px Tahoma;
text-align:left;
}
#contact_me{
font:bold 20px Tahoma;
text-align:left;
}
#my_diary{
font:bold 20px Tahoma;
text-align:left;
}
#blog{
font:bold 20px Tahoma;
text-align:left;
}
</html>
if you add the p before your header and menu-area, it will appear before header and menu-area, if you want it to appear after header and menu-area, add it after them
<h1 id="style_header">Welcome to my green world!</h1></div>
<div id="menu_area" >
<div id="home">HOME</div><br /><br /><br />
<div id="about_me">ABOUT ME</div><br /><br /> <br />
<div id="gallery">GALLERY</div><br /><br /> <br />
<div id="contact_me">CONTACT ME</div><br /><br /> <br />
<div id="my_diary">MY DIARY</div><br /><br /> <br />
<div id="blog">BLOG</div><br /><br /> <br />
</div>
<p>This is a paragraph i am trying to place in my page, but it doesn't stay in the accurate position.</p>
<div id="footer">Developed by Jabir Al Fatah</div>
P.S: if you want your p to appear next to menu-area and not below it, change display of menu-area and p to inline-block
something like this: http://jsfiddle.net/ZCmg8/
UPDATE: http://jsfiddle.net/ZCmg8/1/
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
I'm trying to create a form with this formatting style:
label a
[input text] SUBMIT
label b
[select]
label c
label from [input text] label to [input texŧ] SUBMIT
This is my html with css code:
<style type="text/css">
form {
width:460px;
}
form label {
font-size:12px;
color:#666;
cursor:auto !important;
}
form input[type=text] {
padding:5px;
height:30px;
line-height:30px;
width:370px;
color:#333;
font-size:14px;
}
form select {
padding:5px;
height:30px;
line-height:26px;
width:370px;
color:#333;
font-size:12px;
border:solid 1px #ccc;
overflow:hidden;
}
form input[type=submit] {
height:20px;
width:20px;
background: url("/mini_glass.png") no-repeat scroll 3px 3px transparent;
border:none;
cursor:pointer;
}
</style>
<div class="margin_top_20">
<form action="">
<div>
<div id="A">
<label>a</label>
<input name="q" value="" type="text">
<input value="" type="submit">
</div>
</div>
<div id="B">
<label>b</label>
<select></select>
</div>
<div id="C">
<label>c</label>
<div id="D">
<label>from</label>
<input name="from" value="" type="text" style="width:50px">
<label>to</label>
<input name="to" value="" type="text" style="width:50px">
<input value="" type="submit">
</div>
</div>
</form>
</div>
I think the problem is that I should set properties like position or float but I don't understand how. Should I use the float:left property for some divs? The way that property works is not very clear to me.
Just add rules specific to the labels in div A and div B
#A label, #B label { display:block}
Demo at http://jsfiddle.net/emTKJ/
I made some changes to your form and CSS and here is the Working Solution as per the format that you want.
The HTML:
<div class="margin_top_20">
<form action="">
<div>
<div id="A">
<label>a</label>
<input name="q" value="" type="text">
<input value="submit" type="button">
</div>
</div>
<div id="B">
<label>b</label>
<select></select>
</div>
<div id="C">
<label>c</label>
<div id="D">
<span>from</span>
<input name="from" value="" type="text" style="width:50px">
<span>to</span>
<input name="to" value="" type="text" style="width:50px">
<input value="submit" type="button">
</div>
</div>
</form>
</div>
The CSS:
form {
width:460px;
}
form label {
font-size:12px;
color:#666;
cursor:auto !important;
display:block;
}
span{
font-size:12px;
color:#666;
cursor:auto !important;
}
form input[type=text] {
padding:5px;
height:30px;
line-height:30px;
width:370px;
color:#333;
font-size:14px;
}
form select {
padding:5px;
height:30px;
line-height:26px;
width:370px;
color:#333;
font-size:12px;
border:solid 1px #ccc;
overflow:hidden;
}
form input[type=submit] {
height:20px;
width:20px;
background: url("/mini_glass.png") no-repeat scroll 3px 3px transparent;
border:none;
cursor:pointer;
}
You just needed to add a display:block; for the form label and a <span> tag for from and to and I changed input type from submit to button and valued as submit. You can change and style it as per your requirement.
Hope this helps.
In my experience, when you want to position a group of element, you should wrapped it with div element and style it. With some element have similar style, add it with the same class. Shouldn't set width of form, just wrap the content inside it with a div and set style for it. I fixed your code here. See full demo in jsfiddle
HTML
<div class="margin_top_20">
<form action="">
<div class="line">
<div id="A">
<div>
<label>Lable A</label>
</div>
<div>
<input name="q" value="" type="text" />
<input value="submit button" type="submit" />
</div>
</div>
</div>
<div class="line" id="B">
<div><label>Label b</label></div>
<div><select></select></div>
</div>
<div class="line" id="C">
<div><label>Label c</label></div>
<div id="D">
<label>from</label>
<input name="from" value="" type="text" style="width:50px" />
<label>to</label>
<input name="to" value="" type="text" style="width:50px" />
<input value="submit button" type="submit" />
</div>
</div>
</form>
</div>
CSS:
form {
}
.line{
padding-top:5px;
}
form label {
font-size:12px;
color:#666;
cursor:auto !important;
}
form input[type=text] {
padding:5px;
width:370px;
color:#333;
font-size:14px;
}
form select {
padding:5px;
width:370px;
color:#333;
font-size:12px;
border:solid 1px #ccc;
overflow:hidden;
}
form input[type=submit] {
border:none;
cursor:pointer;
}
This is the HTML
<div id="header">
</div> <!-- end header -->
<div id="main">
<div id="stylized" class="myform">
<form id="form" name="form">
<label>Name
<span class="small">of company, business, etc...</span>
</label>
<input type="text" name="name" id="name"/>
<label>Status Message
<span class="small">Max 40 Characters</span>
</label>
<input type="text" name="statusmessage" id="statusmessage">
<label>URL to Menu
</label>
<input type="text" name="url" id="url"/>
<button type="submit">Submit</button>
<div class="spacer">
</div>
</form><!-- end form -->
<div id="stylized1" class="myform1">
<form id="form1" name="form">
<label>Street Address
</label>
<input type="text" name="stretaddress" id="streetaddress"/>
<label>City
</label>
<input type="text" name="city" id="city"/>
<label>State
</label>
<input type="text" name="state" id="state"/>
<label>ZIP
</label>
<input type="text" name="zip" id="zip"/>
<div class="spacer">
</div>
</form><!-- end form1-->
</div><!-- end stylized -->
</div><!-- end main -->
</div><!-- end container -->
</body>
</head>
This is the CSS
#container {
margin: auto;
width: 800px;
}
#header {
position: relative;
height: 147px;
background: url(images/header.png) no-repeat;
}
#main {
position: relative;
height: 653px;
background: url(images/main.png) no-repeat;
}
#form {
color: #c4c1c1;
margin: 100px 20px 0px 10px;
}
.spacer{
clear:both;
height:1px;
}
#stylized{
border:solid 2px #c4c1c1;
}
#stylized label{
display:block;
font-family: arial;
font-weight:bold;
width:140px;
margin: 2px 0 0px 10px;
}
#stylized .small{
color:#c4c1c1;
display:block;
font-size:12px;
font-weight:normal;
width:140px;
}
#stylized input{
float:left;
font-size:15px;
padding:5px 25px;
border:solid 1px #c4c1c1;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin:133px 0 0px 100px;
width:125px;
height:31px;
text-align:center;
line-height:3px;
color:4b4b4b;
font-size:15px;
font-weight:bold;
}
#stylized1{
position: relative;
margin: -1600px 0px 10px 450px;
}
The top margin, no matter how many times I change it, never has the correct coordinates. Every time I change the margin, it just goes back to the same place visually. How come? Is it because of the #container width? Or do I need some code? I'm fairly new to this. Thanks for your help.
#stylized1 label{
display:block;
float:left;
font-family: arial;
font-weight:bold;
width:140px;
color:#c4c1c1;
margin: 2px 0px 0px 10px;
}
#stylized1 input{
font-size:15px;
padding:5px 25px;
border:solid 1px #c4c1c1;
width:200px;
margin:0px 0px 20px 10px;
}
Cut and paste are your enemy. I doubt you want duplicate forms, one or each half of the form entry. Also, you are using position relative all over the place. If you are doing that then you are probably doing something wrong. In this solution I floated the two entry divs to the left. You can adjust the top-margin on stylized1 to position it. I also cleaned up a lot of your html structure.
I was kind of assuming you were editing top margin on the element with -1600px, but if I am wrong please let me know which one you were editing margins on.
http://jsfiddle.net/fVh23/
<div id="container">
<div id="header"></div> <!-- end header -->
<div id="main">
<form id="form" name="form">
<div id="stylized">
<label>Name
<span class="small">of company, business, etc...</span></label>
<input type="text" name="name" id="name"/>
<label>Status Message
<span class="small">Max 40 Characters</span></label>
<input type="text" name="statusmessage" id="statusmessage">
<label>URL to Menu</label>
<input type="text" name="url" id="url"/>
</div> <!-- end stylized -->
<div id="stylized1">
<label>Street Address</label>
<input type="text" name="stretaddress" id="streetaddress"/>
<label>City</label>
<input type="text" name="city" id="city"/>
<label>State</label>
<input type="text" name="state" id="state"/>
<label>ZIP</label>
<input type="text" name="zip" id="zip"/>
</div><!-- end stylized1 -->
<br style="clear: both;" />
<button type="submit">Submit</button>
<div class="spacer">
</form><!-- end form1-->
</div><!-- end main -->
</div><!-- end container -->
Scenario: I want to display the following through ASPX page
State : <dropdown>
zip : <textbutton>
Note that the ":" for both State & City should be same in all lines. Currently I am getting something below.
State : <dropdown>
zip : <textbutton>
I must be doing something wrong but don't know yet. Appreciate any inputs,
Here is my code so far,
<div style="text-align:center" >
<asp:Label runat="server" id="StateCategory" Text ="State:" CssClass="LabelLeftAligned" />
<asp:DropDownList runat="server" ID="StateDDown" DataTextField="Name" AppendDataBoundItems="true"></asp:DropDownList>
</div>
<div style="text-align:center" >
<asp:Label runat="server" id="lblzipCode" Text ="Zip:" CssClass="LabelLeftAligned" />
<asp:TextBox ID="txtboxZipcode" runat="server" MaxLength="5" />
</div>
and the class LabelLeftAligned is defined below in the stylesheet.
.LabelLeftAligned {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: black;
font-weight: bold;
text-align: left;
}
Turn the label into a block level element, give it a width and right align it.
Something like: (full example)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
.LabelRightAligned {
display:block;
width: 150px;
text-align:right;
float:left;
}
.ddl {
float:left;
margin-left:10px;
}
</style>
</head>
<body>
<div style="text-align:center;clear:both;">
<span class="LabelRightAligned">State:</span>
<select class="ddl">
<option value="volvo" />
<option value="chevy" />
</select>
</div>
<div style="text-align:center;clear:both;">
<span class="LabelRightAligned">zip:</span>
<input type="text" name="zip" id="zip" value="23423" class="ddl" />
</div>
</body>
</html>
example below:
You can use table formatting in CSS to achieve this. You would use layout for your rows and cells, and text-align to control the horizontal alignment.
Click here for a working demonstration.
<style type="text/css">
.table {
display:table;
border-collapse:collapse;
}
.table-row {
display:table-row;
}
.left-col {
text-align:right;
}
.right-col {
text-align:left;
}
.left-col, .right-col {
display:table-cell;
}
</style>
<div class="table">
<div class="table-row">
<div class="left-col">
Foobar:
</div>
<div class="right-col">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</div>
<div class="table-row">
<div class="left-col">
Bar:
</div>
<div class="right-col">
<asp:TextBox ID="txtTestB" runat="server"></asp:TextBox>
</div>
</div>
</div>
either table the data which in this case shouldn't be a problem based on the little bit I am seeing
<table>
<tr>
<td>State</td>
<td>:</td>
<td><dropdown></td>
</tr>
<tr>
<td>Zip</td>
<td>:</td>
<td><textbutton></td>
</tr>
</table>
OR
wrap the state and zip in a div and then float it left with a width on it
<div class="floatLeft">State</div> : <dropdown>
<div class="floatLeft">Zip</div> : <textbutton>
<style>
.floatLeft {float: left; width: 300px; }
</style>
Here is my page. I need to insert whole code here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tabs ul li:first a').addClass("active");
$('#forms').find('form').hide().fadeIn(1500);
$("#tabs ul li").click(function() {
$("#tabs ul li").removeClass("active");
$(this).addClass("active");
$("#forms form").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
<style type="text/css">
* { margin:0; padding:0; }
body { background:#27476B; }
.clear { clear:both; }
#wrapper { width:510px; height:331px; overflow:hidden; padding:10px; }
#tabs ul { padding-left:15px; list-style:none; }
#tabs ul li { display:block; float:left; text-align:center; }
#tabs ul li a { padding:3px 20px 2px 20px; color:#fff; text-decoration:none; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; }
#tabs ul li a:hover { background:#AEBAC1; }
#tabs ul li a.active, #tabs ul li.active a:hover { background:#AEBAC1; color:#333; }
#forms form { background:#AEBAC1; border:2px solid #333; padding-left:5px; }
.twocol { display:block; float:left; width:250px; margin-bottom:10px; }
.twocol label { margin-top:.33em; display:block; width:240px;}
.twocol select, .twocol input[type="text"] { background:#456A87; color:#fff; display:block; width:240px; font-size:16px; }
.twocol span { padding:0 8px 0 5px; }
.search { width:500px; text-align:center; margin-bottom:5px; }
</style>
</head>
<body>
<div id="wrapper">
<div id="tabs">
<ul>
<li>Properties</li>
<li>Developments</li>
<li>Agents</li>
</ul>
</div>
<div class="clear"></div>
<div id="forms">
<!--
Search Form for Properties
-->
<form id="properties" name="properties" method="post" action="">
<div class="twocol">
<label for="city">City:</label>
<select name="city" size="1">
<option>-</option><option>asdfadf</option><option>-</option>
</select>
<label for="bedrooms">Bedroom:</label>
<select name="bedrooms" size="1">
<option>-</option>
</select>
<label for="minprice">Minimum Price:</label>
<select name="minprice" size="1">
<option>-</option>
</select>
<label for="minarea">Minimum Area:</label>
<select name="minarea" size="1">
<option>-</option>
</select>
<label for="propertytype">Property Type:</label>
<select name="propertytype" size="1">
<option>-</option>
</select>
</div>
<div class="twocol">
<label for="location">Location:</label>
<select name="location" size="1">
<option>-</option>
</select>
<label for="addedwithin">Added Within:</label>
<select name="addedwithin" size="1">
<option>-</option>
</select>
<label for="maxprice">Maximum Price:</label>
<select name="maxprice" size="1">
<option>-</option>
</select>
<label for="maxarea">Maximum Area:</label>
<select name="maxarea" size="1">
<option>-</option>
</select>
<label for="searchfor">Search For:</label>
<input name="searchfor" type="radio" value="sale" /><span>Sale</span>
<input name="searchfor" type="radio" value="purchase" /><span>Purchase</span>
<input name="searchfor" type="radio" value="rental" /><span>Rental</span>
</div>
<hr class="clear" /><br />
<div class="search">
<input type="submit" value="Search" />
</div>
</form>
<!--
Search Form for Developments
-->
<form id="developments" name="developments" method="post" action="">
<div class="twocol">
<label for="city">City:</label>
<select name="city" size="1">
<option>-</option><option>asdfadf</option><option>-</option>
</select>
</div>
<div class="twocol">
<label for="developmentname">Development name:</label>
<input type="text" name="developementname" />
</div>
<hr class="clear" /><br />
<div class="search">
<input type="submit" value="Search" />
</div>
</form>
</div>
</div>
</body>
</html>
Here is the perfect view (on Firefox)
Following problems are identified by me, Please let me know if there are some others too.
IE8 and Chrome are showing some extra height (which is displaying a little part of 2nd form)
IE6 not showing the width specified in CSS.
In IE6, initially tabs div is touching with the forms div. But on mouse over it adds some extra spacing.
How can it be solved.
I am not sure what you mean by points 1 & 2, but 3 I got it fixed. I might have fixed 1 & 2(not sure).
Let me know how this works for you.
http://jsfiddle.net/3uMyA/3/