Please login or register.

Login with username, password and session length
Advanced search  
Pages: [1] 2

Author Topic: Css and images  (Read 10320 times)

Elessar

  • Newbie
  • *
  • Karma: 1
  • Posts: 43
Css and images
« on: November 10, 2007, 07:26:00 PM »

Hi,

I'm trying to do a design but I have a problem.
link : http://poneyclubdebazas.com/po/

The picture between the menu and the page is made of 3 images (one for the top, one for the middle and one for the bottom)
here is the code for that picture
Code: [Select]
#top
{
height: 45px;
margin: 0px 0px 0px 0px;
padding: 0;
background: url("top.png") no-repeat right;
}

#mid
{
margin: 0px 0px 0px 0px;
padding: 0;
background: url("mid.png") repeat-y right top; /* "top" is to made this image well placed with the "top.png" image */
overflow: hidden;
}

#bot
{
height: 90px;
margin: 0px 0px 10px 0px;
padding: 0;
background: url("bot.png") no-repeat right;
}

But if you look carefully the middle image is not well placed with the bottom one, and it depends of the height of the article, I try to put "top/bottom" after "right" (in #bot) but nothing change.
I  would like to have always the "middle" picture entire.
I don't know how to fix that.

I know the design is horrible and the code not clean but I just start to make it.
« Last Edit: November 10, 2007, 07:28:21 PM by Elessar »
Logged
I'm a french guy, so if I made some mistakes in my post, just tell me. ;)

ad_267

  • Jr. Member
  • **
  • Karma: 7
  • Posts: 57
Re: Css and images
« Reply #1 on: November 11, 2007, 03:38:15 AM »

I don't think there is any way to get around this problem. The background of the middle block is repeated and you can't make the height of the middle block an exact multiple of the height of the background image. It's is not that noticeable so I wouldn't worry about it.

By the way I'm viewing this on a 1024 * 768 monitor in Firefox on windows and the article column is pushed down below the right side column.
« Last Edit: November 11, 2007, 03:41:06 AM by ad_267 »
Logged

Joost

  • Guest
Re: Css and images
« Reply #2 on: November 11, 2007, 05:38:52 AM »

#bot has got a margin of 10px at the bottom. Removing that, could solve the space issue in IE.

#content is pushed down, because of the left/right margins being set. They should be set to 0, or you will have to recalculate the total width. All the elements that must float next to each other should not exceed a total width of 100%. That includes margin, padding and borders. A screen that has got width set to 1024 is used often, so make sure it looks good.
Change the margin (left/right) unit  to percentage (%). Easier to calculate and mking the design fluid (screen width independent).
Logged

Elessar

  • Newbie
  • *
  • Karma: 1
  • Posts: 43
Re: Css and images
« Reply #3 on: November 11, 2007, 05:28:25 PM »

#bot has got a margin of 10px at the bottom. Removing that, could solve the space issue in IE.
I didn'y know there was a bug with IE.

#content is pushed down, because of the left/right margins being set. They should be set to 0, or you will have to recalculate the total width. All the elements that must float next to each other should not exceed a total width of 100%. That includes margin, padding and borders. A screen that has got width set to 1024 is used often, so make sure it looks good.
Change the margin (left/right) unit  to percentage (%). Easier to calculate and mking the design fluid (screen width independent).

Is that working ?

But I still don't find any issues for the picture at the bottom.

But thanks to both.
Logged
I'm a french guy, so if I made some mistakes in my post, just tell me. ;)

Elessar

  • Newbie
  • *
  • Karma: 1
  • Posts: 43
Re: Css and images
« Reply #4 on: November 16, 2007, 10:48:51 PM »

Sorry for the double post.

I try different way and there is nothing new, it's still not working.
Logged
I'm a french guy, so if I made some mistakes in my post, just tell me. ;)

ad_267

  • Jr. Member
  • **
  • Karma: 7
  • Posts: 57
Re: Css and images
« Reply #5 on: November 16, 2007, 10:56:34 PM »

Everything looks good to me now.

I'm pretty sure it's impossible to get all three of the images to line up exactly if you want them to stretch all the way down the left column. It may be possible using javascript to force the middle column height to be a multiple of the height of the repeating background image, otherwise you could use a fixed height image and not have it stretch down the page.

But It's hardly noticeable unless you point it out, I think it looks fine.
Logged

jlhaslip

  • Sr. Member
  • ****
  • Karma: 16
  • Posts: 374
    • My snews with AEF Forum site
Re: Css and images
« Reply #6 on: November 17, 2007, 03:49:29 AM »

#left {  float: left; width: 76.5%; margin: 0 0 10px 0; background: url("mid.png") repeat-y right;}
 Try that? Place the mid-image on the left div with repeat-y?
Logged
Yes! I have no siggy.

ad_267

  • Jr. Member
  • **
  • Karma: 7
  • Posts: 57
Re: Css and images
« Reply #7 on: November 17, 2007, 05:02:22 AM »

#left {  float: left; width: 76.5%; margin: 0 0 10px 0; background: url("mid.png") repeat-y right;}
 Try that? Place the mid-image on the left div with repeat-y?

That would only work if you removed all the other background images and then you wouldn't have the rounded top and bottom. There are three divs. One at the top which is a fixed height and the background doesn't repeat, one at the bottom that is a fixed height and the background doesn't repeat, and one in the middle that has a repeating background. Because the middle div could be any size you cannot get all three images to line up perfectly.
Logged

ad_267

  • Jr. Member
  • **
  • Karma: 7
  • Posts: 57
Re: Css and images
« Reply #8 on: November 17, 2007, 06:36:06 AM »

I wrote this small piece of javascript that should do what you want if you put it just before the closing body tag:

<script type="text/javascript">
<!--
var bgImgHeight = 90;

var boxHeight = document.getElementById('mid').offsetHeight;
var remainder = boxHeight % bgImgHeight;

document.getElementById('mid').style.height=boxHeight + bgImgHeight - remainder;

-->
</script>

The only problem is it only works for me if I remove the doctype declaration from the top of the page. This is the first piece of javascript I've ever written so hopefully someone else here know how to fix this  :)
Logged

Elessar

  • Newbie
  • *
  • Karma: 1
  • Posts: 43
Re: Css and images
« Reply #9 on: November 17, 2007, 09:48:40 AM »


<script type="text/javascript">
<!--
var bgImgHeight = 90;

var boxHeight = document.getElementById('mid').offsetHeight;
var remainder = boxHeight % bgImgHeight;

document.getElementById('mid').style.height=boxHeight + bgImgHeight - remainder;

-->
</script>

I try, and it works for me but without the doctype as you said.

Thanks, I just need some one to fix the doctype problem now.
 ;D
Logged
I'm a french guy, so if I made some mistakes in my post, just tell me. ;)

ad_267

  • Jr. Member
  • **
  • Karma: 7
  • Posts: 57
Re: Css and images
« Reply #10 on: November 18, 2007, 03:33:03 AM »

Yeah I think because it's a strict doctype you're not allowed to set the div of the height, you have to set it through changing the style. I'm working on changing it now but I'm very new to javascript
Logged

ad_267

  • Jr. Member
  • **
  • Karma: 7
  • Posts: 57
Re: Css and images
« Reply #11 on: November 18, 2007, 03:45:03 AM »

Ok that wasn't the problem, I just needed to say the height was in pixels. So, to get this to work without needing to remove the doctype declaration, add this just before the closing body tag:

Code: [Select]
<script type="text/javascript">
<!--
var bgImgHeight = 90;

var boxHeight = document.getElementById('mid').offsetHeight;
var newHeight = boxHeight + bgImgHeight - boxHeight % bgImgHeight;

document.getElementById('mid').style.height=newHeight+"px";
//-->
</script>

And you will probably want to add overflow:visible; to #mid in your stylesheet so that if someone increases their text size while viewing the page they will still be able to see the text.
« Last Edit: November 18, 2007, 04:35:12 AM by ad_267 »
Logged

Elessar

  • Newbie
  • *
  • Karma: 1
  • Posts: 43
Re: Css and images
« Reply #12 on: November 18, 2007, 11:04:45 AM »

Thanks a lot for that, but  :-\ if you open the comment box you will see that design is fixed.

http://poneyclubdebazas.com/po/
Logged
I'm a french guy, so if I made some mistakes in my post, just tell me. ;)

ad_267

  • Jr. Member
  • **
  • Karma: 7
  • Posts: 57
Re: Css and images
« Reply #13 on: November 19, 2007, 06:43:06 AM »

Ok try this:

Remove the script from the bottom and change all the javascript at the top to this:
Code: [Select]
<script type="text/javascript">
//<![CDATA[
// toggle dynamic divs
function toggled(div) { // MOD 8
if (document.getElementById(div).style.display=='') {
document.getElementById(div).style.display = 'none';
adjustHeight();
return
} document.getElementById(div).style.display = '';
adjustHeight();
} //// END MOD 8

// Smiles MOD 15/16
function AddSmile(SmileCode){
var oldtxt = document.getElementById('text');
oldtxt.value = oldtxt.value+SmileCode;
oldtxt.focus();
return;
} // END Smiles MOD 15/16

function adjustHeight() {
var bgImgHeight = 90;
document.getElementById('mid').style.height="auto";

var boxHeight = document.getElementById('mid').offsetHeight;
var newHeight = boxHeight + bgImgHeight - boxHeight % bgImgHeight;

document.getElementById('mid').style.height=newHeight+"px";
}

//]]>
</script>

And change your body tag to this:
Code: [Select]
<body onload="adjustHeight()" onresize="adjustHeight()">
Logged

Elessar

  • Newbie
  • *
  • Karma: 1
  • Posts: 43
Re: Css and images
« Reply #14 on: November 19, 2007, 07:04:07 PM »

It works  ;D ;D
thanks a lot, but in the admin panel i'ts not working it's doing like the comment box (before the new code you gave me)
Logged
I'm a french guy, so if I made some mistakes in my post, just tell me. ;)
Pages: [1] 2