w13rasol
جمعه 27 شهریور 1394, 22:12 عصر
من چنین سایتی رو درست کردم با کروم و فایر فاس هماهنگ کردمذولی با ie هماهنگ نیست راحلی براش دارید ؟
ممنون میشم کمکمکنید :
.................................................. ........................
HTML:
------------------------------------------------------------------------
<body>
<div id="beg_wraper">
<header id="top_header"><h1>به سایت من خوش آمدید </h1> </header>
<nav id="top_menu">
<ul>
<li>صفحه اصلی </li>
<li>اخبار</li>
<li>تماس با ما</li>
<li>درباره ما</li>
</ul>
</nav>
<div id="new_div">
<section id="main_section">
<article>
<header>
<hgroup>
<h2>عنوان اول </h2>
<h4>عنوان دوم </h4>
</hgroup>
</header>
<p>این بهترین سایت است</p>
<footer>نویسنده : رسول فلاح</footer>
</article>
<article>
<header>
<hgroup>
<h2>عنوان اول </h2>
<h4>عنوان دوم </h4>
</hgroup>
</header>
<p>این بهترین سایت است</p>
<footer>نویسنده : رسول فلاح</footer>
</article>
</section>
<aside id="side_news">
<h4> اخبار جدید </h4>
</aside>
</div>
<footer id="the_footer">
<h3>قوانین کپی رایت را رعایت کنید </h3><br />
<h4>هر گونه کپی بر داری از مطالب سایت پیگیری قانونی دارد </h4>
</footer>
</div>
</body>
.................................................. .................................................
CSS:
-----------------------------------------------------------------------------------------------------
* {
margin:0;
padding:0;
}
h1 {
font:bold 20px tahoma;
}
h2 {
font:bold 14px tahoma;
}
header, section, footer, aside, nav, hgroup, article {
display:block;
}
body {
width:100%;
display:-webkit-box;
display:-moz-box;
display:-moz-box;
-moz-box-pack:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
direction:rtl;
}
#beg_wraper {
max-width:1000px;
margin:5px 0;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-ms-grid-row:auto;
-webkit-box-flex:1;
-moz-box-flex:1;
}
#top_header {
background:#ff6a00;
border:2px solid #000;
padding:20px;
}
#top_menu {
color:#fff;
background:#0094ff;
border:#000;
padding:10px;
margin: 3px 0;
}
#top_menu li{
display:inline;
list-style:none;
font:bold 14px tahoma;
padding:10px;
}
#new_div {
display: -webkit-box;
display:-moz-box;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
}
#main_section {
border: 1px solid #0094ff;
-webkit-box-flex: 1;
-moz-box-flex: 1;
margin: 5px 10px 0 0;
padding: 20px;
}
#side_news {
border:1px solid #000;
width:220px;
margin:5px 10px 0px 10px;
padding:20px;
background:#0094ff;
}
#the_footer {
text-align:center;
border-top:2px solid #000;
padding:10px;
margin:5px;
line-height:10px;
}
article {
border:1px solid #0094ff;
-webkit-box-flex:1;
-moz-box-flex:1;
margin:5px 10px 0 0;
padding:20px;
background:#4ba7f6;
}
article footer {
text-align:left;
font:bold 14px tahoma;
}
-----------------------------------------------------------------------------------------------------
http://8pic.ir/images/lc1kioby31rsjh3mkcoj.jpg
135309