Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    44
    Thanks
    0
    Thanked 8 Times in 8 Posts

    styling object tag?

    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.

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    I don't really understand what your asking, but maybe this will help :/

    PHP Code:
    <div id="artArticle">

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

    </
    div

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

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

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

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    44
    Thanks
    0
    Thanked 8 Times in 8 Posts
    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.

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    945
    Thanks
    0
    Thanked 129 Times in 128 Posts
    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!

  • #5
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    PHP Code:
    <div class="art-article">
    <
    p></p>
    <
    object class="whatever"></object>
    </
    div>

    css

    .whatever {} 

  • #6
    New Coder
    Join Date
    Jun 2012
    Posts
    44
    Thanks
    0
    Thanked 8 Times in 8 Posts
    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.

    Code:
    <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>
    Last edited by VIPStephan; 06-05-2012 at 12:42 AM. Reason: added code BB tags

  • #7
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    945
    Thanks
    0
    Thanked 129 Times in 128 Posts
    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 [CODE][/CODE] by using the # above the editor

  • #8
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    define it like any styling within html...

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

    PHP Code:
    <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

  • #9
    New Coder
    Join Date
    Jun 2012
    Posts
    44
    Thanks
    0
    Thanked 8 Times in 8 Posts
    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.

  • #10
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    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...

    PHP Code:
    object {border-style:solid;
    border-width:5px;
    box-shadow0px 0px 17px -8px;
    border5px solid black;
    border-radius5px 5px 5px 5px;} 
    and hope those are your only objects within the site.

  • #11
    New Coder
    Join Date
    Jun 2012
    Posts
    44
    Thanks
    0
    Thanked 8 Times in 8 Posts

    Thumbs up

    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!

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,662
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    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:
    Code:
    .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:
    Code:
    .art-article object {…}

  • #13
    New Coder
    Join Date
    Jun 2012
    Posts
    44
    Thanks
    0
    Thanked 8 Times in 8 Posts

    Thumbs up

    That was precicely what I was going for, thanks very much for confirming this!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •