At first I beginning
blogging only for an excitement and fun, and after that confronting more issue
and more audits and recommendations about my page, and I acknowledged a large
portion of them expecting something from me. So you need to use your ability
and make individuals who are visits to your site, full fill their need and make
stay individuals in your page, those sort of thoughts and contemplations comes
in m personality. So for that I’m taking more paramount to my online journal
and my website guests. So here I'm show the exercises about my demos page, the
majority of them visits my demos page officially I know. Here I'm going to
uncover the coding of that page. That is exceptionally basic. Anyhow it is
exceptionally imperative for the beginners of html
beginners.
Each
of page visitors knows this page, demo’s index page. That page is watermarked
in the above image. I thought clients would prefer not to parchment my page
simply need to show exceptionally exercises in a solitary and non-parchment
page, so I wanted to utilize facebook style scroll bar. Furthermore wanted to
show and get all the subtle elements however here, means demo page and download
links, here I'm utilize box.com capacity for all my information. So for I
wanted to make three div column. They are.
1.
HEADER
2.
CONTAINER
3.
FOOTER
Those things are must. So made header with this code,
HEADER
Header contains only the logo of the
site and details about the site. That’s what I done here.
CODE
CODE
<div class="2myheader" id="myheader">
<div class="head-1">
<a href="http://www.2my4edge.com">
<img src="demos-imgs/2my4edge logo.png" alt="2my4edge-logo" title="logo" width="230" height="80" >
<span class="demo"> DEMOS </span>
</a>
</div>
<div class="head-2">
<span class="site-name">
<a href="http://www.2my4edge.com"> www.2my4edge.com </a>
</span>
</div>
</div>
CSS
* { margin:0;
padding:0;
}
a { text-decoration:none;
}
h2 { font-family:"Courier New", Courier, monospace;
font-size:18px;
color:#336;
}
body { background:#000;
}
#myheader { width:970px;
border-left:2px #999 solid;
border-right:2px #999 solid;
margin:0 auto;
min-height:110px;
}
.head-1 { margin-top:10px;
margin-bottom:5px;
min-height:90px;
border:0px green dashed;
float:left;
}
.head-2 { margin-top:10px;
margin-bottom:5px;
margin-right:80px;
font-family:Tahoma, Geneva, sans-serif;
min-height:50px;
padding-top:40px;
font-size:24px;
color:#64AE59;
font-weight:bold;
float:right;
border:0px green dashed;
}
.site-name > a {
font-family:Tahoma, Geneva, sans-serif;
min-height:50px;
font-size:24px;
color:#64AE59;
font-weight:bold;
float:right;
border:0px green dashed;
text-decoration:none;
}
.site-name > a:hover {
font-family:Tahoma, Geneva, sans-serif;
min-height:50px;
font-size:24px;
color:#fff;
font-weight:bold;
float:right;
border:0px green dashed;
text-decoration:none;
}
.demo { font-size:22px;
font-family:"Comic Sans MS", cursive;
font-weight:bold;
color:#3F457A;
text-decoration:none;
}
a > .demo { font-size:22px;
font-family:"Comic Sans MS", cursive;
font-weight:bold;
color:#3F457A;
text-decoration:none;
}
Hence the over, the header segment is
closures. Read the code obviously get see, now let see the footer.
FOOTER
Typically all the footer
content must have creator points of interest and site name and duplicate rights
clients subtle elements that what I done here as well.
CODE
<div class="myfooter" >
<span class="foot-text">
<span class="foot-name">
<a href="https://plus.google.com/101887107283193256209">Arunkumar Maha</a>
</span> ©
<a href="http://www.2my4edge.com">2my4edge.com</a>
</span>
</div>
CSS
.myfooter { width:970px;
border-left:2px #999 solid;
border-right:2px #999 solid;
border-bottom:2px #999 solid;
padding-bottom:10px;
padding-top:10px;
margin:0 auto;
min-height:30px;
}
.foot-text { float:right;
font-family:Tahoma, Geneva, sans-serif;
font-size:20px;
color:#4A4066;
text-decoration:none;
margin-right:50px;
}
.foot-text > a {
font-family:Tahoma, Geneva, sans-serif;
font-size:16px;
color:#4A4066;
text-decoration:none;
}
.foot-name{ color:#2E6078;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
.foot-name > a{ color:#fff;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
That is for footer simply
called with the compass tag with some of footer content. As the above did, that
will be comes like this.
MAIN CONTAINER
Here in my fundamental
holder everyone effectively figure this is finished with div tag, however I
done it ul li listing tags, adjust three li tag in a
line, which means adjust all the tag to help of width settling. We ought to
need to take in the insights about stature and width, which implies
min-tallness max-stature, min width max width like that. That has more.
Presently see the code and css.
CODE
<div class="box" id="box">
<ul class="ulclass">
<a href="http://www.2my4edge.com/2013/07/file-download-coding-using-php-and-mysql.html" target="_blank">
<li class="liclass">File download coding using PHP and MySql </li>
</a>
<a href="http://demos.2my4edge.com/file-download-demo/" target="_blank">
<li class="lidemo"> DEMO </li>
</a>
<a href="https://www.box.com/s/v7xwf2u0uuroxq7iujik" target="_blank">
<li class="lidown"> DOWNLOAD </li>
</a>
<a href="http://www.2my4edge.com/2013/07/simple-login-logout-system-using-php.html" target="_blank">
<li class="liclass">Simple login and logout system </li>
</a>
<a href="http://demos.2my4edge.com/login-system/" target="_blank">
<li class="lidemo"> DEMO </li>
</a>
<a href="https://www.box.com/s/5sjo9uq6uo4wthskqy4a" target="_blank">
<li class="lidown"> DOWNLOAD </li>
</a>
</ul>
</div>
CSS
.box { height:500px;
overflow:scroll;
width:970px;
border-left:2px #999 solid;
border-right:2px #999 solid;
margin:0 auto;
}
.liclass { color:#FFF;
background-color:#397693;
list-style:none;
max-width:560px;
min-width:560px;
min-height:15px;
max-height:15px;
overflow:hidden;
border:1px #999 solid;
font-family:Tahoma, Geneva, sans-serif;
padding:15px;
margin-left:5px;
margin-bottom:7px;
float:left;
}
a > .liclass:hover { color:#000;
background-color:#CCC;
list-style:none;
max-width:560px;
min-width:560px;
min-height:15px;
max-height:15px;
overflow:hidden;
border:1px #999 solid;
font-family:Tahoma, Geneva, sans-serif;
padding:15px;
margin-left:5px;
margin-bottom:7px;
float:left;
text-decoration:underline;
}
.lidemo { color:#FFF;
background-color:#5F3D87;
list-style:none;
text-align:center;
max-width:120px;
min-width:120px;
min-height:15px;
max-height:15px;
border:1px #999 solid;
font-family:Tahoma, Geneva, sans-serif, cursive;
padding:15px;
margin-bottom:7px;
margin-left:5px;
float:left;
}
a > .lidemo:hover { list-style:none;
text-align:center;
max-width:120px;
min-width:120px;
min-height:15px;
max-height:15px;
border:1px #999 solid;
font-family:Tahoma, Geneva, sans-serif, cursive;
padding:15px;
margin-bottom:7px;
margin-left:5px;
float:left;
text-decoration:none;
}
.lidown { color:#FFF;
background-color:#42525E;
list-style:none;
text-align:center;
max-width:130px;
min-width:120px;
min-height:15px;
max-height:15px;
border:1px #999 solid;
font-family:Tahoma, Geneva, sans-serif;
padding:15px;
margin-bottom:7px;
margin-left:5px;
float:left;
}
.ulclass { list-style-type:none;
padding:15px;
}
After the container tag code
applied the design will be like.
Lastly
how to do that in class box has overflow
scroll. That make the page parchment bar, and there I utilized facebook
style parchment bar, for this points of interest coding allude here. I
effectively posted about that facebook style scroll bar.
That
is it in my demo’s list page. Attempt this coding. Make helpful get this coding
in the above link.
No comments:
Post a Comment