Styling the #clickhere tag in the <p> element is not working.

Question

0.00/5 (No votes)

See more:

I am not able to move the #ClickHere over 200px

<html>
<head>
</head>
<body　bgcolor=grey onload=zoom1()>

-----------------------------------------------------------------------------------
<p id=ClickHere>Click Here</p>
<h1>                          Press F11 to "Full Screen"</h1>
<style>

#ClickHere
{position: absolute;
left: 200px;
font-size: 200%;
}
------------------------------------------------------------------------------------
h1
{
position: absolute;
top:0px;
right: 20px;
}
</style>
<div id="icons" style="position:relative; top: 40px; left: 10px;">
<a href=http://www.rocketeergames.com/site/rcrplay id=RedCrudible target="GameFrame"     id=RedCrucible onclick=resize100();zoom1();>
<img src=http://www.html5gamedevs.com/uploads/monthly_2016_10/250x200_RCR_Icon.jpg.5bbab715ee1cac0f137fc6ab1d292ff7.jpg width=100px height=90px> </a> 
</div>


<div id="icons" style="position:relative; top:40px; left: 0px;">
<a href=http://www.nplay.com/BeGone/   target="GameFrame"       id="BeGone" onclick=resize110();zoom1();>
<img src=http://www.nplay.com/images/screenshots/BeGoneLogo_Alpha.png width=100px height=97px></a>
</div>

<div id="icons" style="position:relative; top:42px; left: 0px;">
<a href=http://www.runescape.com/game-applet   target="GameFrame"   id="runescape" onclick=resize100();zoom1();>
<h2>RuneScape</h2></a>
</div>

<div id="icons" style="position:relative; top: 50px; left: 0px;">
<a href=http://www.cybernations.net target="GameFrame"      id=CyberNations onclick=resize120();zoom1();>
<img src=http://forums.cybernations.net/uploads/monthly_2016_04/5711b1c07f9fa_CNForumsLogo.png.bef9f16bba1b069da85939151be66b88.png width=116px height=72px></a>
</div>

<div id="icons" style="position:relative; top:60px; left:2px;">
<a href=http://www.miniclip.com/games/heli-attack-2/en/   target="GameFrame"     id="HelliAttack2"     onclick=resize80();zoom2();>
<img src=http://allheliattackgames.com/Heli%20attack%202.jpg width=116px height=72px></a></div>

<div id="icons" style="position:relative; top:70px; left:0px;">
<a href=http://www.littlewargame.com/play/   target="GameFrame"   id="LittleWarGame" onclick=resize115();zoom1();>
<img src=https://lh3.ggpht.com/3moSQ5RdwQj2yRGiFJ6Q9mVAebyD8iXiTut6B08vz7-y1c6WlMk9nXdAw5wRzT3n3g=h900 width=120px height=85px></a>
</div>


<div id="icons" style="position:relative; top:80px; left: 0px;">
<a href=http://www.drakensang.com/   target="GameFrame"      id="Drakensang" onclick=resize100();zoom1();>
<img src=http://www.giga.de/wp-content/uploads/2014/12/drakensang-online-titelbild.jpeg width=118px height=75px></a>
</div>

<div id="icons" style="position:relative; top:90px; left: 0px;">
<a href=http://www.realmofthemadgod.com/   target="GameFrame"    id="RealmOfTheMadGod">
<img src=http://i.imgur.com/oo7ZNVs.jpg?1 width=118px height=75px></a>
</div>




<div id="icons" style="position:absolute; top:60px; right:20px;">
<a href=http://www.agar.io   target="GameFrame" id="Agario"                                               onclick="return resize100()";>
<img src=https://lh3.googleusercontent.com/P-7CZ6UljBidkrQnoCe8I4V_p3g7-GqrnwvqLyDa25aeojHSm7NRMLoNcAfnGdk0wV8=w300 width=100px height=90px></a></div>

<div id="icons" style="position:absolute; top:155px; right:12px;">
 <a href=http://play.treasurearena.com/   target="GameFrame" id="TreasurArena" onclick=resize100();zoom1();>
 <img src=http://www.mxplay.net/images_new/TreasureArena.png width=115px height=85px></a>
 </div>

<div id="icons" style="position:absolute; top:245.2px; right:16px;">
<a href=http://www.thewayoftheninja.org/nv2.html target="GameFrame"    id="thewayoftheninja" onclick=resize100();zoom1();>
<img src=http://www.thewayoftheninja.org/images/n%2B_XBLA_15.gif width=100px height=70px></a>
</div>


<div id="icons" style="position:absolute; top:320px; right:17px;">
<a href=http://www.miniclip.com/games/fancy-pants-adventure-2/en/focus/ target="GameFrame"    id="FancyPants" >
<img src=http://2.bp.blogspot.com/-GiFRJojNewE/VD2FJ-B6N6I/AAAAAAAAEOI/0iIbLnNPiW0/s1600/FancyPantsAdventureWorld3.png id=Fancy width=102px height=66px onclick=resize80();zoom13();>
</a></div>


<script>
function zoom1() {
    document.getElementById("HCB_comment_box").style.transform = "scale(.5)";
}
</script>



 <div id="HCB_comment_box" style="position:absolute; top:150px; right:35%;">

<a href="http://www.htmlcommentbox.com">HTML Comment Box</a> is loading comments...</div>
 <link rel="stylesheet" type="text/css" href="http://www.htmlcommentbox.com/static/skins/default/skin.css" />
 <script type="text/javascript" language="javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={  };} (function(){s=document.createElement("script");s.setAttribute("type","text/javascript");s.setAttribute("src", "http://www.htmlcommentbox.com/jread?page="+escape((window.hcb_user && hcb_user.PAGE)||(""+window.location)).replace("+","%2B")+"&opts=470&num=10");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
 </div>
</body>
</html>

What I have tried:

<html>
<head>
</head>

<body　bgcolor=grey onload=zoom1()>
<p id=ClickHere>Click Here</p>
<h1>                          Press F11 to "Full Screen"</h1>
<style>

#ClickHere
{position: absolute;
left: 200px;
font-size: 200%;
}

h1
{
position: absolute;
top:0px;
right: 20px;
}
</style>

Posted 6-Mar-17 11:08am

Jacob Law

Updated 6-Mar-17 16:15pm

OriginalGriff

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Graeme_Grant · Answer 1 · 2017-03-06T15:19:00

CSS

<style>

#ClickHere
{position: absolute;
left: 200px;
font-size: 200%;
}
------------------------------------------------------------------------------------
h1
{
position: absolute;
top:0px;
right: 20px;
}
</style>

Belongs the <head>...</head> section and not the <body>...</body>. Also, html is interpreted top down, so if style was allowed after, it would not apply backwards.

Bryian Tan · Answer 2 · 2017-03-06T16:15:00

I think the HTML look OK. Only issue I noticed is there is a ascii character in the #clickhere style, refer to the image.

p style ascii char[^]

You should see the ascii character in JSFiddle. The style works after removing the ascii character.

p style without ascii code[^]

p style WITH ascii code (Not working)[^]

I would also suggest to follow @Graeme_Grant recommendation to arrange the HTML tag accordingly.

Styling the #clickhere tag in the <p> element is not working.

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0