Howdy, Stranger!

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

Creating a seperate box for images.

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?

Comments

  • 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.
  • 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!
  • (Huh, I'd mark this question as answered but I can't find the prompt to do that anywhere..?)
  • 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.
Sign In or Register to comment.