PDA

View Full Version : how to margin of image inside table using css



finoy_ako
Jan 28th, 2010, 07:33 AM
how can i set up the margin of image inside the table.


<html>
<title></title>
<head>

<style type="text/css">

#footer {

margin-left: 0px;
margin-right: 0px;
}

</style>

</head>
<body>

<div align="center">
<table width="900" height="900">
<tr>
<td>

<div id="footer">
<table width="885" border="0">
<tr>
<td><img src="footer.png" name="footer" width="885" height="30"</td>
</tr>
</table>


</td>
</tr>
</table>
</body>
</html>


i prefer to center the 900 width and height table because i want to insert my content there and i choose to set the width 885 to the image of table footer so i can know if the margin is success.


if i set the footer image to 900px, the main table will become 905px. so my best bet is to set the image to 885 px and margin it to left and right,

please help me to margin the footer image inside the table.

Len Whistler
Jan 28th, 2010, 07:36 AM
I would use divisions <div>. Tables are for tabular data, such as from a database, not for positioning stuff on a web page.




----------

jenius
Jan 28th, 2010, 08:40 AM
I'm struggling a bit with your english here, but I'll take a stab at it.

Like Len said, scrap the tables. Here's some sample code on how to create a footer containing an image with a margin around it (or padding - depends on whether you want a border or not. padding is inside the border, margin is outside)



<head>
<style type="text/css">

#footer {
margin: (top) (right) (bottom) (left);
background-image: url(footer.png);
width: ___px;
height ___px;
}

/* Put in values here, pixels work well. For example "10px" Replace the parentheses and words with the pixel values you want for that side, and if you want no margin on a side, put in a zero. If you want the content to be centered, put in "auto" for the left and right spots. */

</style>
<head>
<body>

<div id="footer"></div>



This should do the trick. No html, except for the div! How beautiful.

Excavator
Jan 28th, 2010, 09:01 AM
Hello finoy_ako,
To center an element, you need 3 things:

a DocType
an element with a width
that elements right/left margins set to auto


Try it like this example without the tables. Just copy/paste the entire thing into a new .html document and view it in your browser.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {background: #FC6;}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
height: 600px;
width: 900px;
margin: 30px auto 0;
background: #999;
}
#footer {
height: 30px;
width: 900px;
margin: 0 auto 30px;
background: #f00;
}
#footer img {
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<div id="container">
<!--end container--></div>
<div id="footer">
<img src="footer.png" alt="footer image" width="885" height="30" />
<!--end footer--></div>
</body>
</html>

finoy_ako
Jan 28th, 2010, 03:02 PM
sorry sir jenius im not good in english, thanks to you i understand more about padding and margin.

sir excavator your source code is what i really wanted to have. you made it without using table.

i just love playing around with photoshop and flash and now im going to study how to build a site.

take a look at this link and view the source code, ive made it using table and i think both of you can do this with less number of table.

http://dontdare.50webs.com/samle.html

i will use css style sheet if the page is finish.
i knew my source code are too more. help me to lessen it,

if any of you have time, please show me the best way to build this page.

i mean show me your html,css code for my page so i can study it.


PLEASE show me your fully use css by editting my code.

finoy_ako
Jan 29th, 2010, 07:45 AM
sir, i've try to insert the img footer inside the container but, it cant be on the bottom,

i've try any possible solution but it kills my time.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {background: #FC6;}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
height: 600px;
width: 900px;
margin: 30px auto 0;
background: #999;
}
#footer {
height: 30px;
width: 900px;
margin: 0 auto 30px;
background: #f00;
}
#footer img {
margin-bottom 0px;

}
</style>
</head>
<body>
<div id="container">
<div id="footer">
<img src="footer.png" alt="footer image" width="885" height="30" />

<!--end container--></div>


</body>
</html>

Excavator
Jan 29th, 2010, 08:12 AM
I commented out the height: 600px; of #container and put some content in to push #footer down.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {background: #FC6;}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
/*height: 600px;*/
width: 900px;
margin: 30px auto 0;
background: #999;
overflow: auto;
}
#footer {
height: 30px;
width: 900px;
margin: 0 0 30px;
}
#footer img {
margin: 0 auto;
background: #f00;
}
</style>
</head>
<body>
<div id="container">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div id="footer">
<img src="footer.png" alt="footer image" width="885" height="30" />
<!--end footer--></div>
<!--end container--></div>
</body>
</html>