This is my first tutorial made.. even i made some before on my recent site’s i forgot about it.. lol anyway this tutorial could help you on your little CSS help. first let me define what is C.S.S.
in introduction by definition. CSS stands for Cascading Style Sheets via wiki..Cascading Style Sheets or (CSS) is a a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
whoa! anyway..
i made making grid out of tables is very easy and moreover save much time on process of making webpage’s but making it more lighter. you could use “DIV’s and CSS”
here is the screen shot i’ve made.
CSS Grid by: Aka.Matz
sweet huh! ok here goes first., i made div codes and ul and li after the li part. span 3 – span codes that would make the table like grid part. you can see it below.
<div id="mxgrid"> <ul> <li> <label> <div> <span id="mximg"><img src="logo-small.gif" width="43" height="55"/></span> <span id="maindetail">Lorem ipsum dolor sit amet <br /> www.mxwebdesign.net <br /> accusamus </span> <span id="detail">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quaecto beatae vitae dicta sunt. </span> </div> </label> </li> <li> <label><div> <span id="mximg"><img src="logo-small.gif" width="43" height="55"/></span> <span id="maindetail">Lorem ipsum dolor sit amet<br />Section 1.10.32 of <br />accusamus </span> <span id="detail">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium mxwebdesign.net laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quaecto beatae vitae dicta sunt. </span> </div> </label> </li> <li> <label><div> <span id="mximg"><img src="logo-small.gif" width="43" height="55"/></span> <span id="maindetail">Lorem ipsum dolor sit amet<br />Section 1.10.32 of <br />accusamus </span> <span id="detail">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quaecto beatae vitae dicta sunt. </span> </div> </label> </li> <li> <label><div> <span id="mximg"><img src="logo-small.gif" width="43" height="55"/></span> <span id="maindetail">Lorem ipsum dolor sit amet<br />Section 1.10.32 of <br />accusamus </span> <span id="detail">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quaecto beatae vitae dicta sunt. </span> </div> </label> </li> </ul> </div>
ok for my the CSS ..
.grid-featured{
margin:0 auto;
width:665px;
padding:14px;
}
#mxgrid{
border:1px solid #999999;
background-color: #E4E4E4;
}
#mxgrid ul{
margin:0; padding:0; list-style:none;
}
#mxgrid li{
display: block;
border: 1px solid #FFFFFF;
height: 70px;
}
#mxgrid label{
height: 90px;
}
#mxgrid div{
height: 75px;
background-color: #333333;
padding-top: 1px;
}
#mximg{
background-color: #F2DB34;
float: left;
border: 1px solid #333333;
margin-top: 4px;
margin-right: 4px;
margin-bottom: 4px;
margin-left: 6px;
padding: 4px;
width: 43px;
}
#maindetail{
float: left;
background-color: #016AB8;
height: 55px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #013F6B;
border-right-color: #015DA3;
border-bottom-color: #015DA3;
border-left-color: #015DA3;
width: 177px;
padding-top: 4px;
padding-right: 3px;
padding-bottom: 4px;
padding-left: 3px;
margin-top: 4px;
margin-right: 3px;
margin-bottom: 4px;
margin-left: 3px;
}
#detail{
float: left;
padding: 4px;
margin: 4px;
background-color: #BB0154;
width: 390px;
height: 55px;
border: 1px solid #700133;
}
and your done.
