Abigail2119 Posted February 23, 2019 Share Posted February 23, 2019 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; } Link to comment Share on other sites More sharing options...
merazgasalim Posted February 24, 2019 Share Posted February 24, 2019 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). Link to comment Share on other sites More sharing options...
Funce Posted February 24, 2019 Share Posted February 24, 2019 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> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now