Welcome!

[cittadelmonte]

How can i modify my css http://cittadelmonte.info/wp-content/themes/branfordmagazine/style.css to implement a liquid layout to see better in low resolution? my site is cittadelmonte.info and i have ^^optimized^^ to see at 1280x1024.

[sbosarge]

Is there a css 2.1 technique to produce a dynamically sized vertical gradient within a div that meets the following requirements.

1. does not need to be transparent
2. will dynamically resize with the height of the div.

using this as a background in the edit view template in an asp.net listview conrtol. when the edit view is activated the height of the div is determined by height of a nested gridview

I only had this issue come up yesterday so my amount of googleshooting is minimal. what i did find was not very helpful and personally i don't think it can be done with pure css 2.1. I think css 3.0 has something called background-size or something...

I thought about somehow using the 2d graphics class in [dot]net but that seems inefficient,

your thoughts..

=Scott

[idrumgood]

An issue I run into frequently is sizing links differently from body copy.

It seems to be a rule of thumb these days to do your font sizing in ems as opposed to pixels. I'm ok with that, and have been using the trick of setting the font size of the whole document to 62.5%, thus equating 1.0em with 10px.

So, I have something like this:

Code: Select all

<p>copy copy copy <a href="#">linky</a> copy</p>

The designers have indicated that the body copy should be 12px while the links should be 10px. So my CSS would be:

Code: Select all

p{font-size: 1.2em;}
p a{font-size: 1.0em;}

Problem is, because ems size your text relative to it's current size, this essentially says that the links should be sized to 100% of their current value... or no change at all.

Sure, I could just size the links in pixels explicitly, but is there a way to deal with this?

[Tarvalon]

Is there a css 2.1 technique to produce a dynamically sized vertical gradient within a div that meets the following requirements.

1. does not need to be transparent
2. will dynamically resize with the height of the div.

using this as a background in the edit view template in an asp.net listview conrtol. when the edit view is activated the height of the div is determined by height of a nested gridview

I only had this issue come up yesterday so my amount of googleshooting is minimal. what i did find was not very helpful and personally i don't think it can be done with pure css 2.1. I think css 3.0 has something called background-size or something...

I thought about somehow using the 2d graphics class in [dot]net but that seems inefficient,

your thoughts..

=Scott

Scott,

Do you just want a background image to always fill up the vertical height of the div it's applied to? If so, you just need to add repeat-y to the background image. Now, I don't think that's what you're looking for here, but I wanted to be sure to mention that first just in case. Could you explain what you're looking for in more detail here? You can certainly dynamically resize a div to be the height of it's parent element via jQuery - if that's all you need I'd be happy to explain that one and give an example as well.

[Andy]

@Tarvalon: I interpreted his text to be that he wants the background image to scale with the element it's set to.
And no, that's not possible with CSS2. The only way to achieve that would be to place an img tag and manipulate the width and height.

[Tarvalon]

@Tarvalon: I interpreted his text to be that he wants the background image to scale with the element it's set to.
And no, that's not possible with CSS2. The only way to achieve that would be to place an img tag and manipulate the width and height.

Ahh, that makes more sense. Yeah, Andy's right here unfortunately - an img tag is the only way to get this done that I know of.

[Linda]

I asked this in the forum but I'm sure loads of people could benefit from knowing this: How to make a pure CSS-based dropdown menu that is accessible and can be used without a mouse.

[0udi3]

Hi there,

How do you work at creating a xhtml / css website. Do you have a convenient sequence of work?

Do you have tips for efficient working?

[Andy]

Hi there,

How do you work at creating a xhtml / css website. Do you have a convenient sequence of work?

Do you have tips for efficient working?

What you would want to do is to keep the XHTML source design-agnostic.
The best thing to do is to try to ignore the design in this step and instead focus on the content and adding semantics. I have a consistent structure to all my projects upon which I add additional markup according to individual needs.
You would also want to name IDs and classes according to the content, not the design.
IDs can be used as fragment identifiers (e.g. http://sitename.com/page.html#content).

[Harland]

Hi Chris - what are the benefits of positioning with negative margins over auto margins or floating? As it only seems to complicate matters, I can only see that's it's a hindrance rather than a help.

[Jose]

Hello there,

I'm having trouble doing the following:
designing a liquid page where the bottom half of the content comes on a semi-opaque layer as shown in diagram. Am using a big image so that as people change resolutions they can see more of the image but the content sticks to the same areas

Challenge
When I increase resolution the content band should stick to the bottom only with the same height but width can vary.

Issue
When i added opacity code it makes the content within it also transparent.

what is the best way to achieve this. any help is welcome.
thanks in advance.

J

[Waterdhavian]

Issue
When i added opacity code it makes the content within it also transparent.

What you can do to solve this is to have one "container" div and give that opacity 50% then within that "container" div you make another div with float left, same height and width auto and set that opacity to 100% and that should fix your opacity problem.

The same thing idea with a div within a div can be used to help solve your case.
Make a container div wherein you place the contents block, set the height to the same height of the content box. Position the container box absolute and give the content box's float left.

[Romedia]

I am currently a student learning digital design, i am currently building a web site for my job and my question is for the jQurey slider, where you buttons are set up similar to an i frame but cascade through the frame in a sliding motion. the tutorial i found was a bit advanced is there any way you can explain it for a beginner?

Thanks
Romedia

[dork]

Hi, I'm just wondering what the "zoom: 1" fixes in IE6. Thanks!

[Tarvalon]

Hi, I'm just wondering what the "zoom: 1" fixes in IE6. Thanks!

There are certain things that have to have the property "hasLayout" in order for IE6 to render them properly. Giving an element the style attribute:value zoom:1 gives the element the "hasLayout" property, or more accurately sets that property to Yes, or 1. When this is done, IE6 will suddenly play nicely and kick itself into gear (IE7 also suffers from some similar hasLayout hack-job).

One specific example is simply absolutely positioning at item at the bottom of it's wrapper. Try the following in IE6 and regular browsers:

Code: Select all

<div id="wrapper"><a href="#">Link</a></div>

Code: Select all

#wrapper { position:relative; background:#ccc; width:200px; height:200px; }
#wrapper a { position:absolute; bottom:0; right:0; }

Now change the css to the following:

Code: Select all

#wrapper { position:relative; background:#ccc; width:200px; height:200px; }
#wrapper a { position:absolute; bottom:0; right:0; zoom:1; }

Suddenly IE6 will handle the bottom/right absolute position. Why? Because it "hasLayout". What 'genius' came up with this idea at MS is beyond me, but it's likely because they didn't release the first version with proper positioning support and then "fixed" it in a later patch by giving this positioning through "hasLayout". I hate the IE development team.