Page 1 of 1

Relative width - Problem with background and front picture/logo (Partly solved)

Posted: Mon Feb 26, 2007 12:40 pm
by Heidi
On my site: http://ffohedmark.no I have adapted the Andreas 1 theme to relative width.
Most of it works fine, but I have two problems:

1. My front picture needs to have relative size without distortion, which does not work in IE.
This will be worked around by repeating the bacground picture, and placing logo and text on top.
My problem is:
I can't figure out how to repeat my front image, and get rid of the "white box" to the right.

Template:
 
Stylesheet:
Screen layout: */

body {
margin: 0 auto;
padding: 0;
font: 76% Verdana,Tahoma,Arial,sans-serif;
background: #f4f4f4 url(uploads/FFO/bg.gif) top center repeat-y;
background-image:url(uploads/FFO/logobak.jpg);
background-repeat:repeat-x;
}

#wrap {
background: #ffffff;
color: #303030;
margin: 0 auto;
width: 90%;
}
(etc.)

2. On pages where there is more text in the center coloumn than in the left coloumn, the margin in the center coloumn moves left as seen here: http://www.ffohedmark.no/index.php/news/17/13/ Is there a fix?

Re: Relative width - Problem with background and front picture/logo (Partly solved)

Posted: Mon Feb 26, 2007 3:23 pm
by RonnyK
Heidi,

what about using a "min-width" for your wrap and than assigning percentages to the columns. I don't think that the space will be taken by the center column then.

Ronny

Re: Relative width - Problem with background and front picture/logo (Partly solv

Posted: Mon Feb 26, 2007 5:27 pm
by Heidi
Thank you RonnyK. I'll give it a try.

Re: Relative width - Problem with background and front picture/logo (Partly solv

Posted: Mon Feb 26, 2007 5:50 pm
by Heidi
I've got rid of the "white box" by changing my teplate from

this
 
To this:
-->  Full likestilling og deltakelse for funksjonshemmede

FFO Hedmarks hovedmål
Funksjonshemmedes Fellesorganisasjon Hedmark
Frontphoto is hidden, since both "logo-2.jpg" (or any other graphics file) is placed below "logobak.jpg" together with the text.
How do I place these on top of "logobak2.jpg"?

Re: Relative width - Problem with background and front picture/logo (Partly solv

Posted: Mon Feb 26, 2007 6:28 pm
by Utter
You need to create the actual logo as an image 'sans-background' with transparency and with a matte that's similar to the most common colour in the background block. The background image is added to the div background with 'background-image: url(images/whateveryourbackgroundimagenameis);' and the logo is added to the div via the html.

Re: Relative width - Problem with background and front picture/logo (Partly solved)

Posted: Mon Feb 26, 2007 6:42 pm
by RonnyK
Heidi,

as utter is stating, by including a new div in your header area you can put the image over there while the original div keeps the full color.
I have my header like:

div header
  div left
  /div
  div right
  /div
/div

The css for the header holds the background color, while left holds the logo, the right one I use for some text (address), By using the different divs, the background-color for the header-area fills all.

Ronny