16-10-2010, 11:28
|
|
|
|
חבר מתאריך: 06.04.07
הודעות: 106
|
|
|
ארצה לשתף אתכם בפיתרון לבעייה שמצאתי
לאחר חיפוש ממושך באינטרנט, הגעתי לCSS layout שהתאים בדיוק לצרכים שלי.
הוא בנוי כך:
http://www.manisheriar.com/holygrail/fixed.htm
קוד:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Three Column Liquid Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css" charset="utf-8">/* See license.txt for terms of usage */
body {
background:none repeat scroll 0 0 #9343B9;
color:#666666;
font:0.8em/1.2em verdana,aria,sans-serif;
margin: 0;
padding:0;
text-align:center;
}
a {
border-bottom:1px dotted;
color:#FFFFFF;
text-decoration:none;
}
a:hover {
border-bottom:1px solid;
color:#9343B9;
}
#wrapper1 {
background:url("joomla/templates/Cowbell/images/index_06.jpg") repeat-y scroll right top #FFFFFF;
width:963px;
margin: 0 auto;
}
#wrapper2 {
background:url("joomla/templates/Cowbell/images/index_01.jpg") repeat-y scroll left top transparent;
width:963px;
}
#maincol {
margin:0;
padding:0;
text-align: right;
}
#leftcol {
float:left;
margin:0;
padding:0;
voice-family:inherit;
width:65px;
}
#rightcol {
float:right;
margin:0;
padding:0;
voice-family:inherit;
width:65px;
}
#centercol {
padding:0 65px;
}
#footer {
background:none repeat scroll 0 0 #7A2875;
color:#CCCCCC;
margin:0;
padding:1% 65px;
position:relative;
text-align:center;
top:0px;
}
p {
margin: 0;
padding:0;
}
</style></head><body>
<div id="wrapper1"><!-- sets background to white and creates full length leftcol-->
<div id="wrapper2"><!-- sets background to white and creates full length rightcol-->
<div id="maincol"><!-- begin main content area -->
<div id="leftcol"><!-- begin leftcol -->
</div><!-- end leftcol -->
<div id="rightcol"><!-- begin rightcol -->
</div><!-- end righttcol -->
<div id="centercol"><!-- begin centercol -->
<p>This is a three-column layout where the side columns are
fixed-width and the center column is liquid. The background, header,
main column, left column, right column, and footer are all capable of
being different colors (or backgrounds), and it does NOT matter which
column is longest.</p>
<hr>
<div id="footer"><!-- begin footer -->
<p>This is the footer</p>
</div><!-- end footer -->
</div><!-- end centercol -->
</div><!-- end main content area -->
</div><!-- end wrapper1 -->
</div><!-- end wrapper2 -->
</body></html>
הקוד נראה הרבה יותר מסובך בתחילה ולכן הורדתי את הדברים המיותרים, והתאמתי אותו לעיצוב שלי (ניתן לעשות את הDIV המרכזי גם כ100% דף, ואף לשים טקסטים בבאר השמאלי והימני)
חשוב לציין שהקוד הנ"ל עובד בכל הדפדפנים IE6 ומעלה, FF 3, Chrome ובשבילי זה מספיק.
ארצה להסב את תשומת ליבכם למספר נקודות שלמדתי מתוך הקוד הנ"ל:
השיטה שלהם לבנות את התמונות המתוחות היא לשים אותן ב2 דיבים עוטפים בשמות wrapper1 וwrapper2 אשר אחד מהם תמונת רקע בצד שמאל, ורקע בצבע כלשהו, ולשני תמונת רקע בצד ימין ורקע שקוף, על מנת שלא יעלה על הראשון.
נקודה חשובה נוספת שראיתי היא שהטור האמצעי היה בעל display:block ולא inline כמו שעשיתי בעיצוב שלי, ועל מנת שלא יזוז לצד ימין או שמאל ניתן לו margin בהתאם לטור הימני והשמאלי, במקרה שלי margin: 0 65px;
כל השאר היה לי ברור מאליו יחסית, הfloat: left לטור השמאלי והfloat:right לטור הימני, והגדרת רוחב בפיקסלים או באחוזים לכל טור.
http://musicmagazine.gone-wild.net/try2.html
תודה רבה, הבעייה נפתרה.
_____________________________________
בברכה, מתן.
נערך לאחרונה ע"י goldpower3 בתאריך 16-10-2010 בשעה 11:45.
|
ראשי
צ'אט
מצב כלאיים
