html – Replacing the frameset with a div. Layout problem

Question:

There is some old code with frame. Please tell me how to mark up using div and css?

<frameset name="xxx" rows="74,*,35" border="no" frameborder="no" framespacing="0">
    <frame name="xxx" src="./xxx.html" scrolling="no" marginwidth="0" marginheight="0">
        <frameset name="xxx" cols="*,300" frameborder="yes" border="0" framespacing="1">
            <frame name="xxx" src="./xxx.html" scrolling="yes" marginwidth="0" marginheight="0">
                <frameset rows="*,170" border="0" framespacing="1">
                    <frame name="xxx" src="./xxx.html" scrolling="yes" marginwidth="0" marginheight="0">
                    <frame name="xxx" src="./xxx.html" scrolling="yes" marginwidth="0" marginheight="0">
                </frameset>
        </frameset>
        <frameset cols="*,0,0,0" noresize="" frameborder="no" border="0" framespacing="0">
            <frame name="xxx" src="./xxx.html" scrolling="no" marginwidth="0" marginheight="0" noresize="">
        </frameset>
</frameset>

Answer:

In general, the question will not have an unambiguous answer. Since the frame allows you to display several other pages on one page at once, the following options are possible:

  1. Replace <frame> with <iframe> if you still need to load other independent pages. Example:
<div class=page>
  <div class=page__one>
    <iframe src="page/page-one.html" width="500" height="100"></iframe>
  </div>

  <div class=page__two>
    <iframe src="page/page-two.html" width="500" height="100"></iframe>
  </div>
</div>
  1. Load the contents of these pages with ajax. Example:
$(function() {
  $.get("page/page-one.html", function(data) {
    $(".page__one").html(data);
  });

  $.get("page/page-two.html", function(data) {
    $(".page__two").html(data);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class=page>
  <div class=page__one></div>
  <div class=page__two></div>
</div>
  1. Copy the code from these pages and just paste it into the markup you have. Example:
<div class=page>
  <div class=page__one>
    <p>Існує багато варіацій уривків з Lorem Ipsum, але більшість з них зазнала певних змін на кшталт жартівливих вставок або змішування слів, які навіть не виглядають правдоподібно. Якщо ви збираєтесь використовувати Lorem Ipsum, ви маєте упевнитись в тому, що всередині тексту не приховано нічого, що могло б викликати у читача конфуз.</p>

    <!-- предположим, что содержимым файла page-one.html был один параграф с текстом -->
  </div>
  <div class=page__two>
    <p>На відміну від поширеної думки Lorem Ipsum не є випадковим набором літер. Він походить з уривку класичної латинської літератури 45 року до н.е., тобто має більш як 2000-річну історію.</p>

    <p>Річард Макклінток, професор латини з коледжу Хемпдін-Сидні, що у Вірджінії, вивчав одне з найменш зрозумілих латинських слів - consectetur - з уривку Lorem Ipsum, і у пошуку цього слова в класичній літературі знайшов безсумнівне джерело.</p>

    <!-- предположим, что содержимым файла page-two.html были два параграфа с текстом -->
  </div>
</div>
Post Views: 1
Scroll to Top