Получение нижнего колонтитула за пределами моей оболочки - PullRequest
1 голос
/ 04 января 2012

В данный момент мой нижний колонтитул ( найден здесь ) имеет ту же ширину, что и оболочка. Тем не менее, я хотел бы получить его так, чтобы он занимал всю ширину страницы. Проблема в том, что я не могу вытащить это из обертки. Я хотел бы показать вам мой файл index.php, но он, кажется, не отображается должным образом здесь.

Для краткого обзора я использую

<?php include("footer.html");?>

для вызова нижнего колонтитула на каждой из моих страниц, которые являются файлами PHP. Я делаю то же самое для заголовка.

Если у кого-то есть Google Chrome, с представлением «Разработчик» (думаете, это расширение по умолчанию, доступ к которому осуществляется с помощью F12?), Вы увидите, что вызов находится в оболочке. Если я перетаскиваю вызываемый раздел footer_wrapper и помещаю его на тот же уровень, что и обертка, перетаскивая его вниз над / body, он делает именно то, что мне нужно, и расширяет нижний колонтитул, чтобы покрыть страницу. РЕДАКТИРОВАТЬ: Там работает нормально, но это только в режиме разработчика в Chrome, поэтому ничего не сохраняется. Проблема в том, что я не знаю, как воспроизвести это в реальном файле PHP

Я знаю, что это было плохое объяснение, но я действительно не уверен, как это объяснить правильно!

Любая помощь будет отличной!

РЕДАКТИРОВАТЬ - Вот моя попытка опубликовать мой код index.php: Все отступы и т.д. делают его очень грязным, и за это я прошу прощения. Если вы хотите увидеть необработанный код для index.php, footer.html и header.html, вот ссылка для скачивания

<?php $thisPage="Home";?>
<html>
<head>
<title>Multiverse: The MMO Development Platform</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
</html>

<?php include("header.html");?>

<html>
<div id="content">

 <h2>Homepage</h2>
 <br/>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend imperdiet magna a tempor. Maecenas eu vulputate turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sit amet lorem sed dolor dignissim pulvinar. Sed mauris ipsum, interdum lobortis mattis sed, pellentesque id lacus. Sed sapien metus, dignissim in convallis eget, aliquet et nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus nunc risus, pulvinar in venenatis ultricies, mollis vel lectus.</p>
          <br/>
          <p>Suspendisse condimentum suscipit faucibus. Integer rutrum tincidunt neque sed sollicitudin. Donec pulvinar arcu id mauris luctus lacinia. Nam eu tempor  velit. Etiam molestie mattis dolor quis lobortis. Mauris mollis, risus at ultrices cursus, sem elit ultricies lectus, eu pretium urna magna a nisi. Maecenas nibh ante, fringilla quis sagittis non, vulputate eu urna. Cras ut turpis orci. Donec tempor bibendum neque. Curabitur ac augue id arcu consectetur adipiscing vestibulum non lorem. In ultrices aliquet augue, hendrerit scelerisque lorem interdum sit amet. Aliquam dictum ipsum varius nisl faucibus ultricies. Vivamus sollicitudin, ligula sed consequat suscipit, augue nulla placerat ante, eu tempus turpis ligula ut mauris.</p>
          <br/>
          <p>Praesent vehicula nisi in velit fringilla porttitor. Duis vulputate risus id sem fringilla auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer id placerat est. Mauris eu leo lacus. Maecenas nibh turpis, congue sed auctor mattis, vestibulum in dolor. Sed auctor commodo nunc. Donec varius posuere lorem, vel bibendum dui euismod vitae. Fusce nec accumsan leo. Maecenas et diam a eros adipiscing venenatis ac eget diam. Fusce semper massa sed eros fringilla sodales. Vestibulum a nibh velit, at adipiscing turpis. Maecenas quis nulla elit, a luctus nunc. Suspendisse nec risus vitae massa mattis adipiscing.</p>
          <br/>
          <p>Curabitur ultrices facilisis scelerisque. Vivamus varius ornare felis, et auctor lacus imperdiet ut. Vivamus vestibulum molestie tellus, eget pulvinar justo dignissim non. Fusce posuere orci vel ligula pretium tempor id sit amet ligula. Nam lectus sem, imperdiet a placerat et, pulvinar in diam. Suspendisse potenti. Nulla sit amet metus magna. Phasellus dapibus molestie mauris at tempus. Aliquam ac risus elit. Vivamus dapibus enim eu orci lobortis aliquam.</p>
          <br/>
          <p>Vivamus ullamcorper consectetur pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus eleifend nisi nec odio imperdiet molestie. Maecenas at nulla tortor, in condimentum lorem. Quisque aliquam tellus non velit varius fermentum. Vivamus sit amet nisi risus, sed sagittis risus. Duis dictum justo et diam vulputate egestas. Suspendisse vel lacus nibh, nec venenatis risus. Duis ac metus sapien, a sollicitudin mi. Vivamus elementum urna eget mauris laoreet hendrerit. Cras vestibulum rutrum nunc, et ultrices turpis congue in. Aliquam sed lorem ligula. Phasellus mollis erat in metus tincidunt pretium.</p>
          <br/>


  <h2>Image examples</h2>
  <p>&nbsp;</p>
  <div id="stock">
    <img src="images/stock.png" alt="Stock Images!" />&nbsp;&nbsp;&nbsp;<img src="images/stock.png" alt="Stock Images!" />
  </div>

<div id="featured_content">

        <div class="featured_block">
    <h3>Why Choose Multiverse?</h3>
    <div class="image" style="background-image:url(http://www.heroengine.com/wp-content/uploads/2011/10/Asset-Browser-Wireframes1.jpeg);"><a href="http://www.heroengine.com/heroengine/why-heroengine/"></a></div>
    <div class="text">
      <p>The Multiverse Platform, provides you with world building tools, renderer, integrated server architecture and an entire game’s worth of example code.</p>
    </div>
  </div>  
        <div class="featured_block">
    <h3>No Programming Required</h3>
    <div class="image" style="background-image:url(http://www.heroengine.com/wp-content/uploads/2011/10/Why-HeroCloud-IS-Right-For-You.jpg);"><a href="http://www.heroengine.com/herocloud/"></a></div>
    <div class="text">
      <p>You can actually make a functional MMO without programming knowledge. You only need to program when you want to make an advanced MMO.</p>
    </div>
  </div>  
        <div class="featured_block">
    <h3>Don't Spend A Cent</h3>
    <div class="image" style="background-image:url(http://www.heroengine.com/wp-content/uploads/2011/10/hfibhbcf.jpg);"><a href="http://www.heroengine.com/2011/10/failure-is-not-an-option-its-a-requirement-the-culture-of-testing-everything/"></a></div>
    <div class="text">
      <p>President and COO of HeroEngine, Neil Harris, discusses failure, it’s role in online game development and the culture of testing everything in his latest blog post.</p>
    </div>
  </div>  

</div>
</div>
<?php include("footer.html");?>
</html>

Ответы [ 3 ]

1 голос
/ 04 января 2012

Я думаю, index.php выглядит примерно так?

<div id="wrapper">
    <?php include("header.html");?>
    <div id="content">
    <!-- generate content -->
    </div>
    <?php include("footer.html");?>
</div>

Измените его, включив footer.html вне оболочки div:


Кроме того,похоже, что ваши включения (header.html, footer.html и т. д.) сами по себе являются полными документами HTML.То есть они включают теги <html> и <body>.Это очень плохо.

Последняя страница, которую видит браузер, должна иметь только один элемент html и один элемент body.Это включает в себя не должно включать что-либо, кроме фактических элементов HTML, которые вы хотите вставить в данный момент.

Например, footer.html должно выглядеть так:

<div id="footer_wrap">
    <!-- code for footer -->
</div>

Иногда проще использовать различные расширения файлов для включения [.include, .tmpl и т. Д.] В качестве быстрого напоминаниячто они не являются полными документами HTML.


Исправлено все для вас. Скачать здесь .По сути, я удалил лишние теги html и body из index.php и закрыл оболочку div в начале footer.html, а не в конце.Который эффективно "тащит" его за пределы этого div-оболочки.

1 голос
/ 04 января 2012

Другие ответы здесь верны: вам нужно вытащить нижний колонтитул за пределы оболочки, а затем убедиться, что в ваших таблицах стилей есть

#footer_wrap {width:100%;}

Однако, если вы отчаянно пытаетесь не перемещать тег(если у вас нет доступа к файлам шаблонов), вы можете использовать javascript или jquery, чтобы развернуть нижний колонтитул после загрузки страницы.Но это определенно последний вариант.

1 голос
/ 04 января 2012

Что-то не так с вашей страницей, тег body заканчивается в середине разметки.

В любом случае, зайдите в файл, и вы хотите переместить <?php include("footer.html");?> как можно ближе к концу документа, а затем установите #footer width на 100%

...