مشکل در قرار گرفت دایو در جای خود

[me64]

سلام
در لینک زیر دموی سایت را میتوانید ملاحظه بفرمایید
سه دایو "ائمه" و "بیانات" و "اخبار" هم ردیف با جدیدترین اخبار قرار گیرد ولی همانطور که میبینید به انتهای صفحه رفته

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

[صدرا حسابی]

سلام
قالب رو خودتون طراحی کردید؟
ساختارتون ایراد داره من خروج نمایش موقعیت هارو پیوست کردم،
شما موقعیت هایی که می خواین کنار هم تعریف شوند به این صورت تغریف کردید:(ساختارهای داخلیشون رو حذف کردم)

کد: (انتخاب همه)

<div id="level4">
<div id="last-news">
<div id="top-news">
<div id="top-news">
</div>
<div id="content">
<div id="level2">
<div id="emamha">
<div id="bayanat">
</div>
<div id="level3">
<div id="news">
</div>

بین این div ها div با آیدی content قرار داره، و خود دیو لول 4 که آخرین اخبار هم داخلش قرار داره جدیدترین اخبار داخلش هست، div هایی که می خواید کنار هم قرار بگیره داخل یک div مادر قرار بدید.

[me64]

بله خودم قالب رو دارم طراحی میکنم
اون کار رو انجام دادم درست نشد دوباره به حالت قبل برگردوندم

در عکس زیر حالت فعلی رو میبینید
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


در عکس زیر حالت که من انتظار دارم بشه رو گذاشتم یعنی اون دایوها بیان به بالا کنار جدیدترین اخبار

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.



کد مربوط به فایل template.css

کد: (انتخاب همه)

/*@charset "utf-8"; */
/* CSS Document */

/*
# ------------------------------------------------------------------------
# Joomla Free Templates
# ------------------------------------------------------------------------
# Copyright (C) 2012-2020 (..). All Rights Reserved.
# Website:  (..)
# ِDesign by : (..)
# ------------------------------------------------------------------------
*/
@font-face {
    
    font-family: 'pars';
    src: url('../font/IranNastaliq.eot');
    src: url('../font/IranNastaliq.eot?#iefix') format('embedded-opentype'),
         url('../font/IranNastaliq.woff') format('woff'),
         url('../font/IranNastaliq.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body{
    color:#006;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
    direction:rtl;
}

#main{
    width:75%;
    height:auto;
    margin:0 auto;
    background-repeat:repeat;
    border-radius:5px;    
}

#header {
    height:200px;
    width:100%;
    background-image: url(../images/baghiyatallah.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    border-radius:5px;
}

#search {
    float:left;
    height:25px;
    width:250px;
    padding-top:180px;
    color:#333;
}

/*::::: menu :::::*/

#menu {
    direction:rtl;
    font-family:"IranNastaliq";
    font-size:54px;
}

#hot-news{
    width:100%;
    height:20px;
    background-color:#E9E6E6;
}

#level1 {
    width:100%;
    height:450px;
    float:right;
    margin:0 auto 5px auto;
    display: block;
}

#slider {
    height:340px;
    width:60%;
    float:right;
    border-radius:5px;
    background-color:#999;
    margin-right:10px;
    margin-top:5px;
}

#notice{
    color:#FF9
    height:340px;
    width:37%;
    background-color:#ECF1F5;
    border-radius:5px;
    float:right;
    padding-top:0px;
    margin-top:5px;
    margin-right:5px;
    margin-left:5px;
    margin-bottom:5px;
    background-repeat: no-repeat;
    background-position: right top;
    
    
    background: -moz-linear-gradient(top, #FF9 0%, #3C0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9), color-stop(100%,#3C0));
    background: -webkit-linear-gradient(top, #FF9 0%,#3C0 100%);
    background: -o-linear-gradient(top, #FF9 0%,#3C0 100%);
    background: -ms-linear-gradient(top, #FF9 0%,#013953 100%);
    background: linear-gradient(top, #FF9 0%,#3C0 100%);
}


#notice h3 {
    color: #fff;
    background: -moz-linear-gradient(top, #E230B7 0%, ##E230B7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E230B7), color-stop(100%,#E230B7));
    background: -webkit-linear-gradient(top, #E230B7 0%,#E230B7 100%);
    background: -o-linear-gradient(top, #E230B7 0%,#E230B7 100%);
    background: -ms-linear-gradient(top, #E230B7 0%,#E230B7 100%);
    background: linear-gradient(top, #E230B7 0%,#E230B7 100%);
    height: 20px;
    /* line-height: 44px; */
    padding-right: 24px;
    border-bottom-style:double;
    border-bottom-color:#000;
    font-size:12px;
    margin-top: 0;
}

#other-website {
    height: auto;
    width: auto;
    border-radius: 5px;
    background-color:#ECF1F5;
    float: left;
    margin-top:30px;
}

#other-website ul li {
    list-style: none outside none;
}

#last-news {
    height: auto;
    width: 200px;
    border-radius: 5px;
    background-color:#ECF1F5;
    font-size:12px;
    direction:rtl;
    line-height:20px;
    float: right;
    margin-top:30px;
    margin-left: 10px;
    clear:both;
}

#last-news ul li {
    list-style: none outside none;
}

#last-news ul li:before {
    list-style: none outside none;
    content: "\0BB \020";
    font-size:16px;
    color:#E230B7;
}

#last-news h3 {
    color: #fff;
    background: -moz-linear-gradient(top, #E230B7 0%, ##E230B7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E230B7), color-stop(100%,#E230B7));
    background: -webkit-linear-gradient(top, #E230B7 0%,#E230B7 100%);
    background: -o-linear-gradient(top, #E230B7 0%,#E230B7 100%);
    background: -ms-linear-gradient(top, #E230B7 0%,#E230B7 100%);
    background: linear-gradient(top, #E230B7 0%,#E230B7 100%);
    height: 20px;
    /* line-height: 44px; */
    padding-right: 24px;
    border-bottom-style:double;
    border-bottom-color:#000;
    font-size:12px;
    margin-top: 0;
}

#top-news{
    height: auto;
    width: 200px;
    border-radius: 5px;
    background-color:#ECF1F5;
    font-size:12px;
    direction:rtl;
    line-height:20px;
    margin-top:10px;
    margin-left: 10px;
    float:right;
    left:10px;
    clear:both;
}

#top-news ul li{
    list-style: none outside none;
}

#top-news ul li:before {
    list-style: none outside none;
    content: "\0BB \020";
    font-size:16px;
    color:#E230B7;
}

#top-news h3 {
    color: #fff;
    background: -moz-linear-gradient(top, #E230B7 0%, ##E230B7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E230B7), color-stop(100%,#E230B7));
    background: -webkit-linear-gradient(top, #E230B7 0%,#E230B7 100%);
    background: -o-linear-gradient(top, #E230B7 0%,#E230B7 100%);
    background: -ms-linear-gradient(top, #E230B7 0%,#E230B7 100%);
    background: linear-gradient(top, #E230B7 0%,#E230B7 100%);
    height: 20px;
    /* line-height: 44px; */
    padding-right: 24px;
    border-bottom-style:double;
    border-bottom-color:#000;
    font-size:12px;
    margin-top: 0;
}

#prayer-times{
    height: auto;
    width: 200px;
    border-radius: 5px;
    background-color:#ECF1F5;
    direction:rtl;
    margin-top:10px;
    margin-left: 10px;
    float:left;
    left:10px;
    clear:both;
}

#content {
    width: auto;;
    height: auto;
    margin:0 auto;
    margin-top: 30px;
    border-radius: 5px;
    margin-right: 5px;
    margin-left:5px;
    overflow: hidden;
}


#level2 {
    width:100%;
    height:300px;
    margin:0 10 5px auto;
    display: block;
}

#emamha{
    height:200px;
    width:22%;
    float:right;
    border-radius:5px;
    background-color:#ECF1F5;
    margin-right:10px;
    margin-top:0px;
    direction:rtl;
    line-height:20px;
    
}

#emamha h3 {
    color: #fff;
    background: -moz-linear-gradient(top, #FF9 0%, #3C0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9), color-stop(100%,#3C0));
    background: -webkit-linear-gradient(top, #FF9 0%,#3C0 100%);
    background: -o-linear-gradient(top, #FF9 0%,#3C0 100%);
    background: -ms-linear-gradient(top, #FF9 0%,#013953 100%);
    background: linear-gradient(top, #FF9 0%,#3C0 100%);
    height: 20px;
    /* line-height: 44px; */
    padding-right: 24px;
    border-bottom-style:double;
    border-bottom-color:#000;
    font-size:16px;
    margin-top: 0;
}

#bayanat{
    height:200px;
    width:22%;
    float:right;
    border-radius:5px;
    background-color:#ECF1F5;
    margin-right:10px;
    margin-top:5px;


}

/* #bayanat .globalnews {
    height: 259px;
}
*/

#bayanat h3 {
    color: #fff;
    background: -moz-linear-gradient(top, #FF9 0%, #3C0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9), color-stop(100%,#3C0));
    background: -webkit-linear-gradient(top, #FF9 0%,#3C0 100%);
    background: -o-linear-gradient(top, #FF9 0%,#3C0 100%);
    background: -ms-linear-gradient(top, #FF9 0%,#013953 100%);
    background: linear-gradient(top, #FF9 0%,#3C0 100%);
    height: 20px;
    /* line-height: 44px; */
    padding-right: 24px;
    border-bottom-style:double;
    border-bottom-color:#000;
    font-size:16px;
    margin-top: 0;
}

#news{
    height:200px;
    width:22%;
    float:right;
    border-radius:5px;
    background-color:#ECF1F5;
    margin-right:10px;
    margin-top:5px;
    overflow:hidden;
    clear:both;
}

#news h3 {
    color: #fff;
    background: -moz-linear-gradient(top, #FF9 0%, #3C0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9), color-stop(100%,#3C0));
    background: -webkit-linear-gradient(top, #FF9 0%,#3C0 100%);
    background: -o-linear-gradient(top, #FF9 0%,#3C0 100%);
    background: -ms-linear-gradient(top, #FF9 0%,#013953 100%);
    background: linear-gradient(top, #FF9 0%,#3C0 100%);
    height: 20px;
    /* line-height: 44px; */
    padding-right: 24px;
    border-bottom-style:double;
    border-bottom-color:#000;
    font-size:16px;
    margin-top: 0;
}

#level3 {
    width:100%;
    height:300px;
    margin:0 10 5px auto;
    display: block;
}

#picture{
    height:300px;
    width:32%;
    float:right;
    border-radius:5px;
    background-color:#999;
    margin-right:10px;
    margin-top:15px;
}

#voice{
    height:300px;
    width:32%;
    float:right;
    border-radius:5px;
    background-color:#999;
    margin-right:10px;
    margin-top:15px;
}

#film{
    height:300px;
    width:32%;
    float:right;
    border-radius:5px;
    background-color:#999;
    margin-right:10px;
    margin-top:15px;
}

#mashahir{
    height:auto;
    width:980px;
    border-radius:5px;
    background-color:#CCC;    
    clear:both;
    margin-top:15px;
    margin-right:10px;
}

#footer {
    font-family:IranNastaliq;
    font-size:14px;
    height:auto;
    width:980px;
    border-radius:5px;
    background-color:#ECF1F5;    
    clear:both;
    text-align:center;
    margin-right:10px;
    margin-top:15px;
    overflow:hidden;
}

a {
    text-decoration: none;
}

a:visited {
    color:#0000EE;
}

کد مربوط به فایل index.php

کد: (انتخاب همه)

<?php
defined('_JEXEC') or die('Restricted access');
JHtml::_('behavior.framework', true);
?>
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>

<body>
    <div id="main">  
         
        <div id="header">
            <?php if($this->countModules('search')): ?>
            <div id="search">
                <jdoc:include type="modules" name="search" style="xhtml" />          
            </div><!--End search-->
            <?php endif; ?>
        </div><!--End heder-->
        
        <?php if($this->countmodules('menu')): ?>
        <div id="menu">
            <jdoc:include type="modules" name="menu" style="xhtml" />
        </div><!--End menu-->
        <?php endif; ?>
        
        <?php if($this->countmodules('hot-news')): ?>
        <div id="hot-news">
            <jdoc:include type="modules" name="hot-news" style="xhtml" />
        </div><!--hot-news-->
        <?php endif; ?>
        
        <?php if($this->countModules('slider + notice')): ?>          
        <div id="level1">        
            <?php if($this->countmodules('slider')): ?>
            <div id="slider">
                <jdoc:include type="modules" name="slider" style="xhtml" />
            </div><!--End slider-->
            <?php endif; ?>
            
            <?php if($this->countmodules('notice')): ?>
            <div id="notice">
                <jdoc:include type="modules" name="notice" style="xhtml" />
            </div><!--End notice-->
            <?php endif; ?>        
        </div><!--End level1-->
        <?php endif; ?>
      
         <?php if($this->countmodules('other-website')): ?>
                    <div id="other-website">
                        <jdoc:include type="modules" name="other-website" style="xhtml" />
                    </div><!--other-website-->
                <?php endif; ?>  
        
          
                              
        <?php if($this->countModules('last-news + top-news + prayer-times')): ?>
            <div id="level4">
                <?php if($this->countmodules('last-news')): ?>
                    <div id="last-news">
                        <jdoc:include type="modules" name="last-news" style="xhtml" />
                    </div><!--last-news-->
                 <?php endif; ?>
                    
                <?php if($this->countmodules('top-news')): ?>
                    <div id="top-news">
                        <jdoc:include type="modules" name="top-news" style="xhtml" />
                    </div><!--top-news-->
                <?php endif; ?>
                
                <?php if($this->countmodules('prayer-times')): ?>
                    <div id="top-news">
                        <jdoc:include type="modules" name="prayer-times" style="xhtml" />
                    </div><!--prayer-times-->
                <?php endif; ?>                
                
            </div><!--level4-->  
        <?php endif; ?>

                 
        
         <?php if($this->countModules('emamha + bayanat')): ?>          
        <div id="level2">
            <?php if($this->countmodules('emamha')): ?>
            <div id="emamha">
                <jdoc:include type="modules" name="emamha" style="xhtml" />
            </div><!--End emamha-->
            <?php endif; ?>
            
            <?php if($this->countmodules('bayanat')): ?>
            <div id="bayanat">
                <jdoc:include type="modules" name="bayanat" style="xhtml" />
            </div><!--End bayanat-->
            <?php endif; ?>                      
        </div><!--level2-->
        <?php endif; ?>
              
                    
        <div id="content">
            <jdoc:include type="message" />
               <jdoc:include type="component" />
            <jdoc:include type="modules" name="content" style="xhtml" />
        </div><!--End content-->            
        
    
              
        <?php if($this->countModules('news + picture + voice + film')): ?>          
            <div id="level3">
            
            <?php if($this->countmodules('news')): ?>
            <div id="news">
                <jdoc:include type="modules" name="news" style="xhtml" />
            </div><!--End news-->
            <?php endif; ?>
            
                <?php if($this->countmodules('picture')): ?>
                <div id="picture">
                    <jdoc:include type="modules" name="picture" style="xhtml" />
                </div><!--End picture-->
                <?php endif; ?>
                
                <?php if($this->countmodules('voice')): ?>
                <div id="voice">
                    <jdoc:include type="modules" name="voice" style="xhtml" />
                </div><!--End voice-->
                <?php endif; ?>
                
                <?php if($this->countmodules('film')): ?>
                <div id="film">
                    <jdoc:include type="modules" name="film" style="xhtml" />
                </div><!--End film-->
                <?php endif; ?>
            </div><!--level3-->
        <?php endif; ?>
    
        
        <?php if($this->countmodules('mashahir')): ?>
        <div id="mashahir">
            <jdoc:include type="modules" name="mashahir" style="xhtml" />
        </div><!--End mashahir-->
        <?php endif; ?>
        
        <?php if($this->countmodules('footer')): ?>
        <div id="footer">
            <jdoc:include type="modules" name="footer" style="xhtml" />
        </div><!--End footer-->
        <?php endif; ?>

    </div><!--End main-->
</body>
</html>

---

در عکس زیر هم میتوانید ببینید
مشکل من اون چهار تا دایو تو پر آبی رنگ هستن که به ترتیبی که تئ عکس هست میخوام قرار بگیرند

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

[Reza Ganji]

شما طبق راهنمایی که جناب حسابی گفتند باید عمل کنید و مورد دیگری که باید در نظر بگیرید عرض ماژول ها است که اگر در عرض کلی قالب جانگیره میره پایین و همچنین برای نمایش این سه دایو در یک خط باید از displaye:inline استفاده کنید.
اصول کلی رو من و شما نمیتونیم تغییر بدیم و برای همین بهتره توصیه هایی که طراحان قالب میکنند رو اجرا کنید و از روش توصیه شده جناب حسابی استفاده کنید و به نتیجه برسونید مگر اینکه در کدنویسی تبحر داشته باشید.

[me64]

سلام
اگه درست نظر شما را متوجه شده باشم منم دقیقا همان فرمایش شما را انجام دادم. به تصویر زیر توجه فرمایید



در وسط دو کادر قرمز میبینید. کادر قرمز رنگ بالایی یک دایو کلی به اسم level2 است. در داخل این level2 دو دایو دیگه به اسم "bayanat" و "emamha" قرار دارد
همچنین که در عکس میبینید در سمت راست کادر یک دایو کلی سبز رنگ با نام "level4" قرار دارد که شامل سه دایو زرد رنگ با نامهای "last-news" و "top-news" و "prayer-times" است
حالتی که مد نظر است تا اینها در کنار هم قرار بگیرند هم در عکس واضح است


کدهای مربوط به template.css

کد: (انتخاب همه)

/*@charset "utf-8"; */
/* CSS Document */

/*
# ------------------------------------------------------------------------
# Joomla Free Templates
# ------------------------------------------------------------------------
# Copyright (C) 2012-2020 (..). All Rights Reserved.
# Website:  (..)
# ِDesign by : (..)
# ------------------------------------------------------------------------
*/
@font-face {
    
    font-family: 'pars';
    src: url('../font/IranNastaliq.eot');
    src: url('../font/IranNastaliq.eot?#iefix') format('embedded-opentype'),
         url('../font/IranNastaliq.woff') format('woff'),
         url('../font/IranNastaliq.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body{
    color:#006;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
    direction:rtl;
}

#main{
    width:75%;
    height:auto;
    margin:0 auto;
    background-repeat:repeat;
    border-radius:5px;    
}

#header {
    height:200px;
    width:100%;
    background-image: url(../images/baghiyatallah.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    border-radius:5px;
}

#search {
    float:left;
    height:25px;
    width:250px;
    padding-top:180px;
    color:#333;
}

/*::::: menu :::::*/

#menu {
    direction:rtl;
    font-family:"IranNastaliq";
    font-size:54px;
}

#hot-news{
    width:100%;
    height:20px;
    background-color:#E9E6E6;
}

#level1 {
    width:100%;
    height:450px;
    float:right;
    margin:0 auto 5px auto;
    display: block;
}

#slider {
    height:340px;
    width:60%;
    float:right;
    border-radius:5px;
    background-color:#999;
    margin-right:10px;
    margin-top:5px;
}

#notice{
    color:#FF9
    height:340px;
    width:37%;
    background-color:#ECF1F5;
    border-radius:5px;
    float:right;
    padding-top:0px;
    margin-top:5px;
    margin-right:5px;
    margin-left:5px;
    margin-bottom:5px;
    background-repeat: no-repeat;
    background-position: right top;
    
    
    background: -moz-linear-gradient(top, #FF9 0%, #3C0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9), color-stop(100%,#3C0));
    background: -webkit-linear-gradient(top, #FF9 0%,#3C0 100%);
    background: -o-linear-gradient(top, #FF9 0%,#3C0 100%);
    background: -ms-linear-gradient(top, #FF9 0%,#013953 100%);
    background: linear-gradient(top, #FF9 0%,#3C0 100%);
}


#notice h3 {
    color: #fff;
    background: -moz-linear-gradient(top, #E230B7 0%, ##E230B7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E230B7), color-stop(100%,#E230B7));
    background: -webkit-linear-gradient(top, #E230B7 0%,#E230B7 100%);
    background: -o-linear-gradient(top, #E230B7 0%,#E230B7 100%);
    background: -ms-linear-gradient(top, #E230B7 0%,#E230B7 100%);
    background: linear-gradient(top, #E230B7 0%,#E230B7 100%);
    height: 20px;
    /* line-height: 44px; */
    padding-right: 24px;
    border-bottom-style:double;
    border-bottom-color:#000;
    font-size:12px;
    margin-top: 0;
}

#other-website {
    height: auto;
    width: auto;
    border-radius: 5px;
    background-color:#ECF1F5;
    float: left;
    margin-top:30px;
}

#other-website ul li {
    list-style: none outside none;
}

#level4 {
    float:right;
}

#last-news {
    height: auto;
    width: 200px;
    border-radius: 5px;
    background-color:#ECF1F5;
    font-size:12px;
    direction:rtl;
    line-height:20px;
    margin-left: 10px;
}

#last-news ul li {
    list-style: none outside none;
}

#last-news ul li:before {
    list-style: none outside none;
    content: "\0BB \020";
    font-size:16px;
    color:#E230B7;
}

#last-news h3 {
    color: #fff;
    background: -moz-linear-gradient(top, #E230B7 0%, ##E230B7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E230B7), color-stop(100%,#E230B7));
    background: -webkit-linear-gradient(top, #E230B7 0%,#E230B7 100%);
    background: -o-linear-gradient(top, #E230B7 0%,#E230B7 100%);
    background: -ms-linear-gradient(top, #E230B7 0%,#E230B7 100%);
    background: linear-gradient(top, #E230B7 0%,#E230B7 100%);
    height: 20px;
    /* line-height: 44px; */
    padding-right: 24px;
    border-bottom-style:double;
    border-bottom-color:#000;
    font-size:12px;
    margin-top: 0;
}

#top-news{
    height: auto;
    width: 200px;
    border-radius: 5px;
    background-color:#ECF1F5;
    font-size:12px;
    direction:rtl;
    line-height:20px;
    margin-top:10px;
    margin-left: 10px;
    left:10px;
    clear:both;
}

#top-news ul li{
    list-style: none outside none;
}

#top-news ul li:before {
    list-style: none outside none;
    content: "\0BB \020";
    font-size:16px;
    color:#E230B7;
}

#top-news h3 {
    color: #fff;
    background: -moz-linear-gradient(top, #E230B7 0%, ##E230B7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E230B7), color-stop(100%,#E230B7));
    background: -webkit-linear-gradient(top, #E230B7 0%,#E230B7 100%);
    background: -o-linear-gradient(top, #E230B7 0%,#E230B7 100%);
    background: -ms-linear-gradient(top, #E230B7 0%,#E230B7 100%);
    background: linear-gradient(top, #E230B7 0%,#E230B7 100%);
    height: 20px;
    /* line-height: 44px; */
    padding-right: 24px;
    border-bottom-style:double;
    border-bottom-color:#000;
    font-size:12px;
    margin-top: 0;
}

#prayer-times{
    height: auto;
    width: 200px;
    border-radius: 5px;
    background-color:#ECF1F5;
    direction:rtl;
    margin-top:10px;
    margin-left: 10px;
    left:10px;
}

#content {
    width: auto;;
    height: auto;
    margin:0 auto;
    margin-top: 30px;
    border-radius: 5px;
    margin-right: 5px;
    margin-left:5px;
    overflow: hidden;
}


#level2 {
    width:100%;
    float:left;
    height:300px;
    margin:0 10 5px auto;
}

#emamha{
    height:200px;
    width:22%;
    float:right;
    border-radius:5px;
    background-color:#ECF1F5;
    margin-right:10px;
    margin-top:0px;
    direction:rtl;
    line-height:20px;
    
}

#emamha h3 {
    color: #fff;
    background: -moz-linear-gradient(top, #FF9 0%, #3C0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9), color-stop(100%,#3C0));
    background: -webkit-linear-gradient(top, #FF9 0%,#3C0 100%);
    background: -o-linear-gradient(top, #FF9 0%,#3C0 100%);
    background: -ms-linear-gradient(top, #FF9 0%,#013953 100%);
    background: linear-gradient(top, #FF9 0%,#3C0 100%);
    height: 20px;
    /* line-height: 44px; */
    padding-right: 24px;
    border-bottom-style:double;
    border-bottom-color:#000;
    font-size:16px;
    margin-top: 0;
}

#bayanat{
    height:200px;
    width:22%;
    float:right;
    border-radius:5px;
    background-color:#ECF1F5;
    margin-right:10px;
    margin-top:5px;


}

/* #bayanat .globalnews {
    height: 259px;
}
*/

#bayanat h3 {
    color: #fff;
    background: -moz-linear-gradient(top, #FF9 0%, #3C0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9), color-stop(100%,#3C0));
    background: -webkit-linear-gradient(top, #FF9 0%,#3C0 100%);
    background: -o-linear-gradient(top, #FF9 0%,#3C0 100%);
    background: -ms-linear-gradient(top, #FF9 0%,#013953 100%);
    background: linear-gradient(top, #FF9 0%,#3C0 100%);
    height: 20px;
    /* line-height: 44px; */
    padding-right: 24px;
    border-bottom-style:double;
    border-bottom-color:#000;
    font-size:16px;
    margin-top: 0;
}

#news{
    height:200px;
    width:22%;
    float:right;
    border-radius:5px;
    background-color:#ECF1F5;
    margin-right:10px;
    margin-top:5px;
    overflow:hidden;
    clear:both;
}

#news h3 {
    color: #fff;
    background: -moz-linear-gradient(top, #FF9 0%, #3C0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9), color-stop(100%,#3C0));
    background: -webkit-linear-gradient(top, #FF9 0%,#3C0 100%);
    background: -o-linear-gradient(top, #FF9 0%,#3C0 100%);
    background: -ms-linear-gradient(top, #FF9 0%,#013953 100%);
    background: linear-gradient(top, #FF9 0%,#3C0 100%);
    height: 20px;
    /* line-height: 44px; */
    padding-right: 24px;
    border-bottom-style:double;
    border-bottom-color:#000;
    font-size:16px;
    margin-top: 0;
}

#level3 {
    width:100%;
    height:300px;
    margin:0 10 5px auto;
    display: block;
}

#picture{
    height:300px;
    width:32%;
    float:right;
    border-radius:5px;
    background-color:#999;
    margin-right:10px;
    margin-top:15px;
}

#voice{
    height:300px;
    width:32%;
    float:right;
    border-radius:5px;
    background-color:#999;
    margin-right:10px;
    margin-top:15px;
}

#film{
    height:300px;
    width:32%;
    float:right;
    border-radius:5px;
    background-color:#999;
    margin-right:10px;
    margin-top:15px;
}

#mashahir{
    height:auto;
    width:980px;
    border-radius:5px;
    background-color:#CCC;    
    clear:both;
    margin-top:15px;
    margin-right:10px;
}

#footer {
    font-family:IranNastaliq;
    font-size:14px;
    height:auto;
    width:980px;
    border-radius:5px;
    background-color:#ECF1F5;    
    clear:both;
    text-align:center;
    margin-right:10px;
    margin-top:15px;
    overflow:hidden;
}

a {
    text-decoration: none;
}

a:visited {
    color:#0000EE;
}

کد مربوط به فایل index.php

کد: (انتخاب همه)

<?php
defined('_JEXEC') or die('Restricted access');
JHtml::_('behavior.framework', true);
?>
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>

<body>
    <div id="main">  
         
        <div id="header">
            <?php if($this->countModules('search')): ?>
            <div id="search">
                <jdoc:include type="modules" name="search" style="xhtml" />          
            </div><!--End search-->
            <?php endif; ?>
        </div><!--End heder-->
        
        <?php if($this->countmodules('menu')): ?>
        <div id="menu">
            <jdoc:include type="modules" name="menu" style="xhtml" />
        </div><!--End menu-->
        <?php endif; ?>
        
        <?php if($this->countmodules('hot-news')): ?>
        <div id="hot-news">
            <jdoc:include type="modules" name="hot-news" style="xhtml" />
        </div><!--hot-news-->
        <?php endif; ?>
        
        <?php if($this->countModules('slider + notice')): ?>          
        <div id="level1">        
            <?php if($this->countmodules('slider')): ?>
            <div id="slider">
                <jdoc:include type="modules" name="slider" style="xhtml" />
            </div><!--End slider-->
            <?php endif; ?>
            
            <?php if($this->countmodules('notice')): ?>
            <div id="notice">
                <jdoc:include type="modules" name="notice" style="xhtml" />
            </div><!--End notice-->
            <?php endif; ?>        
        </div><!--End level1-->
        <?php endif; ?>
      
         <?php if($this->countmodules('other-website')): ?>
                    <div id="other-website">
                        <jdoc:include type="modules" name="other-website" style="xhtml" />
                    </div><!--other-website-->
                <?php endif; ?>  
        
        
         <?php if($this->countModules('emamha + bayanat')): ?>          
        <div id="level2">
        
            <?php if($this->countmodules('emamha')): ?>
            <div id="emamha">
                <jdoc:include type="modules" name="emamha" style="xhtml" />
            </div><!--End emamha-->
            <?php endif; ?>
            
            <?php if($this->countmodules('bayanat')): ?>
            <div id="bayanat">
                <jdoc:include type="modules" name="bayanat" style="xhtml" />
            </div><!--End bayanat-->
            <?php endif; ?>                      
        </div><!--level2-->
        <?php endif; ?>
              
          
                              
        <?php if($this->countModules('last-news + top-news + prayer-times')): ?>
            <div id="level4">
               <?php if($this->countmodules('last-news')): ?>
                    <div id="last-news">
                        <jdoc:include type="modules" name="last-news" style="xhtml" />
                    </div><!--last-news-->
                <?php endif; ?>
                    
                <?php if($this->countmodules('top-news')): ?>
                    <div id="top-news">
                        <jdoc:include type="modules" name="top-news" style="xhtml" />
                    </div><!--top-news-->
                <?php endif; ?>
                
                <?php if($this->countmodules('prayer-times')): ?>
                    <div id="top-news">
                        <jdoc:include type="modules" name="prayer-times" style="xhtml" />
                    </div><!--prayer-times-->
                <?php endif; ?>                
                
            </div><!--level4-->  
        <?php endif; ?>

                 
        
                    
        <div id="content">
            <jdoc:include type="message" />
               <jdoc:include type="component" />
            <jdoc:include type="modules" name="content" style="xhtml" />
        </div><!--End content-->            
        
    
              
        <?php if($this->countModules('news + picture + voice + film')): ?>          
            <div id="level3">
            
            <?php if($this->countmodules('news')): ?>
            <div id="news">
                <jdoc:include type="modules" name="news" style="xhtml" />
            </div><!--End news-->
            <?php endif; ?>
            
                <?php if($this->countmodules('picture')): ?>
                <div id="picture">
                    <jdoc:include type="modules" name="picture" style="xhtml" />
                </div><!--End picture-->
                <?php endif; ?>
                
                <?php if($this->countmodules('voice')): ?>
                <div id="voice">
                    <jdoc:include type="modules" name="voice" style="xhtml" />
                </div><!--End voice-->
                <?php endif; ?>
                
                <?php if($this->countmodules('film')): ?>
                <div id="film">
                    <jdoc:include type="modules" name="film" style="xhtml" />
                </div><!--End film-->
                <?php endif; ?>
            </div><!--level3-->
        <?php endif; ?>
    
        
        <?php if($this->countmodules('mashahir')): ?>
        <div id="mashahir">
            <jdoc:include type="modules" name="mashahir" style="xhtml" />
        </div><!--End mashahir-->
        <?php endif; ?>
        
        <?php if($this->countmodules('footer')): ?>
        <div id="footer">
            <jdoc:include type="modules" name="footer" style="xhtml" />
        </div><!--End footer-->
        <?php endif; ?>

    </div><!--End main-->
</body>
</html>

دموی آنلاین
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

[صدرا حسابی]

دوست عزیز با قرار دادن این کدها شکلی که قرار دادین پیاده سازی می شود:

کد: (انتخاب همه)

#level2 {
    float: left;
    width: 700px !important;
}
#level4 {
    float: right !important;
    width: 199px !important;
}
#level2 > div {
    float: right !important;
    width: 47% !important;
    display: inline-block !important;
}
#level4 > div {
    width: 100% !important;
    padding-left: 18px;
}
#level3 {
    float: right!important;
    width: 322px !important;
    margin-right: 38px;
}
#level3 > div {
    width: 100% !important;
}

ولی خروجی html شما اصلا برای این قالب بهینه نیست و ساختار باید تصحیح بشه،
مثلا لول 2 باید بیاد زیر لول 4 تا از float:right استفاده کنیم، و لول 3 هم باید بیاد بالای div با آی دی content، شکل بهتر در واقع اینه که لول 2 و لول 3 رو در یک div مادر در زیر لول 4 قرار بدید.

یعنی مشابه این ساختار:

کد: (انتخاب همه)

<div id="level1">
.
.
.
</div>

<div id="level4">
.
.
.
</div>

<div id="level23">
<div id="level2"></div>
<div id="level3"></div>
</div>
<div id="content">
</div>

البته من قسمت سمت چپ که در عکس در قالبتون ندیدم، ولی در ساختاری که تعریف کردیم باید بعد از div مادر (level23) قرار بگیرد.

[me64]

دوست عزیزم بسیار لطف کردید برای وقتی که گذاشتید
این سورس آخری رو تست کردم جواب داد ولی فقط در کروم جواب میده
این طوری که من از نوشته های شما متوجه شدم نظم در کدهای من رعایت نشده
اگر لطف کنید و نحوه صحیح رو در کدی که گذاشتم جا بدید(template.css و همینظور index.php) تا نمونه کاملی را داشته باشم نمونه خوبی برای یادگیری اینجانب خواهد بود

[صدرا حسابی]

شما اگر با توجه به توضیحات بالا تغییرات را انجام بدید مشکل برطرف خواهد شد، من یک نمونه تغییر یافته index.php شما رو قرار دادم، css بعد از جایگزین شدن این کدها و تغییرات جزئی که انجام شده قابل پیاده سازی خواهد بود. فقط کدهای css اضافی برای آیدی لول2 و 3و 4 باید حذف بشوند و دوباره بر اساس ساختاد جدید نوشته بشوند.

کد php: (انتخاب همه)

<?php
defined('_JEXEC') or die('Restricted access');
JHtml::_('behavior.framework', true);
?>
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>

<body>
    <div id="main">  
         
        <div id="header">
            <?php if($this->countModules('search')): ?>
            <div id="search">
                <jdoc:include type="modules" name="search" style="xhtml" />          
            </div><!--End search-->
            <?php endif; ?>
        </div><!--End heder-->
        
        <?php if($this->countmodules('menu')): ?>
        <div id="menu">
            <jdoc:include type="modules" name="menu" style="xhtml" />
        </div><!--End menu-->
        <?php endif; ?>
        
        <?php if($this->countmodules('hot-news')): ?>
        <div id="hot-news">
            <jdoc:include type="modules" name="hot-news" style="xhtml" />
        </div><!--hot-news-->
        <?php endif; ?>
        
        <?php if($this->countModules('slider + notice')): ?>          
        <div id="level1">        
            <?php if($this->countmodules('slider')): ?>
            <div id="slider">
                <jdoc:include type="modules" name="slider" style="xhtml" />
            </div><!--End slider-->
            <?php endif; ?>
            
            <?php if($this->countmodules('notice')): ?>
            <div id="notice">
                <jdoc:include type="modules" name="notice" style="xhtml" />
            </div><!--End notice-->
            <?php endif; ?>        
        </div><!--End level1-->
        <?php endif; ?>
      
         <?php if($this->countmodules('other-website')): ?>
                    <div id="other-website">
                        <jdoc:include type="modules" name="other-website" style="xhtml" />
                    </div><!--other-website-->
                <?php endif; ?>  
        
        
       
          
                              
        <?php if($this->countModules('last-news + top-news + prayer-times')): ?>
            <div id="level4">
               <?php if($this->countmodules('last-news')): ?>
                    <div id="last-news">
                        <jdoc:include type="modules" name="last-news" style="xhtml" />
                    </div><!--last-news-->
                <?php endif; ?>
                    
                <?php if($this->countmodules('top-news')): ?>
                    <div id="top-news">
                        <jdoc:include type="modules" name="top-news" style="xhtml" />
                    </div><!--top-news-->
                <?php endif; ?>
                
                <?php if($this->countmodules('prayer-times')): ?>
                    <div id="top-news">
                        <jdoc:include type="modules" name="prayer-times" style="xhtml" />
                    </div><!--prayer-times-->
                <?php endif; ?>                
                
            </div><!--level4-->  
        <?php endif; ?>
        
        
        
        

        
        
        

              <div id="level23">  
              
                      
          <?php if($this->countModules('emamha + bayanat')): ?>          
        <div id="level2">
        
            <?php if($this->countmodules('emamha')): ?>
            <div id="emamha">
                <jdoc:include type="modules" name="emamha" style="xhtml" />
            </div><!--End emamha-->
            <?php endif; ?>
            
            <?php if($this->countmodules('bayanat')): ?>
            <div id="bayanat">
                <jdoc:include type="modules" name="bayanat" style="xhtml" />
            </div><!--End bayanat-->
            <?php endif; ?>                      
        </div><!--level2-->
        <?php endif; ?>
              
              
              
          <?php if($this->countModules('news + picture + voice + film')): ?>          
            <div id="level3">
            
            <?php if($this->countmodules('news')): ?>
            <div id="news">
                <jdoc:include type="modules" name="news" style="xhtml" />
            </div><!--End news-->
            <?php endif; ?>
            
                <?php if($this->countmodules('picture')): ?>
                <div id="picture">
                    <jdoc:include type="modules" name="picture" style="xhtml" />
                </div><!--End picture-->
                <?php endif; ?>
                
                <?php if($this->countmodules('voice')): ?>
                <div id="voice">
                    <jdoc:include type="modules" name="voice" style="xhtml" />
                </div><!--End voice-->
                <?php endif; ?>
                
                <?php if($this->countmodules('film')): ?>
                <div id="film">
                    <jdoc:include type="modules" name="film" style="xhtml" />
                </div><!--End film-->
                <?php endif; ?>
            </div><!--level3-->
        <?php endif; ?>
        
             </div>       
                    
                    
                    
                    
                    
                    
                    
        <div id="content">
            <jdoc:include type="message" />
               <jdoc:include type="component" />
            <jdoc:include type="modules" name="content" style="xhtml" />
        </div><!--End content-->            
        
        
    
    
        
        <?php if($this->countmodules('mashahir')): ?>
        <div id="mashahir">
            <jdoc:include type="modules" name="mashahir" style="xhtml" />
        </div><!--End mashahir-->
        <?php endif; ?>
        
        <?php if($this->countmodules('footer')): ?>
        <div id="footer">
            <jdoc:include type="modules" name="footer" style="xhtml" />
        </div><!--End footer-->
        <?php endif; ?>

    </div><!--End main-->
</body>
</html> 


[me64]

ممنونم دوست عزیز
ولی همچنان مشکل پا برجاست چون در کروم فقط درست نشان میدهد ولی در فایرفاکس و اکسپلورر مثل قبل نشان میدهد
یه مسئله دیگه فاصله پایین slider تا دایو های بعدی است من هر چی کد را نگاه میکنم هیچ جایی نگفتم که اینقدر فاصله داشته باشه. چطور این فاصله رو برسونم به 10px ?

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.