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,791
    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,085
    Mentioned
    255 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.
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  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,085
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    In that case, I'll close this one to avoid confusion.
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!


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
  •