Yes, I see that it does not look good. OK, please put the height:1200px back.
When you say that you want to add height to appdiv1, appdiv6, appdiv7 from above, are you saying that you want to push the text in those divs down also? If yes, how much height do you wish to add to the top?
hello!
something like 5px or so
thanks galia
I do not have a copy of your code, so you will have to find these selectors in CSS.
I believe you should be able to add 5px (or so) of padding-top to appdiv1, appdiv6, appdiv7, and thereby push the text down 5px and increase the height 5px.
#appdiv1, #appdiv6, #appdiv7 {
padding-top:5px;
}
If the appdivs already have padding-top applied, then add 5px to the value assigned to the top.
`
I believe you will also need to extend the height of #container 5px.
#container {height:1205px;}Change the appdivs first and see if you need to change the height of #container.
hello!
sorry but it is look like a mess
look with just padding on the divs
galia
Did you add padding-top or did you add padding ?
You were supposed to add padding-top:5px;
hello!
you right in ap div 1 i just did 5 padding for all sides i fix it and it Returned to normal, but not exactly now apdiv6 at the bottom not fit and it look the same on the hight on the top
the code
#apDiv1 {
position: relative;
width: 480px;
height: 721px;
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: 721px;
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 image
galia
Please post a full resolution screen shot that includes the bottom of appDiv6 so I can see what they look like together. Remember, do not reduce the resolution in DW.
hello!
there it is and aslo i can see now that it is push down the divs at the bottom and like i said it is look the same up
thanks galia
OK, Please speak clearly.
This is what you requested, “add height above”. “add height” means a taller apDiv. Those divs are now 5px taller than they were, so they DO indeed push down 5px at the bottom. Is that what you expected or is it not?
I believe that apDiv6 (the middle apDiv) is the same height as apDiv1 and apDiv7. The background image has a white space beneath it because it is coded “no-repeat”. It should say “repeat” or it can say nothing at all because repeat is the default behavior.
If the apDivs are correct, then you need to add 5px to the height of #container as I mentioned earlier.
I have discovered that there is a 1px error between apDiv6 and apDiv1 and apDiv7.
The heights of apDiv1 and apDiv7 are 721px.
The height of apDiv6 is 712px.
This accounts for the 1px of white space below apDiv1 and apDiv7.
At this time, I suggest that you add 1px of height to apDiv1 and apDiv7
apDiv1, apDiv7 {height:722px;}Well spotted , @ronpat - but I think you must have been up too late, because the difference there is 9px, not 1px.
@nono29 - if you want all three divs to be the same height, then change them all to either 721px or 712px.
hello!
i see and i change but above it is not making height just on the bottom
thanks galia
I’m sorry, I don’t understand what you mean by that. You were complaining that apdiv6 did not fit at the bottom, and we have given you the fix for that.
If you want more padding at the top, then increase padding-top: 5px to 10px, 15px or whatever you need.
If you want something else, then you will need to explain it more clearly.
The middle apDiv6 has the 5px double border around it, which adds to its declared width (and height); therefore, it’s width (and height) must be 10px less than its neighbors. . Increasing the height of only apDivs 1 and 7 by 1px would have made it so.
At this point, I see our immediate goal as making sure that the bottom of those 3 divs are even and meet nono’s approval (after all, she may not have expressed her wish correctly).
If, on the long shot, they meet her approval, and she understands that adding height makes boxes taller, then I would expect her to add 5px to the declared height of #container and the world would be at peace (for the moment).
It is at this point that I would shake things up a tad by suggesting that she add a clearing mechanism to #container (overflow:hidden would probably do). The floated divs are not being cleared. Clearing them should eliminate the need for a height on #container… I think… maybe.
hello!
i did not fix yet the divs but i meant after what i do to put the 5px padding earlier it is look the same space up between the sentence
galia
#appdiv1, #appdiv6, #appdiv7 {
padding-top:5px;
}
If you copied this code exactly from ronpat’s post then it will not work, because there is a typing error in it. The names of the divs are incorrect; they need to be exactly the same as the ids you are using in your HTML.
I was unsure at that time and her 3 div names were all different, so I gave it a guess… Nevertheless, I’m pretty sure she figured out what they were supposed to be else apDiv6 would not have dropped beneath the others.
I wonder if she is speaking to us via an electronic translator like Google. Might account for much of the ambiguity.
hello!
Sorry I could not fix it all your explanations confused me you say that and she say that
and for the padding i do it from that the code see image
}
#apDiv1 {
position: relative;
width: 480px;
height: 721px;
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: 721px;
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: 721px;
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