Community @ The Turning Gate

I also tried to move the title into the thumbnail, howver here I have the problem of the "white thing below"

http://chauser.eu/en/galleries/nature/

Thanks a lot! One last thing, is there a way to center the "text/labels" and send button as well? I am slowly getting back to CSS with inspecting and changing, but some things just won't work :Q

Thx a lot! That makes my life easier. Is there any documentation which shows all the "classes" I could use ?

Next dump question. http://chauser.eu/cp/en/about/

I'm centering images with on for example http://chauser.eu/cp/en/about/

.centerphoto {
    text-align: center;
}

Now on http://chauser.eu/cp/en/home/ with my own slideshow the same does not work.

Here is the code:

For the image where it works:
<div class="centerphoto"><img src="/cp/en/photos/about/about_01.jpg" id="copyphoto" width="778"></div>

on the slideshow where it doesn't

I expect this line to the problem:
.fadein img { position:absolute; left:0; top:0; transition:opacity 1s; opacity:1; }

<div class="centerphoto">
<div id="slideshow" class="fadein clearfix">
<img src="/cp/en/photos/slide/slide1.jpg" id="copyphoto" width="802">
<img src="/cp/en/photos/slide/slide2.jpg" id="copyphoto" width="802">
<img src="/cp/en/photos/slide/slide3.jpg" id="copyphoto" width="802">
<img src="/cp/en/photos/slide/slide4.jpg" id="copyphoto" width="802">
</div>
</div>       

<style>

.fadein { position:relative; }
.fadein img { position:absolute; left:0; top:0; transition:opacity 1s; opacity:1; }
.fadein img.is-hidden { opacity:0; }

</style>

<script>

var delay = 5000; // image delay
var ratio = 1/2; // image area aspect ratio

// don't modify below

function set_slideshow() {

var n = document.getElementById("slideshow").offsetWidth;

document.getElementById("slideshow").style.height = n *  ratio + "px";

}

window.onload = set_slideshow;
window.onresize = set_slideshow;

// Slideshow from: https://snook.ca/archives/javascript/si … -slideshow

var i=0;

var root = document.querySelector(".fadein");
var els = root.querySelectorAll(":not(:first-child)");
for (i=0; i < els.length; i++) {
els(i).classList.add("is-hidden");
}

root.addEventListener("transitionend", function(){
root.insertBefore(root.querySelector(":first-child.is-hidden"), null);

});

setInterval(function(){
root.querySelector(":first-child").classList.add("is-hidden");
root.querySelector(":nth-child(2)").classList.remove("is-hidden");

}, delay)

</script>

thx I will look into it tomorrow.

So just to clarify: When I set the width in backlight vegas to 802 and use 1px border the images should have 800px ?

And what should be the aspect ration ? the image is 800x400

Ok Metthew I get you. However, I'm not talking about Fullscreen at all. I'm talking about my new site (test site) (http://chauser.eu/cp/en/home/)

The image quality with vegas fit is just bad compared to normal JPGs... You can see for yourself.

And WHY is there a border ? The images are set up as 800x400 and SO IS Vegas 800x400...

yes that is fixed, the problem with the vegas slideshow remains. Or at least on my devices...

THX a lot!

disabled the image, no change. (The image on about is the same with 776px; there it works)

OK, That was a good hint. The image wasn't the problem, but I forced the "comment" section to width: 500px; / changed it to max-width and it works now.

The only problems remains the Vegas slide show and hint there ?

Final code for the nav:

.primary-menu {
    padding: 6px 0px 0px 0px;
   
}

.menu-item a:link, a:visited {
    line-height: 12px;
    height: 16px;
    font-size: 14px;
    padding: 0px 8px 0px 8px;

}

.menu-item span {
    line-height: 12px;
    padding: 0px 8px 0px 8px;
    font-size: 14px;
    height: 16px;
    position:relative;
}

.sub-menu {
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.1);
   
}

.menu-item-has-children ul.sub-menu li {
    padding: 4px 4px 4px 4px;
    position:relative;

   
}

.menu-item-has-children ul.sub-menu {
    border:0px solid #000000;
}

nav ul li:hover > ul { top: 16px; }

nav li:hover a,nav li:hover span { color: #000000; }

nav li:hover,nav li:hover li { background-color: #ffffff; }

nav li a:hover,nav li span:hover { color: #2196f3; background-color: #ffffff; }

No really any progress... So how do I move the dump thing ? AND WHY are the links with the drop down blue...

Here is the current code: I tried to explain what everything does, NOW I tried a lot...

(is used to space everything from the header)
.primary-menu {
    padding: 6px 0px 0px 0px;
}

(used to set size and distance between main links)
.menu-item a:link, a:visited {
    line-height: 12px;
    height: 12px;
    font-size: 14px;
    padding: 0px 8px 0px 8px;
}

(used to size and set distance between "info" and the rest.)
.menu-item span {
    line-height: 12px;
    padding: 0px 8px 0px 8px;
    font-size: 14px;
}

(used for the shadow around the WHOLE box and some transparency test.)
.sub-menu {
    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.2);
    background-color: rgba(255, 255, 255, 0);
}

(used to make some space around the sub links... and some transparency test.)
.menu-item-has-children ul.sub-menu li {
        background-color: rgba(255, 255, 255, 0.5);
    padding: 4px 4px 4px 4px;   
}