Sugarcane CSS Layout Help

Comments

• nicolem

  April 2015

  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;
}
• greyelf

  April 2015

  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;
}

• Eaturbrainz

  April 2015

  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
• greyelf

  April 2015

  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.
• Eaturbrainz

  April 2015

  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!