SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    My picture won't center using margin:auto

    Hi.

    My picture .slogandiv won't center when using margin-left:auto; margin-right:auto.

    HTML:
    Code:
    <!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AirWipp</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <link href="css/nivoslider/nivostyles.css" rel="stylesheet" type="text/css">
    
    <script src="css/nivoslider/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="css/nivoslider/jquery.nivo.slider.js" type="text/javascript"></script>
    
     <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
        </script>
     
    
    
    
        
    
    </head>
    
    
    
    <body>
    
    
    
    <div id="bgwrapper">
    <div id="wrapper">
    
    <div id="slogandiv">
    
    <img class="sloganpic" src="images/Slogan.png" width="901" height="96">
    
    </div>
    
    <div id="sliderdiv">
    
    <div id="slider">
         
            <img src="images/Nivoslider/Banner1.png" title="" />
       
           
    </div>
    
    <div id="downslogan"></div>
    
    <div id="meny">
    
    </div>
    
    
    </div>
    
    
    </div>
    </div>
    
    
    
    
    </body>
    </html>
    CSS:

    Code:
    /* OTHER */
    
    body {background-image:url(../images/BG.jpg); }
    
    
    /* DIVS */
    
    
    #wrapper {width:950px; height:2000px; margin-left:auto; margin-right:auto; padding-top:1px; }
    
    #bgwrapper {width:1300px; margin: 0 auto 0 auto; background-image:url(../images/WrapperBG.png) }
    
    #slogandiv {margin-top:20px; width:950px;  }
    
    #sliderdiv {width:950px; height:330px; margin-top:10px; }
    
    #meny {width:950px; height:70px; background-color:#F3F; margin-top:20px; }
    
    #downslogan {height:10px; width:950px; background-image:url(../images/Downslogan.png); margin-top:20px;}
    
    
    
    /* PICS */
    
    .sloganpic {
    	margin-right: auto;
    	margin-left: auto;
    	
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* Eric Meyer Reset */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    What's the problem?:/

    Thanks

    //Kevin

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,813
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    img tags are inline elements. To center them using margin:auto; you must add display:block; to your rule. You could add text-align:center; to the CONTAINER of your IMG tag instead, if you can't / or dont want to make your image into a block element

  3. #3
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,357
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    <img> is an inline element, so can't have margins or padding applied to it. The easiest way to centre it here would be to add text-align:center to the containing div (slogandiv)

    Edit: Just beaten to it. Great minds, and all that.

  4. #4
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you guys. Ill do either of em.

  5. #5
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It feels unnessecary to make a new thread 2 minutes after, but I ran into another problem pretty fast.

    As you can see below I have a class called .meny wich is a unorderd list.
    And as you can see in the styles I have made it so they are like a menu.
    When I try in firefox it looks good, but in chrome and internet explorer the many looks wierd. Have a look at http://www.kwpwebdesign.se to see the problem..

    HTML:
    Code:
    <!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AirWipp</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <link href="css/nivoslider/nivostyles.css" rel="stylesheet" type="text/css">
    
    <script src="css/nivoslider/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="css/nivoslider/jquery.nivo.slider.js" type="text/javascript"></script>
    
     <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
        </script>
     
    
    
    
        
    
    </head>
    
    
    
    <body>
    
    
    
    <div id="bgwrapper">
    <div id="wrapper">
    
    <div id="slogandiv">
    
    <img class="sloganpic" src="images/Slogan.png" width="901" height="96">
    
    </div>
    
    <div id="sliderdiv">
    
    <div id="slider">
         
            <img src="images/Nivoslider/Banner1.png" title="" />
       
           
    </div>
    
    <div id="downslogan"></div>
    
    <div id="meny">
    
    <ul class="meny">
    <li>
      <p>Home</p>
    </li>
    <li>
      <p>Media</p>
    </li>
    <li>
      <p>Services</p>
    </li>
    <li>
      <p>THE TEAM</p>
    </li>
    <li>
      <p>Partners</p>
    </li>
    <li>
      <p>Clients</p>
    </li>
    <li>
      <p>Contact</p>
    </li>
    </ul>
    
    
    
    
    
    </div>
    
    
    </div>
    
    
    </div>
    </div>
    
    
    
    
    </body>
    </html>
    CSS:

    Code:
    /* OTHER */
    
    body {background-image:url(../images/BG.jpg); }
    
    .meny {}
    .meny li { float:left; padding-left:75px; }
    
    p {color:#FFF;}
    
    
    
    /* DIVS */
    
    
    #wrapper {width:950px; height:2000px; margin-left:auto; margin-right:auto; padding-top:1px; }
    
    #bgwrapper {width:1300px; margin: 0 auto 0 auto; background-image:url(../images/WrapperBG.png) }
    
    #slogandiv {margin-top:20px; width:950px;  }
    
    #sliderdiv {width:950px; height:330px; margin-top:10px; }
    
    #meny {width:950px; margin-top:20px; }
    
    #downslogan {height:10px; width:950px; background-image:url(../images/Downslogan.png); margin-top:20px;}
    
    
    
    /* PICS */
    
    .sloganpic {
    	margin-right: auto;
    	margin-left: auto;
    	display:block;
    	
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* Eric Meyer Reset */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    Thanks

  6. #6
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ill create a new thread for this.

  7. #7
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,357
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    In that case, I'll close this one to avoid confusion.


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
  •