Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Centering Images w/ CSS

    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!!

  • #2
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    wrap with code tags

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    [code']
    and

    [/code']

    take ' out

    man your code is hard to read
    Last edited by Aurora.Light; 05-16-2011 at 12:35 AM.

  • #5
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    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
    Last edited by Aurora.Light; 05-16-2011 at 12:34 AM.

  • #6
    New to the CF scene
    Join Date
    May 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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
    
    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!

  • #7
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    lol centering your image is not the only problem

  • #8
    New to the CF scene
    Join Date
    May 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I know, and thats all I really know about coding; I know enough to know that I don't really know anything

  • #9
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    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
    Attached Thumbnails Attached Thumbnails Centering Images w/ CSS-x.jpg  

  • #10
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    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
    Last edited by Aurora.Light; 05-16-2011 at 01:08 AM.

  • Users who have thanked Aurora.Light for this post:

    brule2212 (05-16-2011)

  • #11
    New to the CF scene
    Join Date
    May 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #12
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by brule2212 View Post
    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

  • #13
    New to the CF scene
    Join Date
    May 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks oesxyl!!!

  • #14
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by brule2212 View Post
    Thanks oesxyl!!!
    you are welcome, that means your problem is solved i hope,

    best regards


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •