Issue
Im to html and css and im trying to make a game website for my school but when i try to change div into a on for the card it moves the card down the page as seen in the images bellow,if you guys have any ideas why this is doing this please help im sort of stuck and I want to fiqure this out before I continue with this page.
Before Change Before
After Change After
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<title>Project-LuLo</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<style>
body {
font-family: 'Open Sans', sans-serif;
}
.shell{
justify-content:center;
display: flex;
flex-direction:row;
flex-basis: auto;
margin:5px;
}
.card {
width: 175px;
display: flex;
flex-direction: column;
border: 1px solid #EF9A9A;
border-radius: 4px;
overflow: hidden;
margin: 10px;
text-decoration:none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 18px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 72px;
margin-bottom: 5px;
color: #D32F2F;
}
.main-description {
color: #D32F2F;
font-size: px;
text-align: center;
}
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
</style>
</head>
<body>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<div class="header">
<a href="#home" class="logo">Project-LuLo</a>
<div class="header-right">
<a class="active" href="#home">Home</a>
<a href="#games">Games</a>
<a href="#contact">Contact</a>
</div>
</div>
<div class="shell">
<a href = "#test"class="card">
<div class="card-header">Games</div>
<div class="card-main">
<i class="material-icons">videogame_asset</i>
<div class="main-description">Web Based Games</div>
</div>
</div>
<a href="#test"class="card">
<div class="card-header">Other</div>
<div class="card-main">
<i class="material-icons">question_mark</i>
<div class="main-description">Cool Random Stuff</div>
</div>
</div>
</div>
</body>
</html>
Solution
There was a few unclosed <a> tags and when you changed one of the tags to an <a> it also was removed from inside the <div> that contained your shell class which was the flex element that was holding the 2 cards beside each-other
body {
font-family: 'Open Sans', sans-serif;
}
.shell{
justify-content:center;
display: flex;
flex-direction:row;
flex-basis: auto;
margin:5px;
}
.card {
width: 175px;
display: flex;
flex-direction: column;
border: 1px solid #EF9A9A;
border-radius: 4px;
overflow: hidden;
margin: 10px;
text-decoration:none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 18px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 72px;
margin-bottom: 5px;
color: #D32F2F;
}
.main-description {
color: #D32F2F;
font-size: px;
text-align: center;
}
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<div class="header">
<a href="#home" class="logo">Project-LuLo</a>
<div class="header-right">
<a class="active" href="#home">Home</a>
<a href="#games">Games</a>
<a href="#contact">Contact</a>
</div>
</div>
<div class="shell">
<a href="#test" class="card">
<div class="card-header">Games</div>
<div class="card-main">
<i class="material-icons">videogame_asset</i>
<div class="main-description">Web Based Games</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">Other</div>
<div class="card-main">
<i class="material-icons">question_mark</i>
<div class="main-description">Cool Random Stuff</div>
</div>
</a>
</div>Answered By - JDawwgy
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.