|
HTML - Nested Input In Div
I have the html code:
<div style="width: 100%; height:100%; background-color: orange;"><input type="text" style="border-style: solid;border-width: 1px;border-color:black;"/></div> In IE7 the input will start one pixel below the div, in Firefox it displays well. How can I get rid of the 1px in IE7 ? Similar Tutorialsyou have 3 floating divs. "bottom" "top" and "middle". "top" is inside of "bottom" --> in this scenario, can "middle" div ever be above "bottom" div, but below "top" without being inside of "bottom" div? Code: <div id="bottom" style="position:absolute; top:100px; left:100px; width:200px; height:100px; z-index:1; background-color:#F00;"><h1>bottom</h1> <div id="top" style="position:absolute; top:100px; left:150px; width:200px; height:100px; z-index:3; background-color:#00F;"><h1>top</h1></div> </div> <div id="middle" style="position:absolute; top:150px; left:150px; width:200px; height:100px; z-index:2; background-color:#0F0;"><h1>middle</h1></div> Ok so here is my issue, i am new to web site design and i have a simple project i would like to work on. I am looking to have an entry box with a simple submit button, then i would like the submissions to be displayed below in the order they are submitted. I would also like to limit the number of submissions that show on the page at a given time by creating multiple pages that can be viewed. This seems like a very simple issue but im having trouble finding solutions on the web. Would inserting a java app or some other secondary tool be better? Any help is appreciated -Matt Hi What is wrong with this, it can't post text only post checkbox <html> <head> </head> <body> <FORM action="http://localhost:8182/items" method="post"> <P> <LABEL for="firstname">First name: </LABEL> <input type="text" value = "Hamada" id="firstname"><BR> <LABEL for="lastname">Last name: </LABEL> <input type="text" value = "I hate my life" id="lastname"><BR> <LABEL for="email">email: </LABEL> <input type="text" id="email" value = "I hate you"><BR> <INPUT type="radio" name="sex" value="Male"> Male<BR> <INPUT type="radio" name="sex" value="Female"> Female<BR> <input type="submit" value="Submit"> <INPUT type="reset"> </P> </FORM> </body> </html> Thanks I am currently trying to create some nested lists to display the following... A...R...X B...S...Y C...T...Z (where the letters will eventually be replaced by words) and have made this work perfectly in chrome and firefox, however when I use Internet Explorer I get something resembling the following... A B...R C...S...X .....T...Y ..........Z I assume it's probably to do with the css, but please can someone help me with this problem, the html and css are shown below, thanks in advance for any help. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel=stylesheet href="links.css" type="text/css"> </head> <body> <div id="container"> <ul id="links-nav"> <li> <ul> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </li> <li> <ul> <li><a href="#">R</a></li> <li><a href="#">S</a></li> <li><a href="#">T</a></li> </ul> </li> <li> <ul> <li><a href="#">X</a></li> <li><a href="#">Y</a></li> <li><a href="#">Z</a></li> </ul> </li> </ul> <div class="clear"></div> </div> </body> </html> CSS Code: #container{
width:960px;
margin:0px auto;
border: 1px solid #000;
padding:20px 10px;
height:auto;
font-family: Arial, sans-serif;
font-size:11px;
}
.clear {
clear: both;
height: 0;
overflow: hidden;
}
a{
text-decoration:none;
color:#555;
}
#links-nav li, li ul li{
list-style:none;
}
#links-nav{
display:inline;
margin:0;
padding:0;
}
#links-nav li ul{
float:left;
padding:0;
width:168px;
padding: 0px 10px;
}
Hi, I am using CSS with nested tables. There are two <td> fields in the innermost table, and are having links inside them. When I open the page in IE, and move the mouse over to the first cell, the whole cell becomes active. But the second cell becomes active only if I take the mouse on the text. Why this inconsistency? Can anyone help? Thanks. Please refer attached html and css files Hi. I need to find a way of displaying some thumbnail photos in a table cell across a bunch of different tempates. I put a new thumbnail in the group about once a week, but I dont want to edit every template I have. Is is possible to have code in the table cell that say's get thumbnails.htm and put them in this cell That way I can just edit thumbnails.htm and it will show up on all the templatess/pages I'm sure it can be done, but I'm not sure how to go about it. Thanks Leroy Hello, I am new here and hope someone can help. I am creating a page where I need to have several nested lists. The 'numbering' is showing up correctly but the 'nested' lists are not indented. Can anyone take a look at the page and my source code and see if you can help me figure out what is wrong? go to http://www.prewrath.com/index2.html Thank you! bzig I am having a problem that I can not figure out why this is happening. I have two divs one named content and one named welcome. The welcome div is nested inside the content div. Whenever I change the margin top for the welcome div it also changes the margin top of the content div it is nested in. How can I keep it where the content div is fixed and doesn't move no matter where I set the margin top for the welcome div? Here is the HTML.... Code: <div id="content">
<div class="welcome">
<p> Coming Soon, a new and improved Texas Camping Forum for Fall 2008!!!<br>
Bookmark us and check back often....</p>
</div>
</div>
Here is the CSS... Code: #content {
margin: 5px 0 0 140px;
text-align: center;
width: 630px;
border-left: 1px solid #F4F4F4;
}
.welcome {
margin-top: 25px;
}
Here is the link to the site.... http://development.mesquitechristmas.com/index.html Any ideas or suggestions as why this is happening? -Thanks Here's my problem... I'm using two blockquote tags to style my BBCode quote tags for my site. However, whenever I post something that's longer than, say, a line in a quote tag, it moves the sidebar div down below the main div. Only in IE though. Typical. http://automata.firephoenixnet.com/test.html I tried using divs instead - didn't work. I even tried using spans - but they didn't work the way I wanted them to. Can anyone help me with this? Thanks in advance guys. Hello guys, I want to create a page with nested html tables. I have attached an image of exactly what I want. Can you please help me with that? Hi I have a main div called wrapper - it holds the main content of my site. It has a thin border around it. In Firefox, it just appears as a thick horizontal line, and it's contents appear underneath it. I have checked the nestings, and they all seem right - in other words, this DIV definitely contains content, and it shows in IE, just not Firefox. If I type text next to <div id="wrapper">, it appears in the wrapper div, and pushes the rest of the content down the page. I don't get it. The code says the content is in the div, but it's not. HELP!!! Cheers Shaun Hi, I've heard it said that using nested Divs is bad practice. Does anyone agree with this? And if so, why? ...just wondering. HH hi everybody, i have a problem displaying an html page that contains nested tables, all in a div. now the testing page that i present is a simple html, which works just fine in FF, chrome, safari and opera. sadly, it doesnt in IE7 (didnt test other IE versions). the goal is to make the scroll of the div reflect the width of the tables. i dont know what is causing this, maybe there's something missing in my code, or just an IE bug, perhaps... Anyway, i appreciate you reading this and thanks for your help, if any. I feel really stupid now, I can't figure out how to start a new thread. Please someone help me figure out what is wrong with my nested frames: <html> <head> <title></title> </head> <frameset rows="99%"> <frame src=""/> <frameset cols="20%,80%"> <frame src=""/> <frame src=""/> </frameset> </frameset> </html> They work individually but not collectively. Thanks in advance! Hello, I've been looking at this problem for a few hours now and can't see what i'm doing wrong. I just want to nest 2 tables inside 1 row of another table. Problem can be seen and you can view source at http://www.lakesdt.com/testindex.html Can anyone tell me where i've gone wrong? I'm using Notepad++ so that can confirm all my <tr> and <td>'s seem to match up. Any help much appreciated! Also open to suggestions for a better way to implement this, and also as each link on the left will load a page in the right is there a neater way to do this without reloading the whole page again? Best regards, Matt I am using nested frames on my default page which for the majority of needs works out fine, but I am trying to link to another page I wrote and I don;t know how to to set it so it takes over the entire page and not just in the lower right hand frame. How can I go about doing this? Hello, Can anybody help me out? I have a nested table as such: =========================================== <table cellspacing="0" cellpadding="3" border="1"> <tr> <td>Joe <table> <tr> <td>A </td> </tr> </table> </td> </tr> </table> =========================================== How can I get "Joe" and "A" on the same line without changing the table structure? (Can't change structure cuz this is how my server side code spits it out. But I can add styles and attributes.) I've tried all manner of floating, margins, padding, aligning, hspacing, vspacing, and nothing seems to work. Thanks for any help. I am trying to get three colums of work, picture on the left, text middle, pictures on the right. should I be working with nested tables? attached a pix to show what I mean, I have various div's inside a wrapper div (#wrapper). I have set the width of wrapper div to 900px and one of the inside div (#content) to 650px. but the inner div is not getting shrinked to 650px. I am using dreamweaver and eric mayer reset before applying my custom CSS. Here is the code: HTML Code: Code: <!DOCTYPE html>
<html>
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen>
<title>Shears Design Website</title>
</head>
<body>
<div id="outer">
<div id="wrapper">
<div id="shears-logo">
<img src="images/logos/ShearsDesign.jpg"/>
</div>
<div id="top-nav">
<ul>
<li> <a href="index.html">Home</a></li>
<li> <a href="about.html">About</a></li>
<li> <a href="courses.html">Courses</a></li>
<li> <a href="tutorial.html">Tutorial</a></li>
<li> <a href="contact.html">Contact Us</a></li>
<li> <a href="imp-links.html">Important Links</a></li>
</ul>
</div>
<div id="content">
<h1> About Shears Design</h1>
<p> Shears Design is a small web design and training studio. We have worked as a freelance designer since 2006 and have been creating websites since then.Thewebsites we design have a clean professional layout and appearance with easy to understand navigation and clean, easy to read typography so your site visitors find what they are looking for and have a positive experience visiting your site. We believe in using straightforward well tested design methods which produce sites that are pleasant to visit and easy to maintain and expand when the time comes. Our websites are based on a standard layout grid which gives our clients the ability to visualize their sites in an organized way and provides a framework to quickly and efficiently create dependable and clean websites.</p>
</div>
<div id="right-side">
<h2> Learning resources </h2>
<p> For more learning resources, please refere the tutorial link at the top of the page. </p>
<h3> Shears Design Frameswork </h3>
<p> This is the framework we use to create websites in the training videos for Adobe Dreamwewaver, Microsoft Expression Web and the learning HTML and CSS courses. It includes the completed project templates created in the videos. The purpose of this framework is to provide you with a starting set of tools for creating websites, which you can customized to fit your needs and style. Its the toolkit we use everyday when creating websites. It works great for us and we hope it can be the start of something great for you. </p>
<p> <a href="contact.html"> Contact us for more information </a> <p>
<h3> Small Business SEO Guide </h3>
<p> SEO Guide will go over what SEO is, Keyword Research, External Link Building and OnPage Optimization techniques as well as a discussion of "Black Hat" techniques to avoid. The guide will conclude with information on adding your site to Google and Bing, working with XML sitemaps and installing Google Analytics. The videos will demonstrate the On Page SEO Techniques discussed in the guide and the procedure for adding your site to Google and Bing, creating search engine site maps and adding Google Analytics to your site.</p>
<p> <a href="contact.html"> Contact us for more information </a> <p>
</div>
<div id="social-media-icons">
<ul>
<li> <a href="http://www.facebook.com"> <img src="images/logos/facebook-64x64.png"/> </a> </li>
<li> <a href="http://www.twitter.com"> <img src="images/logos/twitter-64x64.png"/> </a> </li>
<li> <a href="https://plus.google.com"> <img src="images/logos/google-64x64.png"/> </a> </li>
<li> <a href="http://www.youtube.com"> <img src="images/logos/youtube-64x64.png"/> </a> </li>
<li> <a href="http://www.yahoo.com"> <img src="images/logos/yahoo-64x64.png"/> </a> </li>
</ul>
</div>
<div id="footer">
<p> ©2011 Shears Design | All Rights Reserved </p>
<p> Terms and Conditions </p>
</div>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------- CSS code: Code: /* Reset */
html, body { margin: 0; padding: 0; border: 0; background: transparent; font-size:10px; }
div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li,
table, tr, th, td, tbody, tfoot, thead {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
}
img { margin:0; padding:0; border:0; }
table, tr, th, td, tbody, tfoot, thead {
margin: 0; padding: 0; border: 0;
vertical-align: baseline;
background: transparent;
}
table { border-collapse: collapse; border-spacing: 0; }
input, select, textarea, form, fieldset {
margin: 0; padding: 0; border: 0;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
display:block; }
h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, b, i, u, strike {
font-family: Arial, Helvetica, sans-serif;
font-size:100%;
font-weight: normal;
font-style: normal;
line-height: 100%;
text-indent: 0;
text-decoration: none;
text-align: left;
color: #000;
}
ol, ul { list-style: none; }
/* Headings */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
h1 { font-size:24px; color:#3CF;
padding-bottom:15px; border-bottom:1px #ccc solid; margin-bottom:15px; }
h2 { font-size:20px; }
h3 { font-size:16px; margin-bottom:5px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }
/* Text Elements */
p { color:#000; font-size:12px; line-height:150%;
margin:15px 0; }
a { }
a:link { color: #00f; }
a:visited { color: #0f0; }
a:active { color: #000; }
a:focus { color: #666; }
a:hover { color: #f00; }
/*id styles*/
body {background-color:#D1F4FC; }
#wrapper {width:900px; margin:0px auto; background-color:#FFF;}
#shears-logo {padding-top:20px; float:left;
margin-bottom:20px;}
#top-nav { clear:both;
}
#top-nav ul li a {text-decoration:none;}
#top-nav ul li {display:inline;
}
#content { width:650; margin:10px; float:left;}
I have some nested tables (collapse/expand kinda table). How can I align the columns of each nested table, if all are expanded I want to see all the columns underneath symetrical. I have attached the screenshot of what I am getting with the following code: HTML Code: <head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.collapsed
{
display: none;
}
table#container
{
background-color:#FFFFFF;
border: solid #000 3px;
width: 400px;
}
table#container td
{
border: solid #000 1px;
}
table#sub
{
background-color:#FFFFFF;
border: solid #000 0px;
width: 400px;
}
table#sub td
{
border: solid #000 1px;
}
.toprow
{
font-style: italic;
text-align: center;
background-color: #FFFFCC;
}
.leftcol
{
font-weight: bold;
text-align: left;
width: 1%;
background-color: #CCCCCC;
}
</style>
<script language="javascript" type="text/javascript">
//***collapsible rows
function outliner(evt)
{
evt = (evt) ? evt : (window.event) ? window.event : "";
var oMe;
if (evt.srcElement)
{
oMe = evt.srcElement;
}
else if (evt.target)
{
oMe = evt.target;
}
if (evt.srcElement)
{
//for IE
var child = document.all[oMe.getAttribute("child",false)];
}
else
{
//for Firefox
var child = document.all[oMe.getAttribute("child",false)];
}
//get child element
//if child element exists, expand or collapse it.
if (null != child)
child.className = child.className == "collapsed" ? "expanded" : "collapsed";
}
function changepic(evt)
{
evt = (evt) ? evt : (window.event) ? window.event : "";
var uMe;
if (evt.srcElement)
{
uMe = evt.srcElement;
}
else if (evt.target)
{
uMe = evt.target;
}
var check = uMe.src.toLowerCase();
if (check.lastIndexOf("expand.gif") != -1)
{
uMe.src = "images/collapse.gif";
}
else
{
uMe.src = "images/expand.gif";
}
}
</script>
</head>
<body onclick="outliner(event)">
<table id="container" border="1">
<thead>
<tr class="toprow">
<td />
<td>Parameter</td>
<td>Value</td>
<td>DataType</td>
</tr>
</thead>
<tr>
<td class="leftcol"> </td>
<td>name</td>
<td>Mark</td>
<td>String</td>
</tr>
<tr>
<td class="leftcol">
<a><img border="0" alt="expand/collapse" class="expandable" height="11" onclick="changepic(event)"
src="images/expand.gif" width="9" child="s2" p21="p21" p22="p22" p22="p23"></a>
</td>
<td>composite</td>
<td>100,200,red</td>
<td>CompositeType</td>
</tr>
<tr>
<td colspan="4" bgcolor="cyan" class="collapsed" id="s2">
<table id="sub">
<tr>
<td> </td>
<td>X</td>
<td>100</td>
<td>Int32</td>
</tr>
<tr>
<td> </td>
<td>Y</td>
<td>200</td>
<td>Int32</td>
</tr>
<tr>
<td class="leftcol">
<a><img border="0" alt="expand/collapse" class="expandable" height="11" onclick="changepic(event)"
src="images/expand.gif" width="9" child="s3"></a>
</td>
<td>color</td>
<td>134,122,234</td>
<td>Color</td>
</tr>
<tr>
<td colspan="4" bgcolor="cyan" class="collapsed" id="s3">
<table id="sub">
<tr>
<td> </td>
<td>R</td>
<td>134</td>
<td>Int32</td>
</tr>
<tr>
<td> </td>
<td>G</td>
<td>122</td>
<td>Int32</td>
</tr>
<tr>
<td> </td>
<td>B</td>
<td>234</td>
<td>Int32</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
|
|||||||