...

View Full Version : Centering Images w/ CSS



brule2212
05-15-2011, 11:16 PM
Hey, I was just wondering if anyone could help me with centering images?
I have one css sheet for four web pages; I managed to get every other image in all of my web sites centered except for one image and I cannot figure out why.

Here is my html code, I bolded the image I am having troubles with

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Final Project</title>
<link rel="stylesheet" type = "text/css"
href="../css/final.css" />
</head>
<body>
<div id="header">
<div id="logo">
<img src="../images/finalpics/logo.jpg" alt="logo" id="imglogo" />
<h1>by Brulla Environmental Company</h1>
</div>
</div> <!-- end header -->
<div id="green">
<div id="wrapper">
<div id="navv">
<ul>
<li><a href="final.htm">Home</a></li>
<li><a href="final2.htm">Products</a></li>
<li><a href="final3.htm">Contact Us</a></li>
<li><a href="final4.htm">About Us</a></li>
</ul>
</div> <!-- end navv -->

<h2>About ReFurniture</h2>
<p id="last"> Refurniture is dedicated to recyling furniture. There is no need to go
out and buy a new piece of furniture everytime you get tired of a piece,
or it gets warn out. This is where we come in! We can help you get the
look you want without having to buy another piece of furniture. We work
with you in picking out the stain or paint, and fixing anything that may
need it. After we know what you want it to look like and what needs to be
fixed we do the rest for you! Not only do we do shelves, tables, desks,
and display cases, but we can also do many other things; almost anything
made out of wood can be refinished. If your kitchen cabinets are looking
a little dull, bring them to us and we can bring the life back into them.</p>

<img src="../images/finalpics/beforeafter.jpg" alt="before and after"/>
</div><!-- end content -->
<div id="footer">
<a href="final.htm">Home</a>&nbsp;&nbsp;&nbsp;
<a href="final2.htm">Products</a>&nbsp;&nbsp;&nbsp;
<a href="final3.htm">Contact Us</a>&nbsp;&nbsp;&nbsp;
<a href="final4.htm">About Us</a>
</div>
</div>
</body>
</html>

and here is my css for my images

div#wrapper img
{
background:rgb(63,128,72);
display:block;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:10px;
padding:20px;
border:2px solid rgb(139,119,101);
}


My code and css is probably pretty sloppy, I don't know what I am doing really. I took this class online and shortly after starting I realized that this really isn't my cup of tea. This is my last project of the class and I am stuck!
Please help!!

Aurora.Light
05-15-2011, 11:20 PM
wrap with code tags

brule2212
05-15-2011, 11:26 PM
Here is my html code, I bolded the image I am having troubles with

<code><?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Final Project</title>
<link rel="stylesheet" type = "text/css"
href="../css/final.css" />
</head>
<body>
<div id="header">
<div id="logo">
<img src="../images/finalpics/logo.jpg" alt="logo" id="imglogo" />
<h1>by Brulla Environmental Company</h1>
</div>
</div> <!-- end header -->
<div id="green">
<div id="wrapper">
<div id="navv">
<ul>
<li><a href="final.htm">Home</a></li>
<li><a href="final2.htm">Products</a></li>
<li><a href="final3.htm">Contact Us</a></li>
<li><a href="final4.htm">About Us</a></li>
</ul>
</div> <!-- end navv -->

<h2>About ReFurniture</h2>
<p id="last"> Refurniture is dedicated to recyling furniture. There is no need to go
out and buy a new piece of furniture everytime you get tired of a piece,
or it gets warn out. This is where we come in! We can help you get the
look you want without having to buy another piece of furniture. We work
with you in picking out the stain or paint, and fixing anything that may
need it. After we know what you want it to look like and what needs to be
fixed we do the rest for you! Not only do we do shelves, tables, desks,
and display cases, but we can also do many other things; almost anything
made out of wood can be refinished. If your kitchen cabinets are looking
a little dull, bring them to us and we can bring the life back into them.</p>

<img src="../images/finalpics/beforeafter.jpg" alt="before and after"/>
</div><!-- end content -->
<div id="footer">
<a href="final.htm">Home</a>&nbsp;&nbsp;&nbsp;
<a href="final2.htm">Products</a>&nbsp;&nbsp;&nbsp;
<a href="final3.htm">Contact Us</a>&nbsp;&nbsp;&nbsp;
<a href="final4.htm">About Us</a>
</div>
</div>
</body>
</html>

and here is my css for my images

div#wrapper img
{
background:rgb(63,128,72);
display:block;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:10px;
padding:20px;
border:2px solid rgb(139,119,101);
}</code>



like that?

Aurora.Light
05-15-2011, 11:27 PM
[code']
and

[/code']

take ' out

man your code is hard to read

Aurora.Light
05-15-2011, 11:31 PM
hm ill plug it in. looks fine when you plug in just the script you provided, the picture is centered. probably have to show the entire css you used

brule2212
05-15-2011, 11:37 PM
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Final Project</title>
<link rel="stylesheet" type = "text/css"
href="../css/final.css" />
</head>
<body>
<div id="header">
<div id="logo">
<img src="../images/finalpics/logo.jpg" alt="logo" id="imglogo" />
<h1>by Brulla Environmental Company</h1>
</div>
</div> <!-- end header -->
<div id="green">
<div id="wrapper">
<div id="navv">
<ul>
<li><a href="final.htm">Home</a></li>
<li><a href="final2.htm">Products</a></li>
<li><a href="final3.htm">Contact Us</a></li>
<li><a href="final4.htm">About Us</a></li>
</ul>
</div> <!-- end navv -->

<h2>About ReFurniture</h2>
<p id="last"> Refurniture is dedicated to recyling furniture. There is no need to go
out and buy a new piece of furniture everytime you get tired of a piece,
or it gets warn out. This is where we come in! We can help you get the
look you want without having to buy another piece of furniture. We work
with you in picking out the stain or paint, and fixing anything that may
need it. After we know what you want it to look like and what needs to be
fixed we do the rest for you! Not only do we do shelves, tables, desks,
and display cases, but we can also do many other things; almost anything
made out of wood can be refinished. If your kitchen cabinets are looking
a little dull, bring them to us and we can bring the life back into them.</p>

<img src="../images/finalpics/beforeafter.jpg" alt="before and after"/>
</div><!-- end content -->
<div id="footer">
<a href="final.htm">Home</a>&nbsp;&nbsp;&nbsp;
<a href="final2.htm">Products</a>&nbsp;&nbsp;&nbsp;
<a href="final3.htm">Contact Us</a>&nbsp;&nbsp;&nbsp;
<a href="final4.htm">About Us</a>
</div>
</div>
</body>
</html>

and here is my css for my images

body
{
margin:auto;
max-width:900px;
background:url(../images/finalpics/background.jpg);
font-family:"comic sans ms", sans-serif;
}

h1
{
position:relative;
padding-top:26px;
padding-bottom:30px;
width:595px;
background:rgb(63,128,72);
float:right;
color:rgb(143,188,143);
margin:0px;
}

h2
{
text-align:center;
}

p
{
margin:15px;
}

#header
{
margin-top:15px;
margin-bottom:15px;
}

div#wrapper img
{
background:rgb(63,128,72);
display:block;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:10px;
padding:20px;
border:2px solid rgb(139,119,101);
}


div#green
{
background:rgb(143,188,143);
width:900px;
}

#logo
{
background:rgb(63,128,72);
width:900px;

}

div#navh ul
{

margin:10px 0px;
width:860px;
text-align:center;
background:rgb(63,128,72);
border-top:3px solid rgb(139,119,101);
border-bottom:3px solid rgb(139,119,101);
list-style:none;
}

div#navh li
{
padding:0px 30px;
display:inline;
}

div#navh ul li a:link, div#navh ul li a:visited
{
font-size:10pt;
font-weight:bold;
text-decoration:none;
padding:4px 10px 0px 10px;
color:rgb(143,188,143);
}

div#navh ul li a:hover, div#navh ul li a:active
{
color:rgb(95,158,160);
}

div#navv li
{
border:1px solid rgb(139,119,101);
}

div#navv ul
{
position:absolute;
top:120px;
left:195px;
width:80px;
list-style:none;
margin:25px 0px 0px 0px;
padding:20px;
background:rgb(63,128,72);
}

div#navv ul li a:hover, div#navv ul li a:active
{
font-size:10pt;
font-weight:bold;
display:block;
padding:5px 0px 5px 2px;
background:rgb(102,205,170);
color:rgb(95,158,160);
}

div#navv ul li a:link, div#navv ul li a:visited
{
font-size:10pt;
font-weight:bold;
display:block;
text-decoration:none;
padding:5px 0px 5px 2px;
background:rgb(143,188,143);
color:rgb(63,128,72);
}

form
{
float:right;
margin-right:100px;
}

p#last
{
float:right;
width:740px;
}

img#dresser
{
margin-bottom:500px;
}



/*footer stuff*/
#footer
{
clear:both;
text-align:center;
}
#footer a:link, #footer a:visited
{
color:rgb(63,128,72);
}
#footer a:hover, #footer a:active
{
color:rgb(95,158,160);
}



ok there is my entire css with it

Im sorry its so hard to read, like I said, I really have no idea what im doing!

Aurora.Light
05-15-2011, 11:58 PM
lol centering your image is not the only problem

brule2212
05-16-2011, 12:01 AM
I know, and thats all I really know about coding; I know enough to know that I don't really know anything

oesxyl
05-16-2011, 12:03 AM
can you post a link to the page?

i get your code and try to see how it look, difficult since i don't have the pictures but image you said that create problems seems centered. See attachment.

best regards

Aurora.Light
05-16-2011, 12:03 AM
give me 10 min. Im probably not supposed to be doing your work but I'll just quickly change some stuff.


EDIT:
Wow dude, this is pretty unfixable.

i pmed you, check your inbox

brule2212
05-16-2011, 12:09 AM
oesxyl - I havn't uploaded my page yet, I wanted to make sure that I had every(or as much as I know) right. I will post it soon, but now I am confused as to why I can't see it centered?

oesxyl
05-16-2011, 12:12 AM
oesxyl - I havn't uploaded my page yet, I wanted to make sure that I had every(or as much as I know) right. I will post it soon, but now I am confused as to why I can't see it centered?
it is possible to be the browser cache, try to clean up and look again.

best regards

brule2212
05-16-2011, 12:16 AM
Thanks oesxyl!!!

oesxyl
05-16-2011, 12:21 AM
Thanks oesxyl!!!
you are welcome, :) that means your problem is solved i hope, :)

best regards



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum