The post Rounded corners CSS appeared first on webtoolkit.info.
]]>The easiest and fastest way is to use CSS round corner options. The good thing its fast and easy. The bad thing Internet Explorer browser does not support these options. If Internet Explorer isn’t important for you, use options listed below.
www.Webtoolkit.info is also using this method, if you are using Firefox, Safari, or Webkit engine based browser you can see rounded corners everywhere on this page.
You can use these CSS options on any block elements: tables, divs, input fields, etc.
.roundedCorners {
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.roundedTopCorners {
border: 1px solid #000;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
}
.roundedBottomCorners {
border: 1px solid #000;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>My project</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link media="screen" type="text/css" rel="stylesheet" href="/css/feed/webtoolkit.roundedcorners.css" /> </head> <body> <div class="roundedCorners"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> <div class="roundedTopCorners"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> <div class="roundedBottomCorners"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> </body> </html>
The post Rounded corners CSS appeared first on webtoolkit.info.
]]>The post CSS centered layout appeared first on webtoolkit.info.
]]>First include the style sheet at the top of your code. Do it in
tag, then you can write your code.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>My project</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link media="screen" type="text/css" rel="stylesheet" href="/css/feed/webtoolkit.clayout.css" />
<style>
body {
margin: 0px;
padding: 0px;
font-family: verdana;
font-size: 12px;
}
div#layout { /* exploder 5.5+ */
width: expression((document.body.clientWidth > 790 ? document.body.clientWidth : 790) + "px");
height: expression((document.body.clientHeight > 490 ? document.body.clientHeight : 490) + "px");
}
div#container,
div#container div.container-top,
div#container div.container-bottom {
width: 790px;
}
div#container,
div#container div.container-right,
div#container div.container-left {
height: 490px;
}
/* colors */
div#container {
background: #FFFFFF;
}
div#container div.container-top {
background: #FF0000;
}
div#container div.container-right {
background: #00FF00;
}
div#container div.container-bottom {
background: #0000FF;
}
div#container div.container-left {
background: #FFFF00;
}
div#container div.container-top-right {
background: #00FFFF;
}
div#container div.container-bottom-right {
background: #FF00FF;
}
div#container div.container-bottom-left {
background: #C0C0C0;
}
div#container div.container-top-left {
background: #000000;
}
</style>
</head>
<body>
<div id="layout">
<div id="container">
<div class="container-top"></div>
<div class="container-right"></div>
<div class="container-bottom"></div>
<div class="container-left"></div>
<div class="container-top-right"></div>
<div class="container-bottom-right"></div>
<div class="container-bottom-left"></div>
<div class="container-top-left"></div>
Content goes here...
</div>
</div>
</body>
</html>
body, html {
height: 100%;
}
div#layout { /* exploder 5.5+ */
position: absolute;
left: 0px;
top: 0px;
overflow: hidden;
text-align: center;
}
* > div#layout { /* normal browsers */
min-width: 790px;
min-height: 490px;
width: 100%;
height: 100%;
}
div#container {
position: relative;
top: 50%;
margin-top: -245px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
div#container div.container-top {
position: absolute;
left: 0px;
top: -1000px;
height: 1000px;
}
div#container div.container-right {
position: absolute;
right: -1000px;
top: 0px;
width: 1000px;
}
div#container div.container-bottom {
position: absolute;
left: 0px;
bottom: -1000px;
height: 1000px;
}
div#container div.container-left {
position: absolute;
left: -1000px;
top: 0px;
width: 1000px;
}
div#container div.container-top-right {
position: absolute;
right: -1000px;
top: -1000px;
width: 1000px;
height: 1000px;
}
div#container div.container-bottom-right {
position: absolute;
right: -1000px;
bottom: -1000px;
width: 1000px;
height: 1000px;
}
div#container div.container-bottom-left {
position: absolute;
left: -1000px;
bottom: -1000px;
width: 1000px;
height: 1000px;
}
div#container div.container-top-left {
position: absolute;
left: -1000px;
top: -1000px;
width: 1000px;
height: 1000px;
}
The post CSS centered layout appeared first on webtoolkit.info.
]]>The post CSS clearfix appeared first on webtoolkit.info.
]]>Once you understand what is happening, use the method below to “clearfix” it.
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
The post CSS clearfix appeared first on webtoolkit.info.
]]>