Member Avatar for Siberian

Hello, I'm trying to put into my web page the E2 photo gallery (google E2) and place it within a box on my web page (this box is in a style sheet) Now the author told me all I have to do is change the absolute positioning of the style which belongs to the E2 photo gallery. There are two problems happening first off when I import the style sheets that come along with this add-on they completly take over my web page style, second I tried to put the E2 style in a layer this does not seem to work either. If anyone could please help me to get this to work I would appreciate it alot.

Thank You

  • 2 Contributors
  • 2 Replies
  • 112 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Siberian

Dani AI

Generated

Short summary for : the two problems are separate but related. The gallery stylesheet is written with broad selectors and is “bleeding” into the rest of the page. The gallery’s absolute-positioned bits are positioning themselves against the page (or body) because their nearest positioned ancestor is missing. Both are solvable without dumping the gallery.

Preferred fix (scope the gallery CSS and anchor it):

  • Wrap the gallery markup in a container and give that container a class.
  • Make that container the positioned ancestor so absolute children are anchored to it.
  • Edit the E2 CSS so its selectors only apply inside that container (prefix selectors with the container class). Back up the original CSS before editing.

Example (replace names to match your markup):

<div class="e2box">
  <!-- E2 gallery HTML here -->
</div>

.e2box { position: relative; width: 600px; height: 400px; }

/* change rules like ".gallery img { ... }" to ".e2box .gallery img { ... }" */

If you do not want to edit the E2 file, isolate the gallery in a tiny HTML page and embed it with an iframe inside your box. That completely isolates CSS but has tradeoffs (SEO, responsive sizing, cross-window scripts).

Troubleshooting tips:

  • Use browser dev tools (F12) to inspect which rule is overriding your site rules (look for top-level selectors: body, a, img, ul, h1).
  • Avoid sprinkling !important fixes—they make later edits harder.
  • Watch for global resets, @media and @keyframes when you mass-prefix selectors.
  • In Dreamweaver, use a tested find/replace on a copy of the CSS to add the container prefix.

As hinted, scoping (namespacing) with classes is the robust path.

Recommended Answers

All 2 Replies

Member Avatar for MidiMagic

The only way to keep the stylesheet from taking over your page is to use inline styles, or classes with your own stylesheet, on the parts of your page it takes over.

Member Avatar for Siberian

did you happen to see the gallery page on how it works ? So I can't put it in a layer ? I must use inline styles or classes and then do absolute positioning ? There is one problem I can't seem to see it, to do absolute position to it. I don't know if this thread supports a program like DW but I am using that at the moment.

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.