Creating a seperate box for images.

procrasty · November 2015

Hi all, I'm trying to experiment with stylesheets a little more now but I've run into a problem.

I'm trying to alter the "Hypercane 1.1" stylesheet found here: https://www.glorioustrainwrecks.com/node/5163 so that it has two boxes rather than just one, so I can have an image box above, and a text box below.

Not knowing CSS too well I have attempted to do this by cannibalising part of the "The Earth's Story Illustrated" stylesheet found on the same page, as that has two boxes. I've done so by adding this into the Hypercane stylesheet:

}
.passage .header {
width:100%;
height:480px;
min-height: 480px;
border: #fff double 0.5em;
border-radius: 1em;
margin: 0 auto 1.5em auto;
padding: 0;
background-position: center;
background-repeat: no-repeat;
}

It doesn't work, but it doesn't do nothing either, it changes the text box to give it a 480px blank space at the top. So almost what I want, but still one big box, rather than two little ones.
So the question is, what part of the "The Earth's Story Illustrated" stylesheet is triggering the creation of a seperate box, and can I drop it into "Hypercane 1.1" to get that effect or is there something I will need to remove from there first to stop it from clashing ad just making a big ol' mess?

greyelf · November 2015

Try the following:

/* A Illustrated Hypercaned Earth Story Stylesheet */
body {
	margin: 10% 0 10% 0;
	height: 100%;
	font-family: Geneva, "Helvetica Neue", Helvetica, sans-serif;
	color: #000;
	background-color: #fff;
	text-align: left;
}

#sidebar {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 99.2%;
	overflow-x: hidden;
	border-bottom: solid #000 1px;
}

#sidebar * {
	color: #000 !important;
	background-color: clear !important;
	display: inline !important;
	font-size: 1.5rem;
}
#sidebar a:hover, #sidebar #snapback:hover,  #sidebar #restart:hover {
	text-decoration: underline !important;
}
#sidebar a:active, #sidebar #snapback:active,  #sidebar #restart:active  {
	color:#fff !important;
	font-size: 1.5rem;
	background-color: #000 !important;
	display: inline !important;
}
#sidebar li, #sidebar li > span {
	margin-left: 1rem;
	margin-right: 1rem;
}
#sidebar a, #sidebar a:hover {
  border: 0 !important;
  box-shadow: none;
}
.menu {
	background-color: #fff;
	color: #000;
	opacity: 1;
	font-size: 1.5rem;
	border: solid #000 1px;
	box-shadow: #000 0.1em 0.1em 0;
}
.menu div:hover {
	background-color: #000;
	color: #fff;
}
#credits, #share, #titleSeparator, #sidebar li br {
	display: none !important;
}

#passages {
	margin: 0;
	padding: 0;
	border: 0;
	height: 100%;
}

#passages * {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.passage {
	position: relative;
	width: 60%;
	margin: auto;
	font-size: 1.5rem;
	background-color: #fff;
}
.passage .header {
	width: 100%;
	height: 480px;
	min-height: 480px;
	border: #000 double 0.5em;
	border-radius: 1em;
	margin: 0 auto 1.5em auto;
	padding: 0;
	background-position: center;
	background-repeat: no-repeat;
}
.passage .content {
	top: 500px;
	width: 100%;
	border: #000 double 0.5em;
	border-radius: 1em;
	padding: 1em;
}

a.internalLink, a.externalLink {
	border: solid #000 0.05em;
	white-space: nowrap;
	padding: 0.1em 0.2em 0.1em 0.2em;
	border-radius: 0.5em;
	color: #000;
}
a.internalLink:hover, a.externalLink:hover {
	text-decoration: none;
	box-shadow: #000 0 0 0 0.1em;
	color: #000;
}
a.internalLink:active, a.externalLink:active {
	color: #fff;
	background-color: #000;
}

There are three important parts:

1. The box-sizing in the #passages * selector, which will help make both the image and the passage text area boxes the same width.

2. The .passage .header and .passage .content selectors, which format the image and passage text areas respectively.

3. Remembering to changing the colour of the borders of the image and passage text areas to black! (#000)

note: You may want to get a more experienced CSS coder to look at the above, I may of missed something stupid.

procrasty · November 2015

Thanks! I managed to get most of the way in the end with some help from some CSS literate friends, and a fair whack of trail and error, this was the version I ended up with which bar some aesthetic difference is more or less the same I think.

body {
  margin: 10% 0 10% 0;
}
#passages{
  margin: 0;
  padding: 0;
  border: 0;
}
.passage, #sidebar * {
  font-family: Geneva, "Helvetica Neue", Helvetica, sans-serif;
  color:#000;
  text-align:left;
}
.passage {
  position:relative;
  width: 60%;
  font-size:1.5em;
  font-family:  Geneva, "Helvetica Neue", Helvetica, sans-serif;
  margin: 2em auto 0 auto;
}
.passage .header {
  border-radius: 0.2em;
  width: 60%;
  margin: 2em;
  padding: 2em;
  font-size:1.5rem;
  background-color:#fff;
  border: solid #000 0.05em;
  box-shadow: #000 0.5em 0.5em 0;
}
.passage .content {
  border-radius: 0.2em;
  width: 60%;
  margin: 2em;
  padding: 2em;
  font-size:1.5rem;
  background-color:#fff;
  border: solid #000 0.05em;
  box-shadow: #000 0.5em 0.5em 0;
}
a.internalLink, a.externalLink {
  border: solid #000 0.05em;
  white-space: nowrap;
  padding: 0.1em 0.2em 0.1em 0.2em;
  border-radius: 0.5em;
  color:#000;
}
a.internalLink:hover, a.externalLink:hover {
  text-decoration: none;
  box-shadow: #000 0 0 0 0.1em;
  color:#000;
}
a.internalLink:active, a.externalLink:active {
  color: #fff;
  background-color:#000;
}
body {
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQMAAACTPww9AAAABGdBTUEAALGPC/xhBQAAAAZQTFRFAAAA////pdmf3QAAAA5JREFUeF5jOACEBgwGAAnIAeGomjuiAAAAAElFTkSuQmCC);
}
#sidebar {
  position:absolute;
  top:0px;
  left:0px;
  width:99.2%;
  overflow-x:hidden;
  background-color:#fff;
  border-bottom: solid #000 1px;
}
#sidebar * {
  color: #000 !important;
  font-size:1.5rem;
  background-color:clear !important;
  display:inline !important;
}
#sidebar a:hover, #sidebar #snapback:hover,  #sidebar #restart:hover {
  text-decoration:underline !important;
}
#sidebar a:active, #sidebar #snapback:active,  #sidebar #restart:active  {
  color:#fff !important;
  font-size:1.5rem;
  background-color:#000 !important;
  display:inline !important;
}
#sidebar li, #sidebar li > span {
  margin-left: 1rem;
  margin-right: 1rem;
}
#sidebar a, #sidebar a:hover {
  border: 0 !important;
  box-shadow: none;
}
.menu {
  background-color:#fff;
  color:#000;
  opacity:1;
  font-size: 1.5rem;
  border: solid #000 1px;
  box-shadow: #000 0.1em 0.1em 0;
}
.menu div:hover {
  background-color:#000;
  color:#fff;
}
#credits, #share, #titleSeparator, #sidebar li br {
  display:none !important;
}

Having just put that in I realise it's missing the #passages * box-sizing, so yours will be less messy. Thank you!

procrasty · November 2015

(Huh, I'd mark this question as answered but I can't find the prompt to do that anywhere..?)

greyelf · November 2015

procrasty wrote: »

(Huh, I'd mark this question as answered but I can't find the prompt to do that anywhere..?)

If you originally created this thread using the New Discussion button instead of the Ask a Question one then you can't mark it as Answered.

Howdy, Stranger!

Categories

Creating a seperate box for images.

Comments