SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  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 images won't spread using padding

    So I have three pictures listed in a unorderd list in a div called #social and when I apply padding-left:1px to these, nothing happens.

    Code:
    <!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>Untitled Document</title>
    <link href="css/styles.css"rel="stylesheet" type="text/css">
    </head>
    
    <body>
    
    
    
    <div id="outer">
    	<div id="header">
        
        <img id="banner" src="images/Logo.png" width="780" height="137" />
        
        <div id="arbeten">
        
        
       <div class="bilder"><br />
         <p class="text">Detta här är mitt portfolio på de hemsidor jag gjort till olika företag och privatpersoner. </p><br />
     
         <p class="text">Är du intresserad av att få din hemsida gjord? Gå längst ner för att kontakta mig.</p><br />
       
         <p class="text"><span class="sne">&quot;Everything is designed. Few things are designed well.&quot;</span>   </p>
       </div> 
        
        <img class="bilder" src="images/Test1.jpg" width="220" height="180" />
        
        <img class="bilder" src="images/Test2.jpg" width="220" height="180" />
        
        <br />
        
          <img class="bilder" src="images/Test3.jpg" width="220" height="180" />
        
        <img class="bilder" src="images/Test4.jpg" width="220" height="180" />
        
        <img class="bilder" src="images/Test5.jpg" width="220" height="180" />
    
        
           <img class="bildersist" src="images/Test6.jpg" width="220" height="180" />
        
        <img class="bildersist" src="images/Test7.jpg" width="220" height="180" />
        
        <img class="bildersist" src="images/Test8.jpg" width="220" height="180" />
        
        </div>
    	
    	</div>
    
    </div>
    <div id="footer">
    <div id="ifooter">
    
    
    <div id="e">
    
    <div id="social">
    
    <ul>
    
    <li><img src="images/facebook_32.png" width="32" height="32" /></li>
    <li><img src="images/twitter_32.png" width="32" height="32" /></li>
    <li><img src="images/youtube_32.png" width="32" height="32" /></li>
    
    </ul>
    
    </div>
    
    
    </div>
    
    
    <div id="t">
    </div>
    
    
    <div id="b">
    </div>
    
    
    
    </div>
    
    </div>
    
    
    
    
    </body>
    </html>
    CSS:

    Code:
    * {/* for demo only*/
    	margin:0;
    	padding:0
    }
    html, body {
    	height:100%;/* needed to base 100% height on something known*/
    	text-align:center;
    }
    #outer {
    	width:780px;
    	background:#FFF;
    	margin:auto;
    	height:900px;
    	min-height:100%;
    	margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
    	text-align:left;
    }
    
    .text {font-family:Arial, Helvetica, sans-serif; font-size:11px; }
    
    .sne { font-style:italic; }
    
    #arbeten {height:auto; width:780px; margin-top:50px; }
    
    .bilder {float:left; padding-left:30px; margin-bottom:25px; height:180px; width:220px; }
    .bildersist {float:left; padding-left:30px; }
    
    #social {
    	width:260px;
    	height:50px
    }
    
    #social ul li {display:inline; padding:1px;}
    
    #banner {margin-top:30px; }
    
    #ifooter {
    	margin-left:auto;
    	margin-right:auto;
    	height:300px;
    	width:780px;
    }
    
    
    
    
    
    
    #e {
    	height:300px;
    	width:260px;
    	float:left
    }
    
    #t {
    	height:300px;
    	width:260px;
    	float:left;
    }
    
    #b {
    	height:300px;
    	width:260px;
    	float:left
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    #header {
    	background:;
    	border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
    }
    #footer {/* footer now sits at bottom of window*/
    	background:#E6E6E6;
    	margin:auto;
    	height:300px;/* must match negative margin of #outer */
    	clear:both;
    }
    /*Opera Fix*/
    body:before {/* thanks to Maleika (Kohoutec)*/
    	content:"";
    	height:100%;
    	float:left;
    	width:0;
    	margin-top:-32767px;/* thank you Erik J - negate effect of float*/
    }
    h1,h2,p{padding:0 10px;}
    </style>
    [if (lte IE 6)|(gte IE 8)]>
    <style type="text/css">
    #outer {height:100%;display:table;}
    
    
    
    
    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Use float: left on the <li>s rather than display: inline.

    BTW, this syntax

    Code:
    [if (lte IE 6)|(gte IE 8)]>
    isn't right. Try this instead:

    Code:
    <!--[if (lte IE 6)|(gte IE 8)]>
    
    <!--<![endif]-->
    or perhaps

    Code:
    <!--[if !IE 7]>-->
    
    <!--<![endif]-->

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Also on the images you specify width="32" and the same for height. 32 what? Tacos? Smoothies? Elephants?

    If you don't want to use floats, use display:inline-block which will also get it on the same line. Although IE will need to have the element set as display;inline; in your conditional statements (for IE7 and below) and also trip haslayout .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Also on the images you specify width="32" and the same for height. 32 what?
    You don't need to specify the units in the HTML. It defaults to px.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You don't need to specify the units in the HTML. It defaults to px.
    Interesting. Guess that's just CSS. Learn something new everyday. Went to w3.org to confirm.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •