How do you position a DIV central in another DIV?
Moderator: General Moderators
Re: How do you position a DIV central in another DIV?
Like in CSS, . references classes, # references IDs. Also, IDs are meant to be unique. Otherwise, it looks like you've got the concept.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you position a DIV central in another DIV?
So are we dealing with IDs here or Class names?
Either way, each Class is going to have roughly the same Class name - well, every other one as it's image left, image right and so on.
This is why I thought I had to put the JS in PHP, so I can dynamically name the IDs in the function.
Either way, each Class is going to have roughly the same Class name - well, every other one as it's image left, image right and so on.
This is why I thought I had to put the JS in PHP, so I can dynamically name the IDs in the function.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do you position a DIV central in another DIV?
So why not use a common class?
and so forth, and then target $('.image');
Code: Select all
<div class="image image-right">...</div>
<div class="image image-left">...</div>Re: How do you position a DIV central in another DIV?
Again, this whole issue goes away by simply assigning a height to the wrapping element. You sure there's no way to do that?
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you position a DIV central in another DIV?
I wish there was.
I've been asked to make the image and text divs to expand and contract to be responsive. And I want the text in the right div, to be central in the white box.
Plan B would be to fix the size of the image and set the height of the DIV. But it would be SOOOOO cool if the image changed to the % of the screen, and the DIV in the right box stayed there in the middle, and adjusted to suit.
I cannot any any other way to do this. I seriously thought setting a div to be 100% height, would just fill the DIV that it's in, even if it's not given a height. Because it's there, locked in place by the height of the image at the time.
It's a bit like the width of a div.
If I set a DIV with no width.
Put in an image that is 150px wide, and then put a div below that, the width of the div would just snap to fit... because that is where the width of the DIV stops naturally.
Why can it not be the same with height. It's stops there. I can see the border of it stopping, so why can I not say "height 100%" and it just fills that div.
I will try your image class.
I've been asked to make the image and text divs to expand and contract to be responsive. And I want the text in the right div, to be central in the white box.
Plan B would be to fix the size of the image and set the height of the DIV. But it would be SOOOOO cool if the image changed to the % of the screen, and the DIV in the right box stayed there in the middle, and adjusted to suit.
I cannot any any other way to do this. I seriously thought setting a div to be 100% height, would just fill the DIV that it's in, even if it's not given a height. Because it's there, locked in place by the height of the image at the time.
It's a bit like the width of a div.
If I set a DIV with no width.
Put in an image that is 150px wide, and then put a div below that, the width of the div would just snap to fit... because that is where the width of the DIV stops naturally.
Why can it not be the same with height. It's stops there. I can see the border of it stopping, so why can I not say "height 100%" and it just fills that div.
I will try your image class.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do you position a DIV central in another DIV?
What about using a couple of different heights based on breakpoint? That would still get around all of this -- and we haven't gotten to resizing the page yet -- and still (mostly?) achieve the desired effect.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you position a DIV central in another DIV?
Any chance u can jfiddle to show me how?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do you position a DIV central in another DIV?
Sure. Can you provide some sample markup (remove anything sensitive, natch)?
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you position a DIV central in another DIV?
Code: Select all
<div class='home-right' id='home-stoneselector'>
<div class='home-right-text'>
<div class='home-right-text-inner'><h3>luxury yacht applications</h3>
<p>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...</p>
</div>
</div><div class='home-right-image'><img src='/images/pages/120home-yachttest.jpg' id='home-stoneselector-image'/></div>
<div style='clear: both' ></div>
</div>"home-right-text-inner" It's this DIV that needs to be in the MIDDLE of home-right-text.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you position a DIV central in another DIV?
Not exactly sure what I am looking at.
I can see a div on the right, that's about 2cm tall and text that leaks out of it.
I can see a div on the right, that's about 2cm tall and text that leaks out of it.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do you position a DIV central in another DIV?
Interesting. What I see is markedly different.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you position a DIV central in another DIV?
This is what I see.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you position a DIV central in another DIV?
I'm trying everything i can think of and find now.
JS File:
The button doesn't make anything appear, to prove that the height is working.
Code: Select all
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<?php
$result = mysql_query ("SELECT * FROM static WHERE section = 'home-stoneselector' ORDER BY priority");
while ($row = mysql_fetch_object($result))
{
if ($row->position == "left") { echo "<div class='homeheight home-left' id='home-stoneselector'>
<div class='home-left-text'>
<div class='home-left-text-inner'>";}
if ($row->position == "right") { echo "<div class='homeheight home-right' id='home-stoneselector'>
<div class='home-right-text'>
<div class='home-right-text-inner'>";}
if ($row->position == "wide") { echo "<div class='home-wide'>
<div class='home-wide-text'><div>";}
echo "$row->content
</div>
</div>";
if ($row->position == "left") { echo "<div class='home-left-image'>";}
if ($row->position == "right") { echo "<div class='home-right-image'>";}
if ($row->position == "wide") { echo "<div class='home-wide-image'>";}
echo "<img src='/images/pages/$row->photo' id='home-stoneselector-image'/></div>
<button id=\"homeheight\">Get Document Height</button>
<div style='clear: both' ></div>
</div>";
}
?>
<script src="/js/home-resize.js"></script>Code: Select all
$(document).ready(function() {
$('.homeheight').each(function() {
var height = $(this).height();
$('.home-right-text').css('height', height + 'px');
});
$( ".homeheight" ).click(function() {
showHeight( "div", $( div ).height() );
});
});Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do you position a DIV central in another DIV?
Where is the showHeight function defined? What about the div variable? Why are you attaching a click handler to divs?