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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 27
  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Problem repeating a background

    Hi,

    I have to build a flexible page layout. On the header I need a logo on the left and at the right another quick link. The center portion of the header must be repeated horizontaly and this is the flexible part.

    Here is my code :
    Code:
      #Container 
      {
        width :80%;
        border : solid 1px red;
        margin-left: auto; 
        margin-right: auto; 
        min-width :760px;
      }
      
      #Header 
      {
        height : 94px;
        border : solid 1px black;
      }
      
      #HeaderTopLeft 
      {
        width :160px;
        height :94px;
        background-image : url(images/HeaderTopLeft.gif);
        background-repeat :no-repeat;
        float :left;
      }
    
      #HeaderTopCenter 
      {
        height :94px;
        width : ??? /* Don't know because this is the flexible part !!! */
        background-image : url(images/HeaderTopCenter.gif);
        background-repeat : repeat-x;
        float :left;
        border : solid 1px green;
      }
      
      #HeaderTopRight {
        width :585px;
        height :94px;
        background-image : url(images/HeaderTopRight.gif);
        background-repeat :no-repeat;
        float :right;
      }
    
    -----------------------------------------------------------------
    <div id="Container">
        <div id="Header">
           <div id="HeaderTopLeft"></div>
           <div id="HeaderTopCenter"></div>
           <div id="HeaderTopRight"></div>
        </div>
    </div>
    In the HeaderTopCenter I cannot set the widht of the DIV because this is the flexible part of the layout. I tried to use 100% but doesn't work. The div is taking 100% of the #Container. The main problem is that widht MUST be specified to get the background repeated as X.

    Thank for your help.
    Last edited by Erakis; 05-08-2008 at 04:34 PM.

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Why don’t you set width: 100&#37;? I don’t...really understand.

  • #3
    New Coder
    Join Date
    Jun 2006
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I tried to use 100&#37; but doesn't work. The div is taking 100% of the #Container and goes on the second line making my Header bigger.

  • #4
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    I have just a question: do you need the border : solid 1px green; on #HeaderTopCenter or this is for your tests?
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • #5
    New Coder
    Join Date
    Jun 2006
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    This is just for a test

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    If it’s in the center, why do you even need to have a div there? Why not set it as the background of #header?

  • Users who have thanked Apostropartheid for this post:

    Erakis (05-09-2008)

  • #7
    New Coder
    Join Date
    Jun 2006
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I join the 3 images on my post.

    The left and right image are SIZE FIXED. As the layout is flexible (elastic), the HeaderTopCenter.gif image must be repeated in the X direction.

    And you can see the result. The green part desn't take the available place between Left and Right, isn't elastic....
    Attached Thumbnails Attached Thumbnails Problem repeating a background-headertopleft.gif   Problem repeating a background-headertopright.gif   Problem repeating a background-result.jpg  
    Attached Images Attached Images  
    Last edited by Erakis; 05-08-2008 at 04:56 PM.

  • #8
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    ok

    Why don't you use the #Header's background for your center ?

    Code:
    <div id="Container">
        <div id="Header">
           <div id="HeaderTopLeft"></div>
           <div id="HeaderTopRight"></div>
        </div>
    </div>
    Code:
     #Header 
      {
        height : 94px;
        border : solid 1px black;
        background-image : url(images/HeaderTopCenter.gif);
        background-repeat : repeat-x;
      }
    Or you can play with inclusions :
    Code:
        <div id="Header">
           <div id="HeaderTopLeft">
             <div id="HeaderTopRight"></div>
           </div>    
        </div>
    Code:
     #Header 
      {
        background-image : url(images/HeaderTopCenter.gif);
        background-repeat : repeat-x;
      }
    
      #HeaderTopLeft 
      {
        background: url(images/HeaderTopLeft.gif) no-repeat top left;
      }
    
      
      #HeaderTopRight {
        height :94px;
        background: url(images/HeaderTopRight.gif) no-repeat top right;
      }
    If you have some informations like text on your header you should have an image in the html to write the informations in the alt attribute.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I'd do it like
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
      <head>
        <title>Untitled</title>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
    	<style type="text/css">
    	#Container 
    	  {
    		width :80&#37;;
    		border : solid 1px red;
    		margin-left: auto; 
    		margin-right: auto; 
    		min-width :760px;
    	  }
    	 #Header 
    	  {
    		height : 94px;
    		border : solid 1px black;
    		background:url(images/HeaderTopCenter.gif) repeat-x;
    	  }
      
      #HeaderTopRight {
        height :94px;
    	width:585px;
        background-image : url(images/HeaderTopRight.gif);
        background-repeat :no-repeat;
    	float:right;
    	
      }
    	</style>
      </head>
      <body>
    <div id="Container">
      <div id="Header"> 
      	<div id="HeaderTopRight"></div>
    	<img src="images/HeaderTopLeft.gif" width="160" height="94" style="float:left" />
      </div>
    </div>
      </body>
    </html>
    No Divitis
    (Assuming HeaderTopLeft.gif would serve as a logo, and could be renamed for keeping semantic)
    Last edited by abduraooft; 05-08-2008 at 05:08 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    New Coder
    Join Date
    Jun 2006
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Candygirl View Post
    ok

    Why don't you use the #Header's background for your center ?

    Code:
    <div id="Container">
        <div id="Header">
           <div id="HeaderTopLeft"></div>
           <div id="HeaderTopRight"></div>
        </div>
    </div>
    Code:
     #Header 
      {
        height : 94px;
        border : solid 1px black;
        background-image : url(images/HeaderTopCenter.gif);
        background-repeat : repeat-x;
      }
    Or you can play with inclusions :
    Code:
        <div id="Header">
           <div id="HeaderTopLeft">
             <div id="HeaderTopRight"></div>
           </div>    
        </div>
    Code:
     #Header 
      {
        background-image : url(images/HeaderTopCenter.gif);
        background-repeat : repeat-x;
      }
    
      #HeaderTopLeft 
      {
        background: url(images/HeaderTopLeft.gif) no-repeat top left;
      }
    
      
      #HeaderTopRight {
        height :94px;
        background: url(images/HeaderTopRight.gif) no-repeat top right;
      }
    If you have some informations like text on your header you should have an image in the html to write the informations in the alt attribute.
    I can't do that because the LeftHeader and RightHeader has ROUNED CORNER on their top.

  • #11
    New Coder
    Join Date
    Jun 2006
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Here is what I want.
    Attached Thumbnails Attached Thumbnails Problem repeating a background-result.jpg  

  • #12
    New Coder
    Join Date
    Jun 2006
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by CyanLight View Post
    If it’s in the center, why do you even need to have a div there? Why not set it as the background of #header?
    Your solution is working But I'm still curious on how to get the other way working... Put 3 div in a row. The first and the last having a fixed width and the second (center) having an elasctic width to get it background image be repeated horizontaly.

  • #13
    New Coder
    Join Date
    Jun 2006
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I finally got what I want

    But there is a little problem to complete my layout.

    Please, take a look to the actual result Template

    Now I would like that CenterLeft and CenterRight div height be the same as CenterContent or Center. So the background image should be repeated verticaly and not just one time as now.

    Regards

  • #14
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    If they are just grey lines, why not put them as borders to the center div and take out the other two divs?

    Code:
      
    #CenterLeft
    {  	
      display:none;
    }
    
    #CenterContent
    {
      padding: 5px;
      border-left: 1px solid #8c6365;
      border-right: 1px solid #8fa6cd;
    }
    
    #CenterRight
    {  	
      display:none;
    }
    I tried to use a color grabber to get the color of the lines. There's probably a lot simpler color code you like.
    Last edited by Pepe, the bull; 05-08-2008 at 11:54 PM.
    Pepe, the bull

  • Users who have thanked Pepe, the bull for this post:

    Erakis (05-09-2008)

  • #15
    New Coder
    Join Date
    Jun 2006
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Pepe, the bull View Post
    If they are just grey lines, why not put them as borders to the center div and take out the other two divs?

    Code:
      
    #CenterLeft
    {  	
      display:none;
    }
    
    #CenterContent
    {
      padding: 5px;
      border-left: 1px solid #8c6365;
      border-right: 1px solid #8fa6cd;
    }
    
    #CenterRight
    {  	
      display:none;
    }
    I tried to use a color grabber to get the color of the lines. There's probably a lot simpler color code you like.
    Yes, it's an great idea. I will take it in consideration
    But but pretend I had a custom border I should need these div (background repeat) working... Any idea ?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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