SitePoint Sponsor

User Tag List

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

    Unordered list makes the image indented

    Hi.

    When I have three pictures in a div tag and make each of them listed items, in a unorderd list. The picture moves from the div left side and gets indented like 20px, is there a way I can avoid this?

    { Kev

  2. #2
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    If you apply a negative margin-left to the li element, you can fix it.

    ~TehYoyo

  3. #3
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    267
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Is this the only way to do it?
    Quote Originally Posted by TehYoyo View Post
    If you apply a negative margin-left to the li element, you can fix it.

    ~TehYoyo

  4. #4
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    There's probably some sort of default margin applied to the li element.

    I haven't experimented with it enough to know for sure, but this is the only thing that I can think of off the top of my head.

    ~TehYoyo

  5. #5
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    267
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ok, I think Ill stick with it, if anyone have some other experience with this please comment.

    Thanks Teh.
    Quote Originally Posted by TehYoyo View Post
    There's probably some sort of default margin applied to the li element.

    I haven't experimented with it enough to know for sure, but this is the only thing that I can think of off the top of my head.

    ~TehYoyo

  6. #6
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    No probs kvn

    Happy to help.
    ~TehYoyo

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    The problem is that <ul> comes with default margins/paddings. Depends on the browser. You need to set the <ul> to margin:0;padding:0;

    You shoiuld really have a reset in your stylesheet. Google "Eric Meyers Reset". You can trim that down if you want . It is a bit bloated.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    267
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Cool, so I just have to copy this code into my stylesheet?
    Code:
    /* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */
    
    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;
    }
    Quote Originally Posted by RyanReese View Post
    The problem is that <ul> comes with default margins/paddings. Depends on the browser. You need to set the <ul> to margin:0;padding:0;

    You shoiuld really have a reset in your stylesheet. Google "Eric Meyers Reset". You can trim that down if you want . It is a bit bloated.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Yes. Replace that ddstylesheet with the code I pasted.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    One thing that I like to do, whenever I find a boilerplate like that, is to type it up and record it as a macro in Notepad++.

    Sadly, you can't copy+paste b/c N++ copies keystrokes, so you'd have to type it up. But it's incredibly useful.

    Whenever I start a project (now), I just hit control+alt+shift+backspace and I'm good.

    ~TehYoyo

  11. #11
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    267
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yeah, he already mentioned that.
    Quote Originally Posted by DonnetteSpe View Post
    There's probably some sort of default margin applied to the li element


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
  •