Yes, I understand that English is a difficult language.
Please make the changes shown in these images.
Then make a full resolution screen shot including the top and bottom of those divs (like your second screen shot above).
Describe (or make a drawing showing) what you do not like and what you want changed.
hello!
maybe i am not that good in english especially in writing but i don’t say it is difficulty i understand more or less what you are explaining to me and now i am sending the image what i want after i did what you told me to do and maybe i have to Increase in ps the image what do you think?
#apDiv1 {
position: relative;
width: 480px;
height: 722px;
background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style1.jpg);
float: left;
padding-top: 5px;
}
#apDiv6 {
position: relative;
height: 712px;
border: 5px double #640c1a;
background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style3.jpg);
width: 73px;
float: left;
z-index: 9;
background-repeat: no-repeat;
padding-top: 5px;
}
#apDiv7 {
position: relative;
width: 397px;
height: 722px;
background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-21style.jpg);
z-index: 10;
float: right;
padding-top: 5px;
}
#container {
position: relative;
width: 960px;
border: thick outset #000;
margin-right: auto;
margin-left: auto;
padding-bottom: 4px;
z-index: 1;
height: 1200px;
}
thanks galia
Change these 3 heights as shown in blue:
#apDiv1 {
position: relative;
width: 480px;
[color=blue]height: 717px;[/color]
background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style1.jpg);
float: left;
padding-top: 5px;
}
#apDiv6 {
position: relative;
[color=blue]height: 707px;[/color]
border: 5px double #640c1a;
background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style3.jpg);
width: 73px;
float: left;
z-index: 9;
background-repeat: no-repeat;
padding-top: 5px;
}
#apDiv7 {
position: relative;
width: 397px;
[color=blue]height: 717px;[/color]
background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-21style.jpg);
z-index: 10;
float: right;
padding-top: 5px;
}
Let me know if this is better or worse and what needs to be changed next.
The white space at the bottom of apDiv6 is there because your background image does not cover the entire div. ronpat gave you the solution to that problem in post #30.
hello!
now it is look good the image covers all but the padding is like repeating of the image and i do not want this and also i don’t want repeating of the image in apdiv6 But the padding did not do anything has not added any height up but down
the image
}
#apDiv1 {
position: relative;
width: 480px;
height: 717px;
background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style1.jpg);
float: left;
padding-top: 5px;
}
#apDiv6 {
position: relative;
height: 707px;
border: 5px double #640c1a;
background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style3.jpg);
width: 73px;
float: left;
z-index: 9;
padding-top: 5px;
background-repeat: repeat;
}
#apDiv7 {
position: relative;
width: 397px;
height: 717px;
background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-21style.jpg);
z-index: 10;
float: right;
padding-top: 5px;
}
#container {
position: relative;
width: 960px;
border: thick outset #000;
margin-right: auto;
margin-left: auto;
padding-bottom: 4px;
z-index: 1;
height: 1200px;
}
thanks galia
Padding makes a space between the contents of your div (or other element) and its edge. As I said before,
This will not reduce the space below your content; that’s not how padding works. If you want to do that, you’ll need to reduce the height of the div. Remember to reduce all three divs by the same number of pixels to keep then even.
hello!
so i have to erase the padding and make the div more high so it true it can not be more high on up just on the bottom(more space between the the div starts and the sentence is in it?. see image
thanks galia
Read my post again, because what you are saying is the opposite of what I’ve said.
And yet again, if you are unsure about the instructions, make a backup copy of your file and try it for yourself. It is the only way you will learn.
Galia,
(1) Please attach the images that are used in the background of the three apDivs.
(2) Please attach a new full resolution screen shot of the page.
(3) Please attach the code for those divs… again.
(4) The height of the tall divs in the image that you posted is not 717px as the code shows. The height is still 722px. In other words, you are not showing correct information. The screen shot and the code do not match. The height has not been changed.
The following code is what you should have. Please send a screen show showing how the page looks with these settings.
(!!!) Please notice that the background image property has changed, also.
#apDiv1 {
position: relative;
width: 480px;
[color="blue"]height: 717px;
background: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style1.jpg) no-repeat;[/color]
float: left;
padding-top: 5px;
}
#apDiv6 {
position: relative;
height: 707px;
border: 5px double #640c1a;
[color="blue"]background: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style3.jpg) no-repeat;[/color]
width: 73px;
float: left;
z-index: 9;
padding-top: 5px;
background-repeat: repeat;
}
#apDiv7 {
position: relative;
width: 397px;
height: 717px;
[color="blue"]background: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-21style.jpg) no-repeat;[/color]
z-index: 10;
float: right;
padding-top: 5px;
}
hello!
i put again the padding but the padding make like it repeat the image and i do not like it i thought it can not be do more high on top just from the bottom of the div to make space between the top of the div and the first sentence so i remove the padding to do more height at the usually way in the bottom and push the sentence down.
and i think the padding is down and not up .
the three images
the code
}
#apDiv1 {
position: relative;
width: 480px;
height: 717px;
background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style1.jpg);
float: left;
padding-top: 5px;
}
#apDiv6 {
position: relative;
height: 707px;
border: 5px double #640c1a;
background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style3.jpg);
width: 73px;
float: left;
z-index: 9;
background-repeat: repeat;
}
#apDiv7 {
position: relative;
width: 397px;
height: 717px;
background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-21style.jpg);
z-index: 10;
float: right;
padding-top: 5px;
}
the page look right now
thanks galia
Thank you for the background images.
Padding does not make background images repeat.
You did not change the “background image” property as I instructed. WHY NOT? Are you not comfortable making changes? Was my message too long? Was my English too complicated? If you do not follow instructions, we cannot help you. Please change the background image property in apDiv1, apDiv6, and apDiv7 as I posted in message #50. If you do that, you will have white lines beneath the background images and the images will not repeat.
Galia,
Did you change the height of the background images in PhotoShop to make them shorter?
what do you mean i change the size of the images like the size of the divs mabye it is the padding
galia
yes i changed in photoshop
How tall were the images before you changed them? Were they 721px? Please make all 3 images 722px high and post them again.
@nono29 - you have not understood what happens when you add padding. If you add 5px padding at the top of your div, that increases the size of that div by 5px. That means your image will not be tall enough to cover the whole background, so it will either repeat, or leave you with a white space if it’s set to no-repeat.
You need the images to be the height of the div + the height of the padding. So if your div is 717px, and your padding 5px, your image needs to be 722px high to cover the whole background with no white space and no repeat.
The second image you have posted there is only 717px high.
Please post another copy of the left background image that is 722px high.
Please change the code so it is like the code that I posted in message #50.
After thinking about Galia’s request to “add height above”, I believe that she is really asking to vertically center (middle) the text in the left column.
Galia, is that your objective? Are you trying to vertically center the text in the left column?
hello!
i want that the div and the image will give more height above and not at the bottom if it is possible not in the middle of the text but more down.
here is the image
the code
}
#apDiv1 {
position: relative;
width: 480px;
height: 717px;
background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style1.jpg);
float: left;
padding-top: 5px;
}
#apDiv6 {
position: relative;
height: 707px;
border: 5px double #640c1a;
background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style3.jpg);
width: 73px;
float: left;
z-index: 9;
background-repeat: repeat;
padding-top: 5px;
}
#apDiv7 {
position: relative;
width: 397px;
height: 717px;
background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-21style.jpg);
z-index: 10;
float: right;
padding-top: 5px;
}
thanks galia