html {
height: 100%;
}
body {
height: 100%;
}
main-body {
height: 100%;
}
inner {
min-height: 100%;
}
Showing posts with label css. Show all posts
Showing posts with label css. Show all posts
Tuesday, June 21, 2011
Friday, April 17, 2009
Centering DIV
Centering a DIV using CSS
#content { width: 700px ; margin-left: auto ; margin-right: auto ;}
But how do you center a DIV in the center within a DIV? Say I have two absolute div and one is within the other. Both has got position set to absolute. We can do this:
<div style="width:900px;position:absolute;margin-left:-450pxtop:50px;left:50%;">
position:absolute will set the position to absolute
left:50% will set the child div to be drawn in the center
margin-left:450px will dictate that the drawn child be drawn to left by 450
Thursday, November 6, 2008
Collapsing/ Hiding rows in a table
Hiding rows on a table based on a link on a row. Nothing much to talk about, except that this is actually quite an interesting piece of code. Simple but yet complex. Oxymoron i know, but anyhow note that the span tag has an id which corresponds to the row number of the row to height. It is also important to note that there should not be anything other than the value between the span tags. Most things such as styles can be controlled directly using CSS.
<script type="text/javascript">
var hide= true;
function toggleRows(tableId, rowId, tag){
tbl = document.getElementById(tableId);
navispan = document.getElementById(rowId);
var len = tbl.rows.length; if(tag.innerHTML.substring(0,4) == "Show") {
navispan.innerHTML = tag.innerHTML.substring(5); hide= false;
} else {
navispan.innerHTML = "Show " + tag.innerHTML; hide= true;
}
var vStyle = (hide)? "none":"";
tbl.rows[rowId].style.display = vStyle;
}</script>
<style>
.header {
text-align:left; width:100px;
}
.bodyText {
width:150x;
}
</style>
</head>
<body>
Click here to hide/show
<span id="0" onClick='toggleRows("myTable",0, this)' style='cursor:pointer;color:#cc0000'>Aaron</span>
<span id="1" onClick='toggleRows("myTable",1, this)' style='cursor:pointer;color:#cc0000'>Jason</span> <span id="2" onClick='toggleRows("myTable",2, this)' style='cursor:pointer;color:#cc0000'>Adam</span>
<br /><br />
<table id="myTable" style="width:400px; border:0px;">
<tbody>
<tr>
<td class="header"> <span onClick='toggleRows("myTable",0, this)' style='cursor:pointer;color:#cc0000'>Aaron</span> </td>
<td class="bodyText"> This annotation Sucks </td>
<td class="bodyText"> This annotation is good </td>
</tr> <tr>
<td class="header"> <span onClick='toggleRows("myTable",1, this)' style='cursor:pointer;color:#cc0000'>Jason</span> </td>
<td class="bodyText"> </td> <td class="bodyText"> This annotation cannot make it. </td> </tr> <tr>
<td class="header"> <span onClick='toggleRows("myTable",2, this)' style='cursor:pointer;color:#cc0000'>Adam</span> </td>
<td class="bodyText"> I love this phrase </td> <td class="bodyText"> This phrase is dumb. </td> </tr>
</tbody>
</table>
<script type="text/javascript">
var hide= true;
function toggleRows(tableId, rowId, tag){
tbl = document.getElementById(tableId);
navispan = document.getElementById(rowId);
var len = tbl.rows.length; if(tag.innerHTML.substring(0,4) == "Show") {
navispan.innerHTML = tag.innerHTML.substring(5); hide= false;
} else {
navispan.innerHTML = "Show " + tag.innerHTML; hide= true;
}
var vStyle = (hide)? "none":"";
tbl.rows[rowId].style.display = vStyle;
}</script>
<style>
.header {
text-align:left; width:100px;
}
.bodyText {
width:150x;
}
</style>
</head>
<body>
Click here to hide/show
<span id="0" onClick='toggleRows("myTable",0, this)' style='cursor:pointer;color:#cc0000'>Aaron</span>
<span id="1" onClick='toggleRows("myTable",1, this)' style='cursor:pointer;color:#cc0000'>Jason</span> <span id="2" onClick='toggleRows("myTable",2, this)' style='cursor:pointer;color:#cc0000'>Adam</span>
<br /><br />
<table id="myTable" style="width:400px; border:0px;">
<tbody>
<tr>
<td class="header"> <span onClick='toggleRows("myTable",0, this)' style='cursor:pointer;color:#cc0000'>Aaron</span> </td>
<td class="bodyText"> This annotation Sucks </td>
<td class="bodyText"> This annotation is good </td>
</tr> <tr>
<td class="header"> <span onClick='toggleRows("myTable",1, this)' style='cursor:pointer;color:#cc0000'>Jason</span> </td>
<td class="bodyText"> </td> <td class="bodyText"> This annotation cannot make it. </td> </tr> <tr>
<td class="header"> <span onClick='toggleRows("myTable",2, this)' style='cursor:pointer;color:#cc0000'>Adam</span> </td>
<td class="bodyText"> I love this phrase </td> <td class="bodyText"> This phrase is dumb. </td> </tr>
</tbody>
</table>
Make your screen stay when you click popup
When we use javascript to start a popup for example, most of the time we do so by executing the following script:
<a href="#" onclick="javascript:win.. ">Click</a>
The reason why we have # here is because we want the cursor to show up so that on mouse over, the user knows that the link is 'clickable'. But by doing this, it will cause the page to reload. So how do we show the cursor but yet not cause the page to reload without.
The anwer is, don't use #, use CSS.
<p onClick="javascript:win.." style='cursor:pointer'>Click</p>
Problem Solve!
<a href="#" onclick="javascript:win.. ">Click</a>
The reason why we have # here is because we want the cursor to show up so that on mouse over, the user knows that the link is 'clickable'. But by doing this, it will cause the page to reload. So how do we show the cursor but yet not cause the page to reload without.
The anwer is, don't use #, use CSS.
<p onClick="javascript:win.." style='cursor:pointer'>Click</p>
Problem Solve!
Saturday, October 11, 2008
Make borders around pictures
Instead of having to thumbnail pictures manually and putting a niceframe using Photoshop or Fireworks, the easiest way is actually CSS. Here it is:
<style type="text/css">
.float img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
</style>
Here is a very good tutorial on creating frames:
http://www.csstemplatesweb.com/2008/05/08/web-20-design-generators/
<style type="text/css">
.float img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
</style>
Here is a very good tutorial on creating frames:
http://www.csstemplatesweb.com/2008/05/08/web-20-design-generators/
Pictures with margins
If you are looking at how to place pictures side by side text without the usage of tables in HTML, the usage of CSS is the way to go. The code is extremely simple as well. Here it is:
<style type="text/css">
.float img {
float:left;
margin-bottom:10px;
margin-right:10px;
}
</style>
Done! The key property here is float, with it specified your picture will float to the left and your text will be on the right of this text with a margin of 10 pixels bottom and right to the picture. Natutally if you need it the reverse, you have to change float to right and the margin should be specified for left instead.
<style type="text/css">
.float img {
float:left;
margin-bottom:10px;
margin-right:10px;
}
</style>
Done! The key property here is float, with it specified your picture will float to the left and your text will be on the right of this text with a margin of 10 pixels bottom and right to the picture. Natutally if you need it the reverse, you have to change float to right and the margin should be specified for left instead.
Subscribe to:
Posts (Atom)