...

View Full Version : Problem repeating a background



Erakis
05-08-2008, 04:26 PM
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 :


#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.

Apostropartheid
05-08-2008, 04:31 PM
Why don’t you set width: 100&#37;? I don’t...really understand.

Erakis
05-08-2008, 04:35 PM
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.

Candygirl
05-08-2008, 04:45 PM
I have just a question: do you need the border : solid 1px green; on #HeaderTopCenter or this is for your tests?

Erakis
05-08-2008, 04:46 PM
This is just for a test ;)

Apostropartheid
05-08-2008, 04:47 PM
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?

Erakis
05-08-2008, 04:53 PM
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....

Candygirl
05-08-2008, 04:54 PM
ok :)

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


<div id="Container">
<div id="Header">
<div id="HeaderTopLeft"></div>
<div id="HeaderTopRight"></div>
</div>
</div>


#Header
{
height : 94px;
border : solid 1px black;
background-image : url(images/HeaderTopCenter.gif);
background-repeat : repeat-x;
}

Or you can play with inclusions :

<div id="Header">
<div id="HeaderTopLeft">
<div id="HeaderTopRight"></div>
</div>
</div>


#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.

abduraooft
05-08-2008, 05:05 PM
I'd do it like

<!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 (http://csscreator.com/?q=divitis) :)
(Assuming HeaderTopLeft.gif would serve as a logo, and could be renamed for keeping semantic)

Erakis
05-08-2008, 06:11 PM
ok :)

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


<div id="Container">
<div id="Header">
<div id="HeaderTopLeft"></div>
<div id="HeaderTopRight"></div>
</div>
</div>


#Header
{
height : 94px;
border : solid 1px black;
background-image : url(images/HeaderTopCenter.gif);
background-repeat : repeat-x;
}

Or you can play with inclusions :

<div id="Header">
<div id="HeaderTopLeft">
<div id="HeaderTopRight"></div>
</div>
</div>


#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.

Erakis
05-08-2008, 06:15 PM
Here is what I want.

Erakis
05-08-2008, 06:26 PM
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.

Erakis
05-08-2008, 10:01 PM
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 (http://70.54.205.43/ExcelTest/template.html)

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

Pepe, the bull
05-08-2008, 11:51 PM
If they are just grey lines, why not put them as borders to the center div and take out the other two divs?



#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.

Erakis
05-09-2008, 12:53 AM
If they are just grey lines, why not put them as borders to the center div and take out the other two divs?



#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 ?

Erakis
05-20-2008, 05:22 PM
Here is what I've done now : Template (http://70.54.205.43/ExcelTest/template.html)

There is a last problem to complete this template.

Here is the problem ; Why my central text "Ligne #1" is align to right ?
I would like to get this text align to left, just at the beginning of the orange column.

BabyJack
05-20-2008, 05:29 PM
<div style="float :right; margin-left :160px;">
Ligne #1<br />

Ligne #2<br />
Ligne #3<br /><br />
...
Ligne #5<br />
</div>



Thats why. You need to change right to center or left or wherever.


background-image : url(images/CenterExcelBackgroundLogo.gif);
background-repeat :no-repeat;

and delete that.


So your HTML and CSS will be:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Excel Extranet</title>
<style type="text/css">
<!--
Body
{
background-color :#C6D9F7;
background-image :url(images/background.jpg);
background-repeat :repeat-x;
background-position :top;
}

#Container
{
width :80&#37;;
margin-left: auto;
margin-right: auto;
min-width :760px;
background-color :White;
}

#Header
{
height :95px;
background-image : url(images/HeaderCenter.gif);
background-repeat : repeat-x;
}

#HeaderLeft
{
width :160px;
height :95px;
background-image : url(images/HeaderLeft.gif);
background-repeat :no-repeat;
float :left;
}

#HeaderRight
{
width :585px;
height :95px;
background-image : url(images/HeaderRight.gif);
background-repeat :no-repeat;
float :right;
}

#HeaderRightFlags
{
float :right;
margin-top : 26px;
margin-right : 10px;
height :28px;
}

#HeaderRightFlags img
{
padding : 0px 3px 0px 3px;
}

#Footer
{
height :38px;
background-image : url(images/FooterLeft.gif);
background-repeat :repeat-x;
clear :both;
}

#FooterRight
{
width :90px;
height :38px;
background-image : url(images/FooterRight.gif);
background-repeat :no-repeat;
background-position :right;
float :right;
}

#Center
{
background: url(images/Center.gif) repeat-y top left;
height :100%;
border-right : solid 1px #90a6cd;
}

#CenterExcelBackgroundLogo
{
width :159px;
height :84px;
position: relative;
bottom: 0px;
left: 1px;
background-image : url(images/CenterExcelBackgroundLogo.gif);
}

-->
</style>
</head>

<body>

<div id="Container">
<div id="Header">
<div id="HeaderLeft">&nbsp;</div>

<div id="HeaderRight">
<div id="HeaderRightFlags">
<img src="images/Portugal.gif" width="28" height="28" alt="Portugal" />
<img src="images/Espagne.gif" width="28" height="28" alt="Espagne" />
<img src="images/England.gif" width="28" height="28" alt="England" />
<img src="images/France.gif" width="28" height="28" alt="France" />
</div>
</div>
</div>


<div id="Center">

<div style="float :left; width :160px;">
<div>Bouton 1</div>
<div>Bouton 2</div>
<div>Bouton 3</div>
<div>Bouton 4</div>

<div>Bouton 5</div>
<div>Bouton 6</div>
<div>Bouton 7</div>
<div>Bouton 8</div>
</div>

<div style="float :center; margin-left :160px;">
Ligne #1<br />

Ligne #2<br />
Ligne #3<br /><br />
...
Ligne #5<br />
</div>

<!-- <div id="CenterExcelBackgroundLogo"></div>-->
</div>

<div id="Footer">
<div id="FooterRight">&nbsp;</div>

</div>
</div>

</body>
</html>

Erakis
05-20-2008, 08:52 PM
Wow ! It working like a charm :)

Using the same template : Template (http://70.54.205.43/ExcelTest/template.html)

Now how can I set position of the left orange "Excel" logo so that It could be at the bottom of the DIV ?

Take a look to the CSS : #CenterExcelBackgroundLogo

Maybe I do something wrong ?

BabyJack
05-20-2008, 09:13 PM
You would have to extend the background then align the divs.

Erakis
05-21-2008, 02:19 AM
I dont' really understand what you mean :(

BabyJack
05-21-2008, 09:36 AM
Use this code in your CSS. Set the pixels to fit your webpage. If you are using an image, then you may have to extend it.

body {
height:2000px; //* set the height here *//
background-color:#7C7497;}

Then, use this in your div.

.divid //*Change this to your div name*//{
float : left;
margin-top: 4em; //*Change the amount of em here. *//
margin-bottom: ; //*if needed, change amount here. *//



This might work =]

Erakis
05-22-2008, 07:37 PM
I don't think you understand what is my problem :(
I want to set the position of the left GREEN "Excel" image ; THIS ONE -->http://70.54.205.43/ExcelTest/images/CenterExcelBackgroundLogo.gifto the bottom of my green left column. I don't want it just after the end of the menu item but at the TOP BOTTOM of the column.

Thanks

abduraooft
05-23-2008, 07:49 AM
Erakis, check this standard 2 column layout ,http://bonrouge.com/2c-hf-fixed.php. Just follow this and you'll find it's easy.
And unordered list <ul> is the easy and semantic way to build the navigation list.

I want to set the position of the left GREEN "Excel" image ;
:eek: is that green? please confirm this :eek:

Erakis
05-23-2008, 05:00 PM
Oups sorry. Nope itsn't green but ORANGE. LOL ! I was playing with green border to do some test and unfortunately, I did a misktake :(

I took a look to your "2 column layout" link. It is great but this is not what I need right now. I think my layout is almost done and look great. Also my layout is a flexible/fluid one...

The only thing I need to accomplish is how to set the position of my EXCEL logo located in the ORANGE column so it goes to MAX BOTTOM of the column and now just after the menu item.

Again here the link to the template : Template (http://70.54.205.43/ExcelTest/template.html)
Thanks

abduraooft
05-23-2008, 05:12 PM
I took a look to your "2 column layout" link. It is great but this is not what I need right now. I think my layout is almost done and look great. Also my layout is a flexible/fluid one...
There is also a fluid one too, just you need to add is a width:80% for the outer container.
http://bonrouge.com/2c-hf-fluid.php

I'd prefer bonrouge's layouts for it's ability to behave uniformly in all browsers, even if we make some wise changes to it.


The only thing I need to accomplish is how to set the position of my EXCEL logo located in the ORANGE column so it goes to MAX BOTTOM of the column and now just after the menu item.
Okay, just remove remove position:relative; from #Menu and apply it to #Center . See the magic !

Ps: I still recommend you to change your links to an unordered list, to make it semantic.

Erakis
05-23-2008, 11:17 PM
Wow ! That's working well :)
Don't really understand why setting relative position to container instead of the Menu do the trick but... WOW :) Exactly what I need.

Thanks

abduraooft
05-24-2008, 08:08 AM
The position of an absolutely positioned element is being calculated with respect to the position it's immediate parent having a relative position. When you apply position:relative to #menu, the bottom:0 of your Excel-div will be at the bottom of the div#menu, which is somewhere in the middle.

But #Center is touching at the bottom, and if you give position:relative; to it, the position of that absolutely positioned element would be calculated with respect to.

No if you remove position:relative from the #Center also, you may see the change in position of that div.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum