Member Avatar for Poverino

Hi,

My name is Mike, born in Canada 50 years ago and grew up in The Netherlands. So my Dutch better then my English.

Anyway I'm looking for help to startup and rebuild my personal websiteyou will find at: SNIP

What is my plan:
I want to make a website template in CSS with the navigation menu buttons on top. Maybe also a sub-menu.
In the middle a sort of “CONTAINER” (IFRAME when you use HTML but I want to use CSS. I hope you know what I mean) with a thin scrollbar in color on the right side.
Background of this container/Iframe transparent.(look a the example website below)

When possible I want to import an HTML page into this container/IFRAME.
Easy to write text and positioning photo’s for myself.
If you have a better and easier plan please let me know.

The background must be FIXED. I have an image and this image is colored black on the outsides.
This all (Navigation-menu, Background and container) must be keep the same position and size in every browser.

With HTML I have made a sort of example you will find at: SNIP

I have done this with a Iframe. Transparent so you keep see the background image.

After finishing the starup template it is also my wish on every page a few small buttons or image with: “Print Page” – “Send to friend” and “Bookmark”
I need to see an example / Template (working one) so I work the rest out myself.

Who want to make a little bit time free and help me out.

When I have one example of several needed pages with the code I can work it out myself.
If you have any question or you don’t understand what I mean please let me now.
Thanks in advanced
Greetings Mike
Please if you want to help me out send me an e-mail: SNIP

Edited by happygeek because: web links and email deleted - read the rules
  • 2 Contributors
  • 1 Reply
  • 112 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Member #905211

Dani AI

Generated

Practical, focused starter plan for that follows ’s point: break the work into small, solvable steps and learn by doing. The pattern below gives a reliable, modern way to keep a fixed background, a centered transparent content pane (avoid iframes), a thin colored scrollbar, and simple include/print/share helpers that can be tested page by page.

A minimal layout and scrollable pane (replace the image and sizes to taste):

html,body { height:100%; margin:0; }
body {
  background: url('background.jpg') center/cover no-repeat fixed;
  font-family: Arial, sans-serif;
}
.container {
  width: 980px;
  max-width: 96%;
  margin: 40px auto;
  height: calc(100vh - 120px);
  overflow-y: auto;
  background: transparent;
  -webkit-overflow-scrolling: touch;
}

Thin colored scrollbar (works best in WebKit; Firefox supports a simpler API):

.container::-webkit-scrollbar { width: 8px; }
.container::-webkit-scrollbar-thumb { background: #666; border-radius: 4px; }
.container { scrollbar-width: thin; scrollbar-color: #666 transparent; }

Load an external HTML fragment into the pane with fetch (keeps site modular without iframes):

function includeInto(sel, url) {
  fetch(url)
    .then(r => r.ok ? r.text() : Promise.reject(r.statusText))
    .then(html => document.querySelector(sel).innerHTML = html)
    .catch(e => console.error('Include failed:', e));
}
includeInto('.container', '/pages/about.html');

Small helpers and notes: window.print() handles print; mailto: links handle “send to friend”; modern browsers prevent programmatic bookmarking—show a short instruction (Ctrl+D/Cmd+D) as fallback. Test across browsers and devices: background-attachment: fixed is unreliable on some mobile browsers—use a fixed-position background element as a fallback. Keep box-sizing: border-box, a proper DOCTYPE and meta viewport to maintain consistent sizing. Prioritize keyboard and screen-reader access when styling scrollbars or custom controls.

Member Avatar for Member #905211

I'm sorry but it sounds like you want someone to build everything for you. If that is the case you should probably hire someone. This is a forum to help you with specific problems, not do all the work for you. So if you have a specific coding issue, please let us know, but please don't ask us to create everything for you. The best way to learn is to try it yourself, when you get stuck ask a question regarding what you are stuck on.

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.