السلام عليكم..
أشكرك على الرد أخي الكريم..
أرفقت كودات السي اس اس والاتش تي ام ال
لأني لسا ما اشتغلت على البرمجة بلغة البي اتش بي
مازلت اتعلمها هنا ..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="">
<title>Untitled 1</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div id="art">
<div class="header"><h2>Logo</h2></div>
<div class="navbar">
<ul>
<li><a href="#">Home Page</a></li>
<li><a href="#">| Ad Wanted</a></li>
<li><a href="#">| Language</a></li>
<li><a href="#">| Contact Us</a></li>
<li><a href="#">| Help</a></li>
<li><a href="#">| Login/ Register</a></li>
</ul>
</div>
<div class="header">i love this work a lot<br> <br> i love this</div>
<div class="navbar">
<ul>
<li><a href="#">something</a></li>
<li><a href="#">| something</a></li>
<li><a href="#">| something</a></li>
</ul>
</div>
<div class="content">
<div class="leftblock">
<div class="headmenu2"><h2>Using Our site</h2></div>
<div class="bodymenu">
<h4>How to </h4> <p>i will write some information here...i will write some information here.i will write some information here.i will write some information here.vi will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here. </p>
<div class="headmenu3"> <a href="#"> Read More</a></div>
</div>
<div class="bodymenu">
<h4>How to </h4> <p> i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.</p>
<div class="headmenu3"> <a href="#"> Read More</a></div>
</div>
<div class="bodymenu">
<h4>How to </h4> <p> i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.</p>
<div class="headmenu3"> <a href="#"> Read More</a></div>
</div>
<div class="headmenu2"><h2>shipping information</h2></div>
<div class="bodymenu3">
<h4>How to </h4> <p> we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....</p>
</div>
<div class="headmenu2"><h2>contact information</h2></div>
<div class="bodymenu3">
<h5>contact us:..</h5> <p>our information..<br> our phone nomber... <br> our e-mails</p>
</div>
</div>
<div class="rightblock">
<div class="headmenu2"><h2>somthing Of The Month</h2></div>
<div class="bodymenu2">
<img src="img/sunset.jpg" width="311" height="160">
<p> information about him and some of his work information about him and some of his workinformation about him and some of his workinformation about him and some of his workinformation about him and some of his workinformation about him and some of his workinformation about him and some of his workinformation about him and some of his workinformation about him and some of his workinformation about him and some of his workinformation about him and some of his work</p>
</div>
<div class="headmenu2"><h2> News</h2></div>
<div class="bodymenu2"><p>
we will write some news here....!<br>
<a href="#" target="">Read more</a> <br>
we will write some news here....!<br>
<a href="#" target="">Read more</a> <br>we will write some news here....!<br>
<a href="#" target="">Read more</a> <br>we will write some news here....!<br>
<a href="#" target="">Read more</a> <br>
</p></div>
<div class="headmenu2"><h2>classified work</h2></div>
<div class="thumbnail">
<a target="_blank" href="#">
<img src="img/sunset.jpg" alt="" />
</a>
<div class="desc">name<br>category</div>
</div>
<div class="thumbnail">
<a target="_blank" href="#">
<img src="img/sunset.jpg" alt="" />
</a>
<div class="desc">name<br>category</div>
</div>
<div class="thumbnail">
<a target="_blank" href="#">
<img src="img/sunset.jpg" alt=""/>
</a>
<div class="desc">name<br>category</div>
</div>
<div class="thumbnail">
<a target="_blank" href="#">
<img src="img/sunset.jpg" alt="" />
</a>
<div class="desc">name<br>category</div>
</div>
<div class="thumbnail">
<a target="_blank" href="#">
<img src="img/sunset.jpg" alt="" />
</a>
<div class="desc">name<br>category</div>
</div>
<div class="thumbnail">
<a target="_blank" href="#">
<img src="img/sunset.jpg" alt="" />
</a>
<div class="desc">name<br>category</div>
</div>
<div class="headmenu2"><h2>adds Wanted</h2></div>
<div class="bodymenu2">
<div class="scroll">
<p> wanted adds<br>
wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br></p></div>
</div>
</div>
<div class="clear"></div>
<div class="footer">all rights are reserved for us 2010-2011</div>
</div>
</div>
</body>
</html>
css
body {
direction: ltr;
font-family: Tohoma, ssans-serif;
font-size: 14px;
background: #708EDF;
}
img { border: 0;}
#art{
width: 93%;
margin-left: auto;
margin-right: auto;
position: relative;
border: 1.4px dotted #CCC;
background: #D4D4FF;
}
.header{
background-color: #696969;
padding: 7px;
color: #FFF;
margin: 9px 9px 9px 9px;
}
.navbar {
height: 40px;
background-color: #F1F1F1;
margin: 9px;
}
.navbar ul {
list-style: none;
margin: 0 ;
padding: 0;
}
.navbar ul li{
float:left ;
}
h2{
color: #7D6639;
text-transform: uppercase;
}
h4{
color: #005599;
text-transform: capitalize;
}
.navbar ul li a{
display: block;
padding: 8px;
background-color: #F1F1F1;
color: #555;
text-decoration: none;
}
.navbar ul li a:hover{
background: #FFF;
color: #000;
}
.leftblock{
float: left;
width: 295px;
margin-right: 2px;
}
.rightblock{
float: right;
width: 610px;
margin-left: 2px;
}
.bodymenu{
padding: 8px;
margin: 0px 9px 9px 9px;
background: #F5F5F5;
border-top: 9px outset #C3C3C3;
border-left: 9px outset #C3C3C3;
border-right: 9px solid #C3C3C3;
border-bottom: 9px solid #C3C3C3;
}
.headmenu2{
font-weight: bold;
text-align: left;
padding: 2px;
margin: 9px 9px -6px 9px;
}
.headmenu3{
width: 90px;
border: 1px;
background-color: #3A88AE;
font-weight: bold;
text-align: center;
color: white;
padding: 2px;
margin: 2px;
}
.headmenu3 a { text-decoration: none; color: white; }
p
{text-align: justify;}
.bodymenu2{
padding: 8px;
margin: 0px 9px 9px 9px;
background: #F5F5F5;
border: 3px solid #D2D2D2;
}
.bodymenu3{
padding: 8px;
margin: 0px 9px 9px 9px;
background: #F5F5F5;
border: 6px solid #D2D2D2;
}
.scroll{
width:440px;
height:200px;
overflow:scroll;
margin: 15px;
}
.thumbnail{
margin:8px;
border:1px solid gray;
height:auto;
width:auto;
float:left;
background: #F5F5F5;
}
.thumbnail img{
width: 175px;
height: 120px;
display:inline;
margin:2px;
border:1px solid #ffffff;
}
.thumbnail a:hover img
{border:1px solid black;}
.desc{
text-align:left;
font-weight:bold;
color: #005599;
font-size: 13px;
margin:0px 1px 3px 1px;
text-transform: capitalize;
}
.desc img {
height: 30px;
width: 30px;
float: right;
border: none;
}
.clear{
clear: both;
}
.footer{
background-color: #F1F1F1;
text-align: center;
font-size: 12px;
padding: 4px;
}
أنا متأخرة كثير في عملي.. مع اني لقيت اكبر الفائدة هنا جزاكم الله عنا خير
أرجو إفادتي علشان ابدأ في البي اتش بي.. ولكم جزيل الشكر