SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    moving div tag to the center of the page

    hey guys,
    i got a div that is to be centered, the problem is i cant find a usefull way of doing this, all the examples i saw do things like this:
    Code:
    #content {
      width: 700px ;
      margin-left: auto ;
      margin-right: auto ;
    }
    the problem is that it doesnt work in all browsers, im using IE8 and it doesn't work, altho the author said it works in IE7,6 firefox safari and opera (dont know about chrome either)

    can any1 show me a complete, usefull code of making my div aligned to the center of the page that will work in all of the browsers?
    If that matters, my div should have width of 1000px and height of 800px

    thanks in advance!

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that should have worked, although I didn't test it.

    but unless you specify a height when you have no content in the div you probably won't see it on the screen.

    this is much the same css and definitely works

    Code:
     
    <!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>
    <title></title>
    <style type="text/css">
    
    #myDiv {
        width: 1000px;
        height: 800px;
        background-color: green;
        margin: 0px auto 0px auto;
        padding: 0px 0px 0px 0px
    }
    
    </style>
    </head>
    <body>
     
    <div id="myDiv"></div>
    
    </body>
    </html>

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    nice, this one works in IE8 when ill get home ill test it in the rest of the browsers and let u know

    thanks

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ulthane View Post
    nice, this one works in IE8 when ill get home ill test it in the rest of the browsers and let u know

    thanks
    that's ok

    and I can save you the trip - it'll work in the other browsers as well since I used plain vanilla html and css

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    yeah thanks, it works

    now im working on my links menu bar, how can i have some space between each link in it in the most usefull way using css? atm they are all very close to each other..

    on html:
    Code:
    <div id="navigation"> 
    home |
    <a href="dogs.asp">dog adoption</a> |
    <a href="cats.asp">cat adoption</a> |
    <a href="gallery.html">gallery</a> |
    <a href="links.html">links</a> |
    <a href="donations.html">donations</a> |
    <a href="volunteer.html">volunteer</a> |
    <a href="aboutus.html">about us</a>
    </div>
    on css:
    Code:
    #navigation{width:1000px;height:40px;background-image:url(images/bar.jpg);text-align:center;font-size:16px;font-family:sans-serif;}
    thanks in advance

  6. #6
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can add margins or padding to the links in the css to suit your requirements.

  7. #7
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    doesn't work correctly for me, when i do padding-right its fine, but when i add padding-left (i need to because i got that "|" letter between each link, then the header image moves too...

    PS note that Home is not a link aswell

    edit * Woops, that image was a link aswell, thats why it happent but how do i get the "home" word to get affected by the padding aswell, i have to put it in span and style it aswell or is there any other way of doing this?

  8. #8
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    well i got it done,
    got another 2 questions to ask...
    1) how do i move the text to the middle of the menu bar image?
    2) how do i close this space between the menu bar image and the header image?

    here are the codes:
    HTML:
    Code:
    <div id="Main">
    <div id="header">
    <img src="images/hd2.jpg" alt="אס.או.אס חיות אשקלון" />
    <div id="navigation"> 
    <span>דף הבית</span> |
    <a href="dogs.asp">אמץ כלב</a> |
    <a href="cats.asp">אמץ חתול</a> |
    <a href="gallery.html">גלריה</a> |
    <a href="links.html">קישורים</a> |
    <a href="donations.html">תרומות</a> |
    <a href="volunteer.html">התנדבות</a> |
    <a href="aboutus.html">על העמותה</a> |
    <a href="english.html">About us</a>
    </div>
    </div>
    </div>
    CSS page
    Code CSS:
    html, body {background-color:#99CCFF;}
    #Main{width:1000px;height:800px;border:solid 3px #267411;margin:0px auto 0px auto;direction:rtl;}
    #Header{width:1000px;height:150px;}
    #navigation{width:1000px;height:40px;background-image:url(images/bar.jpg);text-align:center;font-size:16px;font-family:sans-serif;}
    a, span{padding:0px 20px 0px 20px;}
    a:link{color:#FFFFFF;text-decoration:none;}
    a:visited{color:#FFFFFF;text-decoration:none;}
    a:hover{color:#000000;text-decoration:none;}
    img{border-width:0;}

    here is a link to the page if u wanna take a look:
    http://saharatias.brinkster.net/

    thanks

  9. #9
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use line-height: 40px to get your text vertically centered:
    Code CSS:
    #navigation {
    background-image:url("images/bar.jpg");
    font-family:sans-serif;
    font-size:16px;
    height:40px;
    line-height: 40px;/* Add this */
    text-align:center;
    width:1000px;
    }
    I have to leave now, but when you haven't solved the margin between the header and the menu when I'm back I will have a look.

  10. #10
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    well i have no idea what it is, but i found out that the Doctype is doing the "problem"
    when i take it off, the background of the content DIV appears, and the spaces between the divs goes off, when i return it it all suddenly got "messed" again, however i read about it and saw it is nessasry for the different browsers to view the code the way it should be, so now the only problem to be solved is the spaces between divs, i've changed the codes abit so have a look again at :
    http://saharatias.brinkster.net/

    HTML:
    Code:
    <!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>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <meta name="description" content="אס.או.אס חיות אשקלון" />
    <meta name="keywords" content=" S.O.S , SOS , אס.או.אס , חיות , אשקלון , חתולים , כלבים , אימוץ , תרומות , donates , ashkelon , pets " />
    <title>אס או אס חיות אשקלון - כניסה</title>
    </head>
    <body>
    <div id="Main">
    <a href="Index.asp"><img src="images/hd2.jpg" alt="אס.או.אס חיות אשקלון"/></a>
    <div id="menu"> 
    <span>דף הבית</span> |
    <a href="dogs.asp">אמץ כלב</a> |
    <a href="cats.asp">אמץ חתול</a> |
    <a href="gallery.html">גלריה</a> |
    <a href="links.html">קישורים</a> |
    <a href="donations.html">תרומות</a> |
    <a href="volunteer.html">התנדבות</a> |
    <a href="aboutus.html">על העמותה</a> |
    <a href="english.html">About us</a>
    </div>
    <div id="content">
    
    </div>
    </div>
    </body>
    </html>
    CSS
    Code:
    html, body {background-color:#99CCFF;margin:5px 3px 5px 3px;}
    #Main {width:1000px;height:800px;border:solid 3px #267411;margin:0px auto 0px auto;direction:rtl;padding:0px 0px 0px 0px;}
    #menu {width:1000px;height:40px;background-image:url(images/bar.jpg);text-align:center;font-size:16px;font-family:sans-serif;line-height:40px;}
    #menu a, span {padding:0px 20px 0px 20px;}
    #menu a:link, a:visited {color:#FFFFFF;text-decoration:none;}
    #menu a:hover {color:#000000;text-decoration:none;}
    #content {font-family:arial;color:#009933;width:1000px;height:610;background-color:#FFFFFF;text-align:center;}
    img {border-width:0;}
    thanks

  11. #11
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never ever try to change things in your Doctype or remove it at all. That will never be the solution!

    Here we go:

    Code HTML4Strict:
    <!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 {
    	margin: 0;
    	padding: 0;
    	background-color:#99CCFF;
    }
     
    ol, ul, li {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;	
    }
    #Main {
    	width:1000px;
    	height:800px;
    	border:solid 3px #267411;
    	margin:0px auto;
    	direction:rtl;
    }
     
    #Header{
    	width:1000px;
    	height:150px;
    	background: url(images/hd2.jpg) no-repeat;
    }
     
    #navigation{
    	width:1000px;
    	height:30px;
    	line-height: 30px;
    	padding: 5px 0;
    	background-image:url(images/bar.jpg);
    	text-align:center;
    	font-size:16px;
    	font-family:sans-serif;
    	list-style-type: none;
    }
     
    #navigation li {
    	float: left;
    	position: relative;	
    }
     
    #navigation li a,
    #navigation li span {
    	padding: 0 20px;
    	display: block;
    	border-right: #000 solid 1px;
    	color: #FFF;
    	text-decoration: none;	
    }
     
    #navigation li a.last {
    	border-right: 0;	
    }
     
    #navigation li a:hover, 
    #navigation li a:focus {
    	color: #000;	
    }
     
    </style>
    </head>
     
    <body>
    <div id="Main">
    <div id="Header"></div>
    <div id="navigation">
    <ul>
    <li><span>דף הבית</span></li>
    <li><a href="dogs.asp">אמץ כלב</a></li>
    <li><a href="cats.asp">אמץ חתול</a></li>
    <li><a href="gallery.html">גלריה</a></li>
    <li><a href="links.html">קישורים</a></li>
    <li><a href="donations.html">תרומות</a></li>
    <li><a href="volunteer.html">התנדבות</a></li>
    <li><a href="aboutus.html">על העמותה</a></li>
    <li><a href="english.html" class="last">About us</a></li>
    </ul>
    </div>
    </div>
    </body>
    </html>

    This should work

  12. #12
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    working very nice thanks for the help

    but there's just 1 prob, the text on the menu bar is not centered, any ideas?

  13. #13
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ulthane View Post
    working very nice thanks for the help

    but there's just 1 prob, the text on the menu bar is not centered, any ideas?
    Your welcome. Add this to your styles to center the menu.
    Code CSS:
    #navigation ul {
    	display: inline-block;	
    }

  14. #14
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    thanks it works
    some other question, is there any other way of enlarging some texts? i need to make some headers bigger, i dont use the <hx> tag because i dont want the space it leaves below it, also i tried with font-size, but there's too huge difference between x-large and xx-large (i dont want to imagine what small is...)
    xx-large in firefox looks fine, but in IE looks way too big, and x-large in firefox is just like any other text size, but in IE looks fine, confusing...

    thanks for the support

  15. #15
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not use the heading tag? You can reset margins and padding for your headings as well and create the space required. Personally I don't use the keyword font-size property. i use percentage font sizing instead, but that is personal

  16. #16
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    well i got it sorted, just used <font size="number"> in the html not in css and it worked nicely in both.

    Now my next problem is again centering some text, i got just <table><tr><td> TEXT </td></tr></table> that i want to align, it gets aligned fine in firefox but not in IE

    i tried text-align:center; or display:inline-block; but didnt work out..

    HTML
    Code:
    <table class="pets" align="center" cellspacing="3" cellpadding="3">
    <tr><td align="center"> TEXT </td></tr>
    </table>
    CSS
    Code:
    .pets {width:520px;margin-bottom:10px;border:7px outset #267411;}
    .pets td {border:1px solid #267411;width:260px;text-align:center;font-family:arial;color:#009933;}
    any ideas?

  17. #17
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ulthane View Post
    well i got it sorted, just used <font size="number"> in the html not in css and it worked nicely in both.
    Don't use CSS in your html. You should fix it in your CSS. If for example your <!DOCTYPE> is strict it won't validate.

    Quote Originally Posted by ulthane View Post
    Now my next problem is again centering some text, i got just <table><tr><td> TEXT </td></tr></table> that i want to align, it gets aligned fine in firefox but not in IE

    i tried text-align:center; or display:inline-block; but didnt work out..

    HTML
    Code:
    <table class="pets" align="center" cellspacing="3" cellpadding="3">
    <tr><td align="center"> TEXT </td></tr>
    </table>
    CSS
    Code:
    .pets {width:520px;margin-bottom:10px;border:7px outset #267411;}
    .pets td {border:1px solid #267411;width:260px;text-align:center;font-family:arial;color:#009933;}
    any ideas?
    Again don't use CSS in your html! Which browser is it that it's not centering? Just saw it in FF, Chrome, Opera, IE8 and Safari and it looked okay to me

  18. #18
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    im looking at it from IE 7 atm and it isn't, btw how excactly did u check it? :P its not on the same page given above,

    its on http://saharatias.brinkster.net/dogs.asp

    ill change the texts to TEXT so u will know where to look

  19. #19
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    lol, changed it from <tr><td> to <tr><th> and it started working, probably <td> was affected by some other CSS i had there

  20. #20
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ulthane View Post
    btw how excactly did u check it? :P its not on the same page given above,

    its on http://saharatias.brinkster.net/dogs.asp
    Just by copying your html in my editor and check


    Good that it's working Goodluck with your site


Bookmarks

Posting Permissions

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