Solved

Position of graphical element below div

Posted on 2013-01-04
13
281 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
Comment Utility
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
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:nsitedesigns
Comment Utility
wow , lots to ponder.  let me get back to you
0
 

Author Comment

by:nsitedesigns
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
sorry been in meetings most of today.  will research tomorrow.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now