Help me with this layout!

Everything related to the visual and coding aspects of websites.
User avatar
Camy
Administrator
Posts: 1511
Joined: Mon Jul 16, 2012 9:21 pm
Location: Texas
Contact:

Wed Apr 13, 2016 6:31 am

Need some input on your layout? You've come to the right place!

Whether you're stuck on a layout and don't know how to proceed or have an image to use but have no idea how to make it into a layout or what kind of layout you should make, feel free to post here!

Make sure the images don't stretch the forum.
I accept your challenge, "high prince", but I am no general.

Megan A
Posts: 484
Joined: Mon Feb 02, 2015 10:54 am

Sat Apr 16, 2016 7:45 am

YES, this topic is exactly what I need.

I've been trying to revamp my Toad fanlisting into "A Little More" (or even a shrine) and include a new layout for SO long now, but I've been struggling with it so much. He's one of my favorite video game characters so I really want to do him justice, but I'm not the most comfortable working with CG/3D official artwork. I was wondering if anyone would have any suggestions on how to use these images! Once I can get through this block, I think I'll be a lot more inspired to continue writing. I'll link to my favorite ones so you can see what their details, and any feedback on any of them would be wonderful!

01
02
http://www.mariowiki.com/images/9/94/To ... D_Land.png

Thanks, everyone! :D

User avatar
Laura
Posts: 518
Joined: Sun Apr 27, 2014 2:10 am
Location: Ontario, Canada
Contact:

Sat Apr 16, 2016 12:11 pm

I'd be really tempted to do something with really large polka dots and a red and white colour scheme. XD

It's nice that you have really large images like that too, because you can actually use them without changing their size too much. I'd probably do one layout with three variants, changing the image of Toad for each different variant. I think if I were to try to go into more detail, I'd have to start sketching out some basic wireframes for you... which I can do, but I'd have to go use my tablet first.

In the meantime, I'd suggest thinking about designing a wallpaper instead of a website; it might help you in thinking outside of what you've already come up with. :D

User avatar
dubiousdisc
Administrator
Posts: 2600
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Sun Apr 17, 2016 1:24 pm

Seconding wolfrun on the wallpaper idea and the polka dot theme!

Personally I would also try working with (one or more of) the pictures together with big text for the title. Perhaps text partly in front of the render.

User avatar
Robin
Events Staffer
Posts: 3152
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Mon Apr 18, 2016 5:18 pm

Hey y'all, I have a layout idea I want to try for the network page layout of WMW.org version 15.

It is inspired in part (okay, mostly inspired) by Dubs' beautiful layout for her Malice shrine--I would love to display all my network links like that, except on both horizontal sides of the circle. Also, it would be SUPER AWESOME if there was a little text blurb about each site which displayed inside the circle when its link is hovered over.

I have been trying to figure out how to achieve this for the last month, and the second part especially is tripping me up--I just keep coming back to some overly complicated system of hidden divs. Argh. I am open to jQuery/HTML5 solutions because I need to learn them, though!
~ a dream is a wish your heart makes ~
withinmyworld.org

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

Mon Apr 18, 2016 10:53 pm

I think Dubs is using a list with various margin settings to position each item. The blurb is totally possible with a mouse over JS function. You can display it over the circle image or replace the image with the blurb, or even make the blurb appear over a new image, all in the same circle. It can all be achieved by using onmouseover to change the display CSS. I would use hidden divs for it too, along with positioning to ensure that they show up in the right place when the CSS changes, so you're on the right track. I don't have JQuery experience, but JQuery basically is pre-written Java Script, so it's the same basic effect.

User avatar
Robin
Events Staffer
Posts: 3152
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Tue Apr 19, 2016 11:52 am

Yeah, I looked through the CSS but couldn't really understand how each list item was able to be positioned separately--I found one line that seemed to define the whole list, but nothing after that.

Good to know I'm on the right track with the hidden divs, though! I kept thinking "Man there has GOT to be an easier way than this;" maybe jQuery will help with that!
~ a dream is a wish your heart makes ~
withinmyworld.org

User avatar
dubiousdisc
Administrator
Posts: 2600
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Tue Apr 19, 2016 2:20 pm

Ha, ha, ha... Sigh...Don't do it like I did, it's a hack XD
I made that in 2011 though, so I'm sure that by now there must be an easier way...

Alright, there's CSS shapes! They are not fully natively supported yet, but here's an example with JS as a fallback. IT LOOKS LIKE YOU SHOULD BE ABLE TO DO IT EASILY! YAAAAY

Hey, I might even go back and implement that instead. Because jeez, I remember thinking at the time that this shouldn't be so hard...

As for what concerns the hovers, however, that is dirt easy in pure CSS and don't you dare do it in jQuery!

let's say you have

Code: Select all

<a href="#">your link
<span>with a blurb!</span>
</a>
CSS:

Code: Select all

a span 
{
visibility: hidden; (or opacity: 0 if you want that to be easily animatable!)
(all your rules)
}

a:hover span
{
visibility: visible; (or opacity: 1)
}
That's if you make the blurb be invisible but fully there. If you want to make it move the content around, you do it with display: none and display: (block, inline-block, whatever you need), OR you could even do it with CSS transforms. Specifically scale. You can try something like transform: scale(0, 0) and then on hover transform: scale(1, 1).

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

Tue Apr 19, 2016 9:59 pm

That's a good trick with that CSS, it would definitely make the positioning easier!

Yes to scale, with a nice transition effect!! :D

User avatar
Lethe
Posts: 1366
Joined: Thu Jul 19, 2012 1:20 pm
Contact:

Thu Apr 21, 2016 3:32 pm

Does anyone know how I can code the bar at the bottom of this layout idea? It's supposed to take up the full width of the page, but it shouldn't be fixed position; you should only see it when you scroll all the way down. The layout "header" image would go into the dark blue "float left" box, and be permanently attached to the bar at all times. I think margin: 0 of the orange box would ensure that.
Both despair and ecstasy are part of the elements that compose a person.

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest