I have a drop down menu, with different sections. The content below is supposed to appear after I hover over the certain section. The issue that I'm having is that the different sections appear to the right, when I actually want them centered.
Thank you guys in advanced! I appreciate the help.
Here's what I want it to look, and how the first one looks.
But this is how they look.
Another example.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="firstContainer" id="firstsection">
<div class="row">
<div class="col-12">
<div class="middleColumn">
<div class="circularImage">
<img src="killua.jpeg">
</div>
<h1 class="name">ERICK LOJANO</h1>
</div>
</div>
</div>
</div>
<div class = "secondContainer">
<div class = "row">
<div class = "col-12">
<div class="middleColumn">
<h1 class="name"><br></h1>
<div class="dropDown">
<button class= "dropButton"> about me</button>
<div class="dropDown-content">
<p class="text">I'm currently a rising senior majoring in computer science at Brooklyn College. First generation college student.</p>
<p class="text">Some of my hobbies include gaming, watching/playing soccer, programming, and photography.</p>
</div>
</div>
<div class="dropDown">
<button class= "dropButton"> experience</button>
<div class="dropDown-content">
<p class="name"> hello hello hello</p>
</div>
</div>
<div class="dropDown">
<button class= "dropButton"> projects</button>
<div class="dropDown-content">
<p class="name"> hello hello hello</p>
</div>
</div>
<div class="dropDown">
<button class= "dropButton"> socials</button>
<div class="dropDown-content">
<p class="name"> hello hello hello</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
header, footer {
display: block;
}
body{
line-height: 1;
margin: 0;
background-color: #000000;
}
.firstContainer{
width: 100%;
margin: auto;
padding-top: 1%;
height: 300px;
padding: 0;
display: flex;
}
.secondContainer{
width: 100%;
margin: auto;
padding-top: 1%;
height: auto;
padding: 0;
display: flex;
}
.row{
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center
}
.row::after{
display: table;
clear: both;
content: "";
}
.col-1 {width: 8.33% }
.col-2 {width: 16.66%}
.col-3 {width: 25%}
.col-4 {width: 33.33%}
.col-5 {width: 41.66%}
.col-6 {width: 50%}
.col-7 {width: 58.33%}
.col-8 {width: 66.66%}
.col-9 {width: 75%}
.col-10 {width: 83.33%}
.col-11 {width: 91.66%}
.col-12 {width: 100%}
* {
box-sizing: border-box;
}
/* CUSTOM STYLES */
#firstsection{
background: linear-gradient(0deg, rgba(0,0,0,1) 2%, rgba(66, 174, 219,1) 100%);
}
.middleColumn{
display: block;
text-align: center;
}
div.circularImage{
display: inline-block;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
margin-top: 10px;
margin-bottom: 10px;
}
h1.name{
color: ghostwhite;
font-size: 50px;
font-family: 'Mukta Malar';
font-style: italic;
margin: 0;
}
p.text{
font-size: 12px;
font-family: sans-serif;
margin: 5px;
}
.dropButton{
background-color: azure;
color: black;
padding: 16px;
font-size: 16px;
font-family: sans-serif;
font-style: italic;
border: none;
border-radius: 5%;
}
.dropDown{
position: relative;
display: inline-block;
}
.dropDown-content{
display: none;
position: absolute;
background-color: beige;
width: 400%;
top: 110%;
border-radius: 5%;
z-index: 1;
}
.dropDown-content a{
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropDown:hover .dropDown-content{
display: block;
}
.dropDown:hover .dropButton{
background-color:cornflowerblue;
color: beige;
}
There are multiple issues with how you built it.
Imho it's much better to just make a container of your 4 elements and make your absolute positioned relative to it.
Here is an updated version of your code.
All I did was to add a container in html and style it.
I also removed some css from .dropDown and .dropDown-content
header, footer {
display: block;
}
body{
line-height: 1;
margin: 0;
background-color: #000000;
}
.firstContainer{
width: 100%;
margin: auto;
padding-top: 1%;
height: 300px;
padding: 0;
display: flex;
}
.secondContainer{
width: 100%;
margin: auto;
padding-top: 1%;
height: auto;
padding: 0;
display: flex;
}
.row{
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center
}
.row::after{
display: table;
clear: both;
content: "";
}
.col-1 {width: 8.33% }
.col-2 {width: 16.66%}
.col-3 {width: 25%}
.col-4 {width: 33.33%}
.col-5 {width: 41.66%}
.col-6 {width: 50%}
.col-7 {width: 58.33%}
.col-8 {width: 66.66%}
.col-9 {width: 75%}
.col-10 {width: 83.33%}
.col-11 {width: 91.66%}
.col-12 {width: 100%}
* {
box-sizing: border-box;
}
/* CUSTOM STYLES */
#firstsection{
background: linear-gradient(0deg, rgba(0,0,0,1) 2%, rgba(66, 174, 219,1) 100%);
}
.middleColumn{
display: block;
text-align: center;
}
div.circularImage{
display: inline-block;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
margin-top: 10px;
margin-bottom: 10px;
}
h1.name{
color: ghostwhite;
font-size: 50px;
font-family: 'Mukta Malar';
font-style: italic;
margin: 0;
}
p.text{
font-size: 12px;
font-family: sans-serif;
margin: 5px;
}
.dropButton{
background-color: azure;
color: black;
padding: 16px;
font-size: 16px;
font-family: sans-serif;
font-style: italic;
border: none;
border-radius: 5%;
}
.dropDown-container {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 420px;
margin: 0 auto;
position: relative;
}
.dropDown-content{
display: none;
position: absolute;
background-color: beige;
top: 110%;
left: 0;
right: 0;
border-radius: 5%;
z-index: 1;
}
.dropDown-content a{
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropDown:hover .dropDown-content{
display: block;
}
.dropDown:hover .dropButton{
background-color:cornflowerblue;
color: beige;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="firstContainer" id="firstsection">
<div class="row">
<div class="col-12">
<div class="middleColumn">
<div class="circularImage">
<img src="killua.jpeg">
</div>
<h1 class="name">ERICK LOJANO</h1>
</div>
</div>
</div>
</div>
<div class = "secondContainer">
<div class = "row">
<div class = "col-12">
<div class="middleColumn">
<h1 class="name"><br></h1>
<div class="dropDown-container">
<div class="dropDown">
<button class= "dropButton"> about me</button>
<div class="dropDown-content">
<p class="text">I'm currently a rising senior majoring in computer science at Brooklyn College. First generation college student.</p>
<p class="text">Some of my hobbies include gaming, watching/playing soccer, programming, and photography.</p>
</div>
</div>
<div class="dropDown">
<button class= "dropButton"> experience</button>
<div class="dropDown-content">
<p class="name"> hello hello hello</p>
</div>
</div>
<div class="dropDown">
<button class= "dropButton"> projects</button>
<div class="dropDown-content">
<p class="name"> hello hello hello</p>
</div>
</div>
<div class="dropDown">
<button class= "dropButton"> socials</button>
<div class="dropDown-content">
<p class="name"> hello hello hello</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
the section #portfolio slips under the section #team-container when resizing the page to a smaller width
the website should show up like this: https://content.codecademy.com/PRO/independent-practice-projects/flexbox-business-site/example-site/index.html#team
Despite that what would you do to make the code better?
HTML:
<html><head>
<title>VC Enterprise Portfolio</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
<link rel="shortcut icon" href="/tiefes-lernen.png" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Lexend+Mega" rel="stylesheet" type="text/css">
</head>
<body>
<div class="header">
<h1>The VC Experience</h1>
<div class="navbar">
<p>Mission Statement</p>
<p>Portfolio</p>
<p>Investment Team</p>
</div>
</div>
<div class="main">
<div class="mission">
<div class="content">
<h2>The VC Experience</h2>
<h4>Our fund is committed to the furthering entrepreneurs in the mobility sector.</h4>
</div>
</div>
<div id="portfolio">
<div class="content">
<h2>Our Mobility Portfolio</h2>
<h4>Impacting diverse sectors of mobility to better the human experience and the world we inhabit</h4>
<div class="companies">
<div class="company">
<img src="img URL">
<span>AeroArgonauts</span>
</div>
<div class="company">
<img src="img URL">
<span>AutoBueno</span>
</div>
<div class="company">
<img src="img URL">
<span>LaneChatter</span>
</div>
<div class="company">
<img src="img URL">
<span>TigerTreads</span>
</div>
<div class="company">
<img src="img URL">
<span>ValetToday</span>
</div>
</div>
</div>
</div>
<div id="team-container">
<h2>Our Team</h2>
<div class="team">
<div class="teammate">
<img src="img URL">
<h3>Lisa Fischer</h3>
<p>C.E.O. - Founder and Principal Investor</p>
</div>
<div class="teammate">
<img src="img URL">
<h3>Alex Lasker</h3>
<p>Partner - Research & Development</p>
</div>
<div class="teammate">
<img src="img URL">
<h3>Omar Carlsen</h3>
<p>Partner - Partnerships & Marketing</p>
</div>
</div>
</div>
<div class="contact">
<h2>The VC Experience</h2>
<h5>introduction#vcexperience.investors</h5>
<h5>555-867-5309</h5>
</div>
<div class="copyright">
<h5>copyright VC Enterprises 2020</h5>
</div>
</div>
</body></html>
CSS:
/*https://content.codecademy.com/PRO/independent-practice-projects/flexbox-business-site/img/skyscrapers.jpg*/
html {
display: block;
}
body {
font-family: "Lexend Mega", sans-serif;
}
h1 {
display: block;
margin-top: .75em;
font-size: 2.75rem;
}
.navbar {
display: flex;
justify-content: space-around;
font-size: 1.375rem;
margin: 0 10%;
}
.navbar p{
padding: 0 15px 10px 30px;
display: inline-block;
}
a {
color: black;
}
header {
display: flex;
flex-direction: column;
align-items: center;
}
body {
text-align: center;
}
.navbar {
justify-content: space-around;
margin: 0 10px;
display: flex;
}
.mission {
display: flex;
background-image: img URL;
width: auto;
padding-top: 10px;
}
.content {
display: block;
width: 100%;
height: 300px;
position: relative;
top: 80px;
margin-bottom: 0;
}
h2, h4 {
background-color: white;
position: relative;
font-size: 33px;
margin: 0;
padding: 10px;
}
h4 {
font-size: 22px;
}
#portfolio {
min-height: 500px;
margin: auto;
padding-top: 35px;
}
.company {
display: flex;
align-items: center;
justify-content: space-between;
}
.company img {
width: 200px;
height: auto;
padding: 10px;
margin-left: auto;
margin-right: auto;
}
span {
min-width: 240px;
padding: 5px;
text-align: center;
font-size: 22px;
font-weight: bold;
}
.companies {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
#team-container {
position: relative;
display: block;
}
#team-container h2 {
margin: 0;
padding: 5px;
display: block;
}
.team {
padding-top: 75px;
justify-content: center;
display: flex;
flex-wrap: wrap;
background-image: img URL;
}
.team img {
padding: 10px;
height : 300px;
width: 200px;
}
.teammate {
padding: 5px;
color: white;
flex-basis: 280px;
}
Tried to make some paddings to top or bottom but it looks whacky. I also tried to inspect the original site but can't find the reason why.
Good morning,
I am having a challenge with centering a flexbox container itself. I have managed to center all 5 elements within the flexbox but cannot actually get the container itself to center horizontally into the middle of the page.
I have watched a tutorial after getting stuck on this and can see my code is the same except for the naming of containers. Timestamp provided for the exact second where you can see their code: https://youtu.be/fJc18fT4T3s?t=542. In their tutorial, the "trend-container" which is my "image-container" is centered whereas mine is not. I have tried using margin: 0 auto; but this does nothing and the container stays on the left side of the page.
I have had to add text-align: center to mine as the text was not aligning.
If anyone can advise what I have done wrong to not allow this flexbox container to center that would be great as I am a bit stumped!
body {
font-family: "helvetica", sans-serif;
font-size: 22px;
color: seashell;
opacity: 0.9;
background-color: black;
}
.mission h2,
#featured h2 {
margin: 10px 0px 5px 0px;
text-align: center;
}
.mission h4,
#featured h4 {
margin: 15px 0px 10px 0px;
text-align: center;
}
/* ---------------Navigation ----------------*/
.navbar {
height: 69px;
width: 100%;
border-bottom: 1px seashell solid;
background-color: black;
position: fixed;
z-index: 10;
align-items: center;
left: 0;
top: 0;
}
.logo {
height: 50px;
margin-left: 0.45rem;
position: relative;
top: 5px;
}
.navlist {
position: relative;
float: right;
margin-right: 0.45rem;
}
.navlist a {
color: seashell;
}
.navbar .navlist ul {
list-style: none;
position: relative;
}
.navbar .navlist ul li {
display: inline-block;
text-decoration: underline;
padding: 0px 10px;
}
/* ------------------Banner Section --------------*/
#mission {
width: 1200px;
height: 700px;
background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
margin: 70px auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.mission {
width: 100%;
background-color: black;
margin: 0 auto;
text-align: center;
}
/*---------------Tea of the Month ------------------*/
.image-container {
display: inline-flex;
max-width: 1000px;
height: auto;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
}
.image img {
height: 200px;
width: 300px;
padding: 10px 10px;
}
<html>
<head>
<title>Tea Cozy</title>
<link href="C:\Users\Jason\Desktop\Coding\Projects\teacosy\global.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-----------------Nav Bar--------------------->
<nav class="navbar">
<img class="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="Tea Cozy logo">
<div class="navlist">
<ul>
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</div>
</nav>
<!-------------------Banner--------------------->
<div id="mission">
<div class="mission">
<h2>Our Misson</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<!-------------------Tea of the Month-------------------->
<div id="featured">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="image-container">
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg">
<h4>Spiced Rum Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg">
<h4>Seasonal Donuts</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg">
<h4>Myrtle Ave Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
</body>
</html>
Changing display: inline-flex to display: flex and adding margin: 0 auto to the <div class="image-container"> container fixes the center alignment issue for that section of the page.
body {
font-family: "helvetica", sans-serif;
font-size: 22px;
color: seashell;
opacity: 0.9;
background-color: black;
}
.mission h2,
#featured h2 {
margin: 10px 0px 5px 0px;
text-align: center;
}
.mission h4,
#featured h4 {
margin: 15px 0px 10px 0px;
text-align: center;
}
/* ---------------Navigation ----------------*/
.navbar {
height: 69px;
width: 100%;
border-bottom: 1px seashell solid;
background-color: black;
position: fixed;
z-index: 10;
align-items: center;
left: 0;
top: 0;
}
.logo {
height: 50px;
margin-left: 0.45rem;
position: relative;
top: 5px;
}
.navlist {
position: relative;
float: right;
margin-right: 0.45rem;
}
.navlist a {
color: seashell;
}
.navbar .navlist ul {
list-style: none;
position: relative;
}
.navbar .navlist ul li {
display: inline-block;
text-decoration: underline;
padding: 0px 10px;
}
/* ------------------Banner Section --------------*/
#mission {
width: 1200px;
height: 700px;
background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
margin: 70px auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.mission {
width: 100%;
background-color: black;
margin: 0 auto;
text-align: center;
}
/*---------------Tea of the Month ------------------*/
.image-container {
display: flex;
max-width: 1000px;
height: auto;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
margin: 0 auto;
}
.image img {
height: 200px;
width: 300px;
padding: 10px 10px;
}
<html>
<head>
<title>Tea Cozy</title>
<link href="C:\Users\Jason\Desktop\Coding\Projects\teacosy\global.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-----------------Nav Bar--------------------->
<nav class="navbar">
<img class="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="Tea Cozy logo">
<div class="navlist">
<ul>
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</div>
</nav>
<!-------------------Banner--------------------->
<div id="mission">
<div class="mission">
<h2>Our Misson</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<!-------------------Tea of the Month-------------------->
<div id="featured">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="image-container">
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg">
<h4>Spiced Rum Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg">
<h4>Seasonal Donuts</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg">
<h4>Myrtle Ave Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
</body>
</html>
for "image-container" the parent that is "body" is not a flex or grid item. quick fix set: body to be a flex container and "flex-direction to column, then for "image-container" set "align-self: center;" like so:
body {
font-family: "helvetica", sans-serif;
font-size: 22px;
color: seashell;
opacity: 0.9;
background-color: black;
display: flex;
flex-direction: column;
}
.image-container {
display: inline-flex;
max-width: 1000px;
height: auto;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
align-self: center;
}
I'm trying to create a page using FlexBox so i can keep the main image always centered with the top logo and page. And add of "off-center" text, next to the left.
My problem now is that i cannot make each box (image+text) keep their place vertically, boxes float and they have different space between each other based on what i'm using to view (big screen, laptop).
Not an expert with FlexBox, can i do that?
And also, i want to add a bar after the third box, 100% width...but it's placing in the middle of the page, between the boxes.
Any help will be welcome and i'll keep learning :)
body {
margin: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
height: 100vh;
}
.top {
border: 1px solid white;
width: 50%;
height: 10%;
align-self: flex-start;
text-align: center;
}
.inner-container {
border: 1px solid white;
width: 50%;
height: 60%;
display: flex;
}
.center {
position: absolute;
width: 50%;
text-align: left;
align-self: flex-end;
}
.off-center {
position: absolute;
vertical-align: bottom;
text-transform: uppercase;
padding-left: 10px;
min-width: 200px;
align-self: flex-end;
}
.center, .off-center {
position: absolute;
}
.center img {width: 100%;}
.off-center h2 {font-size:12px; font-family: 'Open Sans', sans-serif; font-weight: 400;text-transform: uppercase; color:black; display: block!important;margin: 0px;}
.off-center p {font-size: 20px; font-family:'aileronbold', sans-serif; display: block!important;margin: 0px;text-transform: none;}
.row.subscriptionBar {display:flex; background-color: black; display: block; padding:20px;}
.subscriptionBar h2 {color:white;}
.firstPart {display: }
#media screen and (min-width: 769px) {
.off-center {
margin-left: 50%;
}
#media screen and (max-width: 768px) {
.off-center {
margin-top: 105px;
}
}
<div class="container">
<div class="top"><img src="https://www.oilandgasreinvented.com/img/logo-placeholder.svg" width="80px"></div>
<div class="inner-container">
<div class="center">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
<div class="off-center">
<h2 class="">ArtistName 1</h2>
<p>509476ZclHtqXy</p></div>
</div>
<div class="inner-container">
<div class="center">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
<div class="off-center">
<h2 class="">ArtistName 2</h2>
<p>Title lala 1</p></div>
</div>
<div class="inner-container">
<div class="center">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
<div class="off-center">
<h2 class="">ArtistName 3 444</h2>
<p>Title 093830</p></div>
</div>
</div>
.wrapper {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
header{
background: tomato;
}
section{
display: flex
}
.main {
background: deepskyblue;
}
.main img{
max-width: 100%;
}
.full-width {
background: lightgreen;
}
.main { order: 2; flex: 3 0px; }
.aside { flex: 1 auto; }
.aside-1 { order: 1; background: gold; width: 10%}
.aside-2 { order: 3; background: hotpink; position: relative; width: 10%}
.aside-2 > span {
position: absolute;
bottom: 0;
left: 0;
}
.vertical {
width: 15%; /* Modify this value for different screen size*/
}
/* .full-width { order: 4; } */
/*#media all and (min-width: 600px) {
.aside { flex: 1 auto; }
}
#media all and (min-width: 800px) {
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}*/
body {
padding: 2em;
}
<div class="wrapper">
<header><img src="https://www.oilandgasreinvented.com/img/logo-placeholder.svg" width="80px"></header>
<section>
<div class="main">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt="">
</div>
<aside class="aside aside-1"></aside>
<aside class="aside aside-2"><span>Aside Right</span></aside>
</section>
<section>
<div class="main">
<img src="https://picsum.photos/200/300" alt="">
</div>
<aside class="aside aside-1 vertical"></aside>
<aside class="aside aside-2 vertical"><span>Aside Right</span></aside>
</section>
<section>
<div class="main">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt="">
</div>
<aside class="aside aside-1"></aside>
<aside class="aside aside-2"><span>Aside Right</span></aside>
</section>
<section class="full-width">Full Width</section>
<section>
<div class="main">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt="">
</div>
<aside class="aside aside-1"></aside>
<aside class="aside aside-2"><span>Aside Right</span></aside>
</section>
</div>
I'm just doing a quick sample because it's not clear on what you're looking for. If this is the direction you're hoping to move toward, then I may be able to assist further.
You just have a few too many things going on with your combination of flexbox and absolute positioning. Below is a version of your snippet with much of the unnecessary css commented out (so you can see exactly what it is) plus a couple of new additions.
Most important changes other than removing some of the absolute positioning are removing flex-wrap from your .container and adding flex-direction: column as well as matching the widths of .center and .off-center so you can use position: absolute on .off-center (good use of it in that case) along with margin-left equivalent to the width to ensure that it is positioned just to the right of your image container.
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
/*justify-content: center;
flex-wrap: wrap;
height: 100vh;*/
}
.top {
border: 1px solid white;
/*width: 50%;*/
height: 10%;
/*align-self: flex-start;*/
text-align: center;
}
.inner-container {
border: 1px solid white;
/*width: 50%;*/
height: 60%;
display: flex;
justify-content: space-around;
}
.center {
/*position: absolute;*/
width: 50%;
min-width: 200px;
text-align: left;
/*align-self: flex-end;*/
}
.off-center {
position: absolute;
/*vertical-align: bottom;*/
text-transform: uppercase;
padding-left: 10px;
width: 50%;
min-width: 200px;
align-self: flex-end;
margin-left: 50%;
}
/*.center, .off-center {
position: absolute;
}*/
.center img {
width: 100%;
}
.off-center h2 {
font-size: 12px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-transform: uppercase;
color: black;
display: block!important;
margin: 0px;
}
.off-center p {
font-size: 20px;
font-family: 'aileronbold', sans-serif;
display: block!important;
margin: 0px;
text-transform: none;
}
.row.subscriptionBar {
display: flex;
background-color: black;
display: block;
padding: 20px;
}
.subscriptionBar h2 {
color: white;
}
.firstPart {
display:
}
/*#media screen and (min-width: 769px) {
.off-center {
margin-left: 50%;
}
#media screen and (max-width: 768px) {
.off-center {
margin-top: 105px;
}
}*/
<div class="container">
<div class="top"><img src="https://www.oilandgasreinvented.com/img/logo-placeholder.svg" width="80px"></div>
<div class="inner-container">
<div class="center">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt="">
</div>
<div class="off-center">
<h2 class="">ArtistName 1</h2>
<p>509476ZclHtqXy</p>
</div>
</div>
<div class="inner-container">
<div class="center">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
<div class="off-center">
<h2 class="">ArtistName 2</h2>
<p>Title lala 1</p>
</div>
</div>
<div class="inner-container">
<div class="center">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
<div class="off-center">
<h2 class="">ArtistName 3 444</h2>
<p>Title 093830</p>
</div>
</div>
</div>
I have a little problem with my header i want this:
search bar to be flexible, and this means that if that orange buttons text becomes larger the search bar must resize so that buttonsdont go down who knows how to do it can you share your experience, and sorry form my English
HTML
<div class="navigation-holder">
<div id="top-navbar">
<div class="container">
<div class="col-lg-9 no-padding">
<input type="text" name="" class="top-navbar-search" placeholder="Поиск по предметам или по именам">
</div>
<div class="col-lg-3 no-padding">
<div class="top-navbar-links">
#if(Auth::check())
{{ Auth::user()->first_name }}
Выйти
#else
aefaefaefaefaefaefaefe
Зарегистрироваться
#endif
</div>
</div>
</div>
</div>
<nav id="navbar">
<div class="container">
<button class="navbar-toggle">
<span></span>
</button>
<ul class="navbar-nav">
<li>Обратная связь</li>
<li>О проекте</li>
<li>Рус</li>
<li>Узб</li>
<li>Eng</li>
</ul>
</div>
</nav>
</div>
#top-navbar{
min-height: 50px;
width: 100%;
background-color: #brand-blue;
.top-navbar-search{
width: 100%;
min-height: 50px;
padding: 0 70px 0 20px;
color: #fff;
background: #339dd1 url(../img/search.svg) no-repeat 97% 48%;
background-size: 22px;
font-size: 18px;
font-family: 'Light';
.placeholder({
color: #fff;
});
}
.top-navbar-links{
width: 100%;
text-align: center;
display: table-cell;
a{
padding: 0 10px;
font-family: 'Light';
color: #fff;
display: inline-block;
line-height: 50px;
font-size: 18px;
min-height: 50px;
float: left;
background-color: #brand-yellow;
.transition(background, 200ms, linear);
&:hover{
background-color: #d17a45;
}
}
}
}
#navbar{
background-color: #fff;
min-height: 70px;
width: 100%;
border-bottom: 1px solid #cbcbcb;
.navbar-brand{
width: 160px;
height: 41px;
background: url(../img/brand.svg) no-repeat center;
background-size: 100%;
display: inline-block;
margin-top: 16px;
}
.navbar-toggle{
width: 70px;
height: 70px;
float: right;
position: relative;
display: none;
span{
display: block;
width: 35px;
margin: 0 auto;
height: 4px;
background-color: #393939;
.transition(all, 200ms, linear);
&:before{
content: '';
top: 23px;
.bar;
}
&:after{
content: '';
bottom: 23px;
.bar;
}
}
&:hover{
span{
background-color: #brand-blue;
&:before, &:after{
background-color: #brand-blue;
}
}
}
}
.navbar-nav{
float: right;
display: inline-block;
line-height: 70px;
li{
display: inline-block;
&:first-child{
margin-right: 20px;
}
&:nth-child(3){
margin-left: 30px;
}
}
a{
display: block;
line-height: 70px;
color: #brand-black;
.transition(color, 100ms, linear);
&:hover{
color: #brand-blue;
}
}
}
}
Use bootstrap grid, an example:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="background-color:blue;"></div>
<div class="col-sm-7" style="background-color:lavenderblush;">Search</div>
<div class="col-sm-1" style="background-color:lavenderblush;">Button</div>
<div class="col-sm-2" style="background-color:blue;"></div>
</div>
</div>
</body>
</html>
I'm trying to align several DIVS, Images and text and I can't figure this out..
Here's what I'm trying to achieve:
Heres' my HTML
<div class="section5">
<div class="outer">
<div class="container1">
<img src="icon.png" width="85">
<div class="title1">Text</div>
<div class="subtitle1">Text</div>
</div>
<div class="container2">
<img src="iphone.png" width="375">
<div class="subtitle2">Text</div>
</div>
</div>
</div>
Here is my CSS:
.section5{ height: 525px; background-color: #5e6172; text-align: center; position: relative;}
.outer{ width: 80%; background-color: #45da45; height: 100%; margin: 0 auto; position: relative;}
.title1{color: #ffffff; font-size: 2.6em; font-family: h35; }
.subtitle1{color: #ffffff; font-size: 1.5em; font-family: h35; margin-top: 0.25em; }
.subtitle2{color: #ffffff; font-size: 1.5em; font-family: h35; margin-top: 0.25em; }
.container1{display: block; background-color: #ccc; }
.container2{display: block; background-color: #fffc1e; }
Here is the JSFIDDLE:
http://jsfiddle.net/mib92/hogwohf8/
My current problems:
1) My text at the bottom needs to be on the right side of the image.. center like in my example image.
2) the bottom of my bottom picture must be align to the bottom of container2 AND the bottom of section5
3) While doing this, the container 1 must remain in the vertical middle of the remaining space of the section5.
Thank you
I hops it's help you.
.section5 {
height: 525px;
background-color: #5e6172;
text-align: center;
position: relative;
}
.outer {
width: 80%;
background-color: #45da45;
height: 100%;
margin: 0 auto;
position: relative;
}
.title1 {
color: #ffffff;
font-size: 2.6em;
font-family: h35;
}
.subtitle1 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.subtitle2 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.container1 {
display: block;
background-color: #ccc;
}
.container2 {
display: block;
background-color: #fffc1e;
}
.right-sied {
display: inline-block;
vertical-align: top;
width: 41%;
}
.left-sied {
display: inline-block;
width: 49%;
}
.left-sied img {
max-width: 100%;
}
<div class="section5">
<div class="outer">
<div class="container1">
<img src="icon.png" width="85">
<div class="title1">Text</div>
<div class="subtitle1">Text</div>
</div>
<div class="container2">
<div class="left-sied">
<img src="iphone.png" width="375">
</div>
<div class="right-sied">
<div class="subtitle2">Text</div>
</div>
</div>
</div>
</div>
Live Demo
check this:
.section5 {
height: 525px;
background-color: #5e6172;
text-align: center;
position: relative;
}
.outer {
width: 80%;
background-color: #45da45;
height: 100%;
margin: 0 auto;
position: relative;
}
.title1 {
color: #ffffff;
font-size: 2.6em;
font-family: h35;
}
.subtitle1 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.subtitle2 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.container1 {
display: block;
background-color: #ccc;
}
.container2 {
display: block;
background-color: #fffc1e;
}
.container1 .wrapper {
display: inline-block;
float: right;
}
.container2 img {
margin: 0 auto;
}
<div class="section5">
<div class="outer">
<div class="container1">
<img src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" width="85">
<div class="wrapper">
<div class="title1">Text</div>
<div class="subtitle1">Text</div>
</div>
</div>
<div class="container2">
<div class="subtitle2">Text</div>
<img src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" width="375">
</div>
</div>
</div>