sorry for my naivety I'm very new to web development and have to create this for a uni project. The problem I'm having is that I have a grid of image thumbnails that link to full res versions on a separate page, the last image in the grid has a link that shows up and pushes content out the footer and inspect element on the page says the link it within the footer div but in the code it's not there. Any help would be appreciated.
.grid {
margin-left: 15%;
margin-right: 15%;
margin-top: 10px;
margin-bottom: 10px;
overflow: hidden;
}
.square {
display: inline-block;
float: left;
position: relative;
width: 30%;
padding-bottom: 30%;
/* = width for a 1:1 aspect ratio */
margin: 1.66%;
overflow: hidden;
}
.content {
position: absolute;
height: 100%;
width: 100%;
padding: 0%;
}
/* For responsive images */
.content .rs {
width: auto;
height: auto;
max-height: 100%;
max-width: 100%;
}
.footer {
height: 45px;
width: 100%;
background-color: white;
overflow: auto;
position: -webkit-sticky;
position: sticky;
z-index: 1;
bottom: 0;
list-style-type: none;
overflow: hidden;
padding-bottom: 5px;
padding-top: 5px;
overflow: hidden;
}
.footer a {
display: inline;
color: black;
text-align: center;
padding-top: 5px;
padding-bottom: 10px;
text-decoration: none;
font-family: 'myntieregular';
src: url('myntie-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-size: 45px;
float: left;
text-decoration: none;
width: 33%;
text-align: center;
border-top-style: solid;
border-color: #c7c7c7;
border-width: 2px 0px;
}
<div class="grid">
<div class="square">
<div class="content">
<a href="Gallery\DSCF1629.html"><img class="rs" src="Images\Thumbnails\DSCF1629_Thumbnail.png" />
</div>
</div>
<div class="square">
<div class="content">
<a href="Gallery\DSCF1425.html"><img class="rs" src="Images\Thumbnails\DSCF1425_Thumbnail.png" />
</div>
</div>
<div class="square">
<div class="content">
<a href="Gallery\DSCF1723.html"><img class="rs" src="Images\Thumbnails\DSCF1723_Thumbnail.png" />
</div>
</div>
</div>
<div class="footer">
<img src="Image" alt="Instagram" style="width:30px;height:30px;">
<img src="Image" alt="Email" style="width:30px;height:30px;">
<img src="Image" alt="linkedin" style="width:30px;height:30px;">
</div>
Forgot to close the <a> tags within the "grid" divs.
It is hard to see since it is so off to the right.
Related
I created a cards-based horizontal scroller. And the cards are nicely scrolling inside the wrapper. The issue I'm having is that even after I applied the z-index to our member-owner-card-image, the photos still go under the card when I want to put them on the top of each card.
Is there any solution so that I can add the image on top of the card? I'm trying to fix it, but no solution has been found.
.scrolling-wrapper {
-webkit-overflow-scrolling: touch;
height: 331px;
width: 100%;
padding-inline: 40px;
position: relative;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
z-index: 0;
}
.scrolling-wrapper::-webkit-scrollbar {
display: none;
}
.card {
width: 100%;
flex: 0 0 auto;
background-color: green;
border-radius: 20px;
position: relative;
margin-right: 10px;
}
.our-member-owner-card-image {
position: absolute;
top: -30px;
z-index: 10;
}
.card-content {
position: absolute;
padding-top: 38px;
}
.member-detail {
padding-top: 55px;
line-height: 1.7;
}
.member-detail h3 {
text-align: center;
color: #263244;
font-weight: 700;
font-family: 'Lato';
}
.member-detail p {
text-align: center;
color: #737C89;
}
.member-description {
padding-inline: 20px;
color: #263244;
line-height: 1.6;
padding-top: 9px;
font-weight: 500;
font-size: 17px;
}
.member-description span {
color: red;
text-decoration: underline;
}
<div class="scrolling-wrapper">
<div class="card">
<div class="our-member-owner-card-image">
<img width="220px" src="https://images.unsplash.com/photo-1661961110144-12ac85918e40?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
</div>
<div class="card-content">
<div class="member-detail">
<h3>Sohaib</h3>
<p>Chairman</p>
</div>
<div class="member-description">
Sohaib Ashraf has extensive work experience during his career
of more than 25 years in the financial services sector.<span
>Read more</span
>
</div>
</div>
</div>
<div class="card">
<div class="our-member-owner-card-image">
<img width="220px" src="https://images.unsplash.com/photo-1661961110144-12ac85918e40?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
</div>
<div class="card-content">
<div class="member-detail">
<h3>Sohaib Ashraf</h3>
<p>Chairman</p>
</div>
<div class="member-description">
Sohaib Ashraf has extensive work experience during his career
of more than 25 years in the financial services sector.<span
>Read more</span
>
</div>
</div>
</div>
</div>
You could add the image as a background-image to the card. I added few examples how you can use background-image:
.card{
width: 400px;
height: 300px;
margin: 10px;
border-radius: 6px;
background-color: gray;
}
.card-1, .card-2 .image, .card-3 .image{
/* Here, we use background-image to set the image */
background-image: url("https://images.unsplash.com/photo-1661961110144-12ac85918e40?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
/* The background should be a cover photo,
so it fills the whole card: */
background-size: cover;
/* We don't want the image to repeat itself */
background-repeat: no-repeat;
/* When the ratio of the image changes, it will zoom into
this point, which we want to happen in the center of the image */
background-position: center;
}
.card-2, .card-3{
display: grid;
grid-template-rows: 1fr 1fr;
}
.card-2 .image{
border-radius: 6px 6px 0px 0px;
}
.card-3{
padding: 10px;
}
/* This is to demonstrate: */
h2{
color: white;
display: flex;
justify-content: center;
font-family: sans-serif;
}
<div class="card-1 card">
<h2>Test title</h2>
</div>
<div class="card-2 card">
<div class="image"></div>
<div class="content">
<h2> Test title</h2>
</div>
</div>
<div class="card-3 card">
<div class="image"></div>
<div class="content">
<h2> Test title</h2>
</div>
</div>
How to make this div starts after the picture.
It starts from the beginning of the container.
I have added /float: left;/ in profile image.
enter image description here
HTML and CSS Code:
.profile{
border: 1px solid #ddd;
padding: 22px;
min-height: 150px;
}
.profile img{
max-width: 150px;
width: 100%;
float: left;
}
.profile #details{
margin-left: 50px;
}
<section class="profile">
<img src="https://www.sonypark360.net/wp-content/uploads/2017/08/profile-pictures.png" alt="profile">
<div id="details">
<h1>Name</h1>
<h2>Age</h2>
<h3>City, Country</h3>
</div>
</section>
This code should work for you
.my-profiles {
border: 1px solid #b2cbe3;
padding: 22px;
font-family: arial;
display: inline-block;
}
.my-profiles img{
max-width: 100px;
width: 100%;
border-radius: 50%;
float: left;
}
.my-profiles .details {
overflow-x: hidden;
padding-top: 10px;
padding-left: 8px;
display: inline-block;
}
.my-profiles .details * {
margin: 0px;
font-size: 22px;
font-weight: 200;
}
<div class="my-profiles">
<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png">
<div class="details">
<h2>Name</h2>
<h2>Age</h2>
<h2>City, Country</h2>
</div>
</div>
I can't get this to work :( I'm just trying to float the image slightly outside the box (half in, half out) above the name but in the center. What am I doing wrong here?
body {
margin-top: 100px;
}
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align: center;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
max-width: 100%;
height: auto;
position: absolute;
text-align: center;
}
.box_info_name_inside {}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
Here is a fiddle: https://jsfiddle.net/ffxyc6d0/1/
try This One :
body{
margin-top:100px;
}
.box_info{
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align:center;
}
.box_info_name{
display: block;
font-size: 24px;
}
.box_info_logo{
width: 150px;
height: 150px;
position: relative;
bottom: 50px;
text-align:center;
}
.box_info_name_inside{
}
<body>
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
</body>
If the image is fixed size (not going to change dynamically) you can position it with a negative margin of half the images height, e.g. margin-top: -85px; (Take an extra -10px off as well as the half image height since there's 20px of padding on the parent container)
Example below:
body {
margin-top: 100px;
}
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align: center;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
display: inline-block;
margin-top: -85px;
max-width: 100%;
height: auto;
text-align: center;
}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
You can do it with flexbox as well :)
body{
margin-top:100px;
}
.box_info{
background: #ccc;
}
.box_info_name{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-size: 24px;
}
.box_info_logo{
position: relative;
margin-top: -75px;
}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150/fff" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
I like to give 'outside the box' answers to questions like this, without using javascript having to change all the margins gets to be a little annoying. So I've tackled it another way. Rather than moving everything around the page why not just make part of the background transparent.
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 95px, #DDD 95px);
border-radius: 4px;
text-align: center;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
text-align: center;
}
.box_info_name_inside {}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
<div class="box_info">
<div class="box_info_name">
<img width="150px" src="https://lh4.googleusercontent.com/-1rv6qW3mpvA/AAAAAAAAAAI/AAAAAAAAS3M/xq0SSZzrgVg/photo.jpg" class="box_info_logo">
<div class="box_info_name_inside">Andrew Bone</div>
</div>
</div>
I've used background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 95px, #DDD 95px); to say anything after 95px should be #DDD and before that needs to be transparent.
95px is height of the image (150px) divided by 2 (75px) plus the padding of the outer box (20px).
Which is great if the image size stays the same, if you plan on it changing then we might need to look at adding a little javascript.
linear-gradient is not supported in IE6 but is in modern IE as well as Edge, Chrome, and firefox.
I hope you find this helpful.
I'm not sure if I'm understanding your question correctly, but maybe this is waht you wan't.
I've simply removed the position: absolute from your .box_info_logo class.
Like this:
body{
margin-top:100px;
}
.box_info{
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align:center;
}
.box_info_name{
display: block;
font-size: 24px;
}
.box_info_logo{
max-width: 100%;
height: auto;
text-align:center;
}
.box_info_name_inside{
}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
To keep .box_info the same size as that in your jsfiddle example, you can add position: relative to this class whilst keeping .box_info_logo as position: absolute.
body {
margin-top: 150px;
}
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align: center;
position: relative;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
max-width: 100%;
height: auto;
position: absolute;
text-align: center;
left: 0;
right: 0;
margin: auto;
bottom: 50px;
}
.box_info_name_inside {}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
I'm experiencing an issue with my text where I don't see it at all, or it doesn't act as though I would think it would in a flexbox. I have three images in the flexbox right now, but I would like to place small 'captions' under each of them(not in the p element, the purple, but I would like to place it on the white, which is right under the purple box(the p element). I thought that by adding a child element, that element would at least line up vertically with the element above it but I guess I'm wrong. Can anyone help? Another piece of info is that really my images are 250 pixels, but I wanted to accommodate for a snippet so I made it 50 pixels, but that's probably irrelevant.
#footer {
display: flex;
height: 130px;
width: 100%;
background-color: #862d59;
clear: both;
}
#footer, #wrapper:after{
height: 130px;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sub {
padding: 12px;
width: 32%;
height: 100px;
color: white;
border-right: solid white 1px;
}
.sub:last-child {
border: 0px;
}
html {
height: 100%;
}
body {
height: 100%;
margin:0;
font-family: courier;
font-size: 22px;
color: white;
}
#wrapper {
position: relative;
margin-left: auto;
margin-right: auto;
width: 85%;
min-height: 100%;
margin-top: -130px;
}
#inner {
position:absolute;
display:flex;
flex-wrap: wrap;
height: 600px;
top:50%;
align-items: center;
justify-content: space-between;
margin-top: -300px;
align-content: center;
width: 100%;
}
#inner p {
background-color: #26004d;
padding: 60px;
border-radius: 9px;
}
#inner img {
border-radius: 8px;
}
<div id="wrapper">
<div id="inner">
<p><img src="cat1.jpeg" alt="Picture of a cat" width="50" height="50"></p>
<p><img src="dog1.jpg" alt="Picture of a cat" width="50" height="50"></p>
<p><img src="park.jpg" alt="Picture of a cat" width="50" height="50"></p>
</div>
</div>
<div id="footer">
<div class="wrap">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
</div>
Without additional info / image, here's the solution I was able to come up with. If you want to keep each image / caption grouped together, wrap them in another parent div. Then just add the caption below that, which is a block element and should flow below the image, as intended. Snippet below.
#footer {
display: flex;
height: 130px;
width: 100%;
background-color: #862d59;
clear: both;
}
#footer, #wrapper:after{
height: 130px;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sub {
padding: 12px;
width: 32%;
height: 100px;
color: white;
border-right: solid white 1px;
}
.sub:last-child {
border: 0px;
}
html {
height: 100%;
}
body {
height: 100%;
margin:0;
font-family: courier;
font-size: 22px;
color: white;
}
#wrapper {
position: relative;
margin-left: auto;
margin-right: auto;
width: 85%;
min-height: 100%;
}
#inner {
position:absolute;
display:flex;
flex-wrap: wrap;
height: 600px;
top:50%;
align-items: center;
justify-content: space-between;
margin-top: -300px;
align-content: center;
width: 100%;
}
#inner p {
background-color: #26004d;
padding: 60px;
border-radius: 9px;
}
#inner p.caption {
color: #000;
background-color: transparent;
border-radius: 0;
}
#inner img {
display: block;
border-radius: 8px;
}
<div id="wrapper">
<div id="inner">
<div class="image-wrapper">
<p>
<img src="http://placehold.it/100x100" alt="Picture of a cat">
</p>
<p class="caption">Caption</p>
</div>
<div class="image-wrapper">
<p>
<img src="http://placehold.it/100x100" alt="Picture of a cat">
</p>
<p class="caption">Caption</p>
</div>
<div class="image-wrapper">
<p>
<img src="http://placehold.it/100x100" alt="Picture of a cat">
</p>
<p class="caption">Caption</p>
</div>
</div>
</div>
<div id="footer">
<div class="wrap">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
</div>
Let me know if you have any questions, or if this doesn't satisfy your description.
So I have a silly question, how do I get my divs on the right side? I have main content but I need to set up four divs on the right side. It looks like this and I need to add div1 - 4. Am I supposed to add width:100%; float: left in .main_container?
Question #2 - I would like to group main_info1 - 3 under one div like main so that I could use .main in css with max-width: 900px; overflow: hidden; margin-left: 20px; attributes for all divs without the need for repeating but when I do that main_info2 jumps up and ignores main_info1 lists. Thanks.
HTML:
<div class="main_container">
<div class="title_container">
<h1>Title</h1>
</div>
<aside>
<div class="small_blocks">
<div class="block1">
<span>Text</span>
</div>
<div class="block2">
<span>Text</span>
</div>
</div>
</aside>
<div class="content clearfix">
<div class="image1">
<img src="img/img1.jpg">
</div>
<div class="image2">
<img src="img/img2.jpg">
</div>
</div>
<div class="main_info">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="main_info2 clearfix">
<h2>Title</h2>
<ul>
<li>
<p>Text</p>
</li>
</ul>
</div>
<div class="main_info3 clearfix">
<h2>Title</h2>
<p>Text</p>
</div>
</div>
CSS:
.main_container {
width: 1360px;
margin: 0 auto;
background: url("../img/bg.jpg") left top no-repeat;
background-color: #0c0334;
}
.title_container {
display: table;
}
.title_container h1 {
float: left;
display: table-cell;
vertical-align: top;
margin-top: 50px;
margin-left: 20px;
line-height: 66px;
}
.small_blocks {
min-width: 900px;
overflow: hidden;
}
.small_blocks div {
height: 55px;
margin-top: 30px;
}
.small_blocks .block1 {
float: left;
margin-left: 20px;
background: #390b5d;
width: 595px;
line-height: 52px;
}
.small_blocks .block1 span {
font-size: 30px;
padding-left: 20px;
font-weight: 100;
}
.small_blocks .block2 {
float: left;
width: 285px;
background: #e26c34;
padding-left: 20px;
line-height: 52px;
vertical-align: middle;
}
.small_blocks .block2 span {
font-size: 30px;
padding-left: 10px;
font-weight: 100;
vertical-align: middle;
display: inline-block;
}
.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.content {
width: 900px;
height: 377px;
overflow: hidden;
margin: 20px 0 0 20px;
}
.content .image1 {
float: left;
width: 268px;
}
.content .image2 {
float: left;
margin-left: 10px;
width:100%;
max-width: 622px;
}
.main_info {
max-width: 900px;
overflow: hidden;
margin-top: 60px;
margin-left: 20px;
}
.main_info h2 {
height: 34px;
border-bottom: 1px solid #390b5d;
}
.main_info2 {
max-width: 900px;
overflow: hidden;
margin: 60px 0px 0px 20px;
background: #110321;
}
.main_info2 h2 {
background: #390b5d;
min-height: 55px;
width: 880px;
padding-left: 20px;
height: 34px;
color: #fff;
line-height: 52px;
}
.main_info3 {
max-width: 900px;
overflow: hidden;
margin: 60px 0px 0px 20px;
background: #390b5d;
}
.main_info3 h2 {
min-height: 55px;
width: 880px;
padding-left: 20px;
height: 34px;
color: #fff;
line-height: 52px;
}
I think you are a newbie. You should work hard to master in HTML and CSS. :)
However, here is a solution. Please inspect them closely. Hopefully you will get your answers.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
display: block;
}
.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.wrapper {
min-width: 1000px;
max-width: 1360px;
margin: 0 auto;
padding: 0 20px;
}
.title_container {
padding-top: 50px 0 30px;
}
.title_container h1 {
line-height: 66px;
}
.small_blocks {
height: 55px;
overflow: hidden;
margin-bottom: 20px;
font-size: 30px;
font-weight: 100;
line-height: 52px;
color: #fff;
}
.small_blocks > div {
height: inherit;
float: left;
padding-left: 20px;
}
.small_blocks .block1 {
background: #390b5d;
width: 66.111111%;
}
.small_blocks .block2 {
width: 33.888889%;
background: #e26c34;
}
.content {
/*height: 377px;*/
overflow: hidden;
margin-bottom: 60px;
}
.content > div img {
width: 100%;
height: auto;
}
.content .image1 {
float: left;
width: 29.777778%;
}
.content .image2 {
float: left;
width: 70.222222%;
padding-left: 10px;
}
.main_container {
width: 68.181818%;
float: left;
}
.main_info {
margin-bottom: 60px;
background: #d7d7d7;
}
.main_info .head {
padding-left: 20px;
background: #000;
color: #fff;
}
.main_info h2 {
height: 34px;
line-height: 34px;
}
.main_info .body {
padding: 20px;
}
.sidebar {
width: 31.818182%;
padding-left: 20px;
float: right;
}
.sidebar_block {
min-height: 150px;
margin-bottom: 20px;
padding: 20px;
background: #000;
color: #fff;
}
<div class="wrapper">
<header class="title_container">
<h1>Title</h1>
</header>
<main class="main_container">
<div class="small_blocks">
<div class="block1">
<span>Block 1</span>
</div>
<div class="block2">
<span>Block 2</span>
</div>
</div>
<div class="content clearfix">
<div class="image1">
<img src="http://dummyimage.com/268x377/000/fff.jpg&text=image1">
</div>
<div class="image2">
<img src="http://dummyimage.com/622x377/000/fff.jpg&text=image2">
</div>
</div>
<section class="main_info">
<div class="head">
<h2>Main Info-1 h2</h2>
</div>
<div class="body">
Main info 1
</div>
</section>
<section class="main_info">
<div class="head">
<h2>Main Info-2 h2</h2>
</div>
<div class="body">
Main info 2
</div>
</section>
<section class="main_info">
<div class="head">
<h2>Main Info-3 h2</h2>
</div>
<div class="body">
Main info 3
</div>
</section>
</main>
<aside class="sidebar">
<section class="sidebar_block">Div 1</section>
<section class="sidebar_block">Div 2</section>
<section class="sidebar_block">Div 3</section>
<section class="sidebar_block">Div 4</section>
</aside>
</div>
Regarding the questions in your comment:
Actually float works. As you use a fixed width width: 420px;, probably there has no enough space for the second ul to accommodate it in a single row. Use width: 50%; or below and see the changes. Or, you can check it in a wider screen, like, 1360px resolution.
Yes, for smaller devices.
This is a basic example. I used percentage values for the column width. So columns may become very narrower in smaller devices. To prevent that, I used min-width: 1000px for .wrapper. This will prevent narrower column width, but cause a horizontal scroll-bar in smaller devices.