|
CSS - Css: Using Div's Inside Tables
Hi I am trying to convert a site from HTML to one that relies more on CSS.
For the time being I need to position two div's inside a td one at 100% and the other centered with say 10px padding down each side. The first one goes in ok but the second overflows the td cell I'm trying to put some padding on thus Code: <div style="position: relative; padding: 10"> But the div pops out of the td Any ideas??? Similar TutorialsHi there, I would like to know from css veterans when and why are tables needed inside a web layout built mainly by css. If they are at all. Best regards, - Dehumanizer In this sample code, I would like the form to actually be positioned befor the things that follow it in the code, but I just can't figure out how to do this. The document I want to use it on will not be 100% CSS, and maybe even inside a table. How might this be done? You can see the code in action HERE. Code:
<html>
<head>
<title>Test</title>
<style type="text/css">
.input-box
{
color: #26a;
background: #feb;
border: #26a solid 1px
}
#div1, #div2, #div3, #div4
{
padding: 10px;
margin: 0 auto;
overflow: auto;
display: none;
border 1px;
}
fieldset
{
position: absolute;
left: 50%;
margin-left: -100px;
width: 200px;
padding: 10px 10px 10px 10px;
}
search_label
{
width: 4em;
float: left;
text-align: right;
margin: 0 1em 10px 0;
clear: both
font-family: verdana,tahoma,arial,helvetica,sans-serif;
}
</style>
<script type="text/javascript">
//<![CDATA[
function change(which) {
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById('div4').style.display = 'none';
document.getElementById(which).style.display = 'block';
}
//]]>
</script>
</head>
<body onload="change('div1');">
<h1>Switch Divs</h1>
<form method="post" action="">
<fieldset>
<legend>This is my form</legend>
<label><input class="radios" checked type="radio" name="search_field" value="name" onclick="change('div1');" />Last Name</label><br />
<label><input class="radios" type="radio" name="search_field" value="city" onclick="change('div2');" />City</label><br />
<label><input class="radios" type="radio" name="search_field" value="state" onclick="change('div3');" />State</label><br />
<label><input class="radios" type="radio" name="search_field" value="zip" onclick="change('div4');" />Zip Code</label><br />
<div id="div1">
<input class="input-box" type="text" name="search_name">
</div>
<div id="div2">
<input class="input-box" type="text" name="search_city">
</div>
<div id="div3">
<select name="search_state" size="1">
</select>
</div>
<div id="div4">
<input class="input-box" type="text" name="search_zip">
</div>
<div><input type="submit"></div>
</fieldset>
</form>
<p>Some Content</p>
<table border="1" width="100%">
<tr>
<td>Some other Content</td>
</tr>
</table>
</body>
</html>
Hi everyone. Im facing a problem. Basically I have one large table, with 4 rows. In each row it has two tables, the tables are floating left to each other, with some margin properties inside the <td> tags. If you would please look here. http://www.thehundreds.com/ideaforum/betahelp.htm ... As you can see, im using a pattern. A new row, each new row has two tables that float too each other. everything is aligned correct until I get to my 4th row. for some reason it wont float left anymore to the procedding row. Anyone know why it does this? I added a new class for the fourth set of tables, and made it clear both on the float, and this happends. http://www.thehundreds.com/ideaforum/beta1.htm ... See now the 4th table on the left works, but the right does not. If anyone can help me out here I would really appreciate it. Thanks a ton. I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. Code: <!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></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
document.getElementById("nav" + num).style.paddingTop = '0px'
document.getElementById("nav" + num).style.paddingBottom = '0px';
document.getElementById("nav" + num).style.borderTopWidth = '10px';
document.getElementById("nav" + num).style.borderBottomWidth = '10px';
}
function navoff(num) {
document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
document.getElementById("nav" + num).style.paddingTop = '8px'
document.getElementById("nav" + num).style.paddingBottom = '8px';
document.getElementById("nav" + num).style.borderTopWidth = '2px';
document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>
</head>
<body>
<div class="main">
<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>
<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
padding-right: 4%;
padding-left: 4%;
padding-top: 30px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #000000;
background-color: #EEEEEE;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
.main {
background:#FFFFFF;
border: 10px solid #36393D;
width: 89%;
padding: 5%;
}
.nav {
padding: 8px;
background-color: #C3D9FF;
vertical-align: middle;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #36393D;
cursor:pointer;
border: 2px solid #36393D;
}
I need several div's inside each other, to be padded 10px. I use the code bellow and the result is in image here , I also drawn what I want to accomplish. Can you help me ? PHP Code: .class-help_section_method { border: solid 1px #D9D9D9; -moz-border-radius: 7px 7px 7px 7px; background-color:#E1F9FF; padding:10px; width:100%; } .class-help_section_method_sub { border: solid 1px #D9D9D9; -moz-border-radius: 7px 7px 7px 7px; background-color:#FFFFFF; padding:10px; width:100%; } .class-help_section_niv { border: solid 1px #D9D9D9; -moz-border-radius: 7px 7px 7px 7px; background-color:#F3F3F3; padding:10px; width:100%; } Hello, This look good on IE not on FF, why? Code: <!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
div#username {
position:relative;
width:508px;
height:72px;
margin:2px;
padding:4px;
border:1px #CCCCCC solid;
border-bottom-width: 20px;
}
</style>
</head>
<body>
<div id="username" >div<br />div<br />div<br />div<br />div<br />div<br />div<br />div<br />
</div>
</body>
</html>
I need to style all images within a div. For example, I want to do something like this: <div style="img{border: 0;}"> <img src="" /> <img src="" /> <img src="" /> </div> But that does not seem to work. Is it this possible with css? It is for an ebay template, so I don't think I can reference a separate stylesheet. thanks. Charley This should be easy for you guys. I got a bordered flash object inside of another bordered text area div. Markup as follows: Code:
#flashpictures{
width:auto;
margin:0 5px 0px 15px;
border: 1px solid black;
float: right;
}
.textborder{
clear:none;
position:relative;
border: 1px dotted #244109;
margin:0px 0px 15px 0px; padding:5px;
width:750px;
background-color: #b4b4b3
}
<div class="textborder">
<div id="flashpictures">
*flash object code*
</div>
*text*
</div>
What's happening, strangely enough, is that it's not rendering properly in FF or Chrome (but is in IE). The bottom margin of the text area is collapsing, but in IE it displays correctly (the flash object is completely inside). Can anyone help? Thanks. How do I make a div go to 100% height cross browser? I have a layout like this: ----------HEADER------------- NAVHOLDER | NAV(div inside holder) | NAV(div inside holder) | | | | ----------FOOTER------------- cheers. Thanks for taking the time to read my question. I have 2 containers, one inside the other. If the inside container grows I want the outside container to grow with it. Is that possible? Here is what I have so far... datacontainer is not growing when piccontainer grows. HTML: Code: <body> <div id="datacontainer"> <div id="piccontainer"><img src="../../My Pictures/Copy of PiercedDesktop51024x768.jpg" alt="" /></div> Data</div> </body> CSS: Code: body {
background-color: #000000;
margin-top: 0px;
font-family: Arial, Helvetica, sans-serif;
background-position: top left;
background-repeat: repeat-y;
background-image: url('VSADImages/Border.jpg');
}
#datacontainer {
margin: 0;
padding: 0px;
border-style: solid;
border-color: yellow;
background-color: #00FFFF;
border-width: 2px;
height: auto;
}
#piccontainer {
float: left;
width:700px;
margin: 0;
border-style: solid;
border-color: green;
background-color: #FF6600;
border-width: 2px;
}
Hi, This will be a quick question. Why cant I style ul inside a div as: .css-tabs { margin:0 !important; padding:0; height:30px; border-bottom:1px solid #666; background:#EFEFEF none repeat scroll 0 0; } <!-- Left column --> <div class="floatLeft width73"> <!-- the tabs --> <ul class="tabsss"> <li><a href="#first">Tab 1</a></li> <li><a href="#second">Tab 2</a></li> <li><a href="#third">Tab 3</a></li> </ul> </div> Is it possible to overide a websites default css when you display it in an iframe? if so how is this done? I have found the following javascript but it doesn't seem to do anything (maybe im using it incorrectly...) Code:
var cssLink = document.createElement("link") cssLink.href = "test.css";
cssLink .rel = "stylesheet"; cssLink .type = "text/css";
frames['tbl'].document.body.appendChild(cssLink);
Hi, This is clearly a noob question but i'm just starting to figure out CSS as a better way to navigate & layout my page. I have nested a table inside a div to get a two column effect within the main content area. In Opera, Firefox, IE 5x for mac it works fine and the table stays within the middle section. On IE for PC it runs over the right hand side of the middle section and lays under the right hand menu. I imagine there is a way to get two column layout ysing just DIVS. . . I use my site for school, I'm a high school teacher & I teach some university coursework. My site is set up with three main divs: (heavily borrowed from Eric Meyer's CSS book.) sitenav : left hand nav_bar (for site-wide) entry : min content sidebar: Right hand sub_nav_bar (within this area) ----------------- div#sitenav {position: absolute; top: 2.33em; left: 0; width: 12.5%; font-size: 11px; background-color: white; border: 1px solid red; z-index: 10;} div#entry { color: #660; margin: 0 20% 1em; padding: 0 } div#sidebar {position: absolute; top: 4em; right: 0; width: 20%; font-size: 11px; z-index: 11;} ---------------------- http://www.mrplatts.com/pitt_tech/schedule.html any help? Thanks, Rich This is the first website I'm trying to make compatible with all browers so I'm running into a few new things. Positioning a div inside another div: I usually use margins to position the second div where I want it, but I noticed this doesnt work in firefox, safari, opera, etc. Only IE. Which I know IE is the problem not the other browsers. I did switch to padding rather than margins and it got the desired effect across all browsers. Is padding the right way to go? Just want to make sure before I keep going forward with it. Thanks. Code: <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 4.01 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Can I put my BAR in your FOO?</title>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
}
div#contents
{
width: 90%;
margin-left: 5%;
margin-right: 5%;
border: 1px solid black; /* visual aid */
}
div#thumbnails
{
border: 1px solid red; /* visual aid */
}
div#thumb
{
float: left;
}
</style>
</head>
<body>
<div id="contents">
<div id="thumbnails">
<div id="thumb"><img src="image1.jpg" /></div>
<div id="thumb"><img src="image2.jpg" /></div>
<div id="thumb"><img src="image3.jpg" /></div>
<div id="thumb"><img src="image4.jpg" /></div>
</div>
</div>
</body>
</html>
What I am trying to do is have the collection of "thumb" divs align in the center of the "contents". The number of "thumb"s will vary and I want them to fill the width of the screen no matter what width that may be, and change when the size of the window is changed. I realize that the float: left is pushing them to the left, but it's my understand that is how you get divs to appear side-by-side. So I figured I could enclose them in another div ("thumbnails") and then center it inside "contents", but "thumbnails" doesn't even seem to enclose the "thumb"s unless I specify a width, which I can't do because the number of thumbnails changes, and if I specify a width that is too big, the thumbs float back to the left and the extra containing div "thumbnails" is pointless. So, how do I get the "thumb"s to be side-by-side and have that collection of "thumbnail"s centered on the page, while still keeping things liquid? Currently working in IE6, but looking for support in IE5x, Opera, and Gecko based browsers. Hi All, How can I enable the inside bordder of a TD in html. Thans in advance Hi I am looking for stylesheet method where I can give a image and a hyperlink for that image inside a stylesheet.. Kindly post ur suggestions to my email adddress godwinsharmila@yahoo.com Thanks in advance.. Regards Sharmila Hello all... I need to have one of my div's of my layout contain two separate columns. My layout has 3 columns and in the center main content column I need to split it in half to display list items. Part of a sitemap. I have this and it is not working. The boxes are working and in the proper horizontal alignment but they are not equal vertically. Ideas? Code: <div id="contentcenter"> <div style="background-color: #006666; float:left; width: 185px; "> <p>testing</p> </div> <div style="background-color: #000000; margin-left: 189px; width: 185px; "> <p>testing</p> </div> </div> I am trying to simulate a vertical table using divs and css, but I can't figure out how to center elements. How do I center (horizontal and vertical) these 3 boxes inside the 3 frames? Code:
<html>
<head>
<style>
.frame {
width: 200px;
height: 200px;
border: 2px solid black;
}
.box1 {
width:50px;
height:50px;
background-color: red;
}
.box2 {
width:100px;
height:100px;
background-color: yellow;
}
.box3 {
width:150px;
height:150px;
background-color: green;
}
</style>
</head>
<body>
<div>
<div class="frame">
<div class="box1">Box 1</div>
</div>
<div class="frame">
<div class="box2">Box 2</div>
</div>
<div class="frame">
<div class="box3">Box 3</div>
</div>
</div>
</body>
</html>
Hey there! First off, take a look he http://apollomix.com As you can see, I have that little chat box on the sidebar. However, for the life of me, I can't figure out how to make it 100% tall! I've tried giving the main content div a height of 100%, the body a height of 100%... everything. It just won't go! What gives? Based on what I read, the parent DIV should be 100% tall, and it should work. I guess not. Any help would be really, really appreciated! Thanks! |
|||||||