Member Avatar for OmniX

Heres a few examples of what I would like to accomplish:

http://www.quincy.com.au/

Now I have my own ideas how this was created but mainly I am not able to re create these websites myself.
What I am looking for in the website is the backgroun layout how the website is given inside another website.
How have this been accomplished frames, ajax, ???
Because I very much doubt they incorporate ajax?
Yet they have backgrounds that are stunning!!!
Which I desire!!!

So let me know.

Thanks, Regards X

  • 4 Contributors
  • 4 Replies
  • 118 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by OmniX

Dani AI

Generated

The “site inside a site” look in those examples is a pure CSS + image trick rather than frames or Ajax. As implied, a centered content wrapper plus decorative backgrounds does the heavy lifting. ’s frames suggestion is not appropriate here, and was correct that frames are obsolete—modern pages use CSS for layout and decoration.

Common, reliable pattern:

  • Put the decorative artwork on the page background (either one full image or several tiled edge slices).
  • Center a fixed-width or max-width wrapper (.wrapper) with margin: 0 auto to hold header, nav, main and footer.
  • Place the navigation inside that wrapper and arrange it with floats, Flexbox, or Grid so the main area fills the remaining space.
  • Use repeated background images (repeat-x / repeat-y) or multiple background layers to build left/right borders that look like a frame.

Example skeleton (modern approach):

<body>
  <div class="wrapper">
    <header>...</header>
    <div class="layout">
      <nav>...</nav>
      <main>...</main>
    </div>
    <footer>...</footer>
  </div>
</body>

body {
  background: #f6f6f6 url('frame-left.png') repeat-y left top, url('frame-right.png') repeat-y right top;
}
.wrapper { max-width: 980px; margin: 0 auto; }
.layout { display: flex; }
nav { width: 220px; }
main { flex: 1; }

Practical tips: include a solid background-color fallback, optimize slices into a few images (or use SVG for scalability), use CSS sprites or HTTP/2 to reduce requests, and order DOM elements for keyboard accessibility. Browser DevTools quickly reveal how an example page is structured. For reference, MDN has clear guides on CSS backgrounds and Flexbox: MDN Backgrounds guide and MDN Flexbox basics.

Recommended Answers

All 4 Replies

Member Avatar for essential

All can be done with CSS by partialy putting all elements and nesting them within the div container.

Member Avatar for Luckychap

use HTML frames to do this.

Member Avatar for peter_budo

frames is something w3c would really like to forget about, they did good job some 5-7 years ago, but now are obsolete...
Checking html 5 this concept is nearly abandoned and only remains of previous frames glory is only iframe and something about framesets http://dev.w3.org/html5/spec/Overview.html

Member Avatar for OmniX

Ya sorry forgot to add tha tto my post (frames are bad!).

I heard the CSS with div tags possible you could care to explain?

At the moment I am trying to use div tags and I have the border down and now in the middle how am I meant to get the navigation bar and the main screen?

Using div tags? I thought this was only possible with frames?

Thanks, Regards X

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.