Jump to content
Sign in to follow this  
Abigail2119

Help

Recommended Posts

I am trying to create an image gallery but the images are very far apart

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
    article {
    width: 600px;
    float: right;
    padding-right: 100px;
    font-size: 20px;
    line-height: 2;
    padding-top: 100px;
}
    main{
    padding-left: 70px;    
    padding-bottom: 50px;
        padding-top: 50px;
    }
    header{
        font-size: 35px;
        padding-bottom: 30px;
        padding-top: 30px;
    }
    header1{
        font-size: 60px;
        padding-left: 70px;    
        padding-top: 30px;
    }
.row {
  display: flex;
}

.column {
  flex: 33.33%;
  padding: 5px;
}
    .column img {
  margin-top: 12px;
}

</style>
</head>
    
<header1><center>Lauren Miller</center></header1>
    
<ul>
  <li><a  href="graphic design.html">Graphic Design</a></li>
  <li><a class="active" href="index.html">About Me</a></li>
  <li><a href="art.html">Art</a></li>
</ul>
    

    <div class="row">
  <div class="column">
      
<main2><img src="links/gd.jpg" width="450px" style="width:450px" height="250px" alt=""/></main2></div>

<div class="column"><main><img src="links/bennyposter.jpg" width="450px" height="250px" alt=""/></main></div>
    
<div class="column"><main3><img src="links/cheer_dance.jpg" width="450px" height="250px" alt=""/></main3></div></div>
    
    <div class="row">
        <div class="column"><img src="links/gd3.jpeg" width="400px" height="auto" alt=""/></div>
    <div class="column"><img src="links/gd4.jpeg" width="400px" height="auto" alt=""/></div>
        <div class="column"><img src="links/gd5.jpg" width="400px" height="auto" alt=""/></div>
        </div>
    


        
        
        
    
<body>

</body>
</html>

STYLE CSS:

@charset "UTF-8";
div {
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    width: 1420px;
    background-color: #F3F3F3;
    height: 1420px;
    padding-top: 0px;
    
}
ul {
  list-style-type: none;
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
display: flex;
    justify-content: center;
    width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
.active {
  background-color: #4CAF50;
}

 

 

 

Share this post


Link to post
Share on other sites
On 2/23/2019 at 5:36 AM, Abigail2119 said:

<div class="column">
      
<main2><img src="links/gd.jpg" width="450px" style="width:450px" height="250px" alt=""/></main2></div>

<div class="column"><main><img src="links/bennyposter.jpg" width="450px" height="250px" alt=""/></main></div>
    
<div class="column"><main3><img src="links/cheer_dance.jpg" width="450px" height="250px" alt=""/></main3></div></div>

remove <main2> and <main> tags and it will be fine.

Advices:

-Don't use <main> tag like this (it's supposed to be used for the main content of the page- semantic tag in html5).

 

 

Share this post


Link to post
Share on other sites

Expanding on what merzgasalim said,

You're using a lot of old tags, and misusing them too.

You should never need more than one <main> tag. It usually signals that this is the main content. To read, or otherwise.
You've created your own <header2> tag, which is... not quite to HTML standard. If you want custom tags, use CSS classes. Like <header class="myHeader">
<center> is an old tag, and is not used except inside some antique processors like the Outlook email processor.

I've had to change the img sources so I could get good testing going.

Perhaps something like this would work better?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Portfolio</title>
    <style type="text/css">
      article {
        width: 600px;
        float: right;
        padding-right: 100px;
        font-size: 20px;
        line-height: 2;
        padding-top: 100px;
      }
      main {
        padding-left: 70px;
        padding-bottom: 50px;
        padding-top: 50px;
      }
      header {
        width: 100%;
        font-size: 60px;
        margin: 20px 0;
      }
      .center-header {
        margin: 0 auto;
        width: 350px;
      }
      .row {
        display: flex;
        width: 100%;
      }

      .column {
        flex: 33.33%;
        margin-left: 5px;
      }
      .column img {
        width: 100%;
      }

      div {
        font-family: Cambria, "Hoefler Text", "Liberation Serif", Times,
          "Times New Roman", serif;
        padding-top: 0px;
      }
      ul {
        list-style-type: none;
        margin-bottom: 5px;
        padding: 0;
        overflow: hidden;
        background-color: #333;
        display: flex;
        justify-content: center;
        width: 100%;
      }

      li {
        float: left;
      }

      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      li a:hover {
        background-color: #111;
      }
      .active {
        background-color: #4caf50;
      }
    </style>
  </head>

  <body>
    <header><div class="center-header">Lauren Miller</div></header>

    <ul>
      <li><a href="graphic design.html">Graphic Design</a></li>
      <li><a class="active" href="index.html">About Me</a></li>
      <li><a href="art.html">Art</a></li>
    </ul>

    <div class="row">
      <div class="column">
        <img
          src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg"
          alt=""
        />
      </div>

      <div class="column">
        <img
          src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg"
          alt=""
        />
      </div>

      <div class="column">
        <img
          src="https://upload.wikimedia.org/wikipedia/commons/1/14/Gatto_europeo4.jpg"
          alt=""
        />
      </div>
    </div>

    <div class="row">
      <div class="column">
        <img
          src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg"
          alt=""
        />
      </div>
      <div class="column">
        <img
          src="https://upload.wikimedia.org/wikipedia/commons/1/14/Gatto_europeo4.jpg"
          alt=""
        />
      </div>
      <div class="column">
        <img
          src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg"
          alt=""
        />
      </div>
    </div>
  </body>
</html>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...