asked on

CSS Layout change

Hi, I have an existing database-driven web page which works well, except for one item. That item is that the box scrolls instead of lengthens in height, because initially the box was designed using a fixed height background image. (as in current display below)

It would be easy to just change the height of the box, but the boxes are generated dynamically with text coming back from the database, and I want it to grow in height instead of scrolling the text. (as in what I am trying to do below)

I am trying to maintain the centered positioning of the gray lines which connect the pictures to the left and also to the box.

This how it currently displays:

This is what I am trying to do:

My current code (includes CSS)
sixdegrees.html

And the headshot image:

Deja Anbu

u have given height for content area "sixdegrees_content" also u have given overflow:auto:

thats y the scrollbar comes...

whats the pbm if " height:auto: overflow:visible; " is given for sixdegrees_content ?

Tom Beck

Because the images are in a separate div block from the text div block, there's no way to keep the images lined up with top bar of the text boxes while the height of the text boxes is variable. At least not with css alone. You need to get each text block and it's associated image inside the same div. Sample layout with revised css attached.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css"> 
 
*{margin:0px; padding:0px;}
#sixdegrees_container{background:#fff; width:847px; margin:auto; }
body {font-family: arial}
#sixdegrees_header{ width:827px; padding:20px 0 20px 20px}
#sixdegrees_header h1{ text-align:center; padding:0 0 10px 13px; border-bottom:1px solid #e8e8e8; color:#565656; font-weight:normal; font-size:24px}
#sixdegrees_header p{ text-align:center; padding: 10px 0 0 30px}
#sixdegrees_header p a{ text-decoration:none; color:#397ba8; font-size:15px; font-weight: bold;}
 
.sixdegrees_pic{margin:0 0 56px 0; width:160px; float:left;}
.sixdegrees_pic img{ border:1px solid #d8d8d8; display:block; margin-left: auto; margin-right: auto}
.sixdegrees_pic h1{ font-size:16px; color:#565656; display:block; text-align:center; padding:10px 0 0 0; font-weight: bold}
.sixdegrees_box{background: url(sixdegrees_textbox.png) no-repeat; width:502px; margin:0 0 20px 0; float:left;}
.head{ color:#565656; font-size:14px; font-weight:bold; padding:17px 0 0 83px; }
.sixdegrees_content{ margin:20px 0 0 83px;width:417px;}
.sixdegrees_content h1{ font-weight:bold; font-size:14px; color:#565656; text-transform:uppercase}
.sixdegrees_content p{font-weight: normal; font-size:14px; color:#565656; padding:0 0 10px 0}
.singleEntry{width:827px;float:left;}
 
</style>
</head>
<body> 
 
<div id="sixdegrees_container">
	<div id="sixdegrees_header">
    	<h1>6 Degrees of Separation</h1> 
    </div><!-- End of sixdegrees_header-->
    <div class="singleEntry">
        <div class="sixdegrees_pic">
        	<img src="images/pic.jpg" alt="" />
            <h1>FIRST PERSON</h1>
        </div>
        <div class="sixdegrees_box">
        	<p class="head">Commonality</p>
            <div class="sixdegrees_content">
            	<h1>ACADEMIC AFFILIATION</h1>
                <p>American Society of Cataract & Refractive Surgery</p>
       	<h1>PROGRAMS ATTENDED</h1>
                <p>Bromday Speaker Training Web Teleconference</p>
            	<h1>ACADEMIC AFFILIATION</h1>
                <p>American Society of Cataract & Refractive Surgery</p>
       	<h1>PROGRAMS ATTENDED</h1>
                <p>Bromday Speaker Training Web Teleconference</p>
                
            </div><!-- End of content-->
        </div><!-- End of box-->
    </div><!-- End of singleEntry -->
    <div class="singleEntry">
        <div class="sixdegrees_pic">
        	<img src="images/pic.jpg" alt="" />
            <h1>SECOND PERSON</h1>
        </div>
        <div class="sixdegrees_box">
        	<p class="head">Commonality</p>
            <div class="sixdegrees_content">
                 	<h1>CLINICAL AFFILIATION</h1>
                <p>Columbia Hospital</p>
                
            </div><!-- End of content-->
        </div><!-- End of box-->
    </div><!-- End of singleEntry -->
    <div class="singleEntry">
        <div class="sixdegrees_pic">
            <img src="images/pic.jpg" alt="" />
            <h1>THIRD PERSON</h1>
        </div>
        <div class="sixdegrees_box">
        	<p class="head">Commonality</p>
            <div class="sixdegrees_content">
            	<h1>CLINICAL AFFILIATION</h1>
                <p>Good Samaritan Medical Center</p>
                
            </div><!-- End of content-->
        </div><!-- End of box-->
    </div><!-- End of singleEntry -->
    <div class="singleEntry">
        <div class="sixdegrees_pic">
            <img src="images/pic.jpg" alt="" />
            <h1>FOURTH PERSON</h1>
        </div>
        <div class="sixdegrees_box">
        	<p class="head">Commonality</p>
            <div class="sixdegrees_content">
            	<h1>ACADEMIC AFFILIATION</h1>
                <p>American Academy of Opthalmology (AAO)</p>
            	<h1>CLINICAL AFFILIATION</h1>
		        <p>Good Samaritan Hospital</p>                
            </div><!-- End of content-->
        </div><!-- End of box-->
    </div><!-- End of singleEntry -->
    <div class="singleEntry">
        <div class="sixdegrees_pic">
            <img src="images/pic.jpg" alt="" />
            <h1>FIFTH PERSON</h1>
        </div>
        <div class="sixdegrees_box">
        	<p class="head">Commonality</p>
            <div class="sixdegrees_content">          	
		        <h1>CLINICAL AFFILIATION</h1>
		        <p>Good Samaritan Hospital</p>
            	<h1>DEGREES</h1>
		        <p>M.D.</p>                
            </div><!-- End of content-->
        </div><!-- End of box-->
</div><!-- End of singleEntry --> 
<br clear="all" />  
</div><!-- End of sixdegrees_container-->
 
</body>
</html>

Open in new window

trman

ASKER

dejaanbu: the only pbm is that the gray connecting lines which are in the image sixdegrees_textbox.png do not line up then. I use this image to set the gray lines connecting the images on the left. any ideas? thanks!

trman

ASKER

tommyBoy, your comment makes sense. Do you see what I am trying to achieve by the two different screenshot images? Basically, the records will be coming back from a database, some of them will have minimum content, others will have more. That is why the height of the box must stretch. however, I am tasked with keeping the gray lines connecting the two images and the box as in the screenshots.

Tom Beck

I see exactly what you're trying to do and no amount of tweaking the css will get you there. The image and it's associated text will have to be together in the same container so they can move together as the container's height varies.

You say the records come back from a database. Are the containing divs for the records also dynamically created? If so, do you have access to change the layout of the tags that are produced dynamically?

trman

ASKER

yes i have full control of the html display. only the image (pic) and associated lines of text are returned by the recordset. my task is to create the layout where the gray lines will connect the images and the box (as in the scrolling-box.png images)

Tom Beck

Great. The layout in my sample will get you close to what you need, at least close enough that css can be used to make minor adjustments. Note that my path to the the pics is different from yours so that will have to be changed back. If you need help with the new layout, just post the relevant code or markup and I would be happy to help.

It's getting late so if you need help tonight, get back to me soon.

trman

ASKER

thanks tommyBoy, I will get on it tomorrow, as I am on PST time. cheers.

trman

ASKER

tommyBoy can you elaborate on your previous code please. obviously I will not be able to use the bg image i had been using, but to achieve the rounded corners, I am thinking of using this one:

Tom Beck

I made changes to the css for these three items in order to get my markup to look more like your sample image.

.sixdegrees_box{background: url(top-bar.png) no-repeat; background-color:#eee; min-height:180px; width:440px; margin:0 0 20px 63px; float:left;}
.head{ color:#565656; font-size:14px; font-weight:bold; padding:7px 0 0 22px; }
.sixdegrees_content{ margin:20px 0 0 22px;width:417px;}

Maybe the background image you were using can still be used. Can you post it? For the image attached, I just used a background color which you can remove from the css.
6-Degrees.jpg

trman

ASKER

ok, here is the image

your code looks good. is there any way to replicate the left, right and bottom dark gray border lines as in this image, without extending up to the top of the top-bar.png?

border-left: 1px solid #e6e6e6e; border-right: 1px solid #e6e6e6e; border-bottom: 1px solid #e6e6e6e;

trman

ASKER

oops I meant '#d8d8d8'

Tom Beck

Try replacing these three again to add the border.

.sixdegrees_box{background: url(images/top-bar.png) no-repeat; width:440px; min-height:200px; margin:30px 0 0 63px; float:left;}
.head{ color:#565656; font-size:14px; font-weight:bold; padding:7px 0 0 22px; }
.sixdegrees_content{padding:20px 0px 20px 63px; margin:7px 0 0 1px; width:374px; min-height:100px; border-left:solid 1px #ddd; border-right:solid 1px #ddd; border-bottom:solid 1px #ddd; background-color:#f8f8f8; }

Tom Beck

Forgot to change the image path on that one.

Tom Beck

The background you originally had can be re-created if you are willing to take these steps.

Because the item heights now vary, a single background image will not work. Attached are three background images, one for the top item, one for the bottom item and one for all the middle items. In your code that produces the html markup, you will have to add some additional logic to print out different class attributes for the first and last items and another for any in the middle.

Screenshot attached of how the table will look with the backgrounds.

The attached css includes the three different classes for the background images. I also had to make additional adjustments.

A problem still exists. The layout does not display the same in IE as it does in other browsers. This may require a new question.

*{margin:0px; padding:0px;}
body { font-family:arial;text-align:center;}
#sixdegrees_container{ background:#fff; width:847px; margin:auto; }
#sixdegrees_header{ width:827px; padding:20px 0 20px 20px}
#sixdegrees_header h1{ text-align:center; padding:0 0 10px 13px; border-bottom:1px solid #e8e8e8; color:#565656; font-weight:normal; font-size:24px}
#sixdegrees_header p{ text-align:center; padding: 10px 0 0 30px}
#sixdegrees_header p a{ text-decoration:none; color:#397ba8; font-size:15px; font-weight: bold;} 
.sixdegrees_pic{ margin:0 0 56px 0; width:160px; float:left;}
.sixdegrees_pic img{ border:1px solid #d8d8d8; display:block; margin-left: auto; margin-right: auto}
.sixdegrees_pic h1{ font-size:16px; color:#565656; display:block; text-align:center; padding:10px 0 0 0; font-weight: bold}
.sixdegrees_box{ background: url(top-bar.png) no-repeat; width:440px; min-height:200px; height:auto !important; margin:30px 0 0 63px; float:left;}
.head{ color:#565656;font-size:14px;font-weight:bold; padding:7px 0 0 22px;text-align:left; }
.sixdegrees_content{ padding:20px 0px 20px 22px; margin:7px 0 0 1px; width:415px; min-height:100px; height:auto !important; border-left:solid 1px #ddd; border-right:solid 1px #ddd; border-bottom:solid 1px #ddd; background-color:#f8f8f8;text-align:left; }
.sixdegrees_content h1{ font-weight:bold; font-size:14px; color:#565656; text-transform:uppercase}
.sixdegrees_content p{ font-weight: normal; font-size:14px; color:#565656; padding:0 0 10px 0}
.singleEntry_top{ width:827px;float:left; background:url(6_degrees_bg_top.png) no-repeat;}
.singleEntry_mid{ width:827px;float:left; background:url(6_degrees_bg_mid.png) no-repeat;}
.singleEntry_bot{ width:827px;float:left; background:url(6_degrees_bg_bot.png) no-repeat;}

Open in new window

6-degrees-bg-bot.png
6-degrees-bg-mid.png
6-degrees-bg-top.png
6-Degrees.jpg

Tom Beck

Replace these 3 again to correct most of the problems with IE8.

.sixdegrees_box{ background: url(images/top-bar.png) no-repeat; width:440px; min-height:200px; height:auto !important; height:200px; margin:30px 0 0 63px; float:left;}
.head{ color:#565656;font-size:14px;font-weight:bold; padding:7px 0 0 22px;text-align:left; }
.sixdegrees_content{ padding:20px 0px 20px 22px; margin:7px 0 0 1px; min-height:100px; height:auto !important; height:100px; border-left:solid 1px #ddd; border-right:solid 1px #ddd; border-bottom:solid 1px #ddd; background-color:#f8f8f8;text-align:left;display:block; }

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

trman

ASKER

hi tommyBoy, that is genius level design work!
the only correction I needed to make to get it to work was inside the CSS to replace the image pathways from underscores to dashes. Other than that, it looks great. I think it definitely is possible to integrate that with the returned dataset rows.

Thanks again! Have a great day.

Tom Beck

Glad it worked out, thanks for the points.