Home > Software design >  Photos won't align along the right edge, weird white space with padding
Photos won't align along the right edge, weird white space with padding

Time：03-16

html {
    padding: 0px;
    border: dashed;
    margin: 0px 0px 0px 0px;
}
body {
    padding: 15px;
    border: dashed;
    margin: 0px 0px 0px 0px;
}
ul {
    position: fixed;
    float: left;
    padding: 10px 10px;
    border: dashed;
    margin: 250px 10px 550px;
}
li{
    padding: 0px;
    border: solid;
    border-width: 1px;
    margin: 0px 0px 0px 0px;
}
img {
    height: 200px;
    width: 200px;
    padding: 0px;
    margin: 0px 0px 0px 0px;
}
#imageright {
    width: 20%;
    position: inherit;
    float: right;
    padding: 0px;
    border: none;
    margin: 0px 0px 0px 0px;
}
h1 {
    text-align: center;
}
h2 {
    text-align: center;
}
h3 {
    text-align: left;
    padding: 0%;
    border: dashed;
    margin: 25px 25% 10px;
}
p {
    text-align: center;
    padding: 1% 5%;
    border: dashed;
    margin: 0% 25% 0% 25%;
}
<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width initial-scale=1">
    <title>Playing Card Information</title>

</head>
<!-- Playing Card RED = #d12d36 -->
<body>
    <h1><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Playing_cards_collage.jpg/200px-Playing_cards_collage.jpg" alt="Random assortment of playing cards, each overlapping another. King of clubs is in the middle.">
    Playing Cards</h1>
        <ul>
            <li>Home/History</li>
            <li>Modern Deck Formats</li>
            <li>Manufacturing</li>
            <li>Non-standard Design and Use</li>
            <li>Symbols in Unicode</li>
            <li>Cardistry</li>
        </ul>
    <ul id="imageright":>
        <li><img src="https://upload.wikimedia.org/wikipedia/commons/2/2c/Tarockkarten_in_der_Hand_eines_Spielers.jpg" alt="A hand of Tarot playing cards."></li>
        <li><img  src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Bavarian_pack-Suit_of_Bells.jpg" alt="The suit of Bells from a Bavarian pattern pack."></li>
        <li><img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Ming_Dynasty_playing_card,_c._1400.jpg" alt="A Chinese printed playing card date c. 1400 AD, Ming Dynasty, found near Turpan, measuring 9.5 by 3.5cm."></li>
        <li><img src="https://upload.wikimedia.org/wikipedia/commons/7/72/Mamluk_kanjifah_cards.png" alt="Four Mamluk playing cards."></li>
        <li><img src="https://upload.wikimedia.org/wikipedia/commons/c/c9/Knave_of_coins_-_Italy_2_deck.png" alt="Knave of Coins from the oldest known European deck"></li>
        <li><img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Pietro_Longhi_-_Card_Players_-_KMSst426_-_Statens_Museum_for_Kunst.jpg" alt="Card players in 18th Century Venice, by Pietro Longhi."></li>
        <li><img src="https://upload.wikimedia.org/wikipedia/commons/7/72/Girl_with_Cards_by_Lucius_Kutchin,_1933.jpg" alt="Girl with Cards by Lucius Kutchin, 1933, Smithsonian American Art Museum."></li>
        <li><img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/Imperial_Bower.png" alt="Imperial Bower, the earliest Joker, by Samuel Hart, c. 1863. Originally designed for use in a specific variant of euchre, it contains instructions for unfamiliar players."></li>
    </ul>
</body>
</html>

I want the photos to align vertically with zero margin or padding between photos and the right edge of the window. The list of images has its own id giving it the special style in my CSS file which should override the original ul{}. The two remaining elements that could affect the weird padding both have padding set to 0. html(left) CSS(right) What it looks like in browser I have had every element set to 0 padding and it remained present. I have borders around the individual li{} to show the padding is within the li element.

Additionally if you know how to remove the bullet points that'd be great. Even if this means I have to change the element to something I'm unfamiliar with. I am a novice and this project is a work in progress for a class.

CodePudding user response：

This is because of the font!

Well, you think it's only an image list, but actually, it's a text like list!
and hence all images are considered as text!

QS: Well, even if it was considered as text, why this space?
Ans: Its space between two text lines (between two images)

How to solve:

  • Set its font-size to 0
  • Also, two remove those bullet points use list-style-type:none;

Code:

html {
    padding: 0px;
    border: dashed;
    margin: 0px 0px 0px 0px;
}
body {
    padding: 15px;
    border: dashed;
    margin: 0px 0px 0px 0px;
}
ul {
    position: fixed;
    float: left;
    padding: 10px 10px;
    border: dashed;
    margin: 250px 10px 550px;
    list-style-type:none;

}
li{
    padding: 0px;
    border: solid;
    border-width: 1px;
    margin: 0px 0px 0px 0px;
}
img {
    height: 200px;
    width: 200px;
    padding: 0px;
    margin: 0px 0px 0px 0px;
    
}
#imageright {
    width: 20%;
    position: inherit;
    float: right;
    padding: 0px;
    border: none;
    margin: 0px 0px 0px 0px;
    
    font-size:0;
}
h1 {
    text-align: center;
}
h2 {
    text-align: center;
}
h3 {
    text-align: left;
    padding: 0%;
    border: dashed;
    margin: 25px 25% 10px;
}
p {
    text-align: center;
    padding: 1% 5%;
    border: dashed;
    margin: 0% 25% 0% 25%;
}
<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width initial-scale=1">
    <title>Playing Card Information</title>

</head>
<!-- Playing Card RED = #d12d36 -->
<body>
    <h1><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Playing_cards_collage.jpg/200px-Playing_cards_collage.jpg" alt="Random assortment of playing cards, each overlapping another. King of clubs is in the middle.">
    Playing Cards</h1>
        <ul>
            <li>Home/History</li>
            <li>Modern Deck Formats</li>
            <li>Manufacturing</li>
            <li>Non-standard Design and Use</li>
            <li>Symbols in Unicode</li>
            <li>Cardistry</li>
        </ul>
    <ul id="imageright":>
        <li><img src="https://upload.wikimedia.org/wikipedia/commons/2/2c/Tarockkarten_in_der_Hand_eines_Spielers.jpg" alt="A hand of Tarot playing cards."></li>
        <li><img  src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Bavarian_pack-Suit_of_Bells.jpg" alt="The suit of Bells from a Bavarian pattern pack."></li>
        <li><img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Ming_Dynasty_playing_card,_c._1400.jpg" alt="A Chinese printed playing card date c. 1400 AD, Ming Dynasty, found near Turpan, measuring 9.5 by 3.5cm."></li>
        <li><img src="https://upload.wikimedia.org/wikipedia/commons/7/72/Mamluk_kanjifah_cards.png" alt="Four Mamluk playing cards."></li>
        <li><img src="https://upload.wikimedia.org/wikipedia/commons/c/c9/Knave_of_coins_-_Italy_2_deck.png" alt="Knave of Coins from the oldest known European deck"></li>
        <li><img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Pietro_Longhi_-_Card_Players_-_KMSst426_-_Statens_Museum_for_Kunst.jpg" alt="Card players in 18th Century Venice, by Pietro Longhi."></li>
        <li><img src="https://upload.wikimedia.org/wikipedia/commons/7/72/Girl_with_Cards_by_Lucius_Kutchin,_1933.jpg" alt="Girl with Cards by Lucius Kutchin, 1933, Smithsonian American Art Museum."></li>
        <li><img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/Imperial_Bower.png" alt="Imperial Bower, the earliest Joker, by Samuel Hart, c. 1863. Originally designed for use in a specific variant of euchre, it contains instructions for unfamiliar players."></li>
    </ul>
</body>
</html>

Recomendations:

  • Don't use li&ul for image lists!
  • Use div&flexbox

CodePudding user response：

There are a few things which this snippet alters:

To get rid of the blobs on the list items you can set list-style-type to none. If you put this in the ul styling it'll get applied to all the li elements.

You have sized the elements at 200px height but at 20% width. This means that the wider the viewport the wider the element so that gives extra white space to the right of images. The snippet sets the width and height the same AND sets the img to object-fit cover. This is because you could get distortion on the images as they stretched to fit fixed width and height.

The body has been given some padding which will make the cards not align right up to the right hand side of the screen.

The little gap below each image is put there by the system depending on font size (same happens for inline-blocks for example) so set the font size to 0 in the ul to get rid of it (remember to set a fontsize in an li element if you ever want to show text as well as the img there!).

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset="utf-8" name="viewport" content="width=device-width initial-scale=1">
  <title>Playing Card Information</title>
  <style>
    html {
      padding: 0px;
      border: dashed;
      margin: 0px 0px 0px 0px;
    }
    
    body {
      padding: 15px;
      /* ADDED */
      padding: 0;
      border: dashed;
      margin: 0px 0px 0px 0px;
    }
    
    ul {
      position: fixed;
      float: left;
      padding: 10px 10px;
      border: dashed;
      margin: 250px 10px 550px;
    }
    
    li {
      padding: 0px;
      border: solid;
      border-width: 1px;
      margin: 0px 0px 0px 0px;
    }
    
    img {
      height: 200px;
      width: 200px;
      /* ADDED */
      object-fit: cover;
      padding: 0px;
      margin: 0px 0px 0px 0px;
    }
    
    #imageright {
      width: 20%;
      /* ADDED */
      width: 200px;
      position: inherit;
      float: right;
      padding: 0px;
      border: none;
      margin: 0px 0px 0px 0px;
      /* ADDED */
      list-style-type: none;
      /* ADDED  */
      font-size: 0px;
    }
    
    h1 {
      text-align: center;
    }
    
    h2 {
      text-align: center;
    }
    
    h3 {
      text-align: left;
      padding: 0%;
      border: dashed;
      margin: 25px 25% 10px;
    }
    
    p {
      text-align: center;
      padding: 1% 5%;
      border: dashed;
      margin: 0% 25% 0% 25%;
    }
  </style>

</head>
<!-- Playing Card RED = #d12d36 -->

<body>
  <h1><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Playing_cards_collage.jpg/200px-Playing_cards_collage.jpg" alt="Random assortment of playing cards, each overlapping another. King of clubs is in the middle."> Playing Cards</h1>
  <ul>
    <li>Home/History</li>
    <li>Modern Deck Formats</li>
    <li>Manufacturing</li>
    <li>Non-standard Design and Use</li>
    <li>Symbols in Unicode</li>
    <li>Cardistry</li>
  </ul>
  <ul id="imageright" :>
    <li><img src="https://upload.wikimedia.org/wikipedia/commons/2/2c/Tarockkarten_in_der_Hand_eines_Spielers.jpg" alt="A hand of Tarot playing cards."></li>
    <li><img src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Bavarian_pack-Suit_of_Bells.jpg" alt="The suit of Bells from a Bavarian pattern pack."></li>
    <li><img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Ming_Dynasty_playing_card,_c._1400.jpg" alt="A Chinese printed playing card date c. 1400 AD, Ming Dynasty, found near Turpan, measuring 9.5 by 3.5cm."></li>
    <li><img src="https://upload.wikimedia.org/wikipedia/commons/7/72/Mamluk_kanjifah_cards.png" alt="Four Mamluk playing cards."></li>
    <li><img src="https://upload.wikimedia.org/wikipedia/commons/c/c9/Knave_of_coins_-_Italy_2_deck.png" alt="Knave of Coins from the oldest known European deck"></li>
    <li><img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Pietro_Longhi_-_Card_Players_-_KMSst426_-_Statens_Museum_for_Kunst.jpg" alt="Card players in 18th Century Venice, by Pietro Longhi."></li>
    <li><img src="https://upload.wikimedia.org/wikipedia/commons/7/72/Girl_with_Cards_by_Lucius_Kutchin,_1933.jpg" alt="Girl with Cards by Lucius Kutchin, 1933, Smithsonian American Art Museum."></li>
    <li><img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/Imperial_Bower.png" alt="Imperial Bower, the earliest Joker, by Samuel Hart, c. 1863. Originally designed for use in a specific variant of euchre, it contains instructions for unfamiliar players."></li>
  </ul>
</body>

</html>

Page link：https//www.codepudding.com/Softwaredesign/336797.html

Prev:Why is my footer hiding content when I scroll down?
Next:How can I create one button to change the color of a text and then back to the default color?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding