I need coding help

[gilbertvonwoof]

Can Someone please code this

[gilbertvonwoof]

This is what I have tried 

 

<div style="position: absolute; top: 0px; left: 0px;"><img src="http://i.postimg.cc/BZg15fJj/Untitled13-20211024143921.png"></div>
<div id="blog">
<div class="header">About Me</div>
This layout was made by Del of <a href="http://www.neopets.com/~suprficial_007kau">NFW</a>. Put more about yourself here!Text here! Text here! Text here! Text here! Text here! Text here! Text here! Text here! Text here! Text here!
Text here!Text here! Text here! Text here! Text here! Text here! Text here! Text here!Text here! Text here! Text here!
<p>

</p><div class="header">More?</div>

Text here! Text here! Text here! Text here! Text here! Text here! Text here! Text here! Text here! Text here!
Text here!Text here! Text here! Text here! Text here! Text here! Text here! Text here!Text here! Text here! Text here!
Text here! Text here! Text here! Text here! Text here!Text here! Text here! 
<p>

</p><div class="header">Neo Status</div>
Neomail: Open<br>
Neofriend Request: Only if I know you<br>
Guild Invites: Close<br>
Battledome Challenges: Close<br></div>

<style>
body {
    background: url("http://www.neo-faeriewings.com/userlookups/neggfaerie2look2.jpg");
}
#content a b, a:link, a:visited {
    color: #9E0E32;
}
#content a:hover, a:hover, #content b:hover {
    color: #FF66CC;
    text-decoration: none;
}
td, p, body {
    color: #3B4510;
    font: 8pt verdana;
}
#footer, hr, #nst, .contentModuleHeader, .contentModuleHeaderAlt, #ban, #ncmall, #habitarium, #pushdown_banner {
    display: none;
}
.nav_image img {
    margin-left: -5px;
}
#navigation {
    position: absolute;
    top: 100px;
    left: 262px;
    z-index: 5;
    width: 698px;
    height: 0px;
}
ul.dropdown {
    border: 1px dotted #3E5B00;
    background-color: #C8DE61;
}
#main a, a b {
    color: #3E5B00;
}
#main a:hover, a b:hover {
    color: #99CC00;
}
.contentModule, .contentModuleTable, .contentModuleContent, #header, #main {
    border: none;
    background: none;
}
#main {
    margin-top: 0px;
    margin-left: 0px;
}
.contentModule b, .contentModule img {
    visibility: visible;
}
#userinfo .contentModuleTable {
    position: absolute;
    top: 231px;
    left: 256px;
    width: 290px;
    height: 295px;
}
#usercollections .contentModuleTable {
    position: absolute;
    left: 45px;
    top: 604px;
    width: 286px;
    height: 309px;
}
#usershop .contentModuleTable {
    position: absolute;
    left: 665px;
    top: 568px;
    width: 239px;
    height: 303px;
}
#userneohome .contentModuleTable {
    position: absolute;
    left: 388px;
    top: 571px;
    width: 239px;
    height: 303px;
}
#userneopets .contentModuleTable {
    position: absolute;
    left: 30px;
    top: 977px;
    width: 889px;
    height: 198px;
}
#usertrophies .contentModuleTable {
    position: absolute;
    left: 34px;
    top: 1245px;
    width: 887px;
}
.header {
    color: #F5FAAD;
    padding: 2px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    font-size: 15px;
    background: #6B8C00;
}
#userneopets img {
    width: 100px;
    height: 100px;
}
#blog {
    position: absolute;
    top: 254px;
    left: 591px;
    width: 219px;
    height: 262px;
    overflow: auto;
}
</style>

 

I tried reverse engineering

This post has been edited by a member of staff (Duma) because of a violation of the forum rules.
Please don't double post. Use the 'Edit' button or Multi Quote to reply to more than one post at once.
Per the reason above, please review our SPAM rules.

[Nielo]

I think the problem might be that the image you're using (http://i.postimg.cc/BZg15fJj/Untitled13-20211024143921.png), has been uploaded to an image hosting site, and therefore might have different dimensions than the original one from http://www.neo-faeriewings.com/userlookups.php.

If I try your code in the Tryit Editor from W3Schools, and use the image link of one of the user lookups I got from the URL above, it works just fine, but if I use the post image link you've been using (while making no other changes), the image appears to be quite a bit smaller, which is why the text isn't aligned with the sections on the image.

I suggest using the contact page of neo-faeriewings to get in touch with the person who created the user lookup design. Perhaps they've got the original image, or they can suggest which dimensions the image should be.

[gilbertvonwoof]

29 minutes ago, Nielo said:

I think the problem might be that the image you're using (http://i.postimg.cc/BZg15fJj/Untitled13-20211024143921.png), has been uploaded to an image hosting site, and therefore might have different dimensions than the original one from http://www.neo-faeriewings.com/userlookups.php.

If I try your code in the Tryit Editor from W3Schools, and use the image link of one of the user lookups I got from the URL above, it works just fine, but if I use the post image link you've been using (while making no other changes), the image appears to be quite a bit smaller, which is why the text isn't aligned with the sections on the image.

I suggest using the contact page of neo-faeriewings to get in touch with the person who created the user lookup design. Perhaps they've got the original image, or they can suggest which dimensions the image should be.

I made the image myself i was using their code as a base  for I dont know how to do it myself 

[Nielo]

On 10/25/2021 at 7:42 PM, gilbertvonwoof said:

I made the image myself i was using their code as a base  for I dont know how to do it myself 

Ah, okay. I assumed it was made by neo-faeriewings, as the tag with the background image still used one of their images.

Either way, I think the dimensions of the image are key here, as the image currently isn't big enough to fill the page and accommodate all the info on the user lookup. It's possible to play with the size of the 'about me' section, as the text is included in the code you shared, but - as far as I can tell (I've never tried to make a user lookup before) - there's a limit to how small the 'user info' text + image can get.

I've altered the #blog CSS to make it fit into the 'about me' section on your image:

#blog {
    position: absolute;
    top: 160px;
    left: 370px;
    width: 170px;
    height: 175px;
    overflow: auto;
}

But I think you're going to need a bigger image to make the existing content of the user lookup fit properly.

(I played around with the values of #userinfo by using the preview section of my own user lookup, and it's possible to alter top and left to get it in the correct spot, but no matter how small I made the width and height, at a certain point the content just wouldn't shrink any further, so I couldn't get it to fit into the 'user info' section on your image.)

Oh, and I think the background image (for which you're currently using the neo-faeriewings image: background: url("http://www.neo-faeriewings.com/userlookups/neggfaerie2look2.jpg");) needs to be altered as well, as it needs to align with the border of the 'my trophies' section, and match the colours of this section and the background. (For reference, see this image from neo-faeriewings, which has the user lookup picture, and this matching background image.)

 

Sorry I can't be of more help; my HTML/CSS knowledge is fairly limited, and my image design skills are nonexistent.

[gilbertvonwoof]

Thankyou very much for the help you gave.