Here's the code:
JsFiddle
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../test.css">
<title>Test title</title>
</head>
<body>
<nav id="user-nav">
<div id="logo-container">
<img src="img/logo.svg" alt="Loading logo">
<p>This is a site</p>
</div>
<div id="form-container">
<i id="search-icon"></i>
<input type="text" name="search" id="form-search" autocomplete="off" placeholder="Quick search...">
</div>
<div class="links">
Home
Services
About
</div>
<div class="profile-link">
Profile name
<div class="drop-menu">
Switch
Log out
</div>
</div>
</nav>
</body>
</html>
and CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: chocolate;
}
#user-nav {
display: flex;
height: 62px;
position: fixed;
background-color: #333;
width: 100%;
border-bottom: 2px solid #fff;
}
#logo-container img {
width: 96px;
height: 60px;
}
#logo-container {
display: flex;
flex-grow: 2;
}
.profile-link {
flex-grow: 1;
text-align: center;
display: flex;
flex-direction: column;
position: relative;
border-left: 1px solid #fff;
height: 100%;
}
.drop-menu {
display: flex;
flex-direction: column;
position: absolute;
top: 64px;
background: #333;
border-left: 1px solid #fff;
width: 100%;
}
I removed all extra css from other elements in navbar because i thought it was affecting the last divs but it didn't affect the misalignment. I tried different display properties for the div that holds profile name even using list instead of div for drop-down-menu, i always get this offset of 1px. I am styling the navbar using flex because i want to make it more responsive, i am not sure is this somehow affecting the issue.
Related
I want to have such a gallery, with the thumbnails having the equal height along the main column, despite the different height of the images.
i tried having a <div> around every picture and setting the height on them. but I didn't get the desired result.
Any idea?
/* PLEASE see the snippet in Full size */
.gallery .gal-ver .gal-ver-border {
border: 1px solid #707070;
border-radius: 10px;
margin-top: 5px;
margin-bottom: 5px;
display: flex;
}
.gallery .gal-ver img {
width: 100%;
height: auto;
border-radius: 10px;
display: block;
padding: 5px;
}
.gallery .imgWrap {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #707070;
border-radius: 15px;
}
.gallery .mainimg {
width: 100%;
height: auto;
border-radius: 10px;
margin: 15px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<title>[product-name]</title>
</head>
<body>
<div class="gallery d-flex">
<div class="gal-ver">
<div class="gal-ver-border"><img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
<div class="gal-ver-border"><img src="https://www.ubuy.com.tr/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFXRHR5dlFOcEwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
<div class="gal-ver-border"><img src="https://m.media-amazon.com/images/I/91iLajROOwL._AC_SX466_.jpg"></div>
<div class="gal-ver-border"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSRyT92TMIDrrkzvlOOpKbTiKcC_iCuhWTvKg&usqp=CAU"></div>
<div class="gal-ver-border"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQZH5HdCYBQm1-WQic_m7LtfC_G1owr2oakQ&usqp=CAU"></div>
</div>
<div class="col-md-12 col-lg-9 imgWrap">
<img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg" class="mainimg">
</div>
</div>
First you should set a fixed height on the parent div .gal-ver-border, this will make sure all the gallery items have the save height
After doing this you will notice that the images aspect-ratio brakes, to solve this just add object-fit: contain; to the images style
in the result the following CSS should be added:
.gallery .gal-ver .gal-ver-border {
height: 290px; /* or any other value */
}
.gallery .gal-ver .gal-ver-border img {
object-fit: contain;
}
Try this:
.gallery .gal-ver .gal-ver-border {
border: 1px solid #707070;
border-radius: 10px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
With this structure, you can use flex-basis so your main img uses up more space, and for the small img u can go with a height of 20% but as you can see I used a calc(20% - 4px) just to explain the 4px, you have a margin of 5px and a border of 1px around the img so to make them even height with the main img, you have to take that in consideration too. Also added a :not(:first-of-type) selector, so the first img doesn't need the top margin.
.gallery .gal-ver .gal-ver-border {
border: 1px solid #707070;
border-radius: 10px;
display: flex;
margin-bottom: 5px;
}
.gallery .gal-ver .gal-ver-border:not(:first-of-type) {
margin-top: 5px;
}
.gal-ver > * {
height: calc(20% - 4px);
}
.gallery .gal-ver img {
object-fit: contain;
width: 100%;
border-radius: 10px;
display: block;
padding: 5px;
}
.gallery .imgWrap {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #707070;
border-radius: 15px;
margin-left: 5px;
flex: 0 0 80%;
}
.gallery .mainimg {
width: 100%;
height: auto;
border-radius: 10px;
margin: 15px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<title>[product-name]</title>
</head>
<body>
<div class="gallery d-flex">
<div class="gal-ver">
<div class="gal-ver-border"><img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
<div class="gal-ver-border"><img src="https://www.ubuy.com.tr/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFXRHR5dlFOcEwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
<div class="gal-ver-border"><img src="https://m.media-amazon.com/images/I/91iLajROOwL._AC_SX466_.jpg"></div>
<div class="gal-ver-border"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSRyT92TMIDrrkzvlOOpKbTiKcC_iCuhWTvKg&usqp=CAU"></div>
<div class="gal-ver-border"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQZH5HdCYBQm1-WQic_m7LtfC_G1owr2oakQ&usqp=CAU"></div>
</div>
<div class="col-md-12 col-lg-9 imgWrap">
<img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg" class="mainimg">
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Having equal heights in column - sof question 15-May-2022</title>
<style>
.gallery {
display: inline-flex;
/* background-color: lightblue; */
padding: 10px;
}
img:not(.display-img) {
height: 50px;
width: 50px;
margin: 5px;
padding: 5px;
border: 1px solid hsl(0, 0%, 65%);
}
.display-div {
border: 1px solid hsl(0, 0%, 65%);
padding: 10px 20px;
margin: 5px 10px;
}
.display-img {
height: 200px;
width: 200px;
margin-top: 22%;
}
img,
.display-div {
border-radius: 5px;
}
</style>
</head>
<body>
<div class="gallery">
<div class="display-div">
<img class="display-img" src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg" class="mainimg">
</div>
<div class="">
<div class=""><img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
<div class=""><img src="https://www.ubuy.com.tr/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFXRHR5dlFOcEwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
<div class=""><img src="https://m.media-amazon.com/images/I/91iLajROOwL._AC_SX466_.jpg"></div>
<div class=""><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSRyT92TMIDrrkzvlOOpKbTiKcC_iCuhWTvKg&usqp=CAU"></div>
<div class=""><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQZH5HdCYBQm1-WQic_m7LtfC_G1owr2oakQ&usqp=CAU"></div>
</div>
</div>
</body>
</html>
I've been working on this project for awhile, an article that holds multiple items within it. However, when resizing the web page to a smaller size, the "player-summary" class is pushed into the section with the "name" class. This is despite the "name" class having a fixed width of 250px. I'm not quite sure how to fix this so resizing the web page won't bleed into it.
Additionally, when resizing, why does my text overflow out of my container?
html,body{
width: 100%;
height: 100%;
}
.center{
width:90%;
margin: auto;
}
.big-board_inner{
width: 80%;
margin: auto;
background-color: white;
}
article{
border: solid 1px;
border-radius: 10px;
}
.top-info{
display: flex;
flex-direction: row;
width:100%;
height: 100%;
font-size: 15px;
}
.name{
display: block;
width: 250px;
margin: .3em;
padding-right: 3em;
font-size: 20px;
padding-left:.5em;
}
.player-summary{
margin: .5em;
padding-right: 2em;
}
.age{
margin: .5em;
border-left: solid 1px;
padding-left: 1em;
}
.main-info{
width: 50%;
display: flex;
flex-direction: column;
}
.profile img{
width: 250px;
height: auto;
border-radius: 15px;
padding: .5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class = "center">
<div class = "big-board_inner">
<article>
<div class="top-info">
<div class = "name">Dustin Harris <br> OF - Tex </div>
<div class="player-summary">Summary: <br>Dustin Harris is as pure as hitter you can find, with a LF fit</div>
<div class="age">Highest Level: A+ <br> Age: 21</div>
<div class="age">Height: 6'1" <br> Weight: 215 lbs</div>
</div>
<div class="main-info">
<div class="profile"> <img src="images/Dustin Harris.jfif"></div>
</div>
</article>
</div>
</div>
</body>
</html>
Use min-width. It would make your element have a minimum-width to maintain no matter the screen size if you set a static value, like in this case, 250px.
As for why your elements overflow out of your container, it's because you don't have any wrapping on your container. You can use flexbox's flex-wrap property to wrap your elements to fit the available space. See the snippet below:
html,
body {
width: 100%;
height: 100%;
}
.center {
width: 90%;
margin: auto;
}
.big-board_inner {
width: 80%;
margin: auto;
background-color: white;
}
article {
border: solid 1px;
border-radius: 10px;
}
.top-info {
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
height: 100%;
font-size: 15px;
}
.name {
display: block;
min-width: 250px;
margin: .3em;
padding-right: 3em;
font-size: 20px;
padding-left: .5em;
}
.player-summary {
margin: .5em;
padding-right: 2em;
}
.age {
margin: .5em;
border-left: solid 1px;
padding-left: 1em;
}
.main-info {
width: 50%;
display: flex;
flex-direction: column;
}
.profile img {
width: 250px;
height: auto;
border-radius: 15px;
padding: .5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="center">
<div class="big-board_inner">
<article>
<div class="top-info">
<div class="name">Dustin Harris <br> OF - Tex </div>
<div class="player-summary">Summary: <br>Dustin Harris is as pure as hitter you can find, with a LF fit</div>
<div class="age">Highest Level: A+ <br> Age: 21</div>
<div class="age">Height: 6'1" <br> Weight: 215 lbs</div>
</div>
<div class="main-info">
<div class="profile"> <img src="images/Dustin Harris.jfif"></div>
</div>
</article>
</div>
</div>
</body>
</html>
More on flex-wrap here.
If what you're looking for is text-wrapping, then refer here instead.
I have problem with flex-wrap. When I set it and set width of child to 100% (to take entire "line"), it dont shrink.
Look at my code:
https://codepen.io/dinoq-the-reactor/pen/OJRJoNm
HTML:
<div id="main-container">
<div id="sub-container">
<div class="flex-container">
<div id="i1" class="flex-item">Icon</div>
<div id="i2" class="flex-item">some text, flex it!</div>
<div id="i3" class="flex-item">Icon</div>
<div id="i4" class="flex-item">Text on new line</div>
</div>
<div>
</div>
CSS:
#main-container{
width: auto;
position: absolute;
z-index: 9900;
}
#sub-container{
width:100%;
}
.flex-container {
background-color:blue;
display: flex;
flex-wrap: wrap;
}
.flex-item {
border: solid 1px green;
border-collapse: collapse;
background: grey;
color: white;
font-size: 3em;
}
#i2{
flex: 1;
}
#i4{
flex: 0 0 100%;
}
What I want is to achieve something like this:
Instead I got this:
Note: I really need use "flex-wrap" and html structure which I have... It is part of bigger project, and I can edit only CSS...
Note2: My container is so expanded because width of it is width of all child elements, so it counts width of my 4. child (which is on new line). This is some source of problem, but how it solve?
Thanks!
Below is the solution for your problem.
#main-container {
width: auto;
position: absolute;
z-index: 9900;
}
#sub-container {
width: 100%;
}
.flex-container {
background-color: gray;
font-size: 0;
}
.flex-item {
border: solid 1px green;
border-collapse: collapse;
color: white;
font-size: 3em;
display: inline-block;
font-size: 3rem;
}
.flex-item:last-child {
display: block;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="main-container">
<div id="sub-container">
<div class="flex-container">
<div id="i1" class="flex-item">Icon</div>
<div id="i2" class="flex-item">some text, flex it!</div>
<div id="i3" class="flex-item">Icon</div>
<div id="i4" class="flex-item">People of this world are travellers</div>
</div>
<div>
</div>
</body>
</html>
I know the title is vague. I do not know how to better formulate the title as I do not know the name of the design style.
What is the name of this design "style" and how do I achieve the effect with css and html?
I tried to recreate the design with HTML and css. here is the code
* {
margin: 0;
padding: 0;
box-sizing: 0;
}
/*BG*/
main,
.container {
height: 100vh;
width: 100vw;
}
body {
overflow: hidden;
}
#left-top,
#left-bottom,
#right {
position: absolute;
z-index: -10;
}
#left-top {
left: 0;
top: 0;
}
#left-bottom {
left: 0;
bottom: 0;
transform: translate(-0.5vw);
}
#right {
right: 0;
top: 0;
bottom: 0;
transform: translate(10vw);
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-height: 100vh;
max-width: 100vw;
border: 1vh solid lime;
}
.logo {
max-width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.logo img {
width: 80vw;
height: inherit;
}
.links {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<main>
<div class="container">
<img id="left-top" src="https://picoolio.net/images/2020/06/10/Path-52825c75a57b036c8.png" alt="" />
<img id="left-bottom" src="https://picoolio.net/images/2020/06/10/Path-486011727790f3e3d.png" alt="" />
<img id="right" src="https://i.ibb.co/WPqF1dV/Component-4-1.png" alt="" />
<div class="logo">
<img src="https://picoolio.net/images/2020/06/10/Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" alt="Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" border="0" />
</div>
<div class="links">
<ul>
<li>
Kontakt
</li>
<li>
Produkter
</li>
<li>
om oss
</li>
</ul>
</div>
</div>
</main>
<script src="main.js"></script>
</body>
</html>
Whenever I zoom the absolute position background pieces shifts like this.
What is the best way to achieve this design and what is the name of the style?
* {
margin: 0;
padding: 0;
box-sizing: 0;
}
/*BG*/
main,
.container {
height: 100vh;
width: 100vw;
}
body {
overflow: hidden;
}
#left-top,
#left-bottom,
#right {
position: absolute;
z-index: -10;
}
#left-top {
left: 0;
top: 0;
width: 20vw;
}
#left-bottom {
left: 0;
bottom: 0;
height: 50vh;
}
#right {
right: 0;
top: 0;
bottom: 0;
height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-height: 100vh;
max-width: 100vw;
}
.logo {
max-width: 70vw;
display: flex;
justify-content: center;
align-items: center;
}
.logo img {
top: 45vh;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
width: 100%;
height: inherit;
z-index: -10;
}
.links {
margin: 51vh auto auto 7vw;
width: 110vw;
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 1vw;
grid-row-gap: 1vw;
}
.link-text {
width: 100%;
text-align: center;
}
.link-text a {
text-decoration: none;
color: #777;
font-size: 1.25vw;
font-family: helvetica;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<main>
<div class="container">
<img id="left-top" src="https://picoolio.net/images/2020/06/10/Path-52825c75a57b036c8.png" alt="" />
<img id="left-bottom" src="https://picoolio.net/images/2020/06/10/Path-486011727790f3e3d.png" alt="" />
<img id="right" src="https://i.ibb.co/WPqF1dV/Component-4-1.png" alt="" />
<div class="logo">
<img src="https://picoolio.net/images/2020/06/10/Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" alt="Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" border="0" />
</div>
<div class="links">
<div class="link-text">Kontakt</div>
<div class="link-text">Produkter</div>
<div class="link-text">om oss</div>
</div>
</div>
</main>
<script src="main.js"></script>
</body>
</html>
In the above code I have changed the images dimensions and links in <div> tag to achieve that design... You can directly copy and paste the code for your work as I think this is what you wanted to see on the screen.
Explanation
1- I first added vw and vh dimensions to you images which made them responsive according to the viewport...
2- secondly I specified a z-index to your logo image and positioned it according to your need by the help of left and top after specifying absolute position.
3- Thirdly I used css grid layout for links, but it is not essential as you can use other methods also. link for info on cs grids
4- I styled few things with css (mainly the link section) which you can go through in your code...
The above was just a brief overview.
I've spent hours reviewing flexbox tutorials on youtube and I cannot figure out why I'm not able to center my flexbox item contents.
I have managed to center the images horizontally by using text-align: center; in my flex container.
However this do not affect the list AND it has not centered it vertically, other people seem to use justify-contents or align-items but it's not really working out for me.
Here's the code: https://jsfiddle.net/dL72j5gx/1/
html,
body {
height: 100%;
padding: 0px;
width: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0px;
}
.flex-container {
height: 100%;
width: 100%;
display: flex;
border: 5px solid red;
align-items: center;
justify-content: center;
text-align: center;
}
.menu {
width: 50%;
border: 3px solid green;
align-self: center;
height: 100%;
}
.content {
width: 50%;
border: 3px solid blue;
align-self: center;
height: 100%;
}
.MenuLogo {
height: 100%;
border: 3px solid yellow;
}
.ContentArea {
height: 100%;
border: 3px solid purple;
}
.quLogo {
width: 300px;
height: 100px;
}
.quCharacter {
width: 300px;
height: 300px;
}
.myList {
padding: 10px;
width: 30%;
}
.list-group {}
.list-group-item {
outline: 3px solid black;
}
.list-group-item>a {
color: black;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="flex-container">
<div class="menu">
<div class="MenuLogo">
<img class="quLogo" src="https://via.placeholder.com/300x100" alt="LOGO">
<div class="myList">
<ul class="list-group">
<li class="list-group-item">Shop</li>
<li class="list-group-item">Gallery</li>
<li class="list-group-item">About</li>
<li class="list-group-item">Contact</li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="ContentArea">
<img class="quCharacter" src="https://via.placeholder.com/300" alt="CHARACTER">
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Thanks in advance!
EDIT: Here's a quick image to show what im going for.
Apply flex to parent of element and give flex-direction:column to MenuLogo
html, body {
height: 100%;
padding: 0px;
width: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0px;
}
.flex-container {
height: 100%;
width: 100%;
display: flex;
border: 5px solid red;
align-items: center;
justify-content: center;
text-align: center;
}
.menu {
width: 50%;
border: 3px solid green;
align-self: center;
height: 100%;
}
.content {
width: 50%;
border: 3px solid blue;
align-self: center;
height: 100%;
}
.MenuLogo{
height: 100%;
border: 3px solid yellow;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
}
.ContentArea{
height: 100%;
border: 3px solid purple;
justify-content: center;
align-items: center;
display: flex;
}
.quLogo {
width: 300px;
height: 100px;
}
.quCharacter {
width: 300px;
height: 300px;
}
.myList {
padding: 10px;
width: 30%;
}
.list-group{
}
.list-group-item {
outline: 3px solid black;
}
.list-group-item > a{
color: black;
}
<!doctype html>
<html lang="en">
<html>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<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>My Webpage</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles/main.css">
</head>
<body>
<div class="flex-container">
<div class="menu">
<div class="MenuLogo">
<img class="quLogo" src="https://via.placeholder.com/300x100" alt="LOGO">
<div class="myList">
<ul class="list-group">
<li class="list-group-item">Shop</li>
<li class="list-group-item">Gallery</li>
<li class="list-group-item">About</li>
<li class="list-group-item">Contact</li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="ContentArea">
<img class="quCharacter" src="https://via.placeholder.com/300" alt="CHARACTER">
</div>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
When you use flexbox, you normally need to apply the properties to multiple different "containers." You would need to add the following 3 properties to the direct parent of the elements:
display: flex;
justify-content: center;
align-items: center;
In this case, add those 3 properties to the .MenuLogo class and the .ContentArea class.
You can move the table back underneath the image by putting it in a div that is separate from the div class="MenuLogo" div. This div is acting as a container for both items right now, and you would want them to be separate elements.
html,
body {
height: 100%;
padding: 0px;
width: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0px;
}
.flex-container {
height: 100%;
width: 100%;
display: flex;
border: 5px solid red;
align-items: center;
justify-content: center;
text-align: center;
}
.menu {
width: 50%;
border: 3px solid green;
align-self: center;
height: 100%;
}
.content {
width: 50%;
border: 3px solid blue;
align-self: center;
height: 100%;
}
.MenuLogo {
height: 100%;
border: 3px solid yellow;
display: flex;
justify-content: center;
align-items: center;
}
.ContentArea {
height: 100%;
border: 3px solid purple;
display: flex;
justify-content: center;
align-items: center;
}
.quLogo {
width: 300px;
height: 100px;
}
.quCharacter {
width: 300px;
height: 300px;
}
.myList {
padding: 10px;
width: 30%;
}
.list-group {
}
.list-group-item {
outline: 3px solid black;
}
.list-group-item>a {
color: black;
}
<!doctype html>
<html lang="en">
<html>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<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>My Webpage</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="flex-container">
<div class="menu">
<div class="MenuLogo">
<img class="quLogo" src="https://via.placeholder.com/300x100" alt="LOGO">
<div class="myList">
<ul class="list-group">
<li class="list-group-item">Shop</li>
<li class="list-group-item">Gallery</li>
<li class="list-group-item">About</li>
<li class="list-group-item">Contact</li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="ContentArea">
<img class="quCharacter" src="https://via.placeholder.com/300" alt="CHARACTER">
</div>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>