السلام عليكم

انا لدية موقع وتصميمة فقط شعار وخلفية في الهيدر header الأن صممتله هيدر بس المشكلة ان الكود code فقط شعار وخلفية ممتدة اريد كود code او طريقة لكيف اجعلى الهيدر header مقسم الى 4 اجزاء خلفية ممتدة جانب الأمن من الهيدر header . وسط الهيدر header و جانب اليسار من الهيدر header . وشكرا في انتظاركم في اسرع وقت .


الكود code الموجود للهيدر حاليه هو



رمز PHP:
<code style="white-space:nowrap"> <code> body {
font: normal 12px/1.6 Tahoma;
background-color:#dbdbdb;
min-width:760px;
color:#555;
margin:0;
}

a{
text-decoration:none;
color: #070992;
}

img{
border: 0;
}

a:hover{
text-decoration:none;
color: #c74d11;
}

#header {
height:168px;
width:100%;
background: url('images/hed-back.jpg') repeat-x;
}


#smallimg{
margin: 3px;
width: 100px;
border: 0px;
float: right;
}

#toble{
text-align: right;
}

#logo {
height:200px;
width:500px;
background: url('images/logo.jpg') no-repeat;
float:right;

}

#nav {
height:38px;
background: url('images/nav-back.jpg') repeat-x;
border-top:1px #fff solid;
border-bottom:1px #b1b1b1 solid;
}


#search-box {
width:200px;
height:28px;
position:relative;
padding-top:5px;
padding-left:0;
padding-bottom:0;
padding-right:0;
margin:0;
border-left:1px #b1b1b1 solid;
display: block;
}

input.search {
border: 0;
width: 164px;
height:22px;
background: url(images/Search-box.jpg) no-repeat;
position:absolute;
padding:6px 0 0 0;
text-align:center;
}

input.search-ico {
background:url('images/Search-ico.jpg') no-repeat;
width:30px;
height:28px;
border: 0;
position:absolute;
right:163px;
}


#last-news{ border-right:0px #fff solid;
width: 100%;
padding-top: 5px;
position: absolute;
font: bold 12px/1.6 Tahoma;
}
</code> </code>



اما الكود code الكامل هو





رمز PHP:
<code style="white-space:nowrap"> <code> body {
font: normal 12px/1.6 Tahoma;
background-color:#dbdbdb;
min-width:760px;
color:#555;
margin:0;
}

a{
text-decoration:none;
color: #070992;
}

img{
border: 0;
}

a:hover{
text-decoration:none;
color: #c74d11;
}

#header {
height:168px;
width:100%;
background: url('images/hed-back.jpg') repeat-x;
}


#smallimg{
margin: 3px;
width: 100px;
border: 0px;
float: right;
}

#toble{
text-align: right;
}

#logo {
height:200px;
width:500px;
background: url('images/logo.jpg') no-repeat;
float:right;

}

#nav {
height:38px;
background: url('images/nav-back.jpg') repeat-x;
border-top:1px #fff solid;
border-bottom:1px #b1b1b1 solid;
}


#search-box {
width:200px;
height:28px;
position:relative;
padding-top:5px;
padding-left:0;
padding-bottom:0;
padding-right:0;
margin:0;
border-left:1px #b1b1b1 solid;
display: block;
}

input.search {
border: 0;
width: 164px;
height:22px;
background: url(images/Search-box.jpg) no-repeat;
position:absolute;
padding:6px 0 0 0;
text-align:center;
}

input.search-ico {
background:url('images/Search-ico.jpg') no-repeat;
width:30px;
height:28px;
border: 0;
position:absolute;
right:163px;
}


#last-news{ border-right:0px #fff solid;
width: 100%;
padding-top: 5px;
position: absolute;
font: bold 12px/1.6 Tahoma;
}

/***********************
end nav
***********************/

#wrapper {
background: url('images/sid-right-back.jpg') repeat-y right;
margin: 0 auto;
border-top:1px #fff solid;
}
#wrapper_in {
background: url('images/sid-left-back.jpg') repeat-y left;
}
#container {
background: url('images/sid-right-back.jpg') repeat-y right;
margin-right: -200px;
float: left;
width: 100%;
}
#content {
background: url('images/sid-left-back.jpg') repeat-y left;
margin-right: 205px;
}
#main {
margin: 5px;
background:#ebebeb;
}

.cont-top {
background: url('images/content-top-back.jpg') repeat-x;
height:47px;

}

.cont-top-right {
background: url('images/content-top-right.jpg') no-repeat;
height:47px;
width:7px;
float:right;
}

.cont-top-left {
background:url('images/content-top-left.jpg') no-repeat;
height:47px;
width:5px;
float:left;
}

.cont-right {
background: url('images/content-right.jpg') repeat-y right;

}

.cont-left {
background: url('images/content-left.jpg') repeat-y left;
}

.cont{
overflow: hidden;
margin:0 auto;
padding:0px;
}

.cont-bottom {
background: url('images/content-bottom-back.jpg') repeat-x;
height:23px;
margin-top:-15px;
clear:both;
}

.cont-bottom-right {
background:aqua url('images/content-bottom-right.jpg') no-repeat right;
width:4px;
height:23px;
float:right;
}

.cont-bottom-left {
background:aqua url('images/content-bottom-left.jpg') no-repeat left;
width:4px;
height:23px;
float:left;
}


/***********************
end content
***********************/


#leftcol {
width: 202px;
float: left;
}


#sidebar-right {
width:200px;
float:right;
}



.menu {
width:200px;
}

h2.up{
font: bold 17px arial,tahoma;
height:31px;
width:202px;
background: url('images/sid-up-back.jpg') repeat-x;
margin:0;
color: #ddd;
text-align:center;
line-height:31px;
padding:0;
border-bottom:1px #b1b1b1 solid;
}


#menu_title{
font: bold 17px arial,tahoma;
height:31px;
width:202px;
background: url('images/sid-up-back.jpg') repeat-x;
margin:0;
color: #ddd;
text-align:center;
line-height:31px;
padding:0;
border-bottom:1px #b1b1b1 solid;
}


#home{
font: bold 17px arial,tahoma;
height:31px;
width:100%;
background: url('images/sid-up-back.jpg') repeat-x;
margin:0;
color: #ddd;
text-align:center;
line-height:31px;
padding:0;
border-bottom:1px #b1b1b1 solid;
}

.menu a{
width: 188px;
height: 26px;
background: url('images/sid-a-back.jpg') repeat-x;
border-top:1px #fff solid;
border-bottom:1px #b1b1b1 solid;
text-decoration : none;
display:block;
color: #070992;
text-align: right;
padding-top:2px;
padding-bottom:2px;
padding-right:14px;
font: bold 15.5px Arial;
}


.menu a:hover{
width: 188px;
height: 26px;
background: url('images/sid-ah-back.jpg') repeat-x;
border-top:1px #fff solid;
border-bottom:1px #b1b1b1 solid;
text-decoration : none;
display:block;
color: #c74d11;
text-align: right;
padding-top:2px;
padding-bottom:2px;
padding-right:14px;
font: bold 15.5px Arial;
}

#sb_stats{}

#sb_stats div {
background: url('images/sid-a-back.jpg') repeat-x;
border-top:1px #fff solid;
border-bottom:1px #b1b1b1 solid;
height:30px;
min-height:30px;
padding-right:10px;
}

/***********************
end sidebar-right
***********************/


.clearing {



clear: both;
height: 0;
}
#footer{
border-top: 1px solid #B5D4D6;
background: #DAE9EA;
margin: 0 auto;
padding-top: 15px;
text-align: center;
color: #fff;
}

#footer {
background:aqua url('images/footer-back.jpg') repeat-x;
height:72px;
clear:both;
}

#footer div{
margin: 4px;
}


#footer a{
color: #fff;
text-decoration: none;
}

#footer a:hover{
color: #CCFFFF;
text-decoration: none;
}

#last {
text-align:center;
background: url('images/estftaa-back.jpg') repeat-x;
font-size:0;
}
/******************

news css

*****************/

.up-news { }

.all-news {
width:50%;
float:right;
margin-bottom:30px;
}

.news-box {
background:#fff url('images/news-box-back.jpg') repeat-x top;
border:1px teal solid;
margin:5px;
border: 1px solid #666666;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-opera-border-radius: 5px;
position:relative;
clear:both;
}

.news-box .imgn {
float:right;
margin:2px;
}

.articles {
width:50%;
float:right;
}

h3.h3news {
background: url('images/sid-up-back.jpg') repeat-x;
width:100%;
height:31px;
font: bold 17px arial,tahoma;
color: #ddd;
text-align:center;
line-height:31px;
border-right:1px #b1b1b1 solid;
border-left:1px #fff solid;
}

h2.h2news {
border-bottom:1px #b1b1b1 solid;
margin:0;
padding:5px;
padding-right:10px;
font: bold 17px arial,tahoma;
}

.news-box-in {
border-top:1px #fff solid;
border-bottom:1px #b1b1b1 solid;
min-height:35px;
padding: 5px;
}

#normal{
}

#description{
text-align:left;
font: bold 12px/1.6 Tahoma;
}

#admin{
color:red;
}

.description {
border-top:1px #fff solid;
padding:0;
width:100%;
clear:both;
overflow:auto;
}

.des-lest1, .des-lest2, .des-lest3 {
float:right;
width:32%;
padding:0 1px;
text-align:center;
}


.des-lest1 {
border-left:1px #b1b1b1 solid;
}

.des-lest2 {
border-right:1px #fff solid;
border-left:1px #b1b1b1 solid;
}


.des-lest3 {
border-right:1px #fff solid;
}

.des-lest1:hover, .des-lest2:hover, .des-lest3:hover {
background:white;
}

/* end news *****************/


.media {
width:100%;
clear:both;
}

h3.h3media {
background: url('images/sid-up-back.jpg') repeat-x;
width:100%;
height:31px;
font: bold 17px arial,tahoma;
color: #ddd;
text-align:center;
line-height:31px;
margin: 25px 0;
}


.imglimit {cursor: pointer;border: dotted 1px black;}

@media screen, projection {


.imageflow {


float: right;


visibility:hidden;


position:relative;


text-align:left;


width:100%;


overflow:hidden;

}

.imageflow img {


visibility:hidden;


position:absolute;


top:0px;


border:none;


-ms-interpolation-mode:bicubic; /* Enables bicubic image resampling for the IE7 */

}

.imageflow p{


color: #000000;


text-align:center;


margin:0 auto;


padding-bottom:4px;

}

.imageflow .loading {


position:relative;


left:50%;


margin-left:-106px;


width:200px;


height:15px;


padding:5px;


visibility:visible;


border:1px solid #000000;

}

.imageflow .loading_bar {


height:15px;


width:1%;


background:#070992;


visibility:visible;

}

.imageflow .caption {


font-weight:bold;


position:relative;


text-align:center;


z-index:10000;

}

.imageflow .scrollbar {


visibility:hidden;


position:relative;


border-bottom:1px solid #b3b3b3;


z-index:10001;

}

.imageflow .slider {


position:absolute;


margin-top:-7px;


margin-left:-7px;


z-index:10002;


background-image:url(images/slider_dark.png);


background-repeat:no-repeat;


width:14px;


height:14px;

}

}
</code> </code>






©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©