Home Entrance Wiki Search Login Register

Welcome, Guest. Please login or register.
June 09, 2023, 10:59:53 pm - @916.59
Forum activity rating: Four Star Posts: 50/24hrs Unread Topics | Unread Replies | Own Posts | Own Topics | Recent Posts
News: Art will save the world!

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ Help & Tutorials
| | | |-+  best ways to go about a website with image based containers?

« previous next »
Pages: [1] Print
Author Topic: best ways to go about a website with image based containers?  (Read 266 times)
Casual Poster ⚓︎

View Profile WWW

Joined 2022!
« on: January 07, 2023, 10:45:40 pm »

ok, listen, i dont know the word that is used to describe a website like this but i am sure you will know what i mean when i give the examples. its been a hot minute since i focused on webdesign since the last months got kinda crazy... but i have ideas of layouts for my site that i have just always been a lil unsure how the tackle.

when is say website with "image based containers" i means like ones where the entire layout of boxes and whatnot arent defined by the existing css but rather an entire image/multiple images that make the layout!


uncannyvalley especially is done in a way i have seen most other sites done-- where it seems the layout image has been split into pieces. my main question is for one, is that the way to go about it? no ones giant image but multiple split up images? as i can see, it seems the basic idea is to set up your div containers to match the pixel size of your full layout, and then set those images to fill the entire area.

are there easier ways to go about this? im mostly dreading trying to figure out the pixel size of the entire image and how to split it up to fit in div boxes, honestly. admittedly tho my use of divs has always been kind of a mess as i feel like i may need to reteach myself some stuff to make sure i better understand how to tackle this idea specifically.

Hero Member ⚓︎

So many stars!

SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!The Smallest Ozwomp Known To ManBug!
« Reply #1 on: January 07, 2023, 11:26:32 pm »

Firstly I wanna say, please don't use uncannyvally as a how-to-do-this study, its a great looking site, but their code is a disaster! :omg:k: (Their structure is ok-ish, its just very messy, they use WAY too many unnecessary positioning commands and hosting images on discord is not ok!!) :TnT:

Ok so, I interned for a while at a London web advertising agency around 2009, it was still the era when they made sites in this style professionally. The way they did it back then was to design the entire site using Adobe Illustrator, then they would slice it up into fixed standard segments, and export things like buttons as separate images. (Most good graphics editors will have this slice functionality)

The background images would be reassembled around a div (which is a predefined size and was cut out from the original illustrator design) and content would be loaded into the div using php from a database - on neocities we don't use php, so most sites use iFrames to get the same effect.

After that buttons can be positioned on top of the background images using a few simple CSS absolute placements - and because the background was sliced up in known sizes and locked into a div of a fixed size, it should all just snap together!

Something like:
outer div - 1000px wide
 header background (1000px wide)
 side background (200px wide) - centre iframe/content div (600px wide) - side background (200px wide)
 footer background (1000px wide)
code for buttons (positioned where you like using position absolute)

It can get much more complex depending on how complex your design is and how many windows you want.

As for cinni's site, she uses a much simpler system; she has one background image and then iframes and buttons are positioned on top of it. This design is great for pixel art because the background image can be low-res and resized while still looking good, but its not really usable for a high-res background because it would be super slow to load in a huge background image!

Ooph I hope that was clear and I actually answered your question :ha: - there are a few ways you can make it work, and some will be better or worse depending on what your trying to accomplish! Also I know my knowledge of this kinda site creation is over 10 years old, so maybe there are newer options, but this is the best way I can think to do it! :pc:

everything lost will be recovered, when you drift into the arms of the undiscovered
Casual Poster ⚓︎

View Profile WWW

Joined 2022!
« Reply #2 on: January 10, 2023, 01:25:11 am »

thanks for the reply! yeah, i noticed that user's code for sure as well- i guess i mostly mean from a visual standpoint purely and Not the coding one lol. the discord images especially were an oof to see. there were a few other sites ive seen that i just cant recall that i know also split up their image based layout in a similar way however which is mostly what i wanted to get at. (remembered one was sugarforbrains- which is different in many ways but, that same hand drawn vibe i guess)

that definitely makes sense-- ill have to look into some way to "slice" up an image though i am sure it wont be too hard. when i saw cinni's site i kept getting the Entire image of the layout too when looking at it closer and so i assumed thats what was happening- one solid image with stuff positioned on top. ill have to think about that- what might work better for the design i have in mind!

i will definitely have to test some things out!! probably gonna whip together some super bare images just so i can mess around before dedicating my time to something super clean that doesnt work...

Pages: [1] Print 
« previous next »

Vaguely similar topics! (3)

Website size

Started by RolyBoard ✁ ∙ Web Crafting

Replies: 33
Views: 2449
Last post April 30, 2023, 05:50:10 pm
by PurpleHello98
Website example page

Started by IcelogistBoard ☆ ∙ Showcase & Links

Replies: 3
Views: 1139
Last post December 16, 2021, 06:50:33 am
by cinni
Website status (Check replies for part 2)

Started by IcelogistBoard ☆ ∙ Showcase & Links

Replies: 8
Views: 1463
Last post December 26, 2021, 08:11:46 pm
by Icelogist

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP2

MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery!