padding something right with html and css?

[lofight]

I'm working on a website. And on one page -location- there's got to be a map from google maps. Now I put the code from the google map on the html between the footer div's because when I used it with a new one, or between something like contentarea, the rest of the text from the site dissapeared.. And because I had nothing else in the footer.

Then, in css, I coded the footer so that the google maps frame came in the right place which should be, 110px from the left, and 125px from the top, and it is 350 px x 350px, the frame.

So this is my css code :

#footer {
width:350px;
height:350px;
padding-left:110px;
padding-top:125px;
}

And when I try previewing it in the browser I get this :

I've just started too know html and css, so I'm a complete noob.

 

[angelwatt]

I didn't see any picture for where you mention what you're seeing. An idea though, You have width/height set to 350, which I believe you're saying is the frame's dimensions, but you also have padding set. An elements "real" width is width plus padding, so in your case the frame is only getting 350-110 pixels of width to fit in, and same for height. This is likely the issue.

Edit: Needing to add clarity for my above statements. #footer is set to 350, but with padding of 110 on the left the footer will have a total width of 460. Not completely sure if OP is wanting that full width or not.

 

[lofight]

I didn't see any picture for where you mention what you're seeing. An idea though, You have width/height set to 350, which I believe you're saying is the frame's dimensions, but you also have padding set. An elements "real" width is width plus padding, so in your case the frame is only getting 350-110 pixels of width to fit in, and same for height. This is likely the issue.

oh, really? I didn't know that. I'll try that and see.. I tried and it's even worse.. (see picture)

 

[angelwatt]

Could you post a snippet of HTML from where the frame (the frame and its parent tag at least) is at and also any changes you've made to the CSS?

As a further bit of reading, you should learn about the CSS box model, which is part of what I was eluding to in my last post.

 

[lofight]

Could you post a snippet of HTML from where the frame (the frame and its parent tag at least) is at and also any changes you've made to the CSS?

As a further bit of reading, you should learn about the CSS box model, which is part of what I was eluding to in my last post.

this is the css:

#footer {
width:460px;
height:475px;
padding-left:110px;
padding-top:125px;
}

this is the html:

<div id="footer">
		<iframe width="350" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="url that i've hidden"></iframe><br /><small><a href="url that i've hidden" style="color:#0000FF;text-align:left">Grotere kaart weergeven</a></small>
		</div>

 

[angelwatt]

For clarification, on the last image you posted with the red arrows, are the red arrows pointing to where the iframe should be lining up to? If that's the case using a padding of 0 would put it there. You might need margins instead of padding. Could you make a mockup of the desired look? It would help me get a grip on result you're aiming for. I can't tell if it's suppose to overlap the image behind or something.

Also, I didn't talk about the box model very well before. Increasing the width and height wasn't the right direction, despite my advice eluding to that. You can see an edit I added to that post. A fix will depend on your answers to my last paragraph.

 

[lofight]

For clarification, on the last image you posted with the red arrows, are the red arrows pointing to where the iframe should be lining up to? If that's the case using a padding of 0 would put it there. You might need margins instead of padding. Could you make a mockup of the desired look? It would help me get a grip on result you're aiming for. I can't tell if it's suppose to overlap the image behind or something.

Also, I didn't talk about the box model very well before. Increasing the width and height wasn't the right direction, despite my advice eluding to that. You can see an edit I added to that post. A fix will depend on your answers to my last paragraph.

The arrows are pointing too where the frame should be..
here is the mockup of how it chould be see picture)

EDIT: Towards your 1st post in this thread, I want the full width of the frame, but it needs to start 110px from the left and 125px from the top..

 

[angelwatt]

Your original CSS seems like it should do the trick. You can try also adding this CSS,

iframe { margin: 0; padding: 0; }

to see if it helps, otherwise there might be some CSS elsewhere that's cascading here to create the unwanted style. I'm also not sure how you have the HTML setup for the images behind the footer, so that may be playing into the problem.

I know you don't want to post a URL here, but is it something you could send via private message (PM)? Being able to see the actual page and use the Firefox web developer toolbar I can probably debug it pretty quickly.