...

View Full Version : styling object tag?



donnysobonny
06-04-2012, 02:40 PM
New to this forum, so hi all!

I'm also still relatively new to html and css.


Here's my query. I have an embedded object within my pages. Here is the html location for where the object is:

<div class="art-article">
<p>
<object>

I'm trying to add an element to all of the object within this situation.

I assumed that it would be ".art-article p object {elements}" but that doesn't seem to work.

Apologies for my noobyness, any help will be greatly appreciated.

SeattleMicah
06-04-2012, 06:43 PM
I don't really understand what your asking, but maybe this will help :/



<div id="artArticle">

<p>Blah</p>
<div class="artObject">Whatever your object is</div>

</div

#artArticle {Height:500px;
Width:500px;
margin:0 auto;}

p {font-family:verdana;
font-size:12px;}

.artObject {Height:100px;
width:100%;}

donnysobonny
06-04-2012, 07:02 PM
Hey there,

Thanks for the response.

Not quite, I understand classes and id's reasonably well, it's that I'm trying to define the css for an <object> within a <p> within a <div class="art-article">

So ideally, i'm looking for what I should name the element in the style sheet so that I can specifically define the css.

For example, if you have a specific paragraph ( <p> ) that you want to define css to without effecting other paragraphs, or because you want to give the same style to a bunch of paragraphs, you give the <p> tag a class like so:

<p class="class-name">

to define the class for any paragraph with the class "class-name", you will enter this into your css:

.class-name {elements}


What I am trying to do is to specifically define the css for the <object> tags within a setup like this:

<div class="art-article">
<p>
<object>

So althouth the object is within a <p> which is within a <div> with a class, I am trying to define styling for just the <object>

Hopefully this will be a bit clearer.

Lerura
06-04-2012, 07:09 PM
Then your assumed way of doing it is right.

But it can be that object does not support your styling.
e.g. trying to set the volume for a gif image, or the color for a sound file.

Show us the code and we might be able to help!

SeattleMicah
06-04-2012, 07:09 PM
<div class="art-article">
<p></p>
<object class="whatever"></object>
</div>

css

.whatever {}

donnysobonny
06-04-2012, 07:22 PM
Thanks again,

I am trying to avoid having to add a css class for the video, as it is for a client who is copying the embed code from youtube, and simply pasting the code into the article editor in Joomla (content management based website)

A class would need to be manually entered for the object If I were to do it that way. So i'm trying to define the style for the object just as it is.

Here is the page source code for the article content, the last <p> contains the embedded object. I'm trying to define the css for just the <object> within that article with a border, border radius and box shadow.


<div class="art-article"><p style="text-align: justify;"><span style="font-size: 14pt;">Welcome to my first ever blog! And it's appropriate that it should start on a Monday at the start of a new week. So, what do I usually do on a Monday morning these days? You usually find me at work at my hagwon called Wonderland.</span></p>
<p style="text-align: justify;"><span style="font-size: 14pt;">&nbsp;</span></p>
<p style="text-align: justify;"><span style="font-size: 14pt;">&nbsp;</span></p>
<p><span style="font-size: 14pt;"><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/stories/S6001838.JPG" alt="" height="490" width="399" /></span></p>
<p style="text-align: center;"><span style="font-size: 14pt;"><span style="font-size: 10pt;">The Korean letters here literally say 'Wonderland'</span><br /></span></p>
<p style="text-align: center;"><span style="font-size: 14pt;"><span style="font-size: 10pt;">&nbsp;</span></span></p>
<p style="text-align: center;"><span style="font-size: 14pt;"><span style="font-size: 10pt;"><img src="/images/stories/S6001839.JPG" alt="" height="463" width="347" /></span></span></p>
<p style="text-align: center;"><span style="font-size: 14pt;"><span style="font-size: 10pt;">Wonderland is on the 2nd floor and 'World Boxing, Health and Diet' is on the 3rd floor!<br /></span></span></p>
<p style="text-align: center;"><span style="font-size: 14pt;"><span style="font-size: 10pt;">&nbsp;</span></span></p>
<p style="text-align: center;"><span style="font-size: 14pt;"><span style="font-size: 10pt;"><img src="/images/stories/S6001840.JPG" alt="" height="342" width="456" /></span></span></p>
<p style="text-align: center;"><span style="font-size: 14pt;"><span style="font-size: 10pt;">Side view of the building. Those trees were beautiful with all the cherry blossoms in the spring.<br /></span></span></p>
<p style="text-align: center;"><span style="font-size: 14pt;"><span style="font-size: 10pt;">&nbsp;</span></span></p>
<p style="text-align: center;"><span style="font-size: 14pt;"><span style="font-size: 10pt;"><img src="/images/stories/S6001841.JPG" alt="" height="314" width="419" /></span></span></p>
<p style="text-align: center;"><span style="font-size: 14pt;"><span style="font-size: 10pt;">Looking down the street towards the lovely mountains.<br /></span></span></p>
<p style="text-align: center;"><span style="font-size: 14pt;"><span style="font-size: 10pt;">&nbsp;</span></span></p>
<p><span style="font-size: 14pt;"><span style="font-size: 10pt;"><span style="font-size: 14pt;">First thing on a Monday morning is assembly for the kindergarten children. Julia is playing on her piano. It makes a nice gentle start to the week.</span><br /></span></span></p>
<p><span style="font-size: 14pt;"><span style="font-size: 10pt;"><span style="font-size: 14pt;">&nbsp;</span></span></span></p>
<p><span style="font-size: 14pt;"><span style="font-size: 10pt;"><span style="font-size: 14pt;"><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/stories/S6001836.JPG" alt="" height="524" width="393" /></span></span></span></p>
<p style="text-align: center;"><span style="font-size: 14pt;"><span style="font-size: 10pt;"><span style="font-size: 14pt;"><span style="font-size: 10pt;">I'm not sure what they are doing here but it looks like a wee dance...awwww.</span><br /></span></span></span></p>
<p style="text-align: center;"><span style="font-size: 14pt;"><span style="font-size: 10pt;"><span style="font-size: 14pt;"><span data-mce-bogus="true"><span style="font-size: 10pt;">&nbsp;</span></span></span></span></span></p>
<p style="text-align: center;"><span style="font-size: 14pt;"><span style="font-size: 10pt;"><span style="font-size: 14pt;"><span><span style="font-size: 10pt;"><img src="/images/stories/S6001837.JPG" alt="" height="659" width="492" /></span></span></span></span></span></p>
<p style="text-align: center;"><span style="font-size: 14pt;"><span style="font-size: 10pt;"><span style="font-size: 14pt;"><span><span style="font-size: 10pt;">And, of course, no assembly would be complete without Aegukga, the national anthem of South Korea. Observe the boy in blue (Tommy) not giving a toss about singing. LOL Love those kids. (Front row children from nearest the camera: Sunny, Connie, Nancy, Andy and Jasmine)<br /></span></span></span></span></span></p>
<p style="text-align: center;"><span style="font-size: 14pt;"><span style="font-size: 10pt;"><span style="font-size: 14pt;"><span><span style="font-size: 10pt;">&nbsp;</span></span></span></span></span></p>
<p style="text-align: justify;"><span style="font-size: 14pt;"><span style="font-size: 10pt;"><span style="font-size: 14pt;"><span><span style="font-size: 10pt;"><span style="font-size: 14pt;">And this is what they were singing but I think they only sang the first verse or two. English translation provided on the video.</span><br /></span></span></span></span></span></p>
<p style="text-align: justify;"><span style="font-size: 14pt;"><span style="font-size: 10pt;"><span style="font-size: 14pt;"><span><span style="font-size: 10pt;"><span style="font-size: 14pt;">&nbsp;</span></span></span></span></span></span></p>
<p style="text-align: justify;"><span style="font-size: 14pt;"><span style="font-size: 10pt;"><span style="font-size: 14pt;"><span><span style="font-size: 10pt;"><span style="font-size: 14pt;">&nbsp;</span></span></span></span></span></span></p>
<p style="text-align: center;"><span style="font-size: 14pt;"><span data-mce-bogus="true"><span style="font-size: 10pt;">&nbsp;</span></span></span></p>
<p><object style="display: block; margin-left: auto; margin-right: auto;" data="http://www.youtube.com/v/CceXXXubvdE?version=3&amp;feature=player_detailpage" width="457" height="324" type="application/x-shockwave-flash"><param name="movie" value="http://www.youtube.com/v/CceXXXubvdE?version=3&amp;feature=player_detailpage" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /></object></p> </div>
</div>

Lerura
06-04-2012, 07:29 PM
Well now we know that it is a flash object.

But haven't given us the css that you are trying to apply to it. (Except for that, inline)

And please enclose your code in
by using the # above the editor

SeattleMicah
06-04-2012, 07:32 PM
define it like any styling within html...

<object style="display: block; margin-left: auto; margin-right: auto; border-style:solid;
border-width:5px;"


<object style="display: block; margin-left: auto; margin-right: auto; border-style:solid;
border-width:5px;" data="http://www.youtube.com/v/CceXXXubvdE?version=3&amp;feature=player_detailpage" width="457" height="324" type="application/x-shockwave-flash"><param name="movie" value="http://www.youtube.com/v/CceXXXubvdE?version=3&amp;feature=player_detailpage" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /></object></p> </div>

donnysobonny
06-04-2012, 07:41 PM
the css I want to add to the object in the style sheet (without havint to put it in the html sheet because it is the client who is adding the content to the website, not myself) would be something along these lines:

{
box-shadow: 0px 0px 17px -8px;
border: 5px solid black;
border-radius: 5px 5px 5px 5px;
}

The article editor allows the client to center it and resize it easily so that's all the css that needs to be applied.

The problem I am having, is I don't know what to name the element so that it only and always effects the embedded object.

SeattleMicah
06-04-2012, 07:54 PM
well if you can't give the object a class and don't want to add the style to the html, then you will just have too...



object {border-style:solid;
border-width:5px;
box-shadow: 0px 0px 17px -8px;
border: 5px solid black;
border-radius: 5px 5px 5px 5px;}

and hope those are your only objects within the site.

donnysobonny
06-04-2012, 08:03 PM
absolute genius!

A long journey for such a simple answer huh? :)


Yeah that was the idea, i'm sure that I tried this earlier but I think I might have been connected to the test server rather than the live one!

Either way, that's it sorted, thanks alot for all the help guys!

VIPStephan
06-05-2012, 01:46 AM
Just for additional clarification: The code SeattleMicah provided will style all objects that may exist on your site that way. If you want to be more specific, related to the code you provided earlier, you can do this:


.art-article p object {…}

It styles all object elements that are inside paragraphs that are children of elements with the class name “art-article”. Alternatively this woud work, too:

.art-article object {…}

donnysobonny
06-05-2012, 02:17 AM
That was precicely what I was going for, thanks very much for confirming this!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum