Hello I'm having trouble centering my ul list to my title and main image using css. If you run the code the ul list is a bit to the left of the centered image and title. Also if I type in text-align: center; to the ul list it looks unorganized and the bullets aren't aligned to the left. Here is the code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>McDonalds Tribute Page</title>
<link rel="stylesheet" type="text/css" href="tribute.css">
</head>
<body>
<div id="main">
<header id="title">
<h1>
McDonalds Tribute Page
</h1>
</header>
<div id="main-image">
<!-- <img src="https://i.imgur.com/2YsKZFI.png" alt="McDonalds Golden Arches" /> -->
</div>
<div id="tribute-info">
<body>
<h3 class="color-text">A timeline of all things McDonalds</h3>
<ul id=list-info>
<li>
<strong>1953</strong> - McDonalds opens first franchise in Phoenix
</li>
<li>
<strong>1954</strong> - Ray Kroc approaches McDonald Brothers about opening first franchise outside of CA and AZ
</li>
<li>
<strong>1958</strong> - McDonalds has sold 100 million burgers
</li>
<li>
<strong>1958</strong> - McDonalds spreads to the East Coast
</li>
<li>
<strong>1961</strong> - McDonald Brothers sold business rights to Ray Kroc for $2.7 million
</li>
<li>
<strong>1963</strong> - 1 Billion burgers sold
</li>
<li>
<strong>1968</strong> - The Big Mac was introduced to McDonalds
</li>
<li>
<strong>1980</strong> - Chicken McNuggets are introduced
</li>
<li>
<strong>2015</strong> - All day breakfast introduced
</li>
</ul>
</body>
</div>
<!-- <div class="img-gallery">
<section>
<img src="https://i.imgur.com/2IkFLba.jpg" alt="big mac" />
<img src="https://i.imgur.com/EZ58bYY.jpg" alt="chicken nugget" />
<img src="https://i.imgur.com/EC9zcIT.png" alt="filet o fish" />
<img src="https://i.imgur.com/17piAkN.jpg" alt="McFlurry" />
<img src="https://i.imgur.com/hUog2df.jpg" alt="burger king" />
<img src="https://i.imgur.com/WiDJfLM.jpg" alt="mcdonalds logo" />
</section>
</div> -->
<body>
</body>
</div>
</body>
</html>
and my css
#main {
display: grid;
}
#title {
text-align: center;
}
#main-image {
display: block;
margin-left: auto;
margin-right: auto;
}
#tribute-info {
margin-left: auto;
margin-right: auto;
}
I can't post images so I commented out the picture
Your UL is being centered, but you just need to give the wrapping div a width else it takes up 100%:
#main {
display: grid;
}
#title {
text-align: center;
}
#main-image {
display: block;
margin-left: auto;
margin-right: auto;
}
#tribute-info {
margin-left: auto;
margin-right: auto;
width: 300px;
}
ul {
padding: 0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>McDonalds Tribute Page</title>
<link rel="stylesheet" type="text/css" href="tribute.css">
</head>
<body>
<div id="main">
<header id="title">
<h1>
McDonalds Tribute Page
</h1>
</header>
<div id="main-image">
<!-- <img src="https://i.imgur.com/2YsKZFI.png" alt="McDonalds Golden Arches" /> -->
</div>
<div id="tribute-info">
<h3 class="color-text">A timeline of all things McDonalds</h3>
<ul id=list-info>
<li>
<strong>1953</strong> - McDonalds opens first franchise in Phoenix
</li>
<li>
<strong>1954</strong> - Ray Kroc approaches McDonald Brothers about opening first franchise outside of CA and AZ
</li>
<li>
<strong>1958</strong> - McDonalds has sold 100 million burgers
</li>
<li>
<strong>1958</strong> - McDonalds spreads to the East Coast
</li>
<li>
<strong>1961</strong> - McDonald Brothers sold business rights to Ray Kroc for $2.7 million
</li>
<li>
<strong>1963</strong> - 1 Billion burgers sold
</li>
<li>
<strong>1968</strong> - The Big Mac was introduced to McDonalds
</li>
<li>
<strong>1980</strong> - Chicken McNuggets are introduced
</li>
<li>
<strong>2015</strong> - All day breakfast introduced
</li>
</ul>
</div>
<!-- <div class="img-gallery">
<section>
<img src="https://i.imgur.com/2IkFLba.jpg" alt="big mac" />
<img src="https://i.imgur.com/EZ58bYY.jpg" alt="chicken nugget" />
<img src="https://i.imgur.com/EC9zcIT.png" alt="filet o fish" />
<img src="https://i.imgur.com/17piAkN.jpg" alt="McFlurry" />
<img src="https://i.imgur.com/hUog2df.jpg" alt="burger king" />
<img src="https://i.imgur.com/WiDJfLM.jpg" alt="mcdonalds logo" />
</section>
</div> -->
<body>
</body>
</div>
</body>
</html>
Related
im doing a website for videogames news and updates.I have to add a translation option, so i decided to add google translate button, but it disables the links in the menu on the right side.Please help!
HTML:
<!DOCTYPE html>
<head>
<title> GameDog | Video games info </title>
<meta charset = "UTF-8">
<link rel="stylesheet" type = "text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<section class="page">
<nav>
<div class="logo">
<img src = "gamedoglogo.png">
<p> <b> GameDog </b> </p>
</div>
<div>
<ul>
<li>
<div class="toggle"></div>
</li>
<li id="aboutme">About me</li>
<li id="news">
News about ↓
<ul>
<li> Fortnite</li>
<li> Rocket League</li>
<li> League of Legends</li>
<li> CS:GO</li>
</ul>
</li>
<li id="main">Home</li>
</ul>
</div>
</nav>
<h1 class="topic"> Home Page </h1>
<div class = "card-info">
<h3> Hey Gamers, </h3>
<br>
<h4> welcome to the site. Here you can find the latest news about your favourite games. We provide information about the current updates, changes and improvements. Here, in the site, you can also find the patch notes for the last update of your favourite games. Explore by clicking the button below or the News section above.</h4>
</div>
<div class = "button">
Explore
</div>
<div class="social">
<ul>
<li> <img src="facebook%20white.png", id="facebook-main"></li>
<li> <img src="Black-icon-Instagram-logo-transparent-PNG.png", id="instagram-main"></li>
<li> <img src="Black-icon-Twitter-logo-transparent-PNG.png", id="twitter-main"></li>
</ul>
</div>
<div class="translate-1">
<div id="google_translate_element"></div>
<span>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', includedLanguages: 'de,it,fr,ru,tr,bg', autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</span>
</div>
</section>
<div class="menu">
<ul>
<li> Home </li>
<li> News </li>
<li> About me </li>
</ul>
<div class="social-menu">
<ul>
<li> <img src="toppng.com-facebook-black-white-icon-facebook-face-book-png-facebook-icon-for-footer-473x473.png", id="facebook-menu"></li>
<li> <img src="Black-icon-Instagram-logo-transparent-PNG.png", id = "instagram-menu"></li>
<li> <img src="Black-icon-Twitter-logo-transparent-PNG.png", id="twitter-menu"></li>
</ul>
</div>
</div>
<script>
const menuToggle = document.querySelector('.toggle')
const page = document.querySelector('.page')
menuToggle.addEventListener('click', function() {
menuToggle.classList.toggle('active')
page.classList.toggle('active')
})
</script>
<script>
window.addEventListener("scroll", function(){
var navbar = document.querySelector("nav");
var menu = document.querySelector(".menu");
navbar.classList.toggle("sticky", window.scrollY > 0);
menu.classList.toggle("sticky", window.scrollY > 0);
})
</script>
</body>
CSS:
.menu{
position:absolute;
background-color:#ffd700;
top:0;
right:0;
width:15.62vw;
min-height:100vh;
display:flex;
justify-content: center;
align-items:center;
z-index:-5;
}
.menu.sticky{
position:fixed;
}
.menu ul{
position:relative;
list-style:none;
}
.menu ul li{
padding:1.04vh 1.04vw;
}
.menu ul li a{
text-decoration: none;
color:black;
font-size:4.5ch;
}
.menu ul li a:hover{
color:dimgray;
}
.translate-1{
position:absolute;
left:3vw;
top:16vh;
display:flex;
justify-content: center;
align-items:center;
}
.translate-2{
position:absolute;
left:3vw;
top:76vh;
display:flex;
justify-content: center;
align-items:center;
}
Here are some photos:
this is the page with the translate button
this is the menu on the right, when opened
The links in the menu, should become gray when u hover on them, but due to the google translate button, they don't. When i remove the google translate button, it works, so the problem is there.
JS for the menu is included in the html
And also, im really sorry for my bad formatting, im new to this :(
Your menu has a negative z-index value, so it's just falling behind everything. Make it a positive value or remove it altogether and you're set. If you have a specific reason for using the z-index on the menu, then you'll need to add it to the other elements as well so they're layering correctly and the menu items are accessible.
SO's snippet doesn't seem to like the Google translate script so here's a fiddle that shows that it still works with the z-index property modified:
https://jsfiddle.net/astombaugh/hwo73b64/8/
.menu {
position: absolute;
background-color: #ffd700;
top: 0;
right: 0;
width: 15.62vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.menu.sticky {
position: fixed;
}
.menu ul {
position: relative;
list-style: none;
}
.menu ul li {
padding: 1.04vh 1.04vw;
}
.menu ul li a {
text-decoration: none;
color: black;
font-size: 4.5ch;
}
.menu ul li a:hover {
color: dimgray;
}
.translate-1 {
position: absolute;
left: 3vw;
top: 16vh;
display: flex;
justify-content: center;
align-items: center;
}
.translate-2 {
position: absolute;
left: 3vw;
top: 76vh;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<head>
<title> GameDog | Video games info </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<section class="page">
<nav>
<div class="logo">
<img src="gamedoglogo.png">
<p> <b> GameDog </b> </p>
</div>
<div>
<ul>
<li>
<div class="toggle"></div>
</li>
<li id="aboutme">About me</li>
<li id="news">
News about ↓
<ul>
<li> Fortnite</li>
<li> Rocket League</li>
<li> League of Legends</li>
<li> CS:GO</li>
</ul>
</li>
<li id="main">Home</li>
</ul>
</div>
</nav>
<h1 class="topic"> Home Page </h1>
<div class="card-info">
<h3> Hey Gamers, </h3>
<br>
<h4> welcome to the site. Here you can find the latest news about your favourite games. We provide information about the current updates, changes and improvements. Here, in the site, you can also find the patch notes for the last update of your favourite
games. Explore by clicking the button below or the News section above.</h4>
</div>
<div class="button">
Explore
</div>
<div class="social">
<ul>
<li>
<img src="facebook%20white.png" , id="facebook-main">
</li>
<li>
<img src="Black-icon-Instagram-logo-transparent-PNG.png" , id="instagram-main">
</li>
<li>
<img src="Black-icon-Twitter-logo-transparent-PNG.png" , id="twitter-main">
</li>
</ul>
</div>
<div class="translate-1">
<div id="google_translate_element"></div>
<span>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', includedLanguages: 'de,it,fr,ru,tr,bg', autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</span>
</div>
</section>
<div class="menu">
<ul>
<li> Home </li>
<li> News </li>
<li> About me </li>
</ul>
<div class="social-menu">
<ul>
<li>
<img src="toppng.com-facebook-black-white-icon-facebook-face-book-png-facebook-icon-for-footer-473x473.png" , id="facebook-menu">
</li>
<li>
<img src="Black-icon-Instagram-logo-transparent-PNG.png" , id="instagram-menu">
</li>
<li>
<img src="Black-icon-Twitter-logo-transparent-PNG.png" , id="twitter-menu">
</li>
</ul>
</div>
</div>
<script>
const menuToggle = document.querySelector('.toggle')
const page = document.querySelector('.page')
menuToggle.addEventListener('click', function() {
menuToggle.classList.toggle('active')
page.classList.toggle('active')
})
</script>
<script>
window.addEventListener("scroll", function() {
var navbar = document.querySelector("nav");
var menu = document.querySelector(".menu");
navbar.classList.toggle("sticky", window.scrollY > 0);
menu.classList.toggle("sticky", window.scrollY > 0);
})
</script>
</body>
My pictures are being resized, the set images are supposed to be 80x80, but they are displaying 40x80. The only way I have found to remove this problem is by getting rid of the box-sizing: border-box; However, I have to include the border-box to follow along with my assignment instructions. So, I can't remove it. I have also used inline styling to work around the problem, making the picture 133x80.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaJam Coffee Bar Music</title>
<meta charset="utf-8">
<link href="javajam.css"rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<h1>
JavaJam Coffee Bar
</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Music</li>
<li>Jobs</li>
</ul>
</nav>
<main>
<div id="heroguitar"></div>
<h2> Music at JavaJam</h2>
<p>The first Friday night each month at JavaJam is a special night. Join us from 8 pm to 11 pm for some music
you won't want to miss!</p>
<h4>January</h4>
<div class="details">
<img src="melaniethumb.jpg" alt="Thumbnail Picture of Melanie" class="floatleft" height="80" width="80">
<p>Melanie Morris entertains with her melodic folk style</p>
</div>
<h4>February</h4>
<div class="details">
<img src="gregthumb.jpg" alt="Thumbnail Picture of Greg" class="floatleft" height="80" width="80">
<p>Tahoe Greg is back from his tour. New songs. New stories.</p>
</div>
</main>
<footer>
Copyright © 2020 JavaJam Coffee Bar <br>
</footer>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
.floatleft {
float: left;
padding-right: 2em;
}
Use margin-right instead of padding-right.
* {
box-sizing: border-box;
}
.floatleft {
float: left;
margin-right: 2em;
}
this is HTMl and css code i used to run a sample project and im unable to understand why my css styling is different from the online compiler and the IDE(virtual studio code) so please help me in this
li:first-child {
color: blue;
font-weight: bold;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>the Basic Language of the Web: HTML</title>
</head>
<body>
<header class="main-header">
<h1>📘 The Code Magazine</h1>
<nav>
Blog
Challenges
Flexbox
CSS Grid
</nav>
<p>test text</p>
</header>
<h3>Why should you learn HTML?</h3>
<p>
There are countless reasons for learning the fundamental language of the
web. Here are 5 of them:
</p>
<ul>
<li>
<p>To be able to use the fundamental web dev language</p>
</li>
<li>
To hand-craft beautiful websites instead of relying on tools like
Worpress or Wix
</li>
<li>To build web applications</li>
<li>To impress friends To have fun 😃</li>
</ul>
<p>Hopefully you learned something new here. See you next time!</p>
</article>
<aside>
<h4>Related posts</h4>
<ul class="related">
<li>
<img
src="img/related-1.jpg"
alt="related 1 image"
width="75"
,height="75"
/> How to Learn Web Bevelopment
<p class="related-author">By Jonas Schmedtmann</p>
</li>
<li>
<img
src="img/related-2.jpg"
alt="related-2 image"
width="75"
height="75"
/>
The Unknown Powers of CSS
<p class="related-author">By Jim Dillon</p>
</li>
<li>
<img
src="img/related-3.jpg"
alt="related-3 image"
height="75"
,width="75"
/>
Why JavaScript is Awesome
<p class="related-author">By Matilda</p>
</li>
</ul>
</aside>
</li>
<li>
<img
src="img/related-3.jpg"
alt="related-3 image"
height="75"
,width="75"
/>
Why JavaScript is Awesome
<p class="related-author">By Matilda</p>
</li>
</ul>
Here I used a pseudo class to change the attribute of the first child of the li tag. In .related, the color changes in the online compiler but when I run in VSCode the color attribute is not changing but font weight and font style attributes are changing.
thanks for helping me
here is my screenshot run in VS code
The color is changing to blue without any issues. However that is a link that you're styling. Once it's clicked, its color changes to purple.
To force the purple to be blue, or any other color, you also need to style the link using another psuedo class.
li a:visited {
color: blue;
}
EDIT:
If you have given the class .related-author a color it will override your li:first-child style since it has a higher specificity level.
Look here for eg:
.related-author {
color: grey;
}
li:first-child {
color: blue;
font-weight: bold;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>the Basic Language of the Web: HTML</title>
</head>
<body>
<header class="main-header">
<h1>📘 The Code Magazine</h1>
<nav>
Blog
Challenges
Flexbox
CSS Grid
</nav>
<p>test text</p>
</header>
<h3>Why should you learn HTML?</h3>
<p>
There are countless reasons for learning the fundamental language of the web. Here are 5 of them:
</p>
<ul>
<li>
<p>To be able to use the fundamental web dev language</p>
</li>
<li>
To hand-craft beautiful websites instead of relying on tools like Worpress or Wix
</li>
<li>To build web applications</li>
<li>To impress friends To have fun 😃</li>
</ul>
<p>Hopefully you learned something new here. See you next time!</p>
</article>
<aside>
<h4>Related posts</h4>
<ul class="related">
<li>
<img src="img/related-1.jpg" alt="related 1 image" width="75" ,height="75" /> How to Learn Web Bevelopment
<p class="related-author">By Jonas Schmedtmann</p>
</li>
<li>
<img src="img/related-2.jpg" alt="related-2 image" width="75" height="75" />
The Unknown Powers of CSS
<p class="related-author">By Jim Dillon</p>
</li>
<li>
<img src="img/related-3.jpg" alt="related-3 image" height="75" ,width="75" />
Why JavaScript is Awesome
<p class="related-author">By Matilda</p>
</li>
</ul>
</aside>
</li>
<li>
<img src="img/related-3.jpg" alt="related-3 image" height="75" ,width="75" />
Why JavaScript is Awesome
<p class="related-author">By Matilda</p>
</li>
</ul>
To solve this, use :
.related-author {
color: grey;
}
li:first-child > * {
color: blue;
font-weight: bold;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>the Basic Language of the Web: HTML</title>
</head>
<body>
<header class="main-header">
<h1>📘 The Code Magazine</h1>
<nav>
Blog
Challenges
Flexbox
CSS Grid
</nav>
<p>test text</p>
</header>
<h3>Why should you learn HTML?</h3>
<p>
There are countless reasons for learning the fundamental language of the web. Here are 5 of them:
</p>
<ul>
<li>
<p>To be able to use the fundamental web dev language</p>
</li>
<li>
To hand-craft beautiful websites instead of relying on tools like Worpress or Wix
</li>
<li>To build web applications</li>
<li>To impress friends To have fun 😃</li>
</ul>
<p>Hopefully you learned something new here. See you next time!</p>
</article>
<aside>
<h4>Related posts</h4>
<ul class="related">
<li>
<img src="img/related-1.jpg" alt="related 1 image" width="75" ,height="75" /> How to Learn Web Bevelopment
<p class="related-author">By Jonas Schmedtmann</p>
</li>
<li>
<img src="img/related-2.jpg" alt="related-2 image" width="75" height="75" />
The Unknown Powers of CSS
<p class="related-author">By Jim Dillon</p>
</li>
<li>
<img src="img/related-3.jpg" alt="related-3 image" height="75" ,width="75" />
Why JavaScript is Awesome
<p class="related-author">By Matilda</p>
</li>
</ul>
</aside>
</li>
<li>
<img src="img/related-3.jpg" alt="related-3 image" height="75" ,width="75" />
Why JavaScript is Awesome
<p class="related-author">By Matilda</p>
</li>
</ul>
I am working on setting up my website - it still has a long way to go, and I'm new at this. I have a page with a series of clickable boxes representing my portfolio. However, the images I want to be displayed in these boxes are orienting themselves to the left rather than the center of the box. Any advice?
Website where problem is: http://corey-dickinson.com/portfolio.html
Code:
<!doctype html>
<html lang="en">
<head>
<title>CoreyDickinson.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800|Playfair+Display:,300, 400, 700" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement#4.2.7/build/mediaelementplayer.min.css">
<link rel="stylesheet" href="fonts/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="fonts/fontawesome/css/font-awesome.min.css">
<!-- Theme Style -->
<link rel="stylesheet" href="css/style.css">
<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAq6urACkpKQD19fUA4ODgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACEwAAADEgAAIhMAADEiAAASITADEiEAAEIiEzEiJAAAMiIhEiIjAAABIiIiIhAAAAQiIiIiQAAAAyIiIiIwAAAAEiIiIQAAAABCIiIkAAAAADIiIiMAAAAAASIiEAAAAAAEIiJAAAAAAAMiIjAAAAAAABIhAAAAAAAAQiQAAADH4wAAw8MAAMGDAADAAwAAwAMAAOAHAADgBwAA4AcAAPAPAADwDwAA8A8AAPgfAAD4HwAA+B8AAPw/AAD8PwAA" rel="icon" type="image/x-icon" />
</head>
<body>
<div class="site-wrap">
Menu
<div class="offcanvas_menu" id="offcanvas_menu">
<ul class="mb-5">
<li>Bio</li>
<li class="active">Portfolio</li>
<li>Resume</li>
<li>Contact</li>
</ul>
<ul class="social">
<li></li>
<li></li>
<li></li>
</ul>
</br><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Colorlib and coded in Brackets by CD
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</div>
<px-2 class="fa fa-home">
<div class="mx-auto" style="width: 200px;">
<h1>Portfolio</h1>
</div>
<hr><hr>
<div class = "container">
<ul class="portfolio-list">
<li>
<a href="https://redcross.carto.com/viz/3ea45828-7769-4f92-9170-bec6c63dfc9a/public_map">
<img src="img/arcban2.jpg" alt="" style="image-orientation: center">
<div class="text">
<h3>Diaspora Mapping RC</h3>
<span>A project for the Red Cross that designed maps of the distribution of selected diaspora populations across the United States. The map was used by large numbers of volunteers to coordinate outreach programs.</span>
</div>
</a>
</li>
<li>
<a href="index_search.html">
<img src="img/qcwide.png" alt="">
<div class="text">
<h3>Quiet Contractors Directory</h3>
<span>Project for small non-profit focused on noise polution to create a directory/webmap of environmentally friendly contractors across the US.</span>
</div>
</a>
</li>
<li>
<a href="MukigavMutooroMap-July2017.pdf">
<img src="img/kasiisibanner2.png" alt="">
<div class="text">
<h3>Tribal Map Western Uganda</h3>
<span>A map produced for the Kasiisi project, a small NGO in Uganda. This map outlines the spatial patterns in different tribes in the region. This data was derived from a survey I oversaw that was distributed using XML forms in ODK. </span>
</div>
</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=u7Cuy5AO88Y">
<img src="img/TED_banner-resized.png" alt="">
<div class="text">
<h3>TED Talk Nauru</h3>
<span>A TED talk outlining the results and reflections from a project I created. The project was focused on mapping the environmental degredation on Nauru, a small island nation in the South Pacific.</span>
</div>
</a>
</li>
<li>
<a href="A)%20Report_Living_Situation_Refugee_Camps_2017.pdf">
<img src="img/UNHCR_banner2.png" alt="">
<div class="text">
<h3>Refugee Camp Report</h3>
<span>An analysis of quality of life patterns in Syrian refugee camps, developed for a class at Clark University. The results of this project were submitted to UNHCR.</span>
</div>
</a>
</li>
<li>
<a href="Cape_Cod_Sand.mp4">
<img src="img/nps-banner-2.png" alt="">
<div class="text">
<h3>Analysis of changing seashore patterns</h3>
<span> Analyzed the effects of sea level rise on Nauset Spit for the North Atlantic Coastal Lab for Cape Cod National Seashore. The project involved exstensive research of historical maps and arial imagary.</span>
</div>
</a>
</li>
</ul>
<div class = "container">
<h1 class="mb-5">Download Zip</h1>
</div>
<!-- loader -->
<div id="loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#f4b214"/></svg></div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Add a class for the tag like so
<img class="center_img" ..... />
and then in your css have:
img.center_img{
margin: y_margin_values auto;
}
Setting two values for margin sets first value as top and bottom, second as left and right. Setting the left and right values to auto will center the <img> within its container. If that still doesn't work, set it's parent <a> or parent <li>' to havewidth: 100% ' or whatever width you desire.
There are few possible way to get the desired result. lets discuss few of them
Pulling the Image in center
Here we will just pull the image to center, although image size will be the same as it is now. so your li width is full width, but image will be in center may be if size(width) of image if less.
apply the below css to the image inside your li
.portfolio-list li a img
{
display: block;
margin: 0px auto;
}
setting image as background to your li > a
And another when you want the size of the image same as your li its better to set the image as background rather than showing it as html element inside your li.
So you can apply the below css, make it sure we need to set the background-image separately for each of your li. and can remove the img element side your li a.
.portfolio-list li a
{
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 230px;
}
.portfolio-list li a.first
{
background-image: url('http://corey-dickinson.com/img/arcban2.jpg');
}
.portfolio-list li a.second
{
background-image: url('http://corey-dickinson.com/img/qcwide.png');
}
...
...
//And so on for other li.
Add this to your CSS
.portfolio-list li a {
text-align: center;
}
The top third of my page, including a graphic and headline, shows up just fine in Firefox and Explorer, but does not appear in Chrome when accessed from my server. It does appear in Chrome when viewing the page as a file.
The graphic is defined in the CSS file as:
/** adbox **/
#adbox {
background: #020a13 url(../images/bg-adbox.jpg) no-repeat center top;
font-family: Georgia, "Times New Roman", Times, serif;
min-height: 433px;
margin: -56px 0 22px;
And the HTML file is:
<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>donfiler.net - web design </title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
<div class="wrapper clearfix">
<div id="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<ul id="navigation">
<li class="selected">
Home
</li>
<li>
About
</li>
<li>
Blog
</li>
<li>
Gallery
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
<div id="contents">
<div id="adbox">
<div class="wrapper clearfix"><p></p><p></p>
<div class="info">
<h1>Web Design & Social Media Marketing</h1>
<p>
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality.
</p>
</div>
</div>
<div class="highlight">
<h2>707-217-8457 if you want a mobile friendly web site.</h2>
</div>
</div>
<div class="body clearfix">
<div class="click-here">
<h1>Impact Marketing</h1>
Click Here!
</div>
<p style="font-size:12px;">
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality. We design web sites with dynamic database interaction; deliver computer based training; create comprehensive marketing campaigns; specialize in hand coding HTML, CSS, PHP, Mysql and JavaScript to customize web design and user interface.
</p>
</div>
</div>
<div id="footer">
<ul id="featured" class="wrapper clearfix">
<li>
<img src="images/THUMBNAIL_IMAGE4.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Memories of growing up in Europe during the Cold War. The first book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE3.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
A catchy tune by the Beach Boys in the mid-sixties, the lyrics of "Be True to Your School" hit many highlights of high school in that era.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE2.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
College Years and Rock Band Entrepreneur. The third book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE1.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Contributing to others is the highest form of success you can achieve and I wanted to impart what I have learned over the years working for a living.
</p>
</li>
</ul>
<div class="body">
<div class="wrapper clearfix">
<div id="links">
<div>
<h4>Social</h4>
<ul>
<li>
Google +
</li>
<li>
Facebook
</li>
<li>
Youtube
</li>
</ul>
</div>
<div>
<h4>Blogs</h4>
<ul>
<li>
Blogspot
</li>
<li>
Marketing Blog
</li>
<li>
Web Design Blog
</li>
</ul>
</div>
</div>
<div id="newsletter">
<h4>Newsletter</h4>
<p>
Sign up for Our Newsletter
</p>
<form action="https://donfiler.us/newsletter" method="post">
<!--<input type="text" value="">-->
<input type="submit" value="Sign Up!">
</form>
</div>
<p class="footnote">
© Copyright © 2016 Don Filer all rights reserved.
</p>
</div>
</div>
</div>
</body>
</html>
The Google Chrome extension AdBlock is blocking that element for me, because its ID is adbox. Check if you have that extension enabled, as well.
In general, try avoiding the word "ad" when naming HTML elements.
From the start, I can see a major flaw in the code- you named an element adbox. Most ad-blocking extensions work this way- they scan for ads, and that element will be perceived as an ad, simply because of it's name.
To quote CapitalQ,
In general, try avoiding the word "ad" when naming HTML elements.
Check if you have an ad-blocking extension turned on, and if so, try the site without that extension. Also, rename that element ASAP!