Open HTML Frameset in a new tab or window

I've been contemplating for the past week on how to address my issue using frameset.

Situation:

I have an html file for header, footer, menu, and content, each with its own background color. I implemented a frameset for enhanced design.

The header has a black background, the footer is also black, menu is gray, and content is plain white.

Everything functions flawlessly, but I noticed an issue with the menu. When a user clicks on the home page using Open Link in New Tab or Open Link in New Window, the design for the home page only displays as white.

Query:

Is there a method to ensure that when a user clicks a link using Open Link in New Tab or Open Link in New Window, the background colors of all four html files are also included?

Below is my frameset code:

<frameset rows="120,*,30" border ="0">
<frame name ="top" src="header.php">

</frame>

<frameset cols="200,*" border ="0">
<frame src="menu_viewer.php" name="menu">
<frame src="index.php" name="main" scrolling="yes">
</frame>
</frameset>

<frame name="bottom" src="footer.php">

</frameset>

Here's a screenshot of my design:

When a user clicks Open Link in New Tab or Open Link in New Window, the result is

The desired outcome should be:

Any suggestions or recommended programs that can achieve this kind of design result are greatly appreciated. Thank you in advance.

htmlcssframeset

Answer №1

@ Princess Toledo: The use of framesets is no longer supported in HTML5. If you want to achieve a similar effect using CSS, you can wrap your code in a div element like this:

<body>
<div id=wrapper>
<!-- Your code goes here -->
</div>
</body>

Then add the following CSS style to the wrapper:

#wrapper {
  width:980px;
  margin: auto;
 }

This will ensure that your content stays within the wrapper and remains centered on the page without collapsing in high resolution windows.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Get notified about the number of cells you've selected by simply dragging on a table

Is there a way to display the number of selected cells in a table when dragging with the mouse? I have a table set up, and I'd like to create an alert that shows how many cells are selected while dragging. Here is the link to my fiddle: http://jsfiddl ...

jqueryhtmlcssarrays

What is the best way to activate a JavaScript function once a page has finished loading?

Hey there! I have a webpage with 2 text input fields and a DIV element. The first input field is for user input, while the second one is readonly. When the user hits Enter in the first input field, a new page loads into the DIV based on the query result f ...

javascriptphphtml

The positioning of the text appears to be in the center, but it is actually

Currently, my text "lorum ipsum" is centered in CSS, but I want to align it to the left and add padding on the right later. Can someone explain what I've created here? #ubba { font-family: "Open Sans", sans-serif; font-size: 20px; ...

htmlcss

Place the button inside the form following another block element

Here is the HTML code I am working with: <div class="actions"> <input id="submit-car" name="commit" type="submit" value="Добавить объявление"> </div> and here is a fiddle example: http://jsfiddle.net/348U4/ In ...

javascriptjqueryhtmlcssforms

What is the best method for decreasing the space between ordered list elements?

Help with removing unwanted top margin space I have been experiencing an issue where I am getting extra space above the list items when using a ul before an ol. The result is that only the unwanted space appears above the circle and number 1. I attempted ...

htmlcss

Initialization of webix combo options values in HTML code

Currently, I am working with the Webix UI framework and I am trying to achieve something similar to: <div view="combo" options="fruit"></div> This is what I have in my JavaScript file: $scope.fruit =[{id:1, value: "Apple"}, {id:2, value: "Ba ...

javascripthtmlwebix

The CSS media query isn't functioning properly on Safari browser

Currently, I am working on a project using React JS and CSS. In order to make it responsive, I have implemented media queries. However, I have encountered an issue where the media query is not functioning properly in Safari browsers on both phones and PC ...

cssreactjssafariresponsive-designmedia-queries

Button in HTML not responsive to clicks

I'm facing an issue with my HTML button as it's not clickable at all. I suspect it may be related to incorrect div settings or a background issue. Can someone advise on what setting needs to be changed for the "sign the petition" link to become ...

phphtmlbuttonclick

Extra brackets appear when retrieving JSON data

In my code, I am attempting to extract data from a JSON file. The JSON data does not have any brackets, just an array separated by commas. However, when I retrieve the data using $scope, an extra square bracket is added outside of my output. Here is a demo ...

javascriptjqueryhtmljsonionic-framework

What are the steps to reveal the second element once the first one has vanished?

Is there a way to delay the appearance of the second square until after the first square has disappeared? For example, I want the first square to appear after 3 seconds and then disappear, followed by the second square becoming visible after 11 seconds. ...

css

The navigation bar in Bootstrap 3.2 expands in size as you scroll past it

Whenever I reach the bottom of the page, the navigation bar suddenly enlarges. The navbar is located at the top of my code. I attempted moving the navigation to the bottom of the code... but it didn't fix the issue... Could someone please identify wha ...

jquerycsshtmltwitter-bootstrap

What is preventing the addition of links to the navigation bar when using a sticky navigation bar?

Currently, I am in the process of developing a blog website using Django. One of the features I have successfully implemented is a sticky navigation bar. However, I am facing a challenge with adding links to the menu on the navigation bar due to existing ...

javascriptpythonhtmlcssdjango

What is the best way to move to a new line without creating a space between the current line and the new line?

I am trying to achieve the desired output: $text = Hello, this is example text. rather than: $text = Hello, this is example text. When I use \n, it starts a new line. How can I make it stay on the same line below with the same startin ...

phphtml

PHP data insertion using filters and validation

I have created a database and implemented a validation system to ensure that fields are not left empty. If the fields are filled and pass through the sanitization function, I then proceed to save the data in the database. <?php // Define variables as ...

phphtml

Is there a method to instruct crawlers to overlook specific sections of a document?

I understand that there are various methods to control the access of crawlers/spiders to documents such as robots.txt, meta tags, link attributes, etc. However, in my particular case, I am looking to exclude only a specific portion of a document. This por ...

javascripthtmlseoweb-crawler

tips on customizing buttons within form groups

I have set up two separate form-groups: My goal is to click on each button within each group and toggle its style from grey to green, and vice versa. However, when I click on a button, all buttons within the group turn grey except for the one that was cli ...

javascriptjquerycssbootstrap-4

Issues with CSS selectors in Internet Explorer causing problems with Selenium Webdriver C#

When automating a website with Selenium C#, I encountered a NoSuchElementException when trying to click an element using a CSS selector. However, the issue was resolved when using xpath instead. Can someone shed light on why this discrepancy between CSS an ...

cssseleniumxpathselenium-webdrivercss-selectors

Count in JavaScript that picks up where it left off

I'm working on setting up a countdown timer that runs for 24 hours, showing the days, hours, minutes, and seconds. The challenge I'm facing is how to save the progress of the countdown. Essentially, I want it to resume from where it left off for ...

javascripthtmlcookiescountercountdown

Transforming dynamic class based on state value from React to TypeScript

I'm trying to implement this React function in TypeScript, but I'm encountering errors. const ListItem = ({ text }) => { let [showMore, setShowMore] = useState(false); return ( <div className="item"> ...

javascripthtmlreactjstypescript

Whenever I adjust the zoom on my HTML page, it either scrolls upwards or downwards

Is there a way to prevent the page from scrolling when using zoom-in or zoom-out? I attempted using overflow: hidden in the body, but it did not work. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

htmlcss