Page 4 of 4

Re: How do you position a DIV central in another DIV?

Posted: Thu Feb 04, 2016 7:41 am
by Celauran

Re: How do you position a DIV central in another DIV?

Posted: Thu Feb 04, 2016 8:00 am
by simonmlewis
I've just cracked it. I had a brainwave while out for a walk.

The reason i needs to be in the centre is because the image pushes it out.
the DIV in the "center" is using absolute positioning and some tricker to place it there. So, I have set the 'shown' image to be in the right div container, opacity to 0, and width to be 100%.

It now fits. And if one of the other rows of images differ, it's fine, as it's that image I am using with opacity of 0.

Odd way to do it, but uses no Javascript!

Re: How do you position a DIV central in another DIV?

Posted: Tue Feb 16, 2016 3:34 am
by simonmlewis
Oddly, using that method doesn't work terribly well on Safari.
It seems to put the centered box in the bottom right corner.

Code: Select all

<style>
.home-left
{
font-size: 1.2em;
position: relative;
}

.home-left h3
{
margin: 0px;
padding: 0px;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
font-weight: 300;
text-align: center;
color: #A4781C;
font-size: 25px;
}

.home-left h2
{
margin: 0px;
padding: 0px;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
font-weight: 300;
text-align: center;
color: #A4781C;
font-size: 25px;
}

.home-left-text
{
width: 48%;
float: left;
position: relative;
height: auto;
}

.home-left-text-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
margin: 0px;
padding: 0px;
}

.home-left-image
{
text-align: left;
float: right;
width: 50%;
margin-left: 10px;
position: relative;
}

.home-left-image img
{
width: 100%;
display: block;
}
</style>

<div class='home-left'><a href='/url'>
  <div class='home-left-text'><img src='/images/pages/home-yacht1.jpg' class='home-text-trans'/>
  <div class='home-left-text-inner'><h3>interior applications</h3>
Welcome text here to be dynamic and have lots of content on this page and look so nice and special your code and my text and design how can this,
          </div>
        </div><div class='home-left-image'><img src='/images/pages/home-yacht1.jpg'  id='home-stoneselector-image'/></div>
  <div style='clear: both' ></div></a>
</div>
It works on all browsers, by placing the viewed image on the right, and the next in the centre of the left DIV.
The left div is stretched out by the image in the background, set to opacity: 0;.

Re: How do you position a DIV central in another DIV?

Posted: Tue Feb 16, 2016 3:48 am
by simonmlewis
Found the fix.
It works with the "transform:" element of the class that sets the central DIV.
although this website is not in English, the answers are in there in a CSS section.

It's similar to other CSS where you have to enter different code for different browsers.

http://www.michaelloy.de/jquery-sidr-io ... ement.html

Re: How do you position a DIV central in another DIV?

Posted: Tue Feb 16, 2016 7:13 am
by Celauran
simonmlewis wrote:Oddly, using that method doesn't work terribly well on Safari.
Yep. Safari is the new IE. Yay front end!

Re: How do you position a DIV central in another DIV?

Posted: Tue Feb 16, 2016 7:25 am
by simonmlewis
Yep.
It also dislikes Titillium Web font. A little bit "bitty" on screen. On a windows machine anyway.