How do I have the CSS control only the [a style] part? And how would I set that up?

[asasass]

How do I have the CSS control only the [a style] part? And how would I set that up?

}
div.two{
color:#000000; 
display:inline-block; 
cursor:pointer;
width: 88px; 
height: 24px;
background-color:#E2AB58;
border-left: 89px solid #00ffff;
border-right: 89px solid #ff00ff;
border-radius: 50px;

}

 <div style="width:300px"` onclick='myObject=document.getElementById(&apos;myObj&apos;);  myObject.style.display=&apos;block&apos;; this.style.display=&apos;none&apos;' style='width:300px'>

[i tried using div class here instead of [a style] but it wouldn’t work]

<div class='two'>
                    </div>

`<a style='display:inline-block; width: 88px; height: 24px; cursor: pointer; background-color:#ffffff; color:#000000;  border-left: 89px solid #00ffff;border-right: 89px solid #ff00ff;border-radius: 50px;'> </a></div>`


    <div id='myObj' style='display: none;'>
    <object data='' height='24' id='player1' type='application/x-shockwave-flash' width='300'>
    <param name='movie' value=''/>
    <param name='bgcolor' value='#000000'/>
    <param name='width' value='300'/>
    <param name='height' value='24'/>
    <param name='quality' value='high'/>
    <param name='menu' value='false'/>
    <param name='wmode' value='opaque'/>
    <param name='allowfullscreen' value='false'/>
    <param name='allowscriptaccess' value='always'/>
    <param name='flashvars' value='file=http:'/></object>
    </div>

[TechnoBear]

I’m not sure I understand what you’re asking. You can (and should) remove the inline styles from the <a> tag and place them in an external style sheet.

Are you using some kind of WYSIWYG editor which is creating these inline styles? I’m bemused as to why you’re still using them when they’re clearly causing you problems, and it’s been explained to you multiple times that it’s bad practice.

[asasass]

I’m just trying to get this part controlled by the CSS, that’s all.

`<a style='display:inline-block; width: 88px; height: 24px; cursor: pointer; background-color:#ffffff; color:#000000;  border-left: 89px solid #00ffff;border-right: 89px solid #ff00ff;border-radius: 50px;'> </a></div>`

[TechnoBear]

Well, as I said, just move those rules out of the <a> tag and into the stylesheet.

[asasass]

I tried doing it this way and it wouldn’t work:

 <div style="width:300px"` onclick='myObject=document.getElementById(&apos;myObj&apos;);  myObject.style.display=&apos;block&apos;; this.style.display=&apos;none&apos;' style='width:300px'>

    <div class='two'>
                    </div>

    <div id='myObj' style='display: none;'>
    <object data='https://googledrive.com/host/0B0xSChaP7F1oZUNod21IUDA3Qm8' height='24' id='player1' type='application/x-shockwave-flash' width='300'>
    <param name='movie' value='https://googledrive.com/host/0B0xSChaP7F1oZUNod21IUDA3Qm8'/>
    <param name='bgcolor' value='#000000'/>
    <param name='width' value='300'/>
    <param name='height' value='24'/>
    <param name='quality' value='high'/>
    <param name='menu' value='false'/>
    <param name='wmode' value='opaque'/>
    <param name='allowfullscreen' value='false'/>
    <param name='allowscriptaccess' value='always'/>
    <param name='flashvars' value='file=http://hi5.1980s.fm/;stream.mp3'/></object>
    </div>

[asasass]

And I get this error: Error parsing XML, line 90, column 11: The element type “div” must be terminated by the matching end-tag “”.

[TechnoBear]

Sorry, but that code makes no sense in relation to your question, as it contains neither an <a> tag nor any CSS.

[asasass]

}
div.two{
color:#000000; 
display:inline-block; 
cursor:pointer;
width: 88px; 
height: 24px;
background-color:#E2AB58;
border-left: 89px solid #00ffff;
border-right: 89px solid #ff00ff;
border-radius: 50px;

}

---

 <div style="width:300px"` onclick='myObject=document.getElementById(&apos;myObj&apos;);  myObject.style.display=&apos;block&apos;; this.style.display=&apos;none&apos;' style='width:300px'>

    <div class='two'>
                    </div>

    <div id='myObj' style='display: none;'>
    <object data='' height='24' id='player1' type='application/x-shockwave-flash' width='300'>
    <param name='movie' value=''/>
    <param name='bgcolor' value='#000000'/>
    <param name='width' value='300'/>
    <param name='height' value='24'/>
    <param name='quality' value='high'/>
    <param name='menu' value='false'/>
    <param name='wmode' value='opaque'/>
    <param name='allowfullscreen' value='false'/>
    <param name='allowscriptaccess' value='always'/>
    <param name='flashvars' value='file=http:'/></object>
    </div>

[TechnoBear]

That also has nothing at all to do with a link, which is the subject of this thread, so you’ll need to explain the reason you’re posting it.

[asasass]

The a style is part of onclick.

[TechnoBear]

In your first post, you had an < a> tag, with inline styles. You said you were trying to style it with CSS, and I told you how to do that. Now you’ve removed that tag.

I don’t understand what you mean by “the a style is part of onclick”. You can’t style an element that doesn’t exist. What exactly are you trying to do? Create and style a link which, when clicked, will display the hidden content in #myObj?

[ronpat]

It would be helpful to humans if the code were uniformly formatted. It would be easier to read.

The currently posted code is not balanced. There is a stray </div> tag near the top and stray backticks around the anchor line.

After editing out the stray <div> tag and stray backticks and putting the code into a “working page”, it looks like this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/how-do-i-have-the-css-control-only-the-a-style-part-and-how-would-i-set-that-up/228441
asasass
Jun 26, 5:00 PM
-->
    <style type="text/css">
    </style>
</head>
<body>

<div class='two'>
    <a style='display:inline-block; width: 88px; height: 24px; cursor: pointer; background-color:#ffffff; color:#000000;  border-left: 89px solid #00ffff;border-right: 89px solid #ff00ff;border-radius: 50px;'> </a>
</div>
<div id='myObj' style='display:none;'>
    <object data='' height='24' id='player1' type='application/x-shockwave-flash' width='300'>
        <param name='movie' value=''/>
        <param name='bgcolor' value='#000000'/>
        <param name='width' value='300'/>
        <param name='height' value='24'/>
        <param name='quality' value='high'/>
        <param name='menu' value='false'/>
        <param name='wmode' value='opaque'/>
        <param name='allowfullscreen' value='false'/>
        <param name='allowscriptaccess' value='always'/>
        <param name='flashvars' value='file=http:'/>
    </object>
</div>

</body>
</html>

This is useful because I can open this page in my browser and see what it is supposed to look like.

Next, the question of the day is “How do I remove the inline styles from the anchor tag” - at least that’s what it sounded like to me.

The next step is to cut and paste the inline styles from the anchor into the head of the page between <style> tags; then add the a selector and curly braces around the CSS styles.

Open the new page in the browser and it should look exactly like the first version.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/how-do-i-have-the-css-control-only-the-a-style-part-and-how-would-i-set-that-up/228441
asasass
Jun 26, 5:00 PM
-->
    <style type="text/css">
body {background-color:#aaa;}

a {
    display:inline-block;
    width:88px; 
    height:24px;
    cursor:pointer;
    background-color:#ffffff;
    color:#000000;
    border-left:89px solid #00ffff;
    border-right:89px solid #ff00ff;
    border-radius:50px;
}
    </style>
</head>
<body>

<div class='two'>
    <a></a>
</div>
<div id='myObj' style='display:none;'>
    <object data='' height='24' id='player1' type='application/x-shockwave-flash' width='300'>
        <param name='movie' value=''/>
        <param name='bgcolor' value='#000000'/>
        <param name='width' value='300'/>
        <param name='height' value='24'/>
        <param name='quality' value='high'/>
        <param name='menu' value='false'/>
        <param name='wmode' value='opaque'/>
        <param name='allowfullscreen' value='false'/>
        <param name='allowscriptaccess' value='always'/>
        <param name='flashvars' value='file=http:'/>
    </object>
</div>

</body>
</html>

This example explains once again how to remove inline styles from elements and into CSS styles in the head of the page or into a local stylesheet. The pattern is always the same.

Now the big question remaining for you to answer is WHY do you want to so this? especially since you seem to be dedicated to inline styles and deprecated HTML code?

WHY?

[asasass]

This code

   <div class='two'>
                    </div>

[was in-place of the code below]

<a style="display:inline-block; width: 88px; height: 24px; cursor: pointer; background-color:#ffffff; color:#000000; 
border-left: 89px solid #00ffff;border-right: 89px solid #ff00ff;border-radius: 50px;"> </a>
</div>

[TechnoBear]

I asked what you are trying to achieve with that code. You haven’t answered that.

[asasass]

Using CSS to implement the style instead of posting the style in html.

[TechnoBear]

@asasass

Using CSS to implement the style

Yes - but the style of what?

Originally, you said you wanted to style the <a> element using CSS. I gave you instructions for doing this, and @ronpat has since posted a step-by-step tutorial. However, you did not leave the <a> tag in situ and move the styling to the CSS, as per your original question. For some reason, you replaced the <a> tag with an empty <div>. I didn’t suggest that at any point, so I need to understand why you did it.

More importantly, I need to know what it is you want this code to achieve, because at the moment, I don’t understand it, from the excerpt you’ve posted.

@TechnoBear

I don’t understand what you mean by “the a style is part of onclick”. You can’t style an element that doesn’t exist. What exactly are you trying to do? Create and style a link which, when clicked, will display the hidden content in #myObj?

I also asked

@TechnoBear

Are you using some kind of WYSIWYG editor which is creating these inline styles? I’m bemused as to why you’re still using them when they’re clearly causing you problems, and it’s been explained to you multiple times that it’s bad practice.

and again, you ignored that. Please answer it.

If you want help on these forums, then I strongly suggest that you answer questions when other members ask. This is not idle curiosity on our part; it’s a genuine attempt to gather relevant information in order to offer the most constructive assistance we can.

[asasass]

I’m not presently working on this code, but I would very much like to know the answer.

[TechnoBear]

@asasass

I would very much like to know the answer.

And we would very much like to know the question, so it seems we are at an impasse.

Your original question, regarding moving the styles away from the <a> tag and into the CSS, has now been answered several times. In the absence of any information about the apparent new question, there is nothing we can do to help.