Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question how to get this border image to adjust to dynamic content !?

    This is the site in question:
    http://www.webdesignhull.lincoln.ac....indextest.html

    I am trying to make the graphic that is connected to the border of the grey content box from repeating itself up from a certain point (from the corner and up). Right now container3 has height: 100%;

    The content that goes into the grey box are blog entries and when a new entry is submitted the height of the box change which makes the border design out of place. I want the image that is attached to the grey box to stay on the very corner of the box so when the height changes I want it to stay in the same position!

    I have viewed this in IE6 and it looks terrible.. All the shapes are out of place..


    Does anyone know how to do what I want?????? Please help

    Here is a design mock up to give you a better idea of what I am trying to ultimately do!:
    http://www.webdesignhull.lincoln.ac....border_pro.gif

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Location
    Connecticut, USA
    Posts
    400
    Thanks
    1
    Thanked 0 Times in 0 Posts
    since your graphics are lo-color, you can make this real easy on yourself and use big pics. my first thought is this:

    nix container3 for now. also get rid of the left and right border list items.
    put the background into container2. make it a single image that spans the whole width of its container. attach it to the bottom of #container2, something like
    Code:
    background: url(whatever.gif) bottom center no-repeat;
    I tried repeat-y as well, i think it actually works nicely.

    then make another big background and use it in the body tag, to cover the outside top corners.

    Here's my try:

    little box
    bigger box w/ lipsum

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    
    <title>Home Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />    
    <style type="text/css">
    
    body 	{
    	font-size: 80%; 
    	font-family:  Georgia, "Times New Roman", Times, serif;
    	background: #999999 url(images/greybg.gif) top center no-repeat;
    	}
    
    body .clear {clear: both;}
    
    
    * 	{
    	margin: 0px;
    	padding: 0px;
    	}
    	
    #topwid {
    	height: 29px;
    	background-color: black;
    	}	
    
    #container {
    	padding: 0px;
    	margin: 0px auto;
    	width: 750px;
    	background-color: #CCC;
    	border-right: black 5px solid; 
    	border-left: black 5px solid; 
    	border-bottom: black 5px solid;
    	min-height: 100px;
    	background-repeat:no-repeat;
    	}
    
    #container2 {
    	padding: 0px;
    	margin: 0px auto;
    	width: 950px;
    	min-height: 100px;
    	background-image: url(images/border_pro.gif);
    	background-position:bottom center;
    	}
    	
    * html #content {
        height:100px;
    
        }     
    #validatesite  {
    	
    	padding: 0px;
    	height:50px;
    	left: 50%;
    	margin: 0px auto;
    	width: 200px;
    	vertical-align:top;
    	background-position:center;
    	background-repeat:no-repeat;
    	}
    </style>
    
    </head>
    
    <body>
    <div id="topwid"></div>
    <div id="container2">
    
    <div id="container">
    <ul id="content"></ul>
    </div>
    <div id="validatesite"><a href="http://validator.w3.org/check?uri=referer"><img src="images/w3c_html1.gif" alt="Valid HTML 4.01 
    Transitional" width="80" height="15"/></a>
    <a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/w3c_css2.gif" alt="Valid CSS!" width="80" height="15" 
    /></a></div>
    
    
    </div>
    </body>
    </html>
    Last edited by bustamelon; 05-18-2007 at 08:54 AM.

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    bustamelon thank you the little box example is perfect!
    By adding background-position:bottom center; to container2 it has made this a success!



  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •