אתגר עיצובי קטן...
התמונה הזו אמורה לתאר את החלק העליון של האתר ואנסה להסביר.
הרוחב של האתר הוא 960 פיקסלים, הקצוות בתמונה מתארים את הרקע שהוא מעבר ל-960.
כלומר, בצד אחד זה עם כחול ובצד שני ללא רקע כחול.
אני די שובר את הראש איך ליישם את זה ובינתיים לא הצלחתי.
ניסיתי ליצור שני divs השאלה היא איך אני מגדיר לרקע אחד להיות בימין ולא בשמאל?
תגים:
הפתרון: HTML: <?php <div
הפתרון:
HTML:
<?php
<div id="inner-header">
<div class="right-inner-header"></div>
<div class="left-inner-header"></div>
</div>
?>
CSS:
<?php
#inner-header {background: url("../images/header_bg_03.jpg") no-repeat scroll center center transparent;
height: 19px;
position:relative;}
#inner-header .right-inner-header { background: url("../images/header-right-cg_05.jpg") repeat-x scroll right center transparent;
background: url("../images/header-right-cg_05.jpg") repeat-x scroll right center transparent;
height: 28px;
position: absolute;
right: 0;
top: -4px;
width: 34%;}
#inner-header .left-inner-header { left: 0;
position: absolute;
top: -4px;
z-index: -1;
?>
אמיר תייר | TIKKE בונים אתר דרכך
אני עדיין בודק את זה על
אני עדיין בודק את זה על רזולוציות שונות.
החשש שלי הוא בגלל ההגדרה absolute תהיה בריחה לצדדים של הרקע. בינתיים נראה מעולה!
אמיר תייר | TIKKE בונים אתר דרכך
לא הבנתי מה צריך לעשות , תוכל
לא הבנתי מה צריך לעשות , תוכל להסביר את זה בצורה אחרת ?
yakoub abaya
גם אני לא הבנתי
גם אני לא הבנתי
סליחה, מה שבעצם היה צריך
סליחה,
מה שבעצם היה צריך לעשות פה הוא רקע שונה ל-header בכל אחד מהצדדים של האתר (לא באזור האתר עצמו).
מקווה שעכשיו הסברתי את זה טוב יותר.
אמיר תייר | TIKKE בונים אתר דרכך
בשיטה שעשיתה תצטרך לקבוע אורך
בשיטה שעשיתה תצטרך לקבוע אורך קבוע לאזורים שמאל וימין , אבל אם תרצה שהשוליים יהיו עם אורך דינמי בשביל למקם הדף במרכז החלון אז לא יסתדר , לכן צריך להגדיר אותם אזורים מחוץ ל page :
<html><head>
<style>
#page {
width:85%;
height:700px;
margin:0 auto;
border:2px solid black;
background-color:gray;
}
#page-wrapper {
width:100%;
}
#page-wrapper-left {
background-image:url('page-left-margin.png');
background-position:top right;
background-repeat:no-repeat;
}
#page-wrapper-right {
background-image:url('page-right-margin.png');
background-position:top left;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="page-wrapper-right">
<div id="page-wrapper-left">
<div id="page-wrapper">
<div id="page">
</div>
</div>
</div>
</div>
</body>
</html>
yakoub abaya