How can I....?

Everything related to the visual and coding aspects of websites.
User avatar
Lethe
Posts: 1366
Joined: Thu Jul 19, 2012 1:20 pm
Contact:

Mon Mar 28, 2016 2:16 pm

Larissa wrote:
Mikari wrote:Background positioning is a topic that's come up with several people lately, so I decided to write a little tutorial about it. I hope these examples are useful. I have a lot of notes at AzureLight.net though they are very summarized, let me know if you want to see more little tutorials like this that focus on a particular CSS code.
ARE YOU SERIOUS. THAT'S HOW THAT WORKS?

I've known how to use background-position for years (as in I abuse the hell out of it) but I NEVER KNEW you could use pixels in conjuction with top/left/right/bottom. Holy bleep Mikari you are the best.
wtf mind = blown o_O

Love your tutorials and the cute graphics to illustrate the explanations, Mikari. <3
Both despair and ecstasy are part of the elements that compose a person.

User avatar
Mikari
Posts: 3249
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Tue Mar 29, 2016 5:07 pm

There is a way to making seamless background positioning work with centered images in all resolutions as well, but it's a bit trickier since the center of the screen is different for each resolution. I plan to talk about that in part 2 of this tutorial. I'll work on it as soon as I catch a break (most likely late next week) because I'm stuck with a lot of hours at work right now.

@Larissa: Thank you! The pixels thing blew my mind when I discovered it. XD

@wolfrun: Thank you! I've found that the center value isn't responsive to pixels, or at least it didn't work on my browser, it would be great if it was properly implemented on all the main browsers. Until then, there are some tricks that can be used, but it's a bit more complicated.

@Lethe: Thank you! :D

Edit: Background Position 2: Centering! This will address the things that were not addressed in the previous tutorial and explain how to make layouts seamless with centered images regardless of the resolution. This one's a bit trickier, so let me know if you have any questions.

User avatar
Crystal
Posts: 2377
Joined: Thu Jul 19, 2012 5:02 pm
Location: Alberta Canada
Contact:

Tue Apr 26, 2016 4:06 pm

I do background positioning a bit differently, but Mikari's method is good too!
There are shadows before us - but only because the light is at our back.

User avatar
Chibi
Posts: 621
Joined: Wed Jul 04, 2012 7:17 am
Location: Themyscira
Contact:

Fri Apr 29, 2016 10:48 am

I have a question, but it's a small one, so I'll use this thread instead of making a new one!

In an effort to get rid of my layout block, I have been looking at other people's layouts. This has helped, but it has also made me wonder about something else: the way the content is organised. Especially with sites participating in the Construction Zone (I'm thinking of shrines by Larissa, Dubs and Emma's Rydia shrine especially), I've seen that the URLs of their content look like this: domain.net/shrine/page - as if it was managed with a CMS.

I quite like that way of displaying content as it looks much less clustered and cleaner (which is what I'm trying to achieve with my possibly new domain). So my question is: how do you guys do that? Are you using a CMS or are you doing it manually? And what's a nice/easy/quick way of implementing that?

User avatar
Masao
Host
Posts: 589
Joined: Thu Jun 16, 2011 12:29 am
Contact:

Fri Apr 29, 2016 12:11 pm

Chibi wrote:I have a question, but it's a small one, so I'll use this thread instead of making a new one!

In an effort to get rid of my layout block, I have been looking at other people's layouts. This has helped, but it has also made me wonder about something else: the way the content is organised. Especially with sites participating in the Construction Zone (I'm thinking of shrines by Larissa, Dubs and Emma's Rydia shrine especially), I've seen that the URLs of their content look like this: domain.net/shrine/page - as if it was managed with a CMS.

I quite like that way of displaying content as it looks much less clustered and cleaner (which is what I'm trying to achieve with my possibly new domain). So my question is: how do you guys do that? Are you using a CMS or are you doing it manually? And what's a nice/easy/quick way of implementing that?
The way you can do that (and also the way CMSs do it) is with mod_rewrite in your .htaccess file. There's a lot of tutorials online, but basically you tell your server to read a url like site.com/page/one as really located at site.com/page.php?one
THE FATE OF DESTRUCTION IS ALSO THE JOY OF REBIRTH.

User avatar
Kate
Posts: 80
Joined: Sun Nov 29, 2015 5:27 am
Contact:

Sun Dec 18, 2016 3:13 am

I have a question about some coding/scrips and what not. ;w; I hope I can explain this alright to make sense... So I'm wondering if it's possible to make a layout that has sliding content? The background and the layout image would remain stationary, but the content would slide without disrupting the imagery.. I have this idea of a visitor viewing navigation links on the front page, and when they click on one of the links the content would slide to the left; to the section the visitor had chosen.
I am not good with these kinds of things at all. ;;;; ahhh

User avatar
Masao
Host
Posts: 589
Joined: Thu Jun 16, 2011 12:29 am
Contact:

Sun Dec 18, 2016 3:29 am

Kate wrote:I have a question about some coding/scrips and what not. ;w; I hope I can explain this alright to make sense... So I'm wondering if it's possible to make a layout that has sliding content? The background and the layout image would remain stationary, but the content would slide without disrupting the imagery.. I have this idea of a visitor viewing navigation links on the front page, and when they click on one of the links the content would slide to the left; to the section the visitor had chosen.
I am not good with these kinds of things at all. ;;;; ahhh
Hmm I'm not 100% sure what you want, especially the part about scrolling to the left? I need to poke you next time we're both on haha.

But do you mean something like a scroll-to or an accordion? And for the main layout image and navigation, you can set their position to fixed.
THE FATE OF DESTRUCTION IS ALSO THE JOY OF REBIRTH.

User avatar
Kate
Posts: 80
Joined: Sun Nov 29, 2015 5:27 am
Contact:

Sun Dec 18, 2016 3:55 am

Masao wrote: Hmm I'm not 100% sure what you want, especially the part about scrolling to the left? I need to poke you next time we're both on haha.

But do you mean something like a scroll-to or an accordion? And for the main layout image and navigation, you can set their position to fixed.
Ohh!! YES! I'm looking for something similar to the scroll-to effect! Except instead of vertical, it's horizontal! I just want the content to scroll though; So the images would be "fixed" into position? AGH, I'm so sorry I'm having a hard time explaining this! ;;___;;

User avatar
Masao
Host
Posts: 589
Joined: Thu Jun 16, 2011 12:29 am
Contact:

Sun Dec 18, 2016 4:07 am

Kate wrote:Ohh!! YES! I'm looking for something similar to the scroll-to effect! Except instead of vertical, it's horizontal! I just want the content to scroll though; So the images would be "fixed" into position? AGH, I'm so sorry I'm having a hard time explaining this! ;;___;;
oooh I see! Something like this plugin? (also check the local and serial demos linked on the right)
THE FATE OF DESTRUCTION IS ALSO THE JOY OF REBIRTH.

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests