Hello all,
I'm trying to make a certain video responsive.
width: 100% or max-width:100% and height: auto; will do.
Now, the problem is, in order to maintain the aspect ratio, if the screen is to
wide, the height is so height that we will have a scroll, hence, not being able
to see the video
On Oct 18, 2012, at 13:06 , mem wrote:
Hello all,
I'm trying to make a certain video responsive.
width: 100% or max-width:100% and height: auto; will do.
Now, the problem is, in order to maintain the aspect ratio, if the screen is
to wide, the height is so height that we will have a
Le 18 oct. 2012 à 21:06, mem talofo.l...@gmail.com a écrit :
Is there a way that you may know about, so that we can archive something like
this
video {
max-width: 100%;
height: auto;
}
BUT avoiding the scroll bar to appear, without using overflow:hidden; ?
i don't really understand.
i don't really understand. Are you constraining the height somewhere else ?
I believe not. But perhaps that is what I should do ?
This works perfectly fine in my test:
div { border: 2px solid red; max-width: 85%; }
video { max-width: 100%; height: auto; width: 100%; }
The video
I had a problem with the video aspect ratio that make me doubt of css and html.
The problem however was within the aspect ratio and NOT html and css.
To cut the story short:
height: auto;
max-width: 100%;
do the job perfectly.
I will pushing myself severely.
Regards,
mem
Are yo using iframe or obj tag?
See it works Ok here w/o those
http://webdesignerwall.com/demo/elastic-videos/html5-video.html
Check this out, it may help to solve your problem
http://webdesignerwall.com/tutorials/css-elastic-videos
Hakan Kirkan
IT Manager
http://miamirealestateinc.com
Miami /
Let's say we have following code:
div id=box/div
#box {
resize: both;
overflow: auto;
background: #ccc;
width: 500px;
height: 500px;
min-width: 100px;
min-height: 100px;
}
It turns out that specified min-height and min-width values are
completely ignored and instead min-width is
On Apr 27, 2011, at 7:52 PM, Jarek Foksa wrote:
div id=box/div
#box {
resize: both;
overflow: auto;
background: #ccc;
width: 500px;
height: 500px;
min-width: 100px;
min-height: 100px;
}
It turns out that specified min-height and min-width values are
completely ignored and
But then you specify the resize property. I'm not sure what should
happen in this case. Gecko 2.0+ allow resizing downwards,
until the minimum size is reached. Webkit doesn't allow resizing.
I have just tried Firefox 4 and indeed it works as expected there. So
this seems to be Webkit-specific
Under what circumstances might a container that has min-width set not
grow beyond the size of min-width?
Chris Barth
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ --
On 12/08/2009, at 6:59 AM, Christopher Barth wrote:
Under what circumstances might a container that has min-width set not
grow beyond the size of min-width?
I'm not sure exactly what you mean by this question. Do you mean -
what are some possible reasons as to why an element that you
Under what circumstances might a container that has min-width set not
grow beyond the size of min-width?
If the container doesn't need to grow beyond min-width.
To put that answer in the context of your previous question, browsers would
rather expand down than out. If an item can wrap, it
John wrote:
in a effort to make sure that my top banner is endless, no matter how
big the monitor, I've set a min-width value of 4000 pixels.
is that considered bad coding? what do other people do?
thanks!
John
Is there a reason that width: 100% wouldn't work? It seems like a
in a effort to make sure that my top banner is endless, no matter how
big the monitor, I've set a min-width value of 4000 pixels.
is that considered bad coding? what do other people do?
thanks!
John
__
css-discuss [EMAIL
John wrote:
in a effort to make sure that my top banner is endless, no matter how
big the monitor, I've set a min-width value of 4000 pixels.
is that considered bad coding?
Strange, at least :-)
Sounds like that banner will create a horizontal scrollbar even on my
3840 wide monitors.
what
Sophie Dennis wrote:
IE6 treats width as min-width
No it doesn't. This is a common myth. IE treats height like min-height,
but not width like min-width. Case in point: make a page with a div with
a red background. Give it min-width 500px. Observe that in Firefox the
div will grow to fill the
Zoe M. Gillenwater wrote:
Sophie Dennis wrote:
IE6 treats width as min-width
No it doesn't. This is a common myth. IE treats height like min-height,
but not width like min-width. Case in point: make a page with a div with
a red background. Give it min-width 500px. Observe that in
Sophie Dennis wrote:
In fact, isn't this the same as height/min-height? It isn't that
height in IE6 is *the same as* min-height. It's that IE will expand a
box to fit its content, regardless of height/width specified. So in
IE6 height: 500px won't give the same effect as height: 100%;
If you save out the following code and view locally, you'll see in Firefox a
min-width (red border) on certain li class=userchoices bullets. This is
what I'm after. If you open in IE 6, that min-width is not recognized.
Is there a way to have min-width in IE 6 without resorting to basically
Magenta Placenta wrote:
If you save out the following code and view locally, you'll see in
Firefox a min-width (red border) on certain li class=userchoices
bullets. This is what I'm after. If you open in IE 6, that min-width
is not recognized.
Is there a way to have min-width in IE 6
Shelly wrote:
Hey all -
I'm in need of some help here. I'm working on a site that I need to
have a minimum width of 960px, and a max-width of 1280px - centered
horizontally on the screen and with 3 columns. (If I can also
accomplish a sticky footer, that's be awesome, as well - not
Zoe M. Gillenwater wrote:
I have never in my whole life been able to get those IE expressions
to work, strangely. So I recommend just using JavaScript.
Properly written and implemented IE expressions work every time at my end.
IE expressions are based on javascript, but disguised as CSS.
I'm sorry - I always forget that on this list, you have to reply ALL
to get it out to the list. I need to stamp this on my forehead or
something.
Thanks for the advice - Georg's conditional comment/expression thing
worked like a charm. Zoe - I was having the same problem - the
expression
Gunlaug Sørtun wrote:
Zoe M. Gillenwater wrote:
I have never in my whole life been able to get those IE expressions
to work, strangely. So I recommend just using JavaScript.
Properly written and implemented IE expressions work every time at my end.
Good for you. :-) Like I
Hey all -
I'm in need of some help here. I'm working on a site that I need to
have a minimum width of 960px, and a max-width of 1280px - centered
horizontally on the screen and with 3 columns. (If I can also
accomplish a sticky footer, that's be awesome, as well - not
necessary, but I have
Shelly wrote:
Would anyone have a tutorial or example or something that could point me
in the right direction for this?
Think so :-)
http://www.gunlaug.no/contents/wd_additions_14.html
regards
Georg
--
http://www.gunlaug.no
Can you post an example so we can gt a look at your page?
--
Jono Young
Designer | Developer | Illustrator
Charleston Web Solutions
Bringing Higher Standards to the Lowcountry
http://www.charlestonwebsolutions.com/
__
On 6/22/06, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Tom Livingston wrote:
Your expression is still triggered by a fixed pixel-width, and doesn't
pick up and recalculate the trigger-point based on the browser's default
font-size.
Try this...
#wrapper {
Listers,
I am using this for min-width in IE:
#wrapper{width:expression(document.body.clientWidth 800 ?
799px : 100% );}
If I use ems (50ems) in place of the 799px, IE has a heart attack if I
scale the text up at the min-width.
In FF, at the min-width, I scale up the text and the layout
Tom Livingston wrote:
I am using this for min-width in IE:
#wrapper{width:expression(document.body.clientWidth 800 ? 799px :
100% );}
If I use ems (50ems) in place of the 799px, IE has a heart attack if
I scale the text up at the min-width.
I'm not surprised :-)
Pixels and ems don't
Guillaume wrote:
Does *min-width* behave the same way as min-height in standard friendly
browsers and in Ie, meaning:
min-width = min-width in standard friendly browsers
min-width = width in Ie.
No. You can test this yourself by creating a test page and playing with
it in FF, Opera, and
Hi list,
Does *min-width* behave the same way as min-height in standard friendly
browsers and in Ie, meaning:
min-width = min-width in standard friendly browsers
min-width = width in Ie.
Thanks.
Guillaume.
__
css-discuss
Michael Hulse wrote:
Oh, I also just found this:
(Gunlaug's IE-expressions in CSS)
http://www.gunlaug.no/contents/wd_1_02_01.html#item3
Unless you prefer to put IE6 in quirks mode (like I do most of the time)
then you may be better of with a version that works in both Strict and
quirks
: Re: [css-d] Min-width/Max-width: IE PC/IE Mac too?
Michael Hulse wrote:
Oh, I also just found this:
(Gunlaug's IE-expressions in CSS)
http://www.gunlaug.no/contents/wd_1_02_01.html#item3
Unless you prefer to put IE6 in quirks mode (like I do most of the
time)
then you may be better
Al Sparber wrote:
As a point of information, we've had this page floating around a long
time: http://www.projectseven.com/csslab/testing/minmax/cssp5.htm
I've ran some of your solutions earlier, and found them a bit slow and
jerky. No such problems with this one though - it worked really
From: Gunlaug Sørtun [EMAIL PROTECTED]
Al Sparber wrote:
As a point of information, we've had this page floating around a
long
time: http://www.projectseven.com/csslab/testing/minmax/cssp5.htm
I've ran some of your solutions earlier, and found them a bit slow
and
jerky. No such
I'm trying to create 3 divs that sit next to each other if there's room
and who move to the next line if there's not. I originally set a
width: 31% on them which worked great until I put a file upload input
inside. The text and headings still obey the width, but of course the
input does not.
CJ Larson wrote:
I'm trying to create 3 divs that sit next to each other if there's
room and who move to the next line if there's not. I originally set
a width: 31% on them which worked great until I put a file upload
input inside. The text and headings still obey the width, but of
course
Hello,
Example code:
---snip---
#mainContainer {
min-width: 500px; /* IE doens't understand this property. */
/* IE Dynamic Expression to set the width: */
width:expression(document.body.clientWidth 500 ? 500px : 100% );
}
---/snip---
On 12/1/05, Michael Hulse [EMAIL PROTECTED] wrote:
2. Should I be worried about the above expression breaking in IE7?
If you are, use a conditional comment, [if lte IE 6]
3. How would I get min-width and max-width to work in IE/Mac? The
above expression appears to have no
On Dec 1, 2005, at 11:37 PM, Christian Montoya wrote:
I think you are the best judge of that.
Thanks for the response Christian, I really appreciate your time. :)
I probably should not worry about IE/Mac, but I do (I am a Mac guy, and
I also like the feeling of having my CSS look good in that
I've been trying to get a minimum width on my page.
I'm having a problem with IE MAC Windows; what I thought would work
on IE Windows doesn't seem to be working [I know what I wrote is giving
me a fixed window; its just to help to see if the coding is working].
body {
height: 100%;
On Tue, 12 Jul 2005 12:13:51 -0400, Michael Cassidy wrote:
I've been trying to get a minimum width on my page.
I'm having a problem with IE MAC Windows; what I thought would
work on IE Windows doesn't seem to be working [I know what I wrote
is giving me a fixed window; its just to help to
Michael Cassidy wrote:
I've been trying to get a minimum width on my page.
I'm having a problem with IE MAC Windows; what I thought would work
on IE Windows doesn't seem to be working [I know what I wrote is
giving me a fixed window; its just to help to see if the coding is
working].
44 matches
Mail list logo
