Well, the tittle says it all. How can I center align those 3 thumbnails inside that div?
I've tried many solutions presented at SO and other places on the web but no success.
I'm not a professional in Bootstrap, webdesign or CSS but how can something so simple be so difficult?
Check my problem here
My Bootstrap code:
<div class="row">
<div class="span3">
<div class="mask3"> <img src="img/profile-01.jpg" alt=""> </div>
<div class="inside">
</div>
<!-- /.inside -->
</div>
<!-- /.span3 -->
<div class="span3">
<div class="mask3"> <img src="img/profile-01.jpg" alt=""> </div>
<div class="inside">
</div>
<!-- /.inside -->
</div>
<!-- /.span3 -->
<div class="span3">
<div class="mask3"> <img src="img/profile-01.jpg" alt=""> </div>
<div class="inside">
</div>
<!-- /.inside -->
</div>
<!-- /.span3 -->
</div>
My CSS section:
https://jsbin.com/pabebetoqo/edit?html,css,output
You should study up a little bit on flexbox, which is a CSS technology invented for this sort of layout thing. It is actually really simple. I think the following might do the trick.
.row {
display: flex;
justify-content: center;
}
Couldn't you just center the row that contained the three elements via the text-align:center style?
/* This will center all of the content within your row */
.row { text-align: center; }
Or if you wanted to be more specific, just your mask3 elements :
/* Likewise, this would center only the content in your mask3 elements */
.mask3{ text-align: center; }
Example
/* History */
.mask3 {
text-align: center;
}
section#history {
padding-bottom: 0;
}
section#history h1 {
font-size: 3em;
margin-bottom: 1em;
margin-top: 0.5em;
}
section#history hgroup h2 {
margin-top: 1em;
text-transform: capitalize;
}
section#history hgroup h3 {
margin-top: .35em;
font-family: 'Patua One', cursive;
}
section#history .entry-content {
margin: 1em 0 2.5em;
}
section#history .align {
text-align: center;
margin-top: 10px;
font-size: 6em;
}
/* history Image Hover */
.mask3 img {
margin: 0 auto;
max-width: 100%;
display: block;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=80);
opacity: 0.6;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.mask3 img:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
filter: alpha(opacity=99);
opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="row">
<div class="span3">
<div class="mask3">
<a href="img/profile-01.jpg" rel="prettyPhoto">
<img src="img/profile-01.jpg" alt="">
</a>
</div>
<div class="inside">
</div>
<!-- /.inside -->
</div>
<!-- /.span3 -->
<div class="span3">
<div class="mask3">
<a href="img/profile-01.jpg" rel="prettyPhoto">
<img src="img/profile-01.jpg" alt="">
</a>
</div>
<div class="inside">
</div>
<!-- /.inside -->
</div>
<!-- /.span3 -->
<div class="span3">
<div class="mask3">
<a href="img/profile-01.jpg" rel="prettyPhoto">
<img src="img/profile-01.jpg" alt="">
</a>
</div>
<div class="inside">
</div>
<!-- /.inside -->
</div>
<!-- /.span3 -->
</div>
</body>
</html>
use the text align css
.mask3 {
text-align: center;
}
Here's how:
<div class="dogs-box">
<img src="url" class="dog" />
<img src="url" class="dog" />
<img src="url" class="dog" />
</div>
And then set:
.dogs-box {
border: 1px solid green;
text-align: center;
}
.dog {
width: 100px;
height: 100px;
margin: 5px;
}
I've created a very simple example which demonstrates exactly what you are trying to achieve: Fiddle
Related
I'm working on a specific layout using Bootstrap 5 and attempt to render a tag outside his original container, taking the full page width.
I tried using absolute position on the img tag, however, doing this, footer is going over the tag which is not expected.
More than words, this is what I trying to do
The ideal DOM structure would be as follow :
<article>
<header>
<div>
<img />
<h3 />
</div>
<div class="meta" />
</header>
<div class="content" />
<footer />
</article>
img should get full x-width
img should stay in the overal y position (meaning nothing coming after it - should go over it, like a page footer or anything else)
h3 should be over the img tag
any idea would get a warm welcome, I'm trying to make that small thing working since over a week now :')
you're right
my current best attempt it this, so I split the overall structure in three distinct container box, which sounds like a bit hacky to me - and I have issues when it's rendered on mobile (ie: title is going outside down the box, instead staying stick to the bottom of the image)
<body class="position-relative">
<div class="container-fluid container-lg">
<header class="mt-5">
<nav class="navbar navbar-expand-lg navbar-dark mt-5 mb-3"></nav>
</header>
</div>
<main class="mt-5 mb-3" role="main">
<section>
<article>
<header>
<div class="go-article-banner d-flex position-relative">
<img style="object-fit: cover;position: absolute;height: 300px;left: 0;right: 0;/*! width: 200%; */" class="w-100" src="...">
<div class="container-fluid container-lg position-relative">
<div class="position-absolute bottom-0 start-0 right-0" style="background: rgba(0, 0, 0, 0.4);">
<h3 class="display-3 p-4">The War of the Worthies: the spectre of Cardan’s aggression</h3>
</div>
</div>
</div>
</header>
<div class="container-fluid container-lg"></div>
<footer class="container-fluid container-lg"></footer>
</article>
</section>
</main>
<div class="container-fluid container-lg">
<footer>
<div class="go-streaming-news d-none d-sm-block mb-4">
<div class="row">
<div class="col col-sm-4 col-lg-3 col-xl-2 d-flex justify-content-between text-uppercase" style="background-color: var(--bs-primary); padding: .5rem 1rem;">
<span>Breaking News</span>
<span style="border-right: solid 2px rgb(50, 67, 100)"></span>
<span>21:03</span>
</div>
<div class="col col-sm-8 col-lg-9 col-xl-10 marquee-wrapper">
<div class="marquee"><div style="width: 100000px; animation: 9.64667s linear 0s infinite normal none running marqueeAnimation-39418180; transform: translateX(1084px);" class="js-marquee-wrapper"><div class="js-marquee" style="margin-right: 0px; float: left;">
<ul class="list-inline m-0 p-0">
<li class="list-inline-item">Some news</li>
<li class="list-inline-item">Another news</li>
<li class="list-inline-item">Yet Another news</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
However, the render is good https://imgur.com/a/9wBse0Q
My previous attempt was that one, and with that, the marquee box is going inside the article banner. This, and the title is going outside the image which is rendered using a after anchor.
<body class="position-relative customize-support">
<div class="container-fluid container-lg">
<header class="mt-5">
<nav class="navbar navbar-expand-lg navbar-dark mt-5 mb-3"></nav>
</header>
<main class="mt-5 mb-3" role="main">
<section>
<article>
<header>
<div class="go-article-banner"></div>
<div class="d-flex">
<h3 class="display-3">Change of course for Eskari Industries</h3>
</div>
</header>
<div></div>
<footer></footer>
</article>
</section>
</main>
<footer>
<div class="go-streaming-news d-none d-sm-block mb-4">
<div class="row">
<div class="col col-sm-4 col-lg-3 col-xl-2 d-flex justify-content-between text-uppercase" style="background-color: var(--bs-primary); padding: .5rem 1rem;">
<span>Breaking News</span>
<span style="border-right: solid 2px rgb(50, 67, 100)"></span>
<span>21:03</span>
</div>
<div class="col col-sm-8 col-lg-9 col-xl-10 marquee-wrapper">
<div class="marquee">
<div style="width: 100000px; animation: 9.64667s linear 0s infinite normal none running marqueeAnimation-33044180; transform: translateX(1084px);" class="js-marquee-wrapper">
<div class="js-marquee" style="margin-right: 0px; float: left;">
<ul class="list-inline m-0 p-0">
<li class="list-inline-item">Some news</li>
<li class="list-inline-item">Another news</li>
<li class="list-inline-item">Yet Another news</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
/*
Theme Name: Galaxy One
Theme URI: https://galaxyone.news
Author: Loic Leuilliot
Author URI: https://github.com/warlof
Description: Galaxy One Gazette default template
Tags: newspaper, rising constellation, game, news
Version: 0.1
Requires at least: 5.0
Tested up to 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or Later
License URI: https://www.gnu.org/Licenses/gpl-2.0.html
Text Domain: galaxyone
*/
#font-face {
font-family: "Gtek Technology";
src: url("./assets/fonts/Gtek Technology.ttf") format('truetype');
font-weight: bold;
}
header h1 {
font-size: calc(1.375rem + 3vw);
font-family: "Gtek Technology", sans-serif;
margin-bottom: 0;
border-bottom: solid 4px var(--bs-primary);
}
.navbar-nav {
width: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.navbar-nav > li {
flex-grow: 1;
}
.navbar-nav .nav-link {
text-align: center;
text-transform: uppercase;
padding: .7rem 1rem;
border-top: 1px solid var(--bs-primary);
border-bottom: 1px solid var(--bs-primary);
}
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
color: var(--bs-primary);
}
.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .nav-link.active {
color: #fff;
background-color: var(--bs-primary);
}
.go-news .card-img-top {
height: 250px;
object-fit: cover;
object-position: 50% 0;
}
.go-news .stretched-link:hover::after {
background: #282c34dd url("./assets/img/plus-circle.svg") center no-repeat;
background-size: 50%;
transition: background-color 0.5s ease;
}
.go-category-link {
border-radius: 0;
border: none;
padding: 0.5rem;
text-transform: uppercase;
text-decoration: none;
}
.go-category-link.category-sport {
background-color: var(--bs-primary);
}
.go-category-link.category-politics {
background-color: var(--bs-danger);
}
.go-category-link.category-financial, .go-category-link.category-people {
background-color: var(--bs-warning);
}
.go-category-link.category-miscellaneous {
background-color: var(--bs-success);
}
.go-category-link.category-sciences {
background-color: var(--bs-secondary);
}
.page-item {
margin-right: 20px;
}
.page-item:last-child {
margin-right: 0;
}
.page-item:first-child .page-link {
border-radius: 0;
}
.page-item:last-child .page-link {
border-radius: 0;
}
.page-item.disabled .page-link {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.page-link {
background-color: transparent;
border-color: var(--bs-primary);
color: rgba(255,255,255,0.55);
}
.page-link:hover {
color: var(--bs-primary);
}
.page-link.dots:hover {
background-color: transparent;
border-color: var(--bs-primary);
color: rgba(255,255,255,0.55);
cursor: default;
}
.go-article-banner {
height: 300px;
}
.go-article-banner::after {
background: #333 url('...') no-repeat center;
background-size: cover;
content: "";
position: absolute;
height: 300px;
left: 0;
right: 0;
}
.go-streaming-news .marquee-wrapper {
background-color: #4472c455;
padding: 0.5rem;
}
.go-streaming-news .marquee {
overflow: hidden;
}
.go-streaming-news .marquee .list-inline-item {
border-right: solid 3px var(--bs-primary);
margin: 0;
padding: 0 0.5rem;
}
.go-streaming-news .marquee .list-inline-item:last-child {
border-right: none;
}
Well, I finally figure a way to do it properly (I think so at least).
Overall reference is this blog post https://css-tricks.com/full-width-containers-limited-width-parents/
I'm using the very last alternative as detailed by "No calc() needed" which is probably the more flexible solution.
First, here is the global DOM structure
<div class="container-fluid container-lg">
<header>
<nav></nav>
</header>
<article>
<header>
<div class="go-article-header">
<div class="go-article-banner" style="background-image: url('...');"></div>
<div class="go-article-title-wrapper">
<h3 class="display-3 m-0">Article title</h3>
</div>
</div>
</header>
<div class="go-article-content">
<p>...</p>
</div>
<footer></footer>
</article>
<footer></footer>
</div>
We have a unique container which is covering the overall page
Inside this container, there are a global header and footer with navigation inside the header
Between both, we have an article, container its own header and footer
The header is containing a few wrapper for extra styling (like background under title, and so on) - I also switched from img tag to a background in order to be able to use cover property. But here again, it's much more a design choice
Now, the styling :
.go-article-header {
height: 300px;
position: relative;
}
.go-article-banner {
position: relative;
left: 50%;
right: 50%;
width: 100vw;
height: 100%;
margin-left: -50vw;
margin-right: -50vw;
background-image: url("assets/img/eskari.png");
background-color: #333;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.go-article-title-wrapper {
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1rem;
}
Everything is happening with the .go-article-banner class which is first aligning the tag (using the left and right properties) and then make it start outside the box (using the margin properties). Last but not least, the width property using view width metric is ensuring the tag will use the full screen width.
Regarding title, we just need to fix it left/right/down using parent container. This is done with the .go-article-title-wrapper class.
Here is the final render
I want to align icons, that it look like the picture below. But Flexbox, Grid or tables are not allowed.
The black bars in the picture represents only text. I've tried several things but deleted them because it was not satisfactory. Below is my current code.
What have I to change, to get the Layout in the picture?
Current code:
/* ########################################################################## */
/* Global Settings */
/* ########################################################################## */
html, body{
width: 100%;
height:100%;
font-family: Arial, sans-serif;
font-size: 16px;
}
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
/* ########################################################################## */
/* Clearfix-Hack */
/* ########################################################################## */
.clearfix::after{
content:"";
clear:both;
display: block;
}
/* ########################################################################## */
/* Entire Page */
/* ########################################################################## */
.entire-page{
margin: 0 15%;
}
/* ########################################################################## */
/* Contact */
/* ########################################################################## */
section{
margin: 30px 0;
background-color: #ccc;
}
.headline{
text-align: center;
margin: 30px 0;
padding: 10px;
}
.row > div{
display:inline-block;
}
.social-media-container > div{
display: inline-block;
}
.icon{
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="src/css/styles5.css">
</head>
<body>
<!-- ########################################################################## -->
<!-- Entire Page -->
<!-- ########################################################################## -->
<div class="entire-page">
<!-- ########################################################################## -->
<!-- Contact -->
<!-- ########################################################################## -->
<section>
<div>
<div class="headline">
<span>Lorem ipsum dolor sit: </span>
</div>
<div class="row clearfix">
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>1234 – 567 890 123</p>
</div>
</div>
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>john#doe.com</p>
</div>
</div>
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>John Doe</p>
</div>
<div>
<p>USA</p>
</div>
<div>
<p>12345 City</p>
</div>
</div>
</div>
<div class="row clearfix">
<div class="social-media-container clearfix">
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>facebook.com/johndoe</p>
</div>
</div>
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>twitter.com/johndoe</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
Give with to icons in percentage and vertical-align:top and its parent to text-align:center.
/* ########################################################################## */
/* Global Settings */
/* ########################################################################## */
html, body{
width: 100%;
height:100%;
font-family: Arial, sans-serif;
font-size: 16px;
}
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
/* ########################################################################## */
/* Clearfix-Hack */
/* ########################################################################## */
.clearfix::after{
content:"";
clear:both;
display: block;
}
/* ########################################################################## */
/* Entire Page */
/* ########################################################################## */
.entire-page{
margin: 0 15%;
}
/* ########################################################################## */
/* Contact */
/* ########################################################################## */
section{
margin: 30px 0;
background-color: #ccc;
}
.headline{
text-align: center;
margin: 30px 0;
padding: 10px;
}
.row > div{
display:inline-block;
}
.social-media-container > div{
display: inline-block;
}
.icon{
text-align: center;
}
/*** solution ***/
.iconsFloat{
text-align: center;
}
.iconsFloat .icon{
width:32.5%;
vertical-align: top;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="src/css/styles5.css">
</head>
<body>
<!-- ########################################################################## -->
<!-- Entire Page -->
<!-- ########################################################################## -->
<div class="entire-page">
<!-- ########################################################################## -->
<!-- Contact -->
<!-- ########################################################################## -->
<section>
<div>
<div class="headline">
<span>Lorem ipsum dolor sit: </span>
</div>
<div class="row clearfix iconsFloat">
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>1234 – 567 890 123</p>
</div>
</div>
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>john#doe.com</p>
</div>
</div>
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>John Doe</p>
</div>
<div>
<p>USA</p>
</div>
<div>
<p>12345 City</p>
</div>
</div>
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>facebook.com/johndoe</p>
</div>
</div>
<div class="icon">
<div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
<div>
<p>twitter.com/johndoe</p>
</div>
</div>
</div>
<div class="row clearfix">
<div class="social-media-container clearfix">
</div>
</div>
</div>
</section>
</div>
</body>
</html>
I've recently discovered a neat way to do a masonry layout using columns, as found here: http://w3bits.com/css-masonry/. I've expanded on this layout by adding an overlay with text to each item upon hover. This works pretty well except for 2 problems:
The overlay is slightly larger than the image at the bottom. This persists even when different images are used.
The transitions do not work; the hover effect displays and hides abruptly.
Some explanations regarding my code:
I've added margin: 0; border:0; padding:0 to the entire document in an attempt to prevent problems just like this one, to no avail. .item has margin: 0 0 20px to provide vertical spacing between each item.
Because .item-overlay requires position:absolute to work, and position:absolute requires the parent element to be positioned, I've added position:relative to .item. This doesn't affect anything beyond allowing the overlay to show up correctly, as far as I can tell.
.item-overlay uses display:flex to vertically and horizontally centralise its content, but this shouldn't affect the layout.
Could someone help me figure out what's wrong with the code? JSFiddle: https://jsfiddle.net/nattanyz/sfn47me9/1/
Use vertical-align: top on the img and transition opacity instead of display
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: honeydew;
font-size: 16px;
line-height: 120%;
color: #333;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100vh;
width: 80vw;
max-width: 1200px;
margin: auto;
border: 0;
padding: 0;
column-count: 3;
column-gap: 20px;
}
.item {
display: block;
margin: 0 0 20px;
border: 0;
width: 100%;
position: relative;
}
.item-overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(51, 51, 51, 0.6);
color: white;
opacity: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(51, 51, 51, 0.6);
transition: opacity 300ms ease;
}
.item:hover .item-overlay {
opacity: 1;
}
.project-img {
width: 100%;
margin: 0;
border: 0;
padding: 0;
vertical-align: top;
}
.project-name {
font-weight: bold;
}
.project-category {
font-size: 0.75em;
text-transform: uppercase;
<body>
<div class="wrapper">
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
</div>
</body>
The overlay is slightly larger than the image at the bottom. This persists even when different images are used.
The problem is on the image itself, it has height smaller than the container. Try to put some background-color on the container, you will see that the overlay height is equal with it's parent.
The transitions do not work; the hover effect displays and hides abruptly.
You cannot implements transition on the css display, other alternative would be using opacity. I modified your code, please try.
html {
box-sizing:border-box;
}
*, *:before, *:after {
box-sizing:inherit;
}
body {
background-color:honeydew;
font-size: 16px;
line-height: 120%;
color: #333;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100vh;
width: 80vw;
max-width:1200px;
margin: auto;
border: 0;
padding: 0;
column-count: 3;
column-gap: 20px;
}
.item {
display:block;
margin: 0 0 20px;
border:0;
width:100%;
position:relative;
background-color: black;
}
.item-overlay {
position:absolute;
top:0;
left:0;
bottom:0;
width:100%;
background-color: rgba(51,51,51,0.6);
color:white;
opacity:0;
transition:300ms ease opacity;
display: flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.item:hover .item-overlay {
opacity: 1;
background-color: rgba(51,51,51,0.6);
}
.project-img {
width:100%;
margin:0;
border:0;
padding:0;
}
.project-name {
font-weight:bold;
}
.project-category {
font-size:0.75em;
text-transform:uppercase;
<body>
<div class="wrapper">
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
</div>
</body>
I am learning HTML and CSS. My <h3> text will not align to the center of the page. I know this has to do with the background width being 50%, but I need that in order for the page to be two colors. Any way around this?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
</i>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection">
<div class="row">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/8.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
</div>
</section>
<section class="contact-me">
<div class="contact">
<h3>Contact Me</h3>
</div>
</section>
And my CSS:
* {
/*background-color: rgb(0, 0, 0);*/
background: #070606;
}
/* HEADER */
.display {
height: auto;
width: 500px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
max-width: 100%;
border: 4px solid white;
border-radius: 6%;
}
.heading {
max-width: 100%;
}
.name {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 500%;
font-weight: 100;
text-align: center;
color: whitesmoke;
width: 100%;
margin-bottom: 20px;
margin-top: 15px;
}
h1:after {
display: block;
height: 2px;
background-color: #e62222; /*Great way to give single line color */
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
.fa {
margin-top: 18px;
}
.fa:link, /*Prevents color change when clicked */
.fa:visited {
text-decoration: none;
color: #bdc3c7;
}
.fa:hover,
.fa:active {
color: #ebedee;
}
/* GALLERY */
.work {
width: 300px;
height: 100%;
margin-top: 60px;
margin-bottom: 60px;
border: 3px solid white;
}
.title {
font-family: 'Prociono', serif;
font-size: 350%;
color: whitesmoke;
text-align: center;
padding-top:40px;
}
.affect img {
opacity: 0.2;
background-color: #070606;
transition: opacity .35s, transform .35s;
transform: scale(1.0);
}
.affect:hover img {
opacity: 1;
transform: scale(1.15);
}
/* CONTACT */
.contact {
background: linear-gradient(to right, black 50%, gray 50%);
}
h3 {
color: white;
text-align: center;
}
This rule in your CSS is setting the background color of every element to #070606, as you're using the asterisk, which is a wildcard selector that catches everything.
* { background: #070606; }
If you only meant to set the background color of the page to that color, use body instead of *.
Your text is not centered because text-align:center refers to the parent width so it means it's centered in the 50% wide div. In order to center it you can wrap contact and h3 in a wrapper with a position relative. Then set position absolute to h3 (you need to move it out of .contact div) and set 100% width for h3. It should work in that way. Remember that if you position if with absolute you need to set up height for parent.
.contact {
background-color: black;
background-attachment: fixed;
background-size: cover;
width: 50%;
overflow-x: hidden;
position: absolute;
height:100%;
}
h3 {
text-align: center;
font-size: 300%;
position: absolute;
width:100%;
}
.wrapper{
position:relative;
height:200px;
}
<section class="wrapper">
<div class="contact"></div>
<h3>Contact me</h3>
</section>
But this example is not a best approach. The best approach in this case is to make a gradient background (like showed in comments snippets) for the parent container with 50/50 of the colors. This won't make your HTML structure and CSS code messy.
I have a CSS menu using the checkbox:checked trick here
But my issue is that when the menu is open, the content overflows off the side of the parent div - How do I make the divs fluid so that that wrap around to the next row and push each other along?
I have looked at Flexible Boxes, I have never used them before, but feel this could be the right track.
I have created a JSFiddle that illustrates what I am trying to do.
Thank you :)
EDIT
I've done some experimenting and it is the magic combination of padding and box-sizing - I've also just stumbled upon this useful post => International box-sizing Awareness Day
EDIT
HTML:
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
</div>
</div>
CSS:
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container {
transition: left 1s;
left: 250px;
}
#container {
position: relative;
transition: left 1s;
left: 0px;
width: 100%;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
The problem is that you are moving the left value of offset menu, which moves the menu item to left 250px. Similar thing will occur if you use margin-left property, because of width:100%.
instead, if you increase the padding, which will cause the increment inwards and reduce width of parent container, causing the item elements to fall on next life if no space is found.
Check the below snippet, where i am changing the padding value
* {
box-sizing: border-box;
}
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container {
transition: padding 1s;
padding-left: 250px;
}
#container {
position: relative;
transition: padding 1s;
left: 0px;
width: 100%;
padding-left: 0;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
</div>
</div>
The problem is that you're moving the whole container so everything inside it moves too.
What you actually want to do is move the first .item.
input[type="checkbox"]:checked ~ #container .item:first-child {
transition: margin-left 1s;
margin-left: 250px;
}
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container .item:first-child {
transition: margin-left 1s;
margin-left: 250px;
}
#container {
position: relative;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
</div>
</div>
As per your JSFiddle example you have to change few properties :
HTML : one line has to added for clear the floating
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div style="clear:both"></div>
</div>
</div>
And the CSS would be :
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container {
transition: margin-left 1s;
margin-left: 250px;
}
#container {
position: relative;
transition: margin-left 1s;
margin-left: 0px;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}