Member Avatar for fabricetoussain

[img]http://i10.photobucket.com/albums/a145/41991/help.png[/img]

ok making my first site, and i want to be able to put an iframe right inbetween the {} (as described in photo), just a simple horizontal photo scroll in a frame, but i cant figure out how to exactly put it into this location, i seriously started like an hour ago so bear with me, been using google a shit load, and im using fireworks/dreamweaver cs4 right now. this is what i have for the iframe.

<iframe src="gallary.html" width="100%" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

like how do i specifically position where i would want ti frame?

thanks in advance!

  • 4 Contributors
  • 3 Replies
  • 113 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

A simple, robust way to get an iframe centered between left/right "braces" is to use a single container and modern CSS layout instead of inline HTML sizing or table-cell hacks. asked for the iframe to sit exactly between the braces; and were on the right track about styling/layout, and showed the basic inline idea — the pragmatic upgrade is to use flexbox and CSS for sizing, and avoid obsolete iframe attributes.

Example structure (flexbox + classes):

<div class="braced-gallery">
  <img class="brace left" src="images/left-brace.png" alt="left brace">
  <div class="viewport">
    <iframe class="gallery-frame" src="gallery.html" title="Photo gallery"></iframe>
  </div>
  <img class="brace right" src="images/right-brace.png" alt="right brace">
</div>
.braced-gallery { display: flex; align-items: center; height: 300px; }
.brace { width: 50px; height: 100%; object-fit: contain; }
.viewport { flex: 1; height: 100%; max-width: 900px; }
.gallery-frame { width: 100%; height: 100%; border: 0; }

Notes and gotchas:

  • Use CSS border: 0 instead of the deprecated frameborder and avoid scrolling (see MDN iframe docs: iframe element).
  • Add title for accessibility and consider sandbox if loading untrusted pages.
  • If the iframe content is cross-origin you cannot manipulate its scroll or styles from the parent due to the same-origin policy (Same-origin policy). If the gallery is simple, embedding the images/slider directly in the parent (no iframe) gives better performance and control.
  • Dreamweaver can alter markup in Design view — paste in Code view and preview in a real browser. Also check spelling (e.g., "gallery" vs "gallary").

Using this approach keeps layout flexible and responsive, and makes it easy to tweak sizes, spacing, or replace the iframe with a JS/CSS slider later.

Recommended Answers

All 3 Replies

Member Avatar for ivatanako

i cant see the image but you could use styles on your iframe.

Member Avatar for RoyalElite96

It's hard to see what you're trying to do without seeing the code.
Something like this maybe?

<div style="display: table-cell; width: 100px; font-size: 120px;">
{
</div>
<div style="display: table-cell; width: 500px;">
<iframe src="gallary.html" width="50px" height="120"></iframe>
</div>
<div style="display: table-cell; width: 100px; font-size: 120px;">
}
</div>

Also check http://w3schools.com. It may help.

Edited by mike_2000_17 because: Fixed formatting
Member Avatar for Member #120589 
<img src="/images/leftbrace.png" height="300" width="50" /> <iframe src="/images/gallery.png" height="300" width="..." frameborder="0" scrolling="no" /></iframe> <img src="/images/rightbrace.png" height="300" width="50" />
Edited by Member #120589 because: n/a
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.