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 | 
 

 Transition Buttons: DynamicDIV

View previous topic View next topic Go down 
Go to page : Previous  1, 2, 3  Next
Guest
Guest
avatar

PostSubject: Re: Transition Buttons: DynamicDIV Thu Apr 17, 2014 11:39 pm

Is the size for this the same as other layouts. 900 wide....whatever height?

I want to try to code like this.
Back to top Go down
Valoish

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

PostSubject: Re: Transition Buttons: DynamicDIV Fri Apr 18, 2014 7:49 am

The width of the layout always stays at 900px, the height can change

__________________________________
CanvasTutorials
ADMIN


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

Back to top Go down
Wrot

avatar
View user profile

PostSubject: Re: Transition Buttons: DynamicDIV Wed Apr 23, 2014 8:58 pm

Could someone possibly post a video tutorial? I am really wanting to do this :/ But I don't know how to put it inside of my Dynamic DIV layout. The CSS navigation code doesn't come with the width, left, and top px/
Back to top Go down
Valoish

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

PostSubject: Re: Transition Buttons: DynamicDIV Fri Apr 25, 2014 6:40 pm

Could you send me your code?
Its really simple to add this in to a Dynamic Div code, a video wont even be required. c:

__________________________________
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: Transition Buttons: DynamicDIV Tue Jun 03, 2014 8:09 am

-3- nvm

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

avatar
View user profile

PostSubject: Re: Transition Buttons: DynamicDIV Wed Jul 30, 2014 8:44 pm

I have been trying to message people on here about this. But is there some where i can like preview it as I make it so I dont have to keep trying to view my whole imvu homepage. It makes me lag and I really want to learn this even though its confusing me like crazy. I do html but I have always wanted to do navi buttons.


P.s I have been trying how to move the buttons side by side instead of under each other and i have tried to look around and try stuff but it always crashes the whole thing.
Back to top Go down
Valoish

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

PostSubject: Re: Transition Buttons: DynamicDIV Thu Jul 31, 2014 6:53 am

Can try to preview the menu itself Here, however previewing the whole IMVU Layout is best done on IMVU itself, as some online previewers can mess up the positioning because they cant 'read/use' all the codes properly.
As for the buttons being in a line and not under each other, change the 'Display' from block to inline-table

__________________________________
CanvasTutorials
ADMIN


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

Back to top Go down
trippmachine

avatar
View user profile

PostSubject: Re: Transition Buttons: DynamicDIV Thu Jul 31, 2014 11:21 am

I just finished making one!!! http://avatars.imvu.com/TrippMachine

I had a lot of help from Kya :3
Back to top Go down
Valoish

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

PostSubject: Re: Transition Buttons: DynamicDIV Thu Jul 31, 2014 11:24 am

Looks lovely~
Glad I could help ^^

__________________________________
CanvasTutorials
ADMIN


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

Back to top Go down
The author of this message was banned from the forum - See the message
dako

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

PostSubject: Re: Transition Buttons: DynamicDIV Mon Aug 18, 2014 4:41 pm

@Pugs
I had trouble also at times but I was experimenting with it and I got this ~ I'd say it's pretty smoothed :3


Code:
<style type="text/css">
/* YOUR NAVIGATION BOX */
#NAV{
   width:200px;
   left:000px;
   top:000px;
   text-align:center;
   position:absolute;
}

/* YOUR BUTTON DESIGN */
#NAV a:link, #NAV a:visited, #NAV a:active{
   display:block;
   width:200px;
   padding:10px 0px;
   background-color:#0d0d0d;
        border-bottom:2px solid #0d0d0d;
        border-top:2px solid #0d0d0d;
        padding:5px 1px;
   color:#FFF;
   text-align:center;
   text-decoration:none;
   font-family:Arial;
   font-size:10px;
   margin:2px 0px;

   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease
}

/* YOUR BUTTON HOVER DESIGN */
#NAV a:hover{
   color:#DE4E7E;

/* HOVER */
border-bottom:2px solid #B6E87C;
border-top:2px solid #B6E87C;
}

</style>

__________________________________
Socials: Instagram | Twitter | DeviantART | Tumblr
-----------------------------------------------------------
- PLAIN -
Back to top Go down
The author of this message was banned from the forum - See the message
dako

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

PostSubject: Re: Transition Buttons: DynamicDIV Tue Aug 19, 2014 6:51 pm

I'm happy I was helpful ^ - ^

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

avatar
View user profile
Role : Designer & Coder
Location : Somewhere
http://niq-olas.com/

PostSubject: Re: Transition Buttons: DynamicDIV Thu Jan 15, 2015 11:07 am

New improved tutorial coming this weekend!! Smile

:sweeet:


__________________________________


If you have any questions or suggestions how to improve our forum & if you have any complains feel free to send me an pm here or via imvu.
My Website Shop

Back to top Go down
xoBrea

avatar
View user profile
Location : TN
http://beemonia.tumblr.com

PostSubject: Contact Buttons Tue Mar 10, 2015 12:39 pm

Does this include the side bar buttons for contact options ??
Back to top Go down
Pantone

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

PostSubject: Re: Transition Buttons: DynamicDIV Tue Mar 10, 2015 6:32 pm

@iDayDreama: I will see if I can get Nick to get on and answer that one.
I didn't want to leave this un-replied a second day, lol.

I can't see the tutorial, for some reason. x_x

__________________________________
CanvasTutorials
ADMIN

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

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

PostSubject: Re: Transition Buttons: DynamicDIV Tue Mar 10, 2015 8:21 pm

iDayDreama wrote:
Does this include the side bar buttons for contact options ??
Yes, this tutorial can also be used to create Hover Contact Buttons, but to do that you'd have to duplicate the CSS and change the name from "NAV" to, let's say, "CON" or something.
By changing the name, the coding and CSS wont overlap and you can have two (or more) sets of buttons.

__________________________________
CanvasTutorials
ADMIN


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

Back to top Go down
xoBrea

avatar
View user profile
Location : TN
http://beemonia.tumblr.com

PostSubject: Re: Transition Buttons: DynamicDIV Wed Mar 11, 2015 9:38 am

Blinks . Everything is coded correctly but the side buttons and I am not entirely sure where I would add the extra CSS to Anadeia's coding.
Back to top Go down
Pantone

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

PostSubject: Re: Transition Buttons: DynamicDIV Wed Mar 11, 2015 2:17 pm

@iDayDreama: Sorry I haven't updated the videos. x_x I am Anaideia, but I have had my name changed, several times. Lol. And the extra CSS would go up top, above your DIV boxes.

Kya (Val) will have to correct me. Lol.

__________________________________
CanvasTutorials
ADMIN

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

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

PostSubject: Re: Transition Buttons: DynamicDIV Wed Mar 11, 2015 5:08 pm

Could you send me the code so that I'll have a look at it for you? c:

__________________________________
CanvasTutorials
ADMIN


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

Back to top Go down
Pantone

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

PostSubject: Re: Transition Buttons: DynamicDIV Wed Mar 11, 2015 5:37 pm

Thanks Val! You have a bit more experience with CSS. c:
I appreciate your help, lovely!

__________________________________
CanvasTutorials
ADMIN

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

avatar
View user profile
Role : Designer & Coder
Location : United Kingdom

PostSubject: Re: Transition Buttons: DynamicDIV Sun Jul 24, 2016 5:02 am

Hello, Quick Question: Where do I put these codes, as I am lost where they need to go?

But All Good I know what I am doing just need to know where those codes go.
Back to top Go down
Voixz

avatar
View user profile
Role : Designer & Coder
Location : United Kingdom

PostSubject: Re: Transition Buttons: DynamicDIV Sun Jul 24, 2016 5:09 am

Scratch that, I was dumb enough to not realise I had to put the Normal in the Design Box and Hover in the Hover Box.

Well Like Always Amazing Tutorials, really great info on explaining really helped me understand DIV Transition Buttons more then any other tutorial did.

Keep Up The Tutorials Love Learning New Codes Everyday.
Back to top Go down
Voixz

avatar
View user profile
Role : Designer & Coder
Location : United Kingdom

PostSubject: Re: Transition Buttons: DynamicDIV Sun Jul 24, 2016 6:21 am

Okay quick help my amazing Gods & Goddesses, I have successfully done the buttons but how do I make them to change to the other boxes to switch to about and others info?

Sad

Solved it again, man I need to really think straight.
Back to top Go down
Voixz

avatar
View user profile
Role : Designer & Coder
Location : United Kingdom

PostSubject: Re: Transition Buttons: DynamicDIV Sun Jul 24, 2016 8:04 am

The Layout is done and a massive success it works!

Thanks for the tutorial very helpful and understandable, if you wish to see my DIV Layout my IMVU name is Voixz.
Back to top Go down
 
Transition Buttons: DynamicDIV
View previous topic View next topic Back to top 
Page 2 of 3Go to page : Previous  1, 2, 3  Next

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