1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS My site is like glued to the left side of the browser

Discussion in 'Web Development' started by Rationality, Feb 16, 2011.

  1. Rationality

    Rationality New Member

    you know when you zoom in and out
    a site is usually centered on your screen.

    well, I dont know what I did wrong (I am a noob)
    but when I zoom it in and out, it remains like glued to
    the left side of the browser.

    what should I do
     
    Rationality, Feb 16, 2011
    #1
  2. Rationality

    Rationality New Member

    Fixed it for mozilla, but stays the same way for IE
     
    Rationality, Feb 16, 2011
    #2
  3. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    You might try to put this bit of code in the css file at the start in with the "body"
    Code:
    body { margin:0px; padding:0px;}
    or by it's self at the top
    Code:
    * {
	margin: 0px;
	padding: 0px;
    }
     
    ishkey, Feb 17, 2011
    #3
  4. Rationality

    Rationality New Member

    Right now its like this:

    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0 auto;
    padding: 0px;
    background-color:#000;
    background-image: none;
    width: 1024px;
    text-align:center
    }
    * {margin: 0px;padding: 0px;}

    and its centered for mozilla, but not for IE 7 :(
     
    Rationality, Feb 18, 2011
    #4
  5. enigma1

    enigma1 New Member

    Using a
    margin: 0 auto 0 auto
    should center the content of a block element horizontally if the block element has a width.
    eg:

    <div style="margin: 0 auto; width: 1024px;" >test</div>

    And it is included with the body tag you posted. So it could be some other part of the html isn't closed and we cannot see it without the whole html.
     
    enigma1, Feb 18, 2011
    #5
  6. Rationality

    Rationality New Member

    HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>АWE Ти</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="favicon.ico" />
    <style type="text/css">
    <!--
    #container #main #nav ul li strong {
    color: #FFF;
    text-align: center;
    background-color: #000;
    margin: 0 auto;
    }
    #container #main #nav ul li {
    color: #F33;
    background-color: #000;
    margin: 0 auto;
    }
    -->
    </style>
    </head>

    <body>
    <div id="container">
    <div id="main">
    <div id="header"><img src="images/logo.jpg" width="1024" height="69" /><img src="images/header.gif" width="1024" height="442" /></div>
    <div id="nav">
    <ul>
    <li><a href="index.html"><strong>Начало</strong></a></li>
    </ul>
    <ul>
    <li><a href="products/products.html"><strong>Продукти</strong></a></li>
    </ul>
    <ul>
    <li><a href="originalparts/originalparts.html"><strong>Оригинални части</strong></a></li>
    </ul>
    <ul>
    <li><a href="delivery/delivery.html"><strong>Доставка</strong></a></li>
    </ul>
    <ul>
    <li><a href="onlineshop/onlineshop.html"><strong>Онлайн Магазин</strong></a></li>
    </ul>
    <ul>
    <li><a href="gallery/gallery.html"><strong>Галерия</strong></a></li>
    </ul>
    <ul>
    <li><a href="contacts/contacts.html"><strong>Контакти</strong></a></li>
    </ul>
    </div>
    <div id="content">
    <img src="images/brands.gif" width="1024" height="32" />
    <div id="left">
    <div class="post">
    <h1>Здравейте!</h1>
    <p>&nbsp;</p>
    <p>&quot;QWER</p>
    <p>QWER.</p>
    <p><img src="images/magazin.jpg" width="492" height="369" /></p>

    <p>QWER <a href="products/products.html">онлайн каталог</a>, в QWERл.</p>
    <p>За да закупите стока от наличната в магазина, посетете нашия <a href="onlineshop/onlineshop.html">онлайн магазин</a>.</p>
    <p>За всякакви въпроси, заявки, консултации или търговски партньорства ипредложения, разгледайте секция <a href="contacts/contacts.html">&quot;Контакти&quot;</a></p>
    <p>Условията на доставка на стоката до Вашия дом, магазин или сервиз, в случай че не можете да ни посетите, можете да разгледате <a href="delivery/delivery.html">тук</a>.</p>
    </div>
    </div>
    <div id="right">
    <div id="right2">
    <p><img src="Clipboard01.jpg" width="250" height="90" /></p>
    <p>ФQWERt;</p>
    <p>QWER:</p>
    <p>* QWER</p>
    <p>* QWER</p>
    <p>* QWER</p>
    <p>* ДWER</p>
    </div>
    <p>&nbsp;</p>
    </div>
    <div class="clear"></div>
    </div>
    </div>
    <div id="footer">
    <ul>
    <li><a href="index.html">начало</a></li>
    |
    <li><a href="products/products.html">продукти</a>
    |
    <a href="originalparts/originalparts.html">оригинални части</a> |
    </li>
    <li><a href="delivery/delivery.html">доставка</a></li>
    |
    <li><a href="onlineshop/onlineshop.html">онлайн магазин</a></li>
    |
    <li><a href="gallery/gallery.html">галерия</a></li>
    |
    <li><a href="contacts/contacts.html">контакти</a></li>

    </ul>
    <p><a href="termsofuse/termsofuse.html">условия за ползване на сайта </a> <strong>| © 2011 ички права запазени. </strong>
    </p></div>
    </div>
    </body>
    </html>

    CSS:

    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0 auto;
    padding: 0px;
    background-color:#000;
    background-image: none;
    width: 1024px;
    text-align:center
    }
    * {margin: 0px;padding: 0px;}
    #container {
    text-align: left;
    width: 1024px;
    background-color: #000;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    }
    #main {
    width: 1024px;
    background-image:url(images/background.gif);

    }
    /******************** header ********************/
    #header {
    width:1024px;
    height:511px;
    margin-left:0px;
    background-image:url(images/header.jpg);
    display:block;
    }
    #nav {
    width:1024px;
    height:22px;
    background-color:#000;
    margin-top: 2px;
    margin-right: 0px;
    margin-bottom: 2px;
    margin-left: 0px;
    padding-top: 3px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 1px;
    }
    #nav ul {
    }
    #nav li {
    display:inline;
    background-color:#245882;
    width:146px;
    height:22px;
    float:left;
    margin-left:0px;
    text-align:center;
    }
    #nav a {
    width:170px;
    height:19px;
    padding-top:3px;
    text-decoration:none;
    color:#a5cae5;
    font-weight:800;
    display:block;
    }
    #nav a:hover {
    color:#666;
    font-weight:800;
    }
    /******************** Content ********************/
    p, h1, a, span{font-family: Arial, Helvetica, sans-serif;}
    #content {
    width:1024px;
    margin-left:0px;
    background-color:#666;
    background-image: none;
    }
    #left {
    float:left;
    width:600px;
    display:inline;
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 30px;
    margin-left: 20px;
    text-align: justify;
    }
    #left p {
    font-size: 12px;
    color: #FFF;
    padding: 5px 0px;
    font-weight: bold;
    }
    #left a{
    color: #052d4e;
    font-weight:800;
    }
    #left a:hover{
    color:#FFFFFF;
    }
    #left h1{
    font-size: 16px;
    color: #FFF;
    display:inline;
    font-weight:900;
    }
    #left span{
    font-size: 12px;
    color: #007dda;
    font-weight: 900;
    display:inline;
    margin-left:8px;
    }
    #right {
    float:right;
    width:260px;
    background-color:#000;
    color:#FFFFFF;
    font-weight:900;
    padding: 10px 20px;
    margin: 30px 20px 20px 0px;
    display:inline;
    text-align: justify;
    border-top-style: double;
    border-right-style: double;
    border-bottom-style: double;
    border-left-style: double;
    }
    #right p{
    padding: 7px 0px;
    background-color: #000;
    }
    #right a{
    color:#FFFFFF;
    font-weight:900;
    }
    #right a:hover{
    color: #052d4e;
    }
    .post {
    margin-top:20px;
    }
    .post a{
    }

    .post a:hover{
    }

    .post p{
    }


    /******************** Footer ********************/
    #footer {
    width:1024px;
    text-align:center;
    color:#FFFFFF;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    }
    #footer ul {
    }
    #footer li {
    display:inline;
    float:none;
    text-align:center;
    }
    #footer a {
    color:#FFFFFF;
    font-weight:900;
    text-decoration:none;
    }
    #footer a:hover {
    text-decoration:underline;
    }
    #footer span {
    display:block;
    clear:both;
    color:#FFFFFF;
    margin: 10px 0px;
    }
    .clear{
    clear:both;
    }
     
    Rationality, Feb 19, 2011
    #6
  7. enigma1

    enigma1 New Member

    I don't see a problem with the html you posted the page is centered with IE 7,8 and FF I tested and zoom operations.

    Could be the foreign characters perhaps? That I could not copy/paste.
     
    enigma1, Feb 19, 2011
    #7
  8. Rationality

    Rationality New Member

    Strange....

    Foreign characters are just plain text...
     
    Rationality, Feb 19, 2011
    #8