• Locked
2 replies [Last post]
Mon, 2015-09-28 17:23
lastevns
lastevns's picture
Offline
newbie
Southern California
Last seen: 7 years 33 weeks ago
Southern California
Timezone: GMT-7
Joined: 2015-09-28
Posts: 2
Points: 5

Hello,

First post and I believe I've read all the rules but I may over post information trying to provide everything needed for a quick response. Please let me know if I've violated any rules.

I want to be able to create an article to be posted into a Joomla page I am creating. I need to know how to create an article that looks like the image here.

I have the page uploaded here along with full paths to the .css and images.

My issue is I don't know how to make the elements with imagebox, the text and the imagebox-wide all sit next to one another in what would essentially be a table row (without tables, obviously).

I suspect this has something to do with floats and clears but I'm lost when I get to that second image. I want the first image to float left (as it does). I want the text in the middle. I want the second photo to float right while still allowing the text to sit within the middle of the two images.

Is this possible?

Here is my html code 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Harriet Schock</title>
<link href="http://www.songwritersguild.com/motif/docs/overrides.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<div class="bgheader"><h2>Harriet Schock</h2></div>
<div class="imagebox"><img src="http://www.songwritersguild.com/motif/docs/harriet_schock_9.png" width="200" height="221" alt="Harriet Schock Head Shot"></div>
<span>
<p>Harriet Schock is a songwriter, performer and songwriting instructor as well as a board member for the SGA. She has written multiple gold and platinum hits and has been recorded by Smokey Robinson, Helen Ready, Johnny Mathis, Roberta Flack, Lee Greenwood and many others.</p>
<p>Schock conducts small songwriting classes with select student and offers songwriting consultations for developing songwriters.</p>
<p>Visit Schock's website to the left or contact her via our e-mail form, below.</p>
</span>
<span class="imagebox-wide"><img src="http://www.songwritersguild.com/motif/docs/harriet_schock_website_image.png" width="304" height="221" alt="Image of Harriet Schock's website">
</span>
 
 
</body>
</html>

Here is my CSS:

@charset "utf-8";
.bgheader {
	font-family: "Source Sans Pro";
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
	background-color: #174299;
	background-repeat: no-repeat;
	color: #FFF;
	text-align: center;
	vertical-align: middle;
	padding: 5px;
	width: 100%;
	border-top-width: thin;
	border-right-width: 0px;
	border-bottom-width: thin;
	border-left-width: 0px;
	border-top-style: inset;
	border-right-style: none;
	border-bottom-style: ridge;
	border-left-style: none;
	border-top-color: #006;
	border-bottom-color: #006;
	height: auto;
}
.imagebox {
	background-color: #FFF;
	background-repeat: no-repeat;
	white-space: normal;
	display: inline-block;
	padding: 5px;
	float: left;
	height: 226px;
	width: 205px;
	border: 5px solid #FFF;
	position: static;
}
.imagebox-wide {
	background-color: #FFF;
	background-repeat: no-repeat;
	white-space: normal;
	display: inline-block;
	padding: 5px;
	float: right;
	height: 226px;
	width: 309px;
	border: 5px solid #FFF;
	position: static;
}

I preview the page in FF, MSIE, Chrome and Safari. But that issue is null given I don't know how to create what I want, correctly, to begin with. I'd appreciate any help provided.

Thank you,
Laurie

Top
  • view bestreply
Tags:
Tue, 2015-09-29 01:54
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

One way to skin the cat 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8">
    <title>
      Test document
    </title>
    <style type="text/css">
/*<![CDATA[*/
 
    body {
        background-color: white;
        color: black;
        font: 100%/1.5 sans-serif;
        margin: 0;
        padding: 1.5em;}
 
    p {
        font-size: 1em;}
 
    h1 {
	background-color: #174299;
	color: white;
	font: bold 1.5em/1.5 "source sans pro", sans-serif;
	letter-spacing: 0.1em;
	padding: 1em 0;
	text-align: center;
	text-transform: uppercase;}
 
    .content-wrapper {
	margin: 0 auto;
	max-width: 1200px;
	overflow: hidden;}   /*encloses float elements*/
 
    .text-block {
    	overflow: hidden;} /*prevents text from wrapping under the
                              floating images.*/
 
    .text-block p:first-child {
	margin-top: 0;}
 
    .headshots {
	float: left;
	margin-right: 1em;}
 
    .webcaps {
	float: right;
	margin-left: 1em;}
 
    /*]]>*/
    </style>
  </head>
  <body>
    <div class="content-wrapper">
 
      <!-- guessing this is page's top level heading -->
      <h1>
	Harriet Schock</h1>
 
      <img src="http://www.songwritersguild.com/motif/docs/harriet_schock_9.png"
	      class="headshots"
	      width="200"
	      height="221"
	      alt="Harriet Schock Head Shot">
 
      <img src="http://www.songwritersguild.com/motif/docs/harriet_schock_website_image.png"
	      class="webcaps"
	      width="304"
	      height="221"
	      alt="Image of Harriet Schock's website">
 
      <div class="text-block">
	<p>Harriet Schock is a songwriter, performer and songwriting instructor as well as a board member for the SGA. She has written multiple gold and platinum hits and has been recorded by Smokey Robinson, Helen Ready, Johnny Mathis, Roberta Flack, Lee Greenwood and many others.</p>
 
	<p>Schock conducts small songwriting classes and offers select songwriting consultations for developing songwriters.</p>
 
	<p>Visit Schock's website to the left or contact her via our e-mail list, below.</p>
      </div> <!-- end text-block -->
    </div> <!-- end content-wrapper  -->
  </body>
</html>

Notice the order of the content.

N.B. You may want to proof the spelling, e.g. it's Helen Reddy.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Tue, 2015-09-29 21:17
#2
lastevns
lastevns's picture
Offline
newbie
Southern California
Last seen: 7 years 33 weeks ago
Southern California
Timezone: GMT-7
Joined: 2015-09-28
Posts: 2
Points: 5

Thank you

Gary,

First, yes, thanks for the reminder to proofread. I tell myself I will do this before going live but there are times I forget.

As to the code, it works perfectly. Thank you. I appreciate the commenting for learning.

Laurie

Top
  • Locked