HTML - CSS: Styling <object>?
If my div container has this:
<div id="container"><img开发者_运维百科 src...
I can style the image by this:
CSS
#container img{ ... }
For object tag
<div id="container"><object ...
How do I address it? I tried this:
CSS
#container object{ width: 100px; }
But it does not work.
Assume the I cant define "id" or "class" for the object tag
I am using tinymce to embed to youtube video. And the code will be rendered like this:
<div id="container">
...
<div id="content">
<p>
<object width="435" height="350" type="application/x-shockwave-flash" data="http://www.youtube.com/v/l9caxMr9RgY">
<param value="http://www.youtube.com/v/XXXXXX" name="src"></object>
</p>
</div>
</div>
You already add size and width to the object style="width: 100px; height: 100px;"
Example
An object tag can be styled using CSS. Ref link text
The reason width didn't work in your example is that its a HTML attribute only and not accessible with CSS (see list in link above).
I would recommend that you put the object into a wrapper div (give the object a width of 100%) and control the width of the wrapper div with css.
You can assign an id or class for the object tat, that is perfectly correct. If you want the object to adapt to the width of its parent, just set its width to 100%. If you are using the <object> to embed flash, set the width for the <embed> tag also.
To include text, this worked for me in Firefox 43.0. There are 3 files:
test.html:
<html><head>
<link type="text/css" rel="stylesheet" href="test.css" media="all" />
</head><body>
<h3>Test</h3>
<object type="text/html" data="include.html"></object>
</body></html>
test.css:
object {width:24em;margin-top:-1em;}
.included {background-color:#ffe;font-size:12px;font-family:'Droid Serif';}
include.html - to format text inside the object, tags (like these) seem to be necessary:
<link type="text/css" rel="stylesheet" href="test.css" media="all" />
<div class="included">
Your included text here...
</div>
加载中,请稍侯......
精彩评论