HomeHome  SearchSearch  Rules & Guidelines  Staff List  MemberlistMemberlist  RegisterRegister  Log inLog in  
Announcements

September 13th, 2017: Adding tutorials for the badging community! We're looking for volunteers to feature and help us write guides - PM Panton to get started with our project!


July 3rd, 2017: Canvas Tutorials is currently undergoing a major revamp. Please excuse any hiccups or glitches.


Coming soon

About Us

Canvas creates and supports an IMVU education environment. We offer tutorials and assistance from some of the community's most active and knowledgeable. Tutorials by users, for users!

Staff
Staff Updates
Important Links
Statistics
We have 1424 registered users
The newest registered user is Virtualdoll

Our users have posted a total of 2565 messages in 156 subjects
Canvas Time
Share | 
 

 Code layout help.

View previous topic View next topic Go down 
Swift

avatar
View user profile

PostSubject: Code layout help. Sun Sep 06, 2015 3:31 am

So, I've been trying to code this very simple sample I made up and I have the text but it's not where it's supposed to be and the buttons aren't working? If you could help or message me @xSwiftyPop that would be great.
Code:
<script>
   function changeNavigation(id)
   {document.getElementById('mainbox'). innerHTML=document.getElementById(id). innerHTML}
   </script>
<img style="float:center:" src="http://imageshack.com/a/img537/5066/mDaMm2.png" usemap="#ImageMap1">

<map id="ImageMap1" name="ImageMap1">
   <area shape="rect" coords="305,148,422,211" id="1b" onClick="changeNavigation('Home')">
   <area shape="rect" coords="456,147,575,211" id="2b" onClick="changeNavigation('About')">
</map>

<div id="mainbox" style="position:absolute; left:332px; top:181px; width:407px; height:341px; overflow: auto; border:0px; background-color:transparent; color:#000000;"> <center> <font face="verdana" size="1" color="Black">
Doop [Home] [Main]
</font></center>
</div>

<div id="Home" style="display:none">
<center> <font face="verdana" size="1" color="white">
DYNAMIC! [Home]
</font></center>
</div>

<div id="About" style="display:none">
<center> <font face="verdana" size="1" color="white">
DYNAMIC! [About]
</font></center>
</div>


<div id="other_box" style="width:000px; height:000px; position:absolute; left:000px; top: 000px; z-index:1">

</div>


<div id="avi_box" style="width:160px; height:220px; position:absolute; left:215px; top: 92px; z-index:1">

</div>


<style type="text/css">   #aboutme_panel, #contact_panel,

#dev_panel, #wishlist_panel, #visitors_panel,  

#messages_panel, #tagcloud_panel, #stickers_panel,

#collect_panel,   #room_panel, #rankings_panel,

#cool_panel, #gallery_panel, #friends_panel,  

#streetteam_panel, #blog_panel, #video_panel_header,

#music_panel, #rss_panel, #url_panel,  

#special_panel,#outfits_panel {      width:900px !important;   }  

#rightColumn {      display:none !important;   }</style>  <style

type="text/css">#url_panel_colRow, .imvucodes_net {

display:none !important; }</style>
Back to top Go down
Pantone

avatar
View user profile
Role : Designer & Coder
Location : Indianapolis, IN, USA
http://pantonedoesgraphics.tumblr.com/

PostSubject: Re: Code layout help. Sun Sep 06, 2015 11:37 am

Topic moved to the help section. Very Happy
Working on your coding right now.

NOTE: Mods if you beat me to it, please answer!

__________________________________
CanvasTutorials
ADMIN

Human Resources │ Account Activation │ Ban Control
"May the Force be with you."
Back to top Go down
Pantone

avatar
View user profile
Role : Designer & Coder
Location : Indianapolis, IN, USA
http://pantonedoesgraphics.tumblr.com/

PostSubject: Re: Code layout help. Wed Sep 23, 2015 10:13 pm

Still hasn't been helped. Looking through now.
Sorry about that, been gross and busy all at the same time.

Thank you for not sending hate mail!

__________________________________
CanvasTutorials
ADMIN

Human Resources │ Account Activation │ Ban Control
"May the Force be with you."
Back to top Go down
XShiroXP

avatar
View user profile
Role : Student
Location : united states
http://www.imvu.com/catalog/web_mypage.php?user=146829240

PostSubject: Re: Code layout help. Sat Aug 06, 2016 10:35 pm

so this happens to my main boxes everytime --> https://gyazo.com/5944fc01150b5a0fcc40bac2ce9e8465
~ how do i slove this

__________________________________
Back to top Go down
dako

avatar
View user profile
Role : Designer & Coder
Location : Kingdom Hearts
http://redbubble.com/people/kaizaoda

PostSubject: Re: Code layout help. Sun Aug 07, 2016 12:25 am

@XShiroXP

Mind sending me the code?

__________________________________
Socials: Instagram | Twitter | DeviantART | Tumblr
-----------------------------------------------------------
- PLAIN -
Back to top Go down
XShiroXP

avatar
View user profile
Role : Student
Location : united states
http://www.imvu.com/catalog/web_mypage.php?user=146829240

PostSubject: Re: Code layout help. Sun Aug 07, 2016 12:31 am

IKumaI wrote:
@XShiroXP

Mind sending me the code?




<style type="text/css">
#sandbox_panel_header {display:none;}
</style>

<img src="http://illiweb.com/fa/pbucket.gif" width="1108" height="728" border="0" usemap="ImageMap1">

<div id="main_box" style="width:395px; height:276px; position:absolute; left:21px; top:443px; z-index:1; overflow:auto;">
<iframe src="http://filedrive.imvustylez.net/users/XShiroXP/SampleLayout.html" name="inlineframe" width="395" height="276" border="0" marginwidth=0 marginheight=0 frameborder=0 allowtransparency="true"></iframe>
</div>  


<script type="text/javascript">
var copiedfrom='www.imvucodes.net';
function blockrightclick() {
return false;
}
document.oncontextmenu=blockrightclick;
</script>


<style type="text/css">
#aboutme_panel_header, #contact_panel_header, #dev_panel_header, #wishlist_panel_header, #url_panel_header,
#tagcloud_panel_header, #visitors_panel_header, #room_panel_header, #rankings_panel_header, #cool_panel_header, #gallery_panel_header, #friends_panel_header, #blog_panel_header, #rss_panel_header, #video_panel_header, #badges_panel_header, #special_panel_header,#outfits_panel_header, #groups_panel_header {
display: none !important;
}
</style>

<style type="text/css">
#aboutme_panel, #contact_panel, #dev_panel, #wishlist_panel, #visitors_panel,
#tagcloud_panel, #stickers_panel, #room_panel, #rankings_panel, #cool_panel, #gallery_panel, #friends_panel, #rss_panel, #url_panel, #special_panel,#outfits_panel, #video_panel, #groups_panel, #slideshow_panel, #badges_panel {
margin:0px auto; width:1108px;
}
#leftColumn{ width: 1108px; }
#rightColumn { display:none !important; }
</style>

__________________________________
Back to top Go down
dako

avatar
View user profile
Role : Designer & Coder
Location : Kingdom Hearts
http://redbubble.com/people/kaizaoda

PostSubject: Re: Code layout help. Sun Aug 07, 2016 1:42 pm

@XShiroXP

I believe it's because you made the iframe width & height the same as the main_box.

Code:

<div id="main_box" style="width:395px; height:276px; position:absolute; left:21px; top:443px; z-index:1; overflow:auto;">
<iframe src="http://filedrive.imvustylez.net/users/XShiroXP/SampleLayout.html" name="inlineframe" width="395" height="276" border="0" marginwidth=0 marginheight=0 frameborder=0 allowtransparency="true"></iframe>
</div>

It will be fixed if you change the iframes width & height to 100% and change the overflow from auto to hidden. If you don't want to I'll add what I put below.

Code:

<div id="main_box" style="width:395px; height:276px; position:absolute; left:21px; top:443px; z-index:1; overflow:hidden;">
<iframe src="http://filedrive.imvustylez.net/users/XShiroXP/SampleLayout.html" name="inlineframe" width="100%" height="100%" border="0" marginwidth=0 marginheight=0 frameborder=0 allowtransparency="true"></iframe>
</div>  
Back to top Go down
Valoish

avatar
View user profile
Role : Designer & Coder
Location : New York City
http://kyaimvu.deviantart.com

PostSubject: Re: Code layout help. Sun Aug 07, 2016 2:06 pm

@IKumaI; Closeee but she also needed to change the dimensions and positioning of the div box itself. c: IMVU also has this new stupid thing where you need to set the div's overflow from "auto" to "hidden" in order to not see the scrollbar - regardless of the size of the iframe within that div box.
She PM'd me the code and I fixed it up and explained everything to her ^^
Thanks for your feedback and help, though!

__________________________________
CanvasTutorials
ADMIN


Technician | Theft Council | Forum Design
"Love Truth and Pardon Error."

Back to top Go down
dako

avatar
View user profile
Role : Designer & Coder
Location : Kingdom Hearts
http://redbubble.com/people/kaizaoda

PostSubject: Re: Code layout help. Sun Aug 07, 2016 8:37 pm

@Valoish

Well, at least it's fixed lol

__________________________________
Socials: Instagram | Twitter | DeviantART | Tumblr
-----------------------------------------------------------
- PLAIN -
Back to top Go down
dako

avatar
View user profile
Role : Designer & Coder
Location : Kingdom Hearts
http://redbubble.com/people/kaizaoda

PostSubject: Re: Code layout help. Wed Aug 17, 2016 12:25 pm

The scrollbar won't go away.. I've set the div's overflow to hidden already but, it still won't go away.



Code:

<div id="P"style="border: 1px solid #fff; position: absolute; left: 145px; top: 1150px; width: 1000px; height: 92px; overflow: hidden;">
<iframe src="http://filedrive.imvustylez.net/users/IKumaI/E1-Products.html" name="I" border="0" marginwidth="0" marginheight="0" allowtransparency="true" frameborder="0" height="100%" width="100%"></iframe>
</div>
Back to top Go down
Valoish

avatar
View user profile
Role : Designer & Coder
Location : New York City
http://kyaimvu.deviantart.com

PostSubject: Re: Code layout help. Wed Aug 17, 2016 12:56 pm

@IKumaI; The height of the container div was too small.
I changed it from 92px to 96px and the scrollbar is gone
Code:
<div id="P" style="padding-top: 4px; border: 1px solid #fff; position: absolute; left: 145px; top: 1150px; width: 1000px; height: 96px; overflow: hidden;">
<iframe src="http://filedrive.imvustylez.net/users/IKumaI/E1-Products.html" name="I" border="0" marginwidth="0" marginheight="0" allowtransparency="true" frameborder="0" height="100%" width="100%"></iframe>
</div>

I also added a bit of padding to the top so that the border of the container div and the borders set on the icons don't overlap/touch

__________________________________
CanvasTutorials
ADMIN


Technician | Theft Council | Forum Design
"Love Truth and Pardon Error."

Back to top Go down
dako

avatar
View user profile
Role : Designer & Coder
Location : Kingdom Hearts
http://redbubble.com/people/kaizaoda

PostSubject: Re: Code layout help. Thu Aug 18, 2016 1:09 pm

@Kya
Oml thank you so much~ It was bugging the crap out of me..
 

__________________________________
Socials: Instagram | Twitter | DeviantART | Tumblr
-----------------------------------------------------------
- PLAIN -
Back to top Go down
Valoish

avatar
View user profile
Role : Designer & Coder
Location : New York City
http://kyaimvu.deviantart.com

PostSubject: Re: Code layout help. Thu Aug 18, 2016 1:16 pm

@IKumaI; No problem
And please tag me as "@Valoish" not "@Kya". I changed my forum username weeks ago so the Kya tag handle doesn't notify me.

__________________________________
CanvasTutorials
ADMIN


Technician | Theft Council | Forum Design
"Love Truth and Pardon Error."

Back to top Go down
dako

avatar
View user profile
Role : Designer & Coder
Location : Kingdom Hearts
http://redbubble.com/people/kaizaoda

PostSubject: Re: Code layout help. Thu Aug 18, 2016 3:43 pm

@Valoish
oh yeah sorry lol I'm use to the other name. ^^'

__________________________________
Socials: Instagram | Twitter | DeviantART | Tumblr
-----------------------------------------------------------
- PLAIN -
Back to top Go down
 
Code layout help.
View previous topic View next topic Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
 :: HBAD REALM :: HBAD • Coding :: HBAD • Coding Repair-
Jump to: