I have used flexbox already to try this, but for some reason it isn't working. On a smaller screen size, everything's centered. I tried doing justify-content: center for flexbox, but that isn't working. I will put down the code snippet as well as screen shots showing what I'm seeing. You may look at snippet, but it uses a combination of percents and pixels, so it may look weird. Can I handle simple centering without media queries? Even if I did use one, I still can't get it to center on my desktop.
html {
height: 100%;
}
body{
height: 100%;
margin: 0;
font-family: courier;
font-size: 19px;
}
#container {
min-height: 100%;
margin-bottom: -150px;
width: 100%;
}
#container:after {
content: "";
display: block;
}
#content{
display:flex;
float:left;
width: 800px;
flex-wrap: wrap;
justify-content: center;
}
#footer, #container:after{
height: 150px;
}
#footer{
background-color: #006699;
clear: both;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sub {
padding: 12px;
width: 32%;
height: 120px;
color: white;
border-right: solid white 1px;
}
.sub:last-child{
border: 0px;
}
#leftbar{
width: 10%;
height: calc(100vh - 150px);
background-color: black;
float:left;
}
#rightbar{
width: 10%;
height: calc(100vh - 150px);
background-color: black;
float: right;
}
#nav {
list-style: none;
font-weight: bold;
width: 100%;
text-align: center;
background: rgba(0, 102, 153, 0.4);
height: 100px;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: auto;
// background-color: #006699;
text-align: center;
}
#nav li {
margin: 0px;
display: inline-block;
}
#nav li a {
padding: 10px;
display: inline-block;
text-decoration: none;
font-weight: bold;
font-size: 30px;
color: white;
// background-color: #006699;
}
#nav li a:hover {
color: white;
text-shadow: 2px 2px 4px white;
}
.clear {
clear: both;
}
div.img {
margin: 5px;
border: 1px solid #595959;
float: left;
width: 180px;
}
div.img:hover{
border: 1px solid #b3b3ff;
}
div.img img {
width: 100%;
height: auto;
}
div.desc{
padding: 15px;
text-align: center;
}
div.head{
text-align:center;
background-color:black;
color: orange;
}
<!DOCTYPE HTML>
<html>
<head lang="en">
<link rel="stylesheet" type="text/css" href="new.css" />
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script>
</script>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li>Home</li>
<li>Works</li>
<li>About</li>
</ul>
</div>
<div class="clear"></div>
<div class="upperbox">
<div id="leftbar"> </div>
<div id="rightbar"></div>
<div id="content">
<div class="img">
<div class="head">Color Palettes</div>
<img src="purple.png" alt="the color purple">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="blue.png" alt="the color blue">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="yellow.png" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="brown.jpg" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="grey.jpg" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="green.png" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="red.png" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="gold.jpg" alt="the color yellow">
<div class="desc">Color</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="wrap">
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum </div>
<div class="sub">Lorem Ipsum </div>
</div>
</div>
</body>
</html>
erase float:left; from #content and add margin: 0 auto to it.
You can either give your #content the CSS of margin: 0 auto;, like so:
#content {
margin: 0 auto;
}
(Maybe you will also have to not float it to the left)
Or you could take a look at other modern possibilities for centering an element:
https://css-tricks.com/centering-percentage-widthheight-elements/
https://css-tricks.com/centering-in-the-unknown/
https://codemyviews.com/blog/how-to-center-anything-with-css
Related
I need "tumbnail.jpg" , "child.png" and "nanny.png" to be in square shape.
also "tumbnail.jpg" as a thumbnail. (It's already a thumbnail I guess)
other two I need them as just squared images side by side. Please help me with this. I tried to solve this since 4 days but I couldn't.
how should I style those 3 to be squared?
body { background-image: url( "bg.jpg" ); }
h2, p { text-align: center; }
.lulu{font-family:Copperplate, Papyrus, fantasy;
text-align: center;
font-weight: bolder;
}
.parent{ background-color:lightgrey;
width: 80%;
margin-left: auto;
margin-right: auto;
height:200px;}
.column {
float: left;
width: 30%;
padding: 5px;
}
.child-1{
background-color:lightgray;
width:73%;
float:center;
height:900px;
text-align:center;
padding-top:50px;
padding-bottom:50px;
padding-right:50px;
padding-left:50px;
margin-left:130px;
margin-right:150px;
margin-top:80px;
margin-bottom:80px;
}
.child-1 p {
color: white;
padding-left: 10px;
padding-right:10px;
padding-top: 50px;
text-align:center;
width:80%;}
.child-2{
background-color:aliceblue;
width:300px;
float:right;
height:400px;
margin:50px;
text-align:left;
padding-left:10px;}
.child-2 p{
color: black;
padding-left: 10px;
padding-right:10px;
padding-top: 50px;
text-align:left;
width:80%;}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=styles.css>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>Daycare Center</title>
</head>
<body>
<div>
<div class="parent">
<header>
<h1 class="lulu"> DAYCARE</h1>
</header>
<style>
img {
border: 1px solid #ddd;
border-radius:2px;
padding: 5px;
max-width:auto;
max-height:auto;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<img src="tumbnail.jpg" alt="kids" style="width:100px" style="height:100px">
</div>
<div>
<div class="child-1">
<h3 style="color:white;">
Child care: Making the best choice
for your family</h3>
<p>.</p>
<div class="row">
<div class="column">
<style>
img {
border: 1px solid #ddd;
border-radius:50%;
padding: 5px;
max-width:auto;
max-height:auto;
}
</style>
<img src="house.jpg" alt="house" style="width:100px" style="height:100px">
</div>
<div class="column">
<style>
img {
border: 1px solid #ddd;
border-radius:50%;
padding: 5px;
max-width:auto;
max-height:auto;
}
</style>
<img src="heart.jpg" alt="heart" style="width:100px" style="height:100px">
</div>
<div class="column">
<style>
img {
border: 1px solid #ddd;
border-radius:50%;
padding: 5px;
max-width:auto;
max-height:auto;
}
</style>
<img src="feet.jpg" alt="feet" style="width:100px" style="height:100px">
</div>
<div class="row">
<div class="column">
<img src="child.png" alt="child" style="width:100%">
</div>
<div class="column">
<img src="nanny.png" alt="nanny" style="width:100%">
</div>
</div>
<div>
<div style="position:relative; right:8px; top:90px;">
<div class="child-2">
<h3>About us:</h3>
<p>.</p>
<h3>Our Service</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<main>
<section>
</section>
</main>
</div>
</body>
</html>
It is not ideal to use several differant styling options on one page.
It is recommened that all styling is maintained seperately from your pages code.
e.g by using a css.
Using the img tag in your css will affect ALL img tags in your code.
If you want to add additional specific changes to certain images then you should add a class e.g
<img class="fill"/>
.fill {
width:100%;
height:100%;
}
SPECIFICITY
If an item in your css is after a conflicting class the subsequent one will take priority as long as the element doesn't have a more dominat identifier.
You can read more about that here: https://www.w3schools.com/css/css_specificity.asp
For this example, having .fill after img will cause this image to be width and height 100% rather than 100px
EXAMPLE
img {
background:#cdf;
width:100px;
height:100px;
}
.fill {
width:100%;
height:100%;
}
<img src="https://i.stack.imgur.com/BxBTo.png">
<img class="fill" src="https://i.stack.imgur.com/BxBTo.png">
I recommend you clear the styling from your html and add it to your css.
body {
background-image: url("bg.jpg");
}
h2,
p {
text-align: center;
}
img {
border: 1px solid #ddd;
border-radius: 2px;
padding: 5px;
height: 100px;
width: 100px;
max-width: auto;
max-height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
.lulu {
font-family: Copperplate, Papyrus, fantasy;
text-align: center;
font-weight: bolder;
}
.parent {
background-color: lightgrey;
width: 80%;
margin-left: auto;
margin-right: auto;
height: 200px;
}
.column {
float: left;
width: 30%;
padding: 5px;
}
.child-1 {
background-color: lightgray;
width: 73%;
float: center;
height: 900px;
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
padding-right: 50px;
padding-left: 50px;
margin-left: 130px;
margin-right: 150px;
margin-top: 80px;
margin-bottom: 80px;
}
.child-1 p {
color: white;
padding-left: 10px;
padding-right: 10px;
padding-top: 50px;
text-align: center;
width: 80%;
}
.child-2 {
background-color: aliceblue;
width: 300px;
float: right;
height: 400px;
margin: 50px;
text-align: left;
padding-left: 10px;
}
.child-2 p {
color: black;
padding-left: 10px;
padding-right: 10px;
padding-top: 50px;
text-align: left;
width: 80%;
}
<div>
<div class="parent">
<header>
<h1 class="lulu"> DAYCARE</h1>
</header>
<img src="tumbnail.jpg" alt="kids">
</div>
<div>
<div class="child-1">
<h3 style="color:white;">Child care: Making the best choice for your family</h3>
<p>.</p>
<div class="row">
<div class="column">
<img src="house.jpg" alt="house">
</div>
<div class="column">
<img src="heart.jpg" alt="heart">
</div>
<div class="column">
<img src="feet.jpg" alt="feet">
</div>
<div class="row">
<div class="column">
<img src="child.png" alt="child" style="width:100%">
</div>
<div class="column">
<img src="nanny.png" alt="nanny" style="width:100%">
</div>
</div>
<div>
<div>
<div class="child-2">
<h3>About us:</h3>
<p>.</p>
<h3>Our Service</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<main>
<section>
</section>
</main>
</div>
</div>
</div>
</div>
I want to make the images in day_time_block can cover the title class.
I also want to make all contents in day_time_block can be shown by overflow-x, but when adding overflow-x: auto; in scroll div, the images in day_time_block were covered by title div. like the following code. How to fix it?
HTML:
<html>
<body>
<div>
<div class="daily_content">
<div class="title">
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="img_title"/>
<div class="daily_title">Title</div>
</div>
<div class="scroll">
<div class="day_time_block">
<div class="day_time_text">Sunday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Monday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Tuesday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Wednesday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Thursday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
<style>
body {
margin: 0px;
}
.title {
background: #ED3632;
height: 25px;
}
.img_title {
width: 30px;
height: 20px;
float: left;
margin-left: 15px;
margin-right: 5px;
}
.daily_title {
color: #f6ff52;
font-size: 1em;
}
.daily_content {
background: #000000;
height: 3000px;
}
.scroll {
color: #ffffff;
font-size: 1em;
width: 480px;
overflow-x: auto;
white-space: nowrap;
background-color: aqua;
border: 1px red solid;
display: flex;
}
.day_time_block {
float: left;
color: #ffffff;
font-size: 1em;
padding-left: 8px;
}
.day_time_text {
font-size: 1em;
display: inline-block;
}
.daily_img {
width: 30px;
height: 20px;
margin-left: 10px;
position: relative;
top: -10px;
}
</style>
overflow work with display:block...but if you want to use display:flex then create parent div for that and make this display:block and apply overflow on parent div.
I have added 9 cards to the website I'm making and I'm having two issues.
(1) How do I center the 9 cards? As it is more to the left and not centered to the screen.
(2) How do I remove the scroll bar? It seems like the spacing between the top and bottom cards and also below the bottom cards is a lot therefore its moving down and has a scroll bar.
Website Image
<!DOCTYPE html>
<html>
<head>
<title>Discover | Sweeties</title>
<header>
<div class="header">
<nav class="navigation">
Sweeties | Popular Destinations
<div class="navbar-right">
Home
Discover
About Us
Contact
About Developer
</div>
</nav>
<style>
.navigation{
padding-top:30px;
padding-bottom:30px;
position:absolute;
top:0;
width:100%;
z-index:1001;
}
.navbar-right{
float:right;
padding-right:10%;
}
.navbar-right a{
text-decoration:none;
padding:10px;
color: #FFFFFF;
font-family:Calibri;
font-weight:900;
font-size: 25px;
}
.navbar-right a:hover{
text-decoration:underline;
}
.navbar-logo{
padding-left:10%;
font-family:Calibri;
font-size:30px;
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
}
.video-container {
z-index: -100;
width:100%;
height:75%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}
#video-bg{
width:100%;
}
.portfolio-section{
margin-top:50%;
}
.tagline-left{
float:left;
width:50%;
text-align:center;
}
.tagline-right{
float:right;
width:50%;
text-align:center;
}
.tagline-video{
width:75%;
}
.tagline-right-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:17%;
font-family:Calibri;
color:#FFFFFF;
width:290px;
font-size:40px;
}
.tagline-left-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:11%;
font-family:Calibri;
color:#fff;
width:375px;
font-size:40px;
}
</style>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
z-index: -1001;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0,0,0,0.7);
}
.content h1 {
text-align: center;
font-size: 100px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 50px;
letter-spacing: 3px;
color: #aaa;
}
</style>
</head>
<body>
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
<source src="Videos/beach1.mp4" type="video/mp4">
</video>
</div>
</body>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
font-family: Calibri;
}
.main{
margin: 3%;
}
.card{
width: 20%;
background-color: white;
display: inline-block;
box-shadow: 2px 2px 20px black;
border-radius: 25px;
margin: 2%;
}
.image img{
width: 100%;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.title{
text-align: center;
padding: 20px;
}
h1{
font-size: 40px;
}
h2{
font-size: 22px;
}
.des{
padding: 3px;
text-align: center;
padding-top: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
button{
margin-top: 40px;
margin-bottom: 10px;
background-color: white;
border: 1px solid black;
border-radius: 100px;
padding:10px;
}
button:hover{
background-color: black;
color: white;
transition: .5s;
cursor: pointer;
}
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.card {
position: relative;
overflow: hidden;
}
.card img {
max-width: 100%;
transition: all 0.3s;
display: block;
width: 100%;
height: auto;
transform: scale(1.20);
}
.card:hover img {
transform: scale(1);
}
</style>
<body>
<div class="main">
<div class="card">
<div class="image">
<img src="Images/rakiraki.jpg">
</div>
<div class="title">
<h1>
Rakiraki</h1>
</div>
<div class="des">
<h2>Dive Wananavu</h2>
<button onclick="document.location='https://www.tripadvisor.com/Attraction_Review-g297568-d3850463-Reviews-Dive_Wananavu-Rakiraki_Viti_Levu.html'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/Lautoka.jpg">
</div>
<div class="title">
<h1>
Lautoka</h1>
</div>
<div class="des">
<h2>Koroyanitu National Heritage Park</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/nadi.jpg">
</div>
<div class="title">
<h1>
Nadi </h1>
</div>
<div class="des">
<h2>Denarau Island</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/sigatoka.jpg">
</div>
<div class="title">
<h1>
Sigatoka</h1>
</div>
<div class="des">
<h2>Sand Dunes</h2 >
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/ph.jpg">
</div>
<div class="title">
<h1>
Pacific Harbour</h1>
</div>
<div class="des">
<h2>Arts Village</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/suva.jpg">
</div>
<div class="title">
<h1>
Suva</h1>
</div>
<div class="des">
<h2>Museum</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/Labasa.jpg">
</div>
<div class="title">
<h1>
Labasa</h1>
</div>
<div class="des">
<h2> KokoMana Vuadomo Waterfall</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/savusavu.jpg">
</div>
<div class="title">
<h1>
Savusavu</h1>
</div>
<div class="des">
<h2>KokoMana Coco Farm</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The best approach that I would suggest is flex.
I have added some custom style to yoy existing code just to make it fine in flex.
Here is my additional css added.
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
display: flex;
flex-direction: column;
}
.des {
flex-grow: 1;
justify-content: space-between;
display: flex;
flex-direction: column;
}
Your working fiddle.
.navigation {
padding-top: 30px;
padding-bottom: 30px;
/* position: absolute;
top: 0; */
width: 100%;
z-index: 1001;
}
.navbar-right {
float: right;
padding-right: 10%;
}
.navbar-right a {
text-decoration: none;
padding: 10px;
color: #ffffff;
font-family: Calibri;
font-weight: 900;
font-size: 25px;
}
.navbar-right a:hover {
text-decoration: underline;
}
.navbar-logo {
padding-left: 10%;
font-family: Calibri;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
}
#video-bg {
width: 100%;
}
.portfolio-section {
margin-top: 50%;
}
.tagline-left {
float: left;
width: 50%;
text-align: center;
}
.tagline-right {
float: right;
width: 50%;
text-align: center;
}
.tagline-video {
width: 75%;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
z-index: -1001;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.7);
}
.content h1 {
text-align: center;
font-size: 100px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 50px;
letter-spacing: 3px;
color: #aaa;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Calibri;
}
.main {
/* Commented */
/* margin: 3%; */
}
.card {
width: 20%;
background-color: white;
display: inline-block;
box-shadow: 2px 2px 20px black;
border-radius: 25px;
margin: 2%;
}
.image img {
width: 100%;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.title {
text-align: center;
padding: 20px;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 22px;
}
.des {
padding: 3px;
text-align: center;
padding-top: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
button {
margin-top: 40px;
margin-bottom: 10px;
background-color: white;
border: 1px solid black;
border-radius: 100px;
padding: 10px;
}
button:hover {
background-color: black;
color: white;
transition: 0.5s;
cursor: pointer;
}
.card {
position: relative;
overflow: hidden;
}
.card img {
max-width: 100%;
transition: all 0.3s;
display: block;
width: 100%;
height: auto;
transform: scale(1.2);
}
.card:hover img {
transform: scale(1);
}
/* Custom styles */
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.card {
display: flex;
flex-direction: column;
}
.des {
flex-grow: 1;
justify-content: space-between;
display: flex;
flex-direction: column;
}
body {
background: cadetblue;
}
<header>
<div class="header">
<nav class="navigation">
Sweeties | Popular Destinations
<div class="navbar-right">
Home
Discover
About Us
Contact
About Developer
</div>
</nav>
</div>
</header>
<div class="background-wrap">
<video
id="video-bg-elem"
preload="auto"
autoplay="true"
loop="loop"
muted="muted"
>
<source src="https://youtu.be/ujKVJcwbpRo" type="video/mp4" />
</video>
</div>
<div class="main">
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Rakiraki
</h1>
</div>
<div class="des">
<h2>Dive Wananavu</h2>
<button
onclick="document.location='https://www.tripadvisor.com/Attraction_Review-g297568-d3850463-Reviews-Dive_Wananavu-Rakiraki_Viti_Levu.html'"
>
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Lautoka
</h1>
</div>
<div class="des">
<h2>Koroyanitu National Heritage Park</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Nadi
</h1>
</div>
<div class="des">
<h2>Denarau Island</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Sigatoka
</h1>
</div>
<div class="des">
<h2>Sand Dunes</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Pacific Harbour
</h1>
</div>
<div class="des">
<h2>Arts Village</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Suva
</h1>
</div>
<div class="des">
<h2>Museum</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Labasa
</h1>
</div>
<div class="des">
<h2>KokoMana Vuadomo Waterfall</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Savusavu
</h1>
</div>
<div class="des">
<h2>KokoMana Coco Farm</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
</div>
My main goal is to have a simple frame (as you can see) with few text lines and images. The thing I want to do, is make this frame flexible. By that I mean - if I change picture inside of it (bigger -> smaller) the frame should change. It should stay fixed.
Online editor: https://www.bootply.com/Y09Zn1wir3#
HTML:
<div class="col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="first-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="second-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
CSS:
/* CSS used here will be applied after bootstrap.css */
.single-image{
border: 1px solid orange;
width: 100%;
text-align: center;
margin: 0px 0px 15px 0px;
float: right;
}
.name{
padding: 20px 0px 0px 0px;
color: black;
height: 75px;
font-size: 18px;
}
.img-wrap{
padding-bottom: 50px;
padding-top: 25px;
}
.first-image{
width: 200px;
}
.second-image{
width: 150px;
}
.extra-info{
border-top: 1px solid orange;
}
.bottom-text{
padding-top: 15px;
height: 50px;
letter-spacing: 0.1em;
}
I tried to add height property to such as:
.single-image{
...
height: 405px;
}
Result: https://www.codeply.com/go/2s2hH3nbju
But it doesn't look correct, as bottom text floats somewhere up.
I need a solution for different type of image sizes. Any ideas?
You need to set the height of .img-wrap, too.
.single-image{
border: 1px solid orange;
width: 100%;
text-align: center;
margin: 0px 0px 15px 0px;
float: right;
height: 405px;
}
.img-wrap{
padding-bottom: 50px;
padding-top: 25px;
height:250px;
overflow:hidden;
}
Try to add this new line in your css code.
.img-wrap{
min-height: 275px;
}
it will looks like this
Output
Try using flex
.single-image{
border: 1px solid orange;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
}
.name{
padding: 20px 0px 0px 0px;
color: black;
height: 75px;
font-size: 18px;
}
.img-wrap{
padding-bottom: 50px;
padding-top: 25px;
}
.first-image{
width: 200px;
}
.second-image{
width: 150px;
}
.extra-info{
border-top: 1px solid orange;
align-self: bottom;
}
.bottom-text{
padding-top: 15px;
height: 50px;
letter-spacing: 0.1em;
}
.images-wrap{
display: flex;
}
.single-image-wrap {
height: 100%;
margin-bottom: 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row images-wrap">
<div class="col-xs-6 col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="first-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="second-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
</div>
hi I'm assigned to do a basic profile page for class, but for one of the html pages I am unable to put the text in front of each individual image, i removed my attempts at it to help ease confusion.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr></hr>
<img src="assets/images/gym.jpg" alt="gym">Gym
<img src="assets/images/hiking.jpg" alt="hiking">Hiking
<img src="assets/images/overwatch.jpg" alt="overwatch">Overwatch
<img src="assets/images/running.jpg" alt="running">Running
<img src="assets/images/programming.jpg" alt="programming">Programming
</div>
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
You'll need to absolute position your text in front of the image with css. It helps to wrap each image and text item into a block to apply the css.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="assets/images/gym.jpg" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="assets/images/hiking.jpg" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="assets/images/overwatch.jpg" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="assets/images/running.jpg" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="assets/images/programming.jpg" alt="programming">
<span>Programming</span>
</div>
</div>
css:
.item {
position: relative;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Edit: Added a simplified fiddle example
* {
box-sizing: border-box;
}
.aboutmeprofile {
float: left;
background-color: white;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.item {
position: relative;
width: 100%;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
text-align: center;
width: 100%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="programming">
<span>Programming</span>
</div>
</div>
The best way to do this is to create a div for the label and use the image as the background-image for the div.
background-image: image.png
jsfiddle
this is what I came up with. Just add the other images and its respective label:
#h2, #h3 {
color: #4aaaa5;
text-align: left;
font-size: 30px;
font-weight: bold;
font-family: 'Georgia', Times, Times New Roman, serif;}
#linebreak {
clear: both;
border: 1px solid gray;
width: 100%;
margin: 0;
padding: 0;}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.container {
height: 100%;
width: 100%;
position: relative;
}
.image {
width:100%;
height:100%;
}
.text {
position: absolute;
color: white;
left: 50%;
top: 50%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Gym
</span>
</div>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Hiking
</span>
</div>
</div>
Hope it helps!
You can simply do this with position:absolute property , first you need to create a relative div , then call the image and h2 inside the div , then set absolute position to h2
Check with the snippet
.content_div {
position:relative;
}
.content_div h2 {
position:absolute;
bottom:25px;
color:#fff;
font-size:18px;
}
.content_div h2 span {
background:rgba(0,0,0,0.8);
padding:10px;
display:block;
border-bottom:2px solid #000;
}
.content_div h2 span:last-child{
border-bottom:none;
}
<div class="content_div">
<img src="http://www.picgifs.com/graphics/c/cute/graphics-cute-160852.jpg" alt="image" />
<h2>
<span>A Movie in the Park:</span>
<span>Kung Fu Panda</span>
</h2>
</div><!-- /.content_div -->