Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sugarcane CSS Layout Help

So I've been trying to get this figured out today, but I'm still a bit confused on how to achieve the desired look for my game. I've seen templates that altered the positions and such, but I'm not quite understanding them so that makes this a pain for me atm. I've included an attachment of what I'm aiming for so hopefully someone can help me get some progress going here again  :)

Thanks in advance!

Comments

  • Hi Eaturbrainz,

    I don't know how much CSS experience you have, but here's the basics. The rest of what you want would largely be tweaking. I will say, however, that keeping it evenly vertically aligned like I think you want is going to be pretty tricky. There's a few ways to do that with HTML, but I might actually rely on jQuery in your case.

    That said, if you can live with not all the elements being EXACTLY 33% high on all screens, this is what I'd do:
    html {
    background-color: grey;
    /* put your background-image here. */
    }

    body {
    margin: 0;
    }

    #sidebar {
    left: 0;
    position: relative;
    top: 0;
    width: 100%;
    }

    #sidebar li {
    text-align: center;
    }

    #passages {
    margin-left: 0;
    width: 100%;
    text-align: center;
    border-left: 0;
    background-color: grey;
    padding-top: 100px;
    }

    .passage {
    text-align: center;
    }
  • Or maybe something like the following:

    body {
    margin: 0px;
    background-color: lightgrey;
    background-image: [img[passage-name-of-embeded-image]];
    background-repeat: no-repeat;

    /* you need to size your background image correctly */
    background-size: 1000px 300px;
    }
    #sidebar {
    background-color: darkgrey;
    margin: 0px;
    padding: 0px;
    left: 0px;
    position: static;

    /* the top margin need to be at least as big as your background image height */
    margin-top: 300px;
    /* the width of background image */
    width: 1000px;
    }
    #sidebar li {
    display: inline;
    text-align: center;
    }
    #sidebar #title {
    display: block;
    }
    #sidebar #title span:not(:first-of-type) {
    margin-left: 10px;
    }
    #sidebar #storySubtitle {
    display: inline;
    }
    #sidebar #titleSeparator {
    display: none;
    }
    #passages {
    margin-left: 0px;
    margin-top: 10px;
    padding-left: 0px;
    }
  • Ok first off, thanks for the quick replies! So following what you showed greyelf, I got the basic look coming together, but when I set my browser to full size I noticed that it no longer fits the screen. How would I go about setting a value that can fit regardless of the resolution. Oh and I'm using Firefox in case that matters, and my apologies for the possibly noobish questions again  ;D
  • I'm no expert when it comes to CSS and scaling images because the web-application I build generally don't do much with them but what I do know is scaling an image down looks better than scaling it up.

    The problem is that there is almost an unlimited number of different screen resolutions (if you are targeting both desktop (inc laptops) and mobile devices) and if you don't scale an image in a way so that it keeps it's aspect ratio (height to width) then the image will look bad.

    My suggestion would be to size the image file to a size that makes sense and then to down scale it for smaller resolutions, though someone more experienced with images and CSS may have a better solution.
  • Ok so I started some info searches and found that changing the width from 1000 in your example to 100% instead made it scale to fit the size of the browser. This should work for me now (at least for the time being) until someone who knows a better way can fill me in :)

    So all that said, thanks for the help!
Sign In or Register to comment.