Solved

Position of graphical element below div

Posted on 2013-01-04
13
283 Views
Last Modified: 2013-01-23
How do I position the paper fold below the text box, flush left of box_tan_text div

Here is a screen shot of the layout in PS.  This is where I want it to be located.
http://screencast.com/t/0rU3fLAb

Here is beta html
http://nsitedesigns.com/nsitedesigns/cbrf/test.html
0
Comment
Question by:nsitedesigns
  • 5
  • 4
  • 2
  • +1
13 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38745876
I doubt that you are going to get that right column to go to a height greater then that forced by content with a transitional doctype.  You might get it to go with xhtml strict, but HTML5 would be a better choice.

Cd&
0
 
LVL 35

Assisted Solution

by:Robert Schutt
Robert Schutt earned 250 total points
ID: 38745879
This seems to do it, change
#box_tan_text {
	BACKGROUND-COLOR: #e6e4dd; WIDTH: 165px; FLOAT: left
}

Open in new window

to
#box_tan_text {
	WIDTH: 165px; FLOAT: left
}
#box_tan_text2 {
	BACKGROUND-COLOR: #e6e4dd; WIDTH: 165px; HEIGHT: 400px; FLOAT: left
}

Open in new window

and use
<DIV id=box_tan_text>
<DIV id=box_tan_text2>
<P>“Testimonial goes here or your can put a quote. Here is where you put the 
info. </P>
<P>Testimonial goes here or your can put a quote.“</P>
<P>Jane DoeMercy Hospital<BR>Anytown, WI</P>
</DIV>

Open in new window

followed by the image.
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 38745882
You may be right in general Cd& but it works for me, I just saved the page and edited it. I use IE8 by the way...

EDIT: just tested with FF and Chrome, and it still holds up.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38745945
robert,

That will hold up as long as it is a static page with a fix resolution.  However user settings for the font  could result in a overflow because the height is fixed.  Might be better using em instead of px; but it is still not going to be fluid or flexible.

Cd&
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 38745976
Agreed, but it does seem to be an intro page that may not need full flexibility. That would need a lot more work, probably only worth it if it's gonna be a template for more than 1 page.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 250 total points
ID: 38746140
It looks like you started with one of the built in templates from dreamweaver.  Having tried those many years ago, I spent way too much time tripping up on them.  Make your life easier and try out one of the grid systems.

I created a very quick sample using blueprint.css  http://www.blueprintcss.org/ but check out http://960.gs/ or just google grid systems and you will see a good handful.    The blueprint.css is one of the first I liked.  There are more "modern" grids now that include responsive.  But what I have found is responsive simply means putting everything out there at once and letting the device decide.  After fumbling on other's responsive sites on my android 3g slow phone, I have decided at least for me, to keep separate desktop and mobile versions and just make the mobile version fast and light.

With blueprint, I just really use the main css http://www.blueprintcss.org/blueprint/src/grid.css.  The key is it is color by numbers - 1 -24.

You want 3 columns? Just divide by 3 =  <div class="span-8">col 1</div><div class="span-8">col 2</div><div class="span-8">col 3</div>

For this layout, I simply took the the paper fold and made it a background of the the main area.  This of course only works if the main container area is static in width and the color box area is static in hight.  Looking at the photohsop image, it looks like that is what you want to do anyway.  If you tried to do the similar thing with the current layout, I think it would be more difficult which is why I went to the blueprint.css.   With any grid system, it's just a base framework - use your own css in addition to make things look good.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="http://www.blueprintcss.org/blueprint/src/grid.css" rel="stylesheet" type="text/css">
<style>
body {
	font: 14px Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #313433;
	background-image:url(http://nsitedesigns.com/nsitedesigns/cbrf/img/back_new.png);
	background-repeat:repeat;
}
.container {
	background:#fff
}
/*       NAVIGATION       */
#nav {
	background-color:#313433;
	overflow:hidden;
}
#nav_container {
	width:933px;
	margin-bottom: 13px;
	padding:0px;
}
#nav ul li {
	float:left;
	list-style:none;
	text-align:left;
}
#nav li a {
	color:#fff;
	font-weight:bold;
	display:block;
	padding:4px 18px 3px 18px;
	text-decoration:none;
}
#nav ul {
	list-style: none;
	font-size:14px;
	padding:0px;
	margin:0px;
}
.firstbutton {
	margin-left:30px;
}
#nav li a:hover {
	color: #fff;
	background-color: #809eb2;
	padding:4px 18px 3px 18px;
}
/* DROP DOWNS */	
	
	#nav li ul {
	display: none;
	float: left;
	padding: 0;
	position: absolute;
}
ul#nav li a:focus {
	color:#fff;
}
#nav li ul {
	background: #e6e4dd;  /*tan drop down color */
	display: none;
	float: left;
	padding: 0;
	position: absolute;
}
#nav li:hover ul {
	display:block;
}
#nav li ul li {
	float:none;
	width:155px;
}
#nav li ul li a {
	color:#000;
	font-weight:normal;
}
/*       IMAGES      */

.blue_header_stripe {
	margin:5px 0px;
}
#header {
	padding: 0 10px 0 20px;
}
#header h1 {
	margin: 0;
	padding: 30px 30px 30px 469px;
	font-size:18px;
	font-weight:normal;
}
/*       BOX MAIN CONTAINER       */

#colored_box_container {
	margin:0px 45px 40px 45px;
	width:848px;
	float:left;
}
/*      BLUE BOX      */

#box_blue {
	/*width:226px;*/
	float:left;
	background-color:#98b6ca;
	border-right:1px solid #fff;
}
#box_blue h1 {
	background-color:#627684;
	color:#fff;
	font-size:16px;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
	margin:0px;
}
#box_blue p {
	margin:15px;
	color:#fff;
}
/*      TAN BOX      */


#box_tan {
	/*width:226px;*/
	float:left;
	border-right:1px solid #fff;
	background-color:#cbb098;
}
#box_tan h1 {
	background-color:#826851;
	color:#fff;
	font-size:16px;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
	margin:0px;
}
#box_tan p {
	margin:15px;
	color:#fff;
}
/*      GREEN BOX      */

#box_green {
	/*width:226px;*/
	float:left;
	border-right:1px solid #fff;
	background-color:#98cbc2;
}
#box_green h1 {
	background-color:#5c877f;
	color:#fff;
	font-size:16px;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
	margin:0px;
}
#box_green p {
	margin:15px;
	color:#fff;
}
/*       TEXT BOX for TESTIMONIAL     */
#box_tan_text {
	/*width:165px;*/
	background-color:#e6e4dd;
	float:left;
}
#box_tan_text p {
	color:#827d7d;
	margin:30px 15px;
	font: 95% Verdana, Arial, Helvetica, sans-serif;
}
/*       FLOAT       */

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
.bookend {
	background-image: url(http://nsitedesigns.com/nsitedesigns/cbrf/img/box_text_point.gif);
	background-repeat: no-repeat;
	background-position: 730px -2px;
}
.colorbox {
	height:400px;
}
.sidbarcontent {
	padding-top:75px;
}
</style>
</head>

<body>
<div class="container">
  <div id="topnav" class="span-24 last">
    <div id="nav_container">
      <div id="nav">
        <ul>
          <li class="firstbutton"><a href="#">Administrators</a>
            <ul>
              <li><a href="compliance.html">Compliance</a></li>
              <li><a href="admin_education.html">Education</a></li>
              <li><a href="leadership.html">Leadership Skills</a></li>
              <li><a href="operations.html">Operations</a></li>
              <li><a href="service.html">Service Plans</a></li>
            </ul>
          </li>
          <li><a href="#">Staff Training</a>
            <ul>
              <li><a href="training.html">Training</a></li>
            </ul>
          </li>
          <li><a href="#">Getting Started</a>
            <ul>
              <li><a href="memoryhtml">Memory Care</a></li>
              <li><a href="programming.html">Programming</a></li>
            </ul>
          </li>
          <li><a href="links.html">Resources/Links</a></li>
          <li><a href="events.html">Events</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li><a href="index.html">Home</a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- end top nav -->
  
  <div class="midcontent span-23 prepend-1 last">
    <div id="box_blue" class="span-6 last colorbox" > <img src="img/box_blue_man2.jpg" width="226" height="249" />
      <h1>Business Startup</h1>
      <p>Find out if a career operating an assisted living facility is right for you.</p>
      <p><a href="#">Learn more</a></p>
    </div>
    <div id="box_tan" class="span-6 last colorbox" colorbox><img src="img/box_tan_lady.jpg" width="226" height="249" />
      <h1>Admin Development</h1>
      <p>We can help you with your management compliance needs.</p>
      <p><a href="#">Learn more</a></p>
    </div>
    <div id="box_green" class="span-6 last colorbox"><img src="img/box_green_girl.jpg" width="226" height="249" />
      <h1>Staff Training</h1>
      <p>Learn memory care techniques, therapeutic progrramming and more!</p>
      <p><a href="#">Learn more</a></p>
    </div>
    <div id="box_tan_text" class="span-5 colorbox">
      <p>“Testimonial goes here or your can put a quote.  Here is where you put the info. </p>
      <p>Testimonial goes here or your can put a quote.“</p>
      <p>Jane DoeMercy Hospital<br />
        Anytown, WI</p>
    </div>
  </div>
  <!-- end mid content -->
  <div id="maincontent" class="span-24 last bookend"> 
    <!--left side-->
    <div id="leftmain" class="span-17 prepend-1">
      <h1>Main Content </h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum etrsus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
      <h2>H2 level heading </h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    </div>
    <!--end left side--> 
    
    <!-- right side-->
    <div id="sidbar" class="span5 sidbarcontent">
      <h1>(920) 946-7627 
        <!-- end #sidebar1 --> 
      </h1>
    </div>
    <!--end right side--> 
    
  </div>
  <!--end maincontent--> 
  
</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:nsitedesigns
ID: 38752013
wow , lots to ponder.  let me get back to you
0
 

Author Comment

by:nsitedesigns
ID: 38774602
Robert, your solution gave me a nice tan box but the bottom "arrow" image was not incorporated.

Padas, you solution requires that I learn a completely new technique for building websites.  While I appreciate all the time you spent working on it, I really don't understand it.

Perhaps the best solution would be to simply replace the text box with an image so there would be 4 images at the top of the home page.

Here is new beta page
http://nsitedesigns.com/nsitedesigns/cbrf/2.html
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 38774673
I don't see a 4th image in your new document.

Maybe I missed something in my description of changes. I have put my test file on-line and tested again, this time with IE9, FireFox, Chrome and Safari; all ok.

If you are still interested, see here: http://schutt.nl/ee/Q_27985311/Q_27985311.htm 

Of course the remarks of the other experts may steer you in another direction regardless of whether it's possible, in that case ignore this please.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38774702
Padas, you solution requires that I learn a completely new technique for building websites.  While I appreciate all the time you spent working on it, I really don't understand it.
Within the last week I have helped several people with similar issues and they all had to do with coding only based within their knowledge.   I push the grid systems because they do really help you with your structure and things like what you are asking become a lot easier with better structure.  The takeaway is a short term learning curve saves huge amount of time later.   Think about how much time you have spent on this.  That sample took me 15 minutes to put together and it did exactly what you asked for.

Anyway, the thing with html is there are multiple ways to get to the same visual experience and that paper fold is not going to make or break the site.  Good luck and make sure to check your errors.   http://validator.w3.org/check?uri=http%3A%2F%2Fnsitedesigns.com%2Fnsitedesigns%2Fcbrf%2F2.html&charset=%28detect+automatically%29&doctype=Inline&group=0
0
 

Author Comment

by:nsitedesigns
ID: 38774709
Robert,

I was suggesting that maybe I should create an image instead of the tan text box.  I link you provided does show the bottom arrow.  Let me see if I messed up on my code.
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 38782386
maybe I should create an image instead of the tan text box
o sorry, I thought you meant it was already supposed to be there...

Any luck on finding out whether you still want/need to do that?
0
 

Author Comment

by:nsitedesigns
ID: 38785099
sorry been in meetings most of today.  will research tomorrow.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
AdminLTE with wordpress 15 64
Sort Order Icons on HTML Table 3 24
Create tabs to show divs 9 31
Javascript the "if condition with Or" 8 14
This article discusses four methods for overlaying images in a container on a web page
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question