- This topic is empty.
-
AuthorPosts
-
November 28, 2012 at 1:06 am #41031andreea115Participant
Hello everyone
i need a little help with my positioning of two background images- each of the images is stacked upon the other.
Both images are held within their own div tag; but the 2nd image’s div tag is contained within the div tag of the first ( it is a smaller images).
The problem that i have is that the CSS Rules ( the Margin Function) for the 2nd Image is now affecting the css rules for the first main image: i am not clear why this is happening as the second image is contained within the div of the first image and should not therefore affect it.
it might help at this moment if i showed u my rules.
The Div Tags
THE CSS CODE
#midbody_mainpage{
background: url(“/images/pageimages/mainwindowpic.jpg”)repeat-x , repeat-y scroll 0 0 transparent ;
height:399px;
margin-top:0px;}
.firstpage_regform {
background: url(“/images/pageimages/reg_form_background2.jpg”) ;
background-repeat:no-repeat;
padding-top: 46px;
padding-bottom: 0px;
margin-left: 640px;
height:292px;
width:353px;
margin-top:46px;}
THE PROBLEM
the margin-top from the div of the second smaller image (.firstpage_regform ) is causing the main div to pull down by 46px.
Can anyone please recommend what i need to do.
warm regards
Andreea 115
Edit/Delete Message
November 28, 2012 at 1:17 am #115710Paulie_DMemberCan you transfer this code of Codepen….remembering that we won’t be able to see the images unless they are on a web server?
November 28, 2012 at 3:56 am #115721andreea115Participanthi paulie_D
thanks for your reply. sorry, i don’t understand ; what id codepen ? and what do you want me to transfer and where do you want me to transfer it to.
sorry, i am new to this forum and don’t fully understand the terminologies or how to use the site.
warm regards
Andreea115
November 28, 2012 at 4:00 am #115722Watson90MemberHi @andreea115
Go to CodePen –> New Pen and fill in the relevant sections such as the all of the HTML markup in the left box, your CSS in the middle box and any JS in the right box.
Also, you have referenced images in your HTML and CSS that are not displaying. They need to be live on a web server for us to see them.
November 28, 2012 at 9:34 am #115774andreea115Participanthi again everyone
i am not sure if i did it correctly
but here is the link to my codePenhttp://codepen.io/anon/pen/DBxil
you will note that the background sky is being pulled down by the small picture on the right. the sky should be touching the upper boarder.
i hope this is clear
warm regards
Andreea
November 28, 2012 at 9:38 am #115775andreea115Participantsorry
one last point. i just realized that the pictures only show up in codepen. i tried viewing it in other browers but it did not work. i hope you are able to see the pictures. if not, the link below is a link to the site:
November 28, 2012 at 10:00 am #115781Paulie_DMemberI confess, from your description, I’m having trouble working out what your problem is.
Margins do not affect background images.
I’ve tidied up your Codepen and re-organised the CSS into something more logical: http://codepen.io/Paulie-D/pen/yhzGJ and the Codepen reflects that.
However, if I have it right you need to remove the margin-top from “.firstpage_regform” and add padding-top to “#midbody_mainpage “.
November 28, 2012 at 10:39 am #115790andreea115ParticipantHi Paulie
you are brilliant. thank you so much. It works perfectly. It is exactly what i want.
Good lesson for me. thank you so much
warmest regards
Andreea
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.