Galia,
Thank you for the new image.
Please add the following property to these divs:
#apDiv1, #apDiv6, #apDiv7 {
background-repeat:no-repeat;
}That will prevent the images from repeating.
Please post a full resolution screen shot showing how the page looks after adding these properties.
I will return and help with the text in a few minutes.
hello!
there it is
and i have to ask why to do image larger than the div and not the exact size
thanks galia
Please reduce the height of the background image for apDiv6 from 722px to 712px and I believe that will be good.
Normally, it does not matter if the background image is a little larger than its box. The excess image will be cut off.
In this case, apDiv6 is surrounded by a double border, so the size of the background image must fit properly or it will be visible between the lines of the border. That is a small disadvantage of using a double border.
Please post a screen shot after you have trimmed 10px from the height of the background image for #apDiv6
We have more to do today.
hello!
but the div in apdiv6 is 707px and the image is 712px is it because the padding and what it is for
thanks galia
The CSS box model says that the declared width (or height) plus padding plus border equals the actual width of a box.
#apDiv6 {
height:707px;
border:5px double #aa0;
padding-top:5px;
}therefore:
the declared height is 707px
the border is 5px x 2 10px
padding-top 5px
-----
the actual height is 722px
This is called the HTML Box Model (or CSS Box Model).
It is vitally important to understand this very basic principle.
You can read about it many places. These are a couple of suggestions:
https://www.addedbytes.com/articles/for-beginners/the-box-model-for-beginners/
http://www.w3.org/TR/CSS2/box.html
or do a Google search for âHTML box modelâ
NEXT we will show you how to adjust the space above the textâŚ
We fixed the alignment of the images at the bottom of the apDivs today.
BUT, we did a lot of unnecessary work today because your request was badly worded.
This is the code you need add to your stylesheet to move your text down inside #apDiv1:
#apDiv1 p:first-child {
margin-top:60px; /* set the margin-top as desired */
}This code expects the first line inside of #apDiv1 to be a paragraph and applies a margin-top of your choice to that first paragraph.
Very easy.
In the future, I recommend that you tell us what you want to do and not how to do it. Saying that you wanted to add height to the apDivs was wrong and wasted all day. Saying that you wanted to move the text down but not center it was very good and very easy to do.
Please add the above code anywhere on your stylesheet below your paragraph styles.
Set the margin-top to suit yourself.
Please post a screen shot showing us how it looks.
Thank you
There is one more change that is needed. Please ADD {overflow:hidden;} to #container as shown below
#container {
position: relative;
width: 960px;
height: 1200px;
[color=blue]overflow: hidden;[/color]
border: thick solid #000;
margin-right: auto;
margin-left: auto;
padding-bottom: 4px;
z-index: 1;
}
The reason for this change is to âclearâ the floating divs on the page. This add is necessary for the page to behave properly. It is not optional. It should have been part of the original code.
hello!
first of all Sorry for the inconvenience on my explanations that was not accurate i did not yet do what you want me to do but i want to ask if i want to do more long divs on the expense of the div that up of the three divs is the same like you explain to me on a box model is it correct ?
later i will send what you told me
thanks galia
[quote=ânono29, post:69, topic:99957â]
if i want to do more long divs on the expense of the div that up of the three divs is the same like you explain to me on a box model is it correct ?
[/quote]@ronpat is not online at the moment.
Please show that you are at least trying to make the effort to learn something here. Instead of asking and waiting for an exact answer, make a backup copy of your file and then try it for yourself, to see if youâve understood what he said. If it works, thatâs great - youâve learned something. If it doesnât work, then undo your changes, re-read the instructions and try again until it does work. You will only learn by doing. While we are happy to offer help, there is little point in us continually providing you with the required code if you have no understanding of how it works.
hello!
i put the code with the margin top i did in the css style it did not do anything in dreamwever but on chrome it look like that is it good were
thanks galia
The margin-top looks like it is working properly. You can adjust the margin number to suit yourself. Are you happy with it? If yes, then it is good.
I do not understand that sentence.
Did you add #container {overflow:hidden;} ?
I am sorry, but I do not understand what you are asking. Please try again.
EDIT:
I understand now.
hello!
i ask you i think to do the upperdiv more short and the three divs more long is it like you explaine to me about the box model
and i forgot to send you the code here it is
and i did overflow hidden in the container
#container {
position: relative;
width: 960px;
border: thick outset #000;
margin-right: auto;
margin-left: auto;
padding-bottom: 4px;
z-index: 1;
height: 1200px;
}
#header {
position: relative;
width: 960px;
height: 146px;
z-index: 2;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
border-bottom-style: solid;
border-bottom-width: medium;
border-bottom-color: #ac1c33;
margin-right: auto;
margin-left: auto;
left: 0px;
top: 0px;
background-image: url(images/html-images/canstockphoto178167560_comp.jpg);
}
#tab {
position: relative;
width: 960px;
height: 54px;
background-color: #57010c;
border-bottom-width: thin;
border-bottom-style: solid;
text-align: left;
z-index: 4;
}
#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;
background-repeat: no-repeat;
}
#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: no-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;
background-repeat: no-repeat;
}
#apDiv8 {
position: relative;
width: 960px;
height: 71px;
float: left;
background-image: url(images/html-images/canstockphoto1781675600_comp.jpg);
z-index: 8;
border-top-width: medium;
border-top-style: double;
border-top-color: #000;
}
#apDiv2 {
position: relative;
width: 960px;
height: 98px;
float: left;
background-image: url(images/html-images/canstockphoto178167567_comp.jpg);
z-index: 6;
background-repeat: repeat;
}
#upper{
width: 960px;
height: 103px;
position: relative;
background-image: url(images/html-images/canstockphoto1781675600_comp.jpg);
background-repeat: repeat;
border-bottom-width: medium;
border-bottom-style: double;
border-bottom-color: #000;
}
#apDiv1 p:first-child {
margin-top:60px;
}
thanks galia
I do not see {overflow:hidden} in #container
Is it really in your code?
What is the upper div that you wish to make more short?
hello!
i forgot to save so there it is
#container {
position: relative;
width: 960px;
border: thick outset #000;
margin-right: auto;
margin-left: auto;
padding-bottom: 4px;
z-index: 1;
height: 1200px;
overflow: hidden;
}
and the div that i whant to make shorter is the upperdiv
#upper{
width: 960px;
height: 103px;
position: relative;
background-image: url(images/html-images/canstockphoto1781675600_comp.jpg);
background-repeat: repeat;
border-bottom-width: medium;
border-bottom-style: double;
border-bottom-color: #000;
}
thanks galia
This is in your real code, right?
What is the upper div that you wish to make more short?
Galia,
(1) I am not sure what you asking about the box model. The box model applies to almost all HTML boxes. The box model describes how the content portion (the declared width and/or height), padding, border, and margins relate to one another. Those two articles that I linked to should help. If you want more information, try searching for âCSS box modelâ or âHTML box modelâ and read more.
By default, the width (or height) occupied by a block is the sum of the declared width (or height), padding, and border. The box-sizing property can change that behavior.
(2) I do not have any HTML code showing a div with an id of âupperâ. It looks like I need a new copy of your code. Please post all of the code for your page here. Please include a copy of the background image âcanstockphoto1781675600_comp.jpgâ.
Thank you
hello!
2.I asked you about the box model because I wanted to know if this is the same way of doing what I want to do now with the upper div and what you explain to me with the three divs after.
3.the page code
and by the way thanks about the help with the text now it is well
thanks galia
Please post all of code for your page between âcodeâ tags in your next message. The jsfiddle has errors and I do not wish to reassemble your code from jsfiddle and guess where the errors might be.
According to Paul, codepen is a better place to post code:
http://www.sitepoint.com/community/t/problem-with-background-in-div/42331/9
Please post the contents of âstyle3.cssâ in a message; that CSS file is missing.
And include a copy of âcanstockphoto178167560_comp.jpgâ which goes in #header.
You are welcome for the help with the text. But it is most important that you understand how it works so you can do it for yourself the next time. Please ask questions.
Thank you for the background image.
hello!
there aslo errors in codepen but i am sending anyway
here is style3.css
style3.css (221 Bytes)
the header image
thanks galia
