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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post

    Question How to center DIV?

    I'm designing a web page using divs.
    #wrapper (Main Div containing 2 more child divs in it.)
    #1 (1st child Div)
    #2 (2nd child Div)

    When I view my webpage on local machine it shows the #Wrapper right in the center of the page but when I upload the files & open the page through URL, the #wrapper moves to the left. What's the prob, please help!
    Here is my CSS...
    Code:
    HTML, BODY {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	background-color: ;
    	background-image: url(images/pbg.jpg);
    	margin: 5px 0px;
    }
    
    #wrapper {
    	margin: 0px auto;
    	width: 770px;
    	height: 748px;
    	text-align: justify;
    	background: url(images/cntbg.jpg);
    	color: #FFFFFF;
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    
    #1 {
    	position: relative;
    	top: 140px;
    	left: 180px;
    	width: 570px;
    	text-align: justify;
    	line-height: 16px;
    	color: #FFFFFF;
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    
    #2 {
    	position: relative;
    	top: 190px;
    	left: 180px;
    	width: 570px;
    	text-align: justify;
    	line-height: 16px;
    	color: #FFFFFF;
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Uzair,
    What happens when you do it like this:
    Code:
    HTML, BODY {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	background-color: ;
    	background-image: url(images/pbg.jpg);
    	text-align: center;
    }
    
    #wrapper {
    	margin: 5px auto 0 auto;
    	width: 770px;
    	height: 748px;
    	text-align: justify;
    	background: url(images/cntbg.jpg);
    	color: #FFFFFF;
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    I don't like margin on the body because there is nothing outside of the body. Could use padding but I did it with a top margin on the wrapper.

    Not sure about the wrapper positioning left. Older browsers need the text-align: right; and you don't mention what your looking at it with. If the above code doesn't fix it, give us a link so we can see it live.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post
    Thanks a lot, it works but another problem occered...
    Now the text is not aligned justify. How can I fix it...
    here is the Live page...
    http://www.geocities.com/uzair_693/

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    The problem is that the host apparently adds code above your doctype declaration.

    This is most unfortunate since it causes your page to be rendered in quirks mode. The usual method of centering with margin: 0 auto doesn't work with IE in quirks mode. Using text-align: center exploits another IE bug that incorrectly causes block level elements to be centered.

    I think you should concentrate on finding out how to get your page rendered in standards mode on that host. Else you will have many more problems with e.g. incorrect box model in IE.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    This does the trick.
    Got rid of the extra stuff and put the text-align: justify; where your text is, in the td.



    Code:
    HTML, BODY {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	background-color: #7cce4b;
    	background-image: url(images/pbg.jpg);
    	text-align: center;
    }
    
    #wrapper {
    	margin: 5px auto 0 auto;
    	width: 770px;
    	height: 748px;
    	background: url(images/cntbg.jpg);
    	color: #FFFFFF;
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    
    #abc {
    	position: relative;
    	top: 170px;
    	left: 175px;
    	width: 600px;
    	line-height: 16px;
    	color: #FFFFFF;
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    
    #xyz {
    	position: relative;
    	top: 215px;
    	left: 175px;
    	width: 600px;
    	line-height: 16px;
    	color: #FFFFFF;
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    
    STRONG {
    	font-size: 14px;
    	color: #009900;
    }
    
    TD {
    	padding: 2px;
    	color: #FFFFFF;
    	text-align: justify;
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    And now for my usual rant about NOT using tables and validating. Check out the links in my sig below.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post
    Thanks a lot. Everything is fine now!

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello again Uzair,
    Koyama is right, that garbage being added above your doctype is always going to give you problems.
    I'm sure there is free hosting that doesn't add to your code, just have to look around for it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post
    got another problem....
    Now I wanna place a small image in the right bottom corner of the #wrapper div. I wrote this code but it doesnt work...

    #wrapper IMG {
    position: relative;
    bottom: 0px;
    right: 0px;
    }

    Please help again?
    Also tell me.... r u suggesting me to remove DocType from the top of the page? If I do so, then how can I validate my page from W3C ???

  • #9
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    No... DO NOT get rid of the doctype. Instead, don't use Geocities to host your site, because they add all sorts of crap at their will that, as has been said, caused the page to be rendered in quirks mode in IE. Try hostia.com for free web hosting 123-reg for a cheap domain name.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Goodmorning Uzair, Don't remove your DocType. We're just suggesting a host that doesn't add the garbage above the doctype.
    DocType HAS to be on the first line to work.

    To place your image put it inside the wrapper after the rest of your code and float it wherever you'd like to put it (no absolute positioning)... like this:

    Code:
    	<td>Brochures/Print Media </td>
    		<td>A+</td>
    	</tr>
    </table>
    </div>
    <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fgeocities.com%2Fuzair_693%2Fglobal.css&warning=1&profile=css21&usermedium=all" target="_blank"><img src="images/validcss.jpg" width="103" height="18" border="0" alt="Valid CSS - W3C" /></a>
    </div>
    </body>
    </html>
    
    
    #wrapper IMG {
            float: right;
            margin: 0 60px 0 0;
    }

    Cascading Style Sheets A+
    Huh?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post
    It works, but the problem is still there....
    Sorry for taking too much time but.....
    Everything looks fine on my local machine, but when I upload the files, things change their positions ('~')
    Look @ the page now everything moved upwards, while on my local machine, its just fine. Please guide me how can I control this. I'm using I.E 6.0

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    I'm not see the problem Uzair, it seems to look right here.
    Here is a screencap from IE7:
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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