Плавающие коробки Div ограничены магией - PullRequest
Новая
       1

Плавающие коробки Div ограничены магией

2 голосов
/ 05 октября 2010

Вот ссылка на страницу в вопросе .... http://team2648.com/OTIS2/DivTest.html

Итак, если вы посмотрите на эту страницу, если ваш браузер достаточно мал, вы увидите, что под полем с красным фоном,там немного места, почему поле ниже не всплывает?

This is what I want.

Код HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>OTIS v1.5</title>

        <!-- Javascript - Fix the flash of unstyled content -->
        <script type="text/javascript"></script>

        <!-- Stylesheets -->
        <link href="css/reset.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/default.css" rel="stylesheet" type="text/css" media="screen" />
        <link href="css/styling.css" rel="stylesheet" type="text/css" media="screen" />

        <!--Validation-->

        <script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
        <script src="js/jquery.validationEngine.js" type="text/javascript"></script>
        <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />


        <script src="js/common.js" type="text/javascript"></script>


        <!-- Meta Information -->
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <meta name="author" content="Techplex Engineer" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />

        <script type="text/javascript">

            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-10899272-10']);
            _gaq.push(['_trackPageview']);

            (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();

        </script>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <div id="header-in">
                    <h2>Online Team Information System</h2>
                    <h6>A Web Database Application for Team Profile Management</h6>
                </div> <!-- end #header-in -->
            </div> <!-- end #header -->
            <div id="content-wrap" class="clear lcol"> <!-- Navigation Column-->
                <div class="column">
                    <div class="column-in">
                        <ul>
                            <li> My </li>
                            <ul>
                                <li><a href="./"> Dashboard </a></li>
                                <li><a href="?page=manage.profile"> Profile</a></li>
                                <li><a href="?page=manage.info"> Information</a></li>
                                <li><a href="?page=manage.econtact"> Emergency Contact</a></li>
                            </ul>
                            <li> Management </li>
                            <ul>
                                <li><a href="?page=manage.users"> Users </a></li>
                                <li><a href="?page=email"> Email </a></li><li><a href="?page=blog"> Blog </a></li>
                            </ul>
                            <li><a href="?page=bugs.php&referrer=/OTIS2/"> Report a Bug </a></li>
                            <li><a href="logout.php"> Logout </a></li>


                        </ul>
                        <br />
                        Logged in as:
                        <br />
                        <a href="?page=manage.profile">Blake </a>
                    </div>
                </div>
                <div class="content">
                    <div class="content-in">

                        <h5>Welcome to your personal dashboard Blake </h5><hr id="hr1"/>
                        <div id="bio" style="display: none;">
                            Your current Bio: <br/><textarea rows="10" cols="50"> </textarea>
                        </div>

                        <div id="profilestats" class="widget">
                            <strong>IMPORTANT</strong><br/>
                            <ul style="padding-left: 10px;">
                                <li>Your Public Profile is pending moderation.</li>
                            </ul>
                        </div>

                        <div id="cal" class="widget">
                            <!--    <iframe src="https://www.google.com/calendar/hosted/team2648.com/embed?showTitle=0&amp;showNav=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;mode=AGENDA&amp;height=200&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=team2648.com_a1ur39fpp2cn076ak2q06o8hhc%40group.calendar.google.com&amp;color=%235229A3&amp;ctz=America%2FNew_York" style=" border-width:0 " width="400" height="200" frameborder="0" scrolling="no"></iframe>-->
                            <iframe src="https://www.google.com/calendar/hosted/team2648.com/embed?showNav=0&amp;showDate=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;mode=AGENDA&amp;height=200&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=team2648.com_a1ur39fpp2cn076ak2q06o8hhc%40group.calendar.google.com&amp;color=%235229A3&amp;ctz=America%2FNew_York" style=" border-width:0 " width="400" height="200" frameborder="0" scrolling="no"></iframe>
                        </div>
                        <div id="stats" class="widget"><!-- and finally output the information formated for the widget-->
                            <strong>You have:</strong><br/>
                            <ul style="padding-left: 10px;">
                                <li>        <strong>42</strong> of 30 fundraising hours<br/></li>
                                <li>fundraised $<strong>160</strong> of $300<br/></li>
                                <li>        <strong>3</strong> of 5 community service hours<br/></li>
                                <li>        <strong>0</strong> of 40 build hours <br/></li>
                            </ul>
                        </div>
                        <div id="logins" class="widget">
                            <form name="controlsForm">
                                <input id="cblogin" type="checkbox" name="loginbox"  onClick=""/> Disable Login<br />
                                <input id="cbreg" type="checkbox" name="regbox"  onClick=""/> Disable Registration<br />
                            </form>
                        </div>

                        <div class="clear"></div>
                    </div><!-- end .content-in -->
                </div> <!-- end .content -->
            </div> <!-- end #content-wrap -->
            <div id="footer">
                <div id="footer-in">
                    This system was designed, built and is maintained by Blake for Infinite Loop Robotics <br>OTIS(Online Team Information System) &copy; 2010 Techplex Labs        </div> <!-- end #footer-in -->
            </div> <!-- end #footer -->
        </div> <!-- end div#container -->
    </body>
</html>

Вы можете просмотреть cssздесь: http://team2648.com/OTIS2/css/styling.css

но важная часть такова: 

div.widget{
width: 200px;
float: left;

/*    text-align: center;*/
border: 1px solid black;
padding: 8px;
margin: 8px;

/*    margin-left:8px;
font-weight:400;*/
-moz-border-radius:11px;
-khtml-border-radius:11px;
-webkit-border-radius:11px;
border-radius:5px;
background:#fff;
border:2px solid #e5e5e5;
-moz-box-shadow:rgba(200,200,200,1) 0 4px 18px;
-webkit-box-shadow:rgba(200,200,200,1) 0 4px 18px;
-khtml-box-shadow:rgba(200,200,200,1) 0 4px 18px;
box-shadow:rgba(200,200,200,1) 0 4px 18px;
/*    padding:16px 16px 40px;*/
}
div#disclaimer
{
margin-top: 10px;
border: 1px dotted black;
font-size:10px;
background-color: #D7D7D7;
}
div.clear
{
clear: both;
}
div#profilestats
{
border:2px solid #FF9999;
}
div#cal
{
width: 400px;
padding-bottom: 0px;
}

Ответы [ 2 ]

1 голос
/ 06 октября 2010

Я не знаю, есть ли у вас это, как вам нравится, но с комментариями я вижу, когда вы уменьшаете полное окно, поле с календарем в нем (cal) перемещается ниже красного поля Важно (profilestats) ,

Если вы хотите, чтобы это было ближе (уменьшите разрыв между ними), то, что вызывает пространство, - это DIV.widget в styling.css, margin: 8px; кроме того, я не вижу ничего, что могло бы вызвать пробел в этом месте с этим изменением - я протестировал это в IE8, и удаление этой настройки элемента CSS действительно подтолкнуло их к непосредственному соединению без пробелов между ними.

Теперь, если вы имеете в виду, что "статистика" перемещается прямо под "профилями статистики", то это другой вопрос, который можно решить несколькими различными способами.

  1. поместите "profilestats" и "stats" в div вместе (с "cal" и "logins" в еще один div и поместите оба div-контейнера влево.
  2. Используйте поплавок: слева и поплавок: справа налево и направо элементы, но это введет пространство между, если ширина расширенный (ширина браузера), если не указан дополнительный css.

В этом случае я бы выбрал # 1, так как CSS легче контролировать.

ПРИМЕЧАНИЕ: будьте осторожны с полями в IE6 в плавающих левых элементах, иногда это может быть противоречивым.

1 голос
/ 05 октября 2010

Причина, по которой это происходит, заключается в том, что оба значения profilestats div и cal div равны float:left.Попробуйте float:right; на cal div, чтобы следующий div, который плавал влево (stats), мог занять доступное пространство ниже profilestats.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...