Re: [css-d] Vertical centering? And another problem.
> On Fri, Aug 12, 2011 at 8:27 AM, Rory Bernstein > wrote: >> Hi, I sent this yesterday and did not get any responses about the two items >> below. I'd be so appreciative to get some help. Thanks, Rory >> >> http://rorybernstein.com/slider/vertical_center >> >> I have this test page here. Two problems: Thanks for the several suggestions, everyone. I will work on this, which will be easier now with this information. Best, Rory __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical centering? And another problem.
On 12.08.2011 14:52, Peter H. wrote: in case this is of any help: the only way I've ever found to reliably centre vertically, is to use a good old-fashioned table. CSS table is better - unless one has to support old-fashioned browsers with limited CSS support. Georg __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical centering? And another problem.
On 8/11/11 3:44 PM, Rory Bernstein wrote:
Hello CSS fans,
http://rorybernstein.com/slider/vertical_center
I have this test page here. Two problems:
1. In the slider (orange box at top), the content on the right side of the box
does not show up in Chrome, but it does in FireFox. Meaning, the photo moves
across as it should, but there is text on the right of it that is just not
showing up.
Try embedding this ruleset in the head of the document and see if it
corrects the Chrome / Safari problem?
.slideshow_text {border:1px dashed red;position: absolute;left:468px;top:0;}
Note that your layout is font-size dependent and that scaling the fonts
and/or setting a minimum font size in the Firefox prefs will cause the
text to escape the block and be unseen {same for below].
2. If you click the woman's face image (any one, they all work the same), you get
an overlay that appears. In this box, I need the left and right cols to vertically
center inside the div that has the red border on it. How? In other words, I want
the white space above& below the text (left) and photo (right) to be the same,
not matter how much text, or what size image, I put int there.
Dunno. Or, rather, not sure why you would want to do that in the first
place-- it will, at best, be very fragile and easily broken by anyone
not running the same equipment and same settings as you.
Thanks in advance,
Rory
Best,
~d
--
http://chelseacreekstudio.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical centering? And another problem.
> El 12/08/2011, a las 14:27, Rory Bernstein escribió: > > . . . I need the left and right cols to vertically center inside the div > that has the red border on it. How? In other words, I want the white space > above & below the text (left) and photo (right) to be the same, not matter > how much text, or what size image, I put int there. > in case this is of any help: the only way I've ever found to reliably centre vertically, is to use a good old-fashioned table. In this case, say, a single row with a cell each for your text and your image would probably do. Best regards, Peter H. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical centering? And another problem.
On Fri, Aug 12, 2011 at 8:27 AM, Rory Bernstein wrote: > Hi, I sent this yesterday and did not get any responses about the two items > below. I'd be so appreciative to get some help. Thanks, Rory > > http://rorybernstein.com/slider/vertical_center > > I have this test page here. Two problems: > > 1. In the slider (orange box at top), the content on the right side of the > box does not show up in Chrome, but it does in FireFox. Meaning, the photo > moves across as it should, but there is text on the right of it that is just > not showing up. > > 2. If you click the woman's face image (any one, they all work the same), you > get an overlay that appears. In this box, I need the left and right cols to > vertically center inside the div that has the red border on it. How? In other > words, I want the white space above & below the text (left) and photo (right) > to be the same, not matter how much text, or what size image, I put int there. > > > Sorry. For #2, vertical centering is tricky in CSS. Try googling it and seeing which method you find may suit your situation. Personally, I'd work out something with padding the top and bottom of the red-ruled box or maybe include a min-height and let it go with that. Again, HTH -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical centering? And another problem.
On Fri, Aug 12, 2011 at 8:27 AM, Rory Bernstein wrote: > Hi, I sent this yesterday and did not get any responses about the two items > below. I'd be so appreciative to get some help. Thanks, Rory > > http://rorybernstein.com/slider/vertical_center > > I have this test page here. Two problems: > > 1. In the slider (orange box at top), the content on the right side of the > box does not show up in Chrome, but it does in FireFox. Meaning, the photo > moves across as it should, but there is text on the right of it that is just > not showing up. > > 2. If you click the woman's face image (any one, they all work the same), you > get an overlay that appears. In this box, I need the left and right cols to > vertically center inside the div that has the red border on it. How? In other > words, I want the white space above & below the text (left) and photo (right) > to be the same, not matter how much text, or what size image, I put int there. > > 1) you are floating .slides to the left, and the images have x width. There doesn't seem to be a lot of room left for the text and it drops below. Try dropping .middle and float both the .slides and .slideshow_text left inside .slideshow_inner adjusting the width of .slideshow_text so it comes up next to .slides. Don't forget to clear your floats. HTH -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Vertical centering? And another problem.
Hi, I sent this yesterday and did not get any responses about the two items below. I'd be so appreciative to get some help. Thanks, Rory http://rorybernstein.com/slider/vertical_center I have this test page here. Two problems: 1. In the slider (orange box at top), the content on the right side of the box does not show up in Chrome, but it does in FireFox. Meaning, the photo moves across as it should, but there is text on the right of it that is just not showing up. 2. If you click the woman's face image (any one, they all work the same), you get an overlay that appears. In this box, I need the left and right cols to vertically center inside the div that has the red border on it. How? In other words, I want the white space above & below the text (left) and photo (right) to be the same, not matter how much text, or what size image, I put int there. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical centering? And another problem.
On 8/11/11 3:44 PM, Rory Bernstein wrote: PS I redesigned my web site, in case anyone is interested: http://www.rorybernstein.com So far so good. "Lets play..." 1/ Stress test. 2/ Fold and hold tablets and mobile. Best, Antonio Banderas --Desparado __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Vertical centering? And another problem.
Hello CSS fans, http://rorybernstein.com/slider/vertical_center I have this test page here. Two problems: 1. In the slider (orange box at top), the content on the right side of the box does not show up in Chrome, but it does in FireFox. Meaning, the photo moves across as it should, but there is text on the right of it that is just not showing up. 2. If you click the woman's face image (any one, they all work the same), you get an overlay that appears. In this box, I need the left and right cols to vertically center inside the div that has the red border on it. How? In other words, I want the white space above & below the text (left) and photo (right) to be the same, not matter how much text, or what size image, I put int there. Thanks in advance, Rory PS I redesigned my web site, in case anyone is interested: http://www.rorybernstein.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
