Re: [css-d] center an image horizontally inside an overflow: hidden

[Martin Sammtleben]

At 14:35 -0400 30/4/08, S. Woodside wrote:
>Thanks for the link. I tried using background-image center center -- 
>unfortunately this method doesn't meet my second criteria which is 
>that the image be scaled to fit vertically. There does not appear to 
>be any way to scale the image when using background.

Yes, that's true.
Sadly I haven't found a better way. The best you could do, would be 
to limit the height of uploaded images to a fixed size, if that's at 
all reasonable.

Cheers   Martin
__
css-discuss [EMAIL PROTECTED]
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] center an image horizontally inside an overflow: hidden

[Martin Sammtleben]

At 01:47 -0400 30/4/08, S. Woodside wrote:
>I have a div absolutely positioned with overflow: hidden, and I have 
>an image, of unknown pixel size, displayed inside it. I wish for the 
>image to be "cropped" on the left and right, and sized to fit 
>vertically. A key element here is that I will not know in advance what
>the size of the image actually is.

I recently asked how to center a larger image vertically and 
horizontally in a smaller div and received some good suggestions. 
Basically they all involve using the image as the *background image* 
of the div or another element placed inside the div.

Login to view the archives, the thread starts here:


Cheers   Martin
__
css-discuss [EMAIL PROTECTED]
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] Drop-Down Menu In Table?

[Martin Sammtleben]

At 7:57 -0500 18.4.2008, Victor Subervi wrote:
>However, now I am perplexed by the problem of how to
>get it to work within a table.

He says in the note "This one also has problems with IE when used 
within a table."

So you might want to try the more recent version:


Sorry, but I haven't tried these in a table.


Cheers  Martin
__
css-discuss [EMAIL PROTECTED]
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] How do you feed IE versions different css than w3ccompliant browsers?

[Martin Sammtleben]

At 10:05 +0100 16/4/08, James Leslie wrote:
>Surely you just use a normal stylesheet fed to all browsers and then add
>IE conditional comments to sort out issues with the IE versions?
>
>If you need to put in fixes for all browsers, then surely the original
>stylesheet is wrong

Exactly what I thought.
One main css that every browser sees and then IE fixes wrapped in 
cond. comments.

What, if any, is the advantage of the method suggested earlier in this thread?


Cheers   Martin
__
css-discuss [EMAIL PROTECTED]
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] Centering image h/v in *smaller* div

[Martin Sammtleben]

At 16:40 -0500 11/4/08, Benjamin White wrote:
>1.) Could you not just render these particular links as block
>elements, either by floating them or explicitly declaring display:
>block and then setting the background to whatever image you need?
>Ideally you would then use the alternate text as the link text and
>hide it from traditional browsers in some way.

Good idea!

Anyway, thanks to everyone for your input - I'll figure something out.


BestMartin
__
css-discuss [EMAIL PROTECTED]
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] Centering image h/v in *smaller* div

[Martin Sammtleben]

At 10:35 -0600 10/4/08, Lisa Onizuka wrote:
>Martin, I'm not sure if you want to bother with any inline css, but you
>could achieve it this way:
>
>style="background:url('dynamically-generated-path.jpg') center center
>no-repeat">   

Thanks Lisa,

I had actually thought of this approach, but the thumbnails also need 
to be clickable links and in order to achieve that I would need to 
modify a core component of the CMS.

I might end up doing just that.


Cheers   Martin
__
css-discuss [EMAIL PROTECTED]
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] Centering image h/v in *smaller* div

[Martin Sammtleben]

At 15:56 +0200 10/4/08, ilduca69 wrote:
>well, the name of the classes must match:
>



Sorry, that was just a typo in the mail - they actually do match, but 
no effect.

Martin
__
css-discuss [EMAIL PROTECTED]
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] Centering image h/v in *smaller* div

[Martin Sammtleben]

Hi,

I use a  to display thumbnails in a square box. 
These thumbnails are of various sizes and aspect ratios 
(auto-generated by a CMS), but they all exceed the dimensions of the 
box. Here's the css:

div.imagebox  {
text-align: center;
vertical-align: middle;
width: 80px;
height: 80px;
overflow: hidden }


I want to position them so that their center-portion is displayed, 
but since they're bigger not even  text-align: center  has any 
effect. All I see is the upper left corner of the images.

Now all the resources I've found so far deal with the case of the 
surrounding div being *larger* than the images. But I got some hints 
that might be useful like setting the div's position to relative and 
using absolute positioning for the images.

The problem with that is however that I can't use fixed values as the 
size/orientation of the thumbnails varies.

Can this be done? Any help would be very much appreciated!


Cheers   Martin
__
css-discuss [EMAIL PROTECTED]
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] Adjacent sibling selectors not taking - solved!

[Martin Sammtleben]

Never mind,

the moment I had written it down the solution hit me:  what I want is 
the first child selector!


Cheers  Martin
__
css-discuss [EMAIL PROTECTED]
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] Adjacent sibling selectors not taking

[Martin Sammtleben]

At 1:21 +1000 10.4.2008, Alan Gresley wrote:
>But even better.
>
>
>h1:first-child, h2:first-child, h3:first-child {
>margin-top: 0em;
>}

Excellent!  Thank you so much!

It's been a great relief to be able to use these exciting selectors 
now that IE7 finally supports them.


Cheers  Martin
__
css-discuss [EMAIL PROTECTED]
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] Adjacent sibling selectors not taking

[Martin Sammtleben]

Hi everyone,

I use the general selector to zero my paddings and margins. I then 
add in some defaults for common elements:

p, h1, h2, h3 {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

...and then use adjacent sibling sel. to refine them, which works well:

p+h1, p+h2, p+h3 {
  margin-top: 1.5em;
}


Now I have a sidebar that I want to remove the default top margins of 
any heading elements on the very first line, so I hoped a rule like 
this would do the trick, but to no avail:

div#sidebar+h1, div#sidebar+h2, div#sidebar+h3 {
  margin-top: 0em;
}

Why does the rule not work?  Am I misunderstanding how these are 
supposed to work?

(Changing it to a descendant selector like   div#sidebar h1, etc. 
shows the desired effect, but sadly on other h selectors further 
down, too.)

Any help is very much appreciated!


Cheers  Martin
__
css-discuss [EMAIL PROTECTED]
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] Most popular fonts for browsers

[Martin Sammtleben]

At 15:09 +0200, 8/4/08, Cristian Palmas wrote:
>Does anybody know about a list of commonly used fonts?

Look at the survey results linked at the top of this page:


Cheers   Martin
__
css-discuss [EMAIL PROTECTED]
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/