I wrote a code for header as follows:
html,
body {
width: 100%;
min-width: 992px;
}
#content {
width: 100%;
padding: 0px;
}
#header {
/*background-color: #166bb3;
height: 85px;
min-width: 992px;
width: 1024px;*/
/* padding: 0 6%;*/
margin-right: auto;
margin-left: auto;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #E5E5E5;
background-color: #166bb3;
}
#logo {
padding: 20px 0px;
}
#headerdetails {
padding: 25px 0px;
min-width: 400px;
}
.hddtlsItems {
color: #ffbf00;
font-size: 18px;
text-align: right;
padding: 0px;
min-width: 120px;
}
.subhddtlsItems {
color: #FFF;
/*margin-right: 3%;*/
font-size: 9px;
/* padding: 0px;*/
float: right;
min-width: 61px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="header" role="banner">
<div class="container clearfix">
<img id="logo" src="images/logo.png" alt="logo">
<div id="headerdetails" class="pull-right col-md-5"> <span class="col-md-3 hddtlsItems pull-right"><img src="images/routes.png" alt="r" style="width: inherit;">14567
<span class="subhddtlsItems">Routes</span>
</span> <span class="col-md-3 hddtlsItems pull-right"><img src="images/transaction.png" alt="t" style="width: inherit;">$345.45
<span class="subhddtlsItems">Transaction values</span>
</span> <span class="col-md-3 hddtlsItems pull-right"><img src="images/conversation.png" alt="c" style="width: inherit;">18456
<span class="subhddtlsItems">Conversations</span>
</span>
</div>
</div>
But right side elements aren't same as shown in this picture:
How can I move subtitles more upwards as shown in picture? Other elements like 18456, $345 etc are proper. For best results, execute the above code and view it in full screen.
According to you layout, you can just add
position: relative;
top: -8px;
(or whatever pixel value) to .subhddtlsItems but it's not the cleanest way to achieve this. Unfortunately I would have to change all your layout to make something more maintainable and consistent.
Related
I am fairly new to coding. I am working on recreating the Google home page for The Odin Project and I cannot seem to get the images to sit right in the search bar.
Thus far all of my code and formatting has been done in HTML. I was struggling how to do CSS and push it via Git. anyway...
I got the magnifying glass to sit in the proper spot, but when I went to add the microphone image, it overlaps the magnifying glass. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<style>
<!--FONTS-->
#import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
body{
overflow-x: hidden !important;
max-width: 90%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 350px;
}
button {
width: 127px;
height: 36px;
text-align: center;
border: none;
background-color: #f2f2f2;
border-radius: 5px;
font-size: 13px;
color: #777;
font-family: 'Manrope', sans-serif;
}
input {
border-width: 3px;
border-color: #f2f2f2;
display: block;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 37px;
text-align: center;
font-size: 20px;
border-radius: 50px;
border-style: solid;
font-family: 'Manrope', sans-serif;
}
.btn-toolbar {
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-toolbar button:hover {
background-color: #88888888;
}
ul {
background-color: #f2f2f2;
float: left;
width: 100%;
display: inline-block;
}
a {
color: #777;
display: inline-block;
font-size: 15px;
text-decoration: none;
}
a:hover {
color: green;
}
.column {
float: left;
}
.footer{
position:absolute;
bottom: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
.header{
position:absolute;
top: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
h1{
display: flex;
justify-content: center;
align-items: center;
}
.fake-input{
position: relative;
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
.fake-input input{
background-color: #fff;
display: block;
width:100%;
box-sizing: border-box;
}
.fake-input img{
position: absolute;
top: 11px;
left: 10px;
}
</style>
<div class="row">
<header id="header" class="header">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">About</a>
<a class="column" href="https://www.google.com">Store</a>
<a class="column" href="https://www.google.com">images</a>
<a class="column" href="https://www.google.com">gmail</a>
<a class="column" href="https://www.google.com">squares</a>
<a class="column" href="https://www.google.com">circle</a>
</li>
</ul>
</header>
<body>
</div>
<!-- Google Logo -->
<div>
<h1><img style="padding-bottom: 20px; padding-top: 60px;" class="center" id="google-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</h1>
</div>
<div>
<!--Google search bar -->
<!-- Search input text -->
<div class="fake-input">
<input type="text" placeholder="Search Google or type URL" />
<img id="msgnify" src="https://cdn.pixabay.com/photo/2017/01/13/01/22/magnifying-glass-1976105_1280.png" width=15 />
<img id="mic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/833px-Google_mic.svg.png" width=15>
</div>
<br>
<!-- Search Buttons -->
<div style="padding-top: 20px;" class="btn-toolbar">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</div>
<br>
</body>
<!-- footer contains link to the respective locations -->
<div class="row">
<footer id="footer" class="footer">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">Advertising</a>
<a class="column" href="https://www.google.com">Business</a>
<a class="column" href="https://www.google.com">How Search Works</a>
<a class="column" href="https://www.google.com">Privacy</a>
<a class="column" href="https://www.google.com">Terms</a>
<a class="column" href="https://www.google.com">Settings</a>
</li>
</ul>
</footer>
</div>
</html>
I tried changing the class, giving it an id, setting the position to relative and margin right as auto, but i cannot seem to get it to move over to the right side of the search bar.
Additionally, the buttons below the search bar are stuck together. I had each button as its own, but the moment I added them to the same div they have become ajoined and when I try to separate them, the only way i can get them on them aligned is by styling them to the same row. Margin does not help split them apart, I even tried to get them in separate columns no dice. I am really frustrated as i made it pretty far in a day just using HTML. I would like to keep it HTML until I learn how to push CSS to GitHub via Git.
Thank you in advance!!!
You've set the fake-input to position: relative and the image to position: absolute which is already correct, but for the img#mic you need to set it's position right and not left to make it appear in the right side of the fake-input, so I add some style like this
.fake-input img#mic{
position: absolute;
left: unset;
right: 10px;
}
And for the button, it's working if you add the margin for the button like in the updated snippet below
<!DOCTYPE html>
<html lang="en">
<style>
<!--FONTS-->
#import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
body{
overflow-x: hidden !important;
max-width: 90%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 350px;
}
button {
width: 127px;
height: 36px;
text-align: center;
border: none;
background-color: #f2f2f2;
border-radius: 5px;
font-size: 13px;
color: #777;
font-family: 'Manrope', sans-serif;
margin: 10px;
}
input {
border-width: 3px;
border-color: #f2f2f2;
display: block;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 37px;
text-align: center;
font-size: 20px;
border-radius: 50px;
border-style: solid;
font-family: 'Manrope', sans-serif;
}
.btn-toolbar {
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-toolbar button:hover {
background-color: #88888888;
}
ul {
background-color: #f2f2f2;
float: left;
width: 100%;
display: inline-block;
}
a {
color: #777;
display: inline-block;
font-size: 15px;
text-decoration: none;
}
a:hover {
color: green;
}
.column {
float: left;
}
.footer{
position:absolute;
bottom: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
.header{
position:absolute;
top: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
h1{
display: flex;
justify-content: center;
align-items: center;
}
.fake-input{
position: relative;
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
.fake-input input{
background-color: #fff;
display: block;
width:100%;
box-sizing: border-box;
}
.fake-input img{
position: absolute;
top: 11px;
left: 10px;
}
.fake-input img#mic{
position: absolute;
left: unset;
right: 10px;
}
</style>
<div class="row">
<header id="header" class="header">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">About</a>
<a class="column" href="https://www.google.com">Store</a>
<a class="column" href="https://www.google.com">images</a>
<a class="column" href="https://www.google.com">gmail</a>
<a class="column" href="https://www.google.com">squares</a>
<a class="column" href="https://www.google.com">circle</a>
</li>
</ul>
</header>
<body>
</div>
<!-- Google Logo -->
<div>
<h1><img style="padding-bottom: 20px; padding-top: 60px;" class="center" id="google-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</h1>
</div>
<div>
<!--Google search bar -->
<!-- Search input text -->
<div class="fake-input">
<input type="text" placeholder="Search Google or type URL" />
<img id="msgnify" src="https://cdn.pixabay.com/photo/2017/01/13/01/22/magnifying-glass-1976105_1280.png" width=15 />
<img id="mic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/833px-Google_mic.svg.png" width=15>
</div>
<br>
<!-- Search Buttons -->
<div style="padding-top: 20px;" class="btn-toolbar">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</div>
<br>
</body>
<!-- footer contains link to the respective locations -->
<div class="row">
<footer id="footer" class="footer">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">Advertising</a>
<a class="column" href="https://www.google.com">Business</a>
<a class="column" href="https://www.google.com">How Search Works</a>
<a class="column" href="https://www.google.com">Privacy</a>
<a class="column" href="https://www.google.com">Terms</a>
<a class="column" href="https://www.google.com">Settings</a>
</li>
</ul>
</footer>
</div>
</html>
you should give position :relative to class (fake-input);
then give position :absolute to (search.png or mic.
I'm using bootstrap 3.3.7. I've adapted the navbar template provided from the bootstrap documentation and a carousel from W3. My footer's width extends all the way to the side edges but my carousel and nav do not (in fact my carousel does not even extend to the same width as my nav). How do I fix this?
Image of problem:
#charset "UTF-8";
* {
margin: 0;
}
html body {
height: 100%;
}
.nopadding {
padding: 0;
}
.navbar {
background-color: #ff8300;
border-radius: 0 0 10px 10px;
border: 0;
height: 100px;
width: 100%;
max-width: 980px;
margin: 0 auto;
}
.navspace {
right: 50px;
margin-top: 25px;
position: relative;
font-size: 18px;
color: #fff;
}
.navbar-brand {
padding: 0;
position: relative;
left: 40px;
top: 10px;
}
.thumbnails {
position: relative;
margin-top: 150px;
}
#myCarousel {
width: 980px;
max-width: 100%;
height: 654px;
bottom: 25px;
border-radius: 0 0 10px 10px;
}
.carousel-control {
height: 600px;
opacity: 0;
border-radius: 0 0 10px 10px;
}
.banner {
background: url(../images/banner1.jpg) no-repeat top center;
background-size: cover;
width: 980px;
height: 654px;
background-size: 100% auto;
}
.banner2 {
background: url(../images/banner2.jpg) no-repeat top center;
background-size: cover;
width: 980px;
height: 654px;
background-size: 100% auto;
}
.banner3 {
background: url(../images/banner3.jpg) no-repeat top center;
background-size: cover;
width: 980px;
height: 654px;
background-size: 100% auto;
}
.banner p {
position: relative;
font-size: 25px;
color: #fff;
top: 440px;
left: 20px;
}
.banner h1 {
position: relative;
font-size: 50px;
color: #fff;
left: 20px;
top: 420px;
}
.bodyimg {
max-width: 100%;
}
.bodytext1 {
color: #ff8300;
}
.bodytext2 {
color: #ff8300;
width: 160px;
margin-top: 37px;
}
.bodytext3 {
color: #ff8300;
margin-top: 60px
}
.bodytext4 {
color: #ff8300;
margin-top: 60px
}
.socialpadding {
padding: 0px 10px 0px 10px;
position: relative;
}
.centersocial {
margin: 0 auto;
text-align: center;
position: absolute;
}
.contactinfo {
color: #ff8300;
margin: 200px 0px 0px auto;
}
/* Add a background color and some padding around the form */
.formarea {
background-color: #ff8300;
border-radius: 10px;
width: 400px;
height: 484px;
margin: 50px auto 0px auto;
padding: 15px;
}
.formlabel {
color: #fff;
}
#inputMessage {
height: 200px;
}
.btn {
background-color: #fcb972;
border-color: #ff9300;
margin-top: 20px;
}
.btn:hover {
background-color: #fff;
border-color: #ff9300;
color: #ff8300;
}
.btn:onclick {
background-color: #fff;
border-color: #ff9300;
color: #ff8300;
}
.messageform {
height: 50px;
}
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.formarea2 {
background-color: #fff;
border-radius: 10px;
width: 400px;
height: 50px;
margin: 50px auto 0px auto;
padding: 15px;
display: inline;
text-align: center;
}
#inputPostal {
display: inline-block;
width: 30%;
margin-left:3%;
}
.formpostal {
color: #ff8300;
font-size: 30px;
display: inline-block;
}
.menubg {
background-color: #ff8300;
height: 100%;
width: 100%;
max-width: 980px;
border-radius: 10px;
margin: 125px;
}
.col-centered {
float: none;
margin-right: auto;
margin-left: auto;
}
.cartbtn {
margin-top: 20px;
position: relative;
left: 96%;
}
h2 {
font-size: 24px;
color: #fff;
text-align: center;
margin-top: 30px;
}
.menubox {
background-color: #fff;
border-radius: 10px;
width: 321px;
height: 320px;
margin-top: 30px;
position: relative;
}
.menubox a {
text-decoration: none;
}
.item1 {
background: url(../images/menu1.jpg) no-repeat center;
border-radius: 10px 10px 0px 0px;
}
.menubox img {
border-radius: 10px 10px 0px 0px;
opacity: 0;
transition: .5s ease;
backface-visibility: hidden;
}
.menubox:hover .item1 {
opacity: 0.7;
transition: .5s ease;
}
.menubox:hover img {
opacity: 1;
transition: .5s ease;
}
h3 {
font-size: 16;
color: #ff8300;
}
.foot {
background-image: none;
background-color: #ff8300;
border-radius: 10px 10px 0 0;
height: 50px;
margin: 150px auto 0 auto;
position: absolute;
width: 100%;
max-width: 980px;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
footer {
position: relative;
color: #fff;
text-align: right;
margin-top: 30px;
font-size: 10px;
width: 100%;
max-width: 980px;
}
#media only screen and (max-width: 992px) {
.navbar {
background-image: none;
background-color: #ff8300;
width: 100%;
border-radius: 0px;
margin: 0;
}
.navspace {
padding: 0px 20px 0px 0px;
left: 120px;
top: 30px;
}
.navbar-collapse {
background: rgba(255, 255, 255, 0.75);
height: 300px;
}
.foot {
background-image: none;
background-color: #ff8300;
border-radius: 0;
overflow: hidden;
}
footer {
position: relative;
color: #fff;
display: block;
text-align: right;
font-size: 10px;
}
.contactinfo {
margin: 40px auto 0px auto;
text-align: center;
}
}
#media only screen and (max-width: 767px) {
#myCarousel.carousel {
max-width: 100%;
width: 100%;
max-height: 100%;
overflow: hidden;
border-radius: 0 0 10px 10px;
}
.carousel-control {
height: 600px;
opacity: 0;
}
.findus {
margin: 0 auto;
}
.centersocial {
position: relative;
}
.bodytext4 {
text-align: center;
width: 250px;
margin: 100px auto 5px auto;
}
.bodytext3 {
text-align: center;
width: 250px;
margin: 60px auto 5px auto;
}
}
#media only screen and (max-width: 576px) {
.formarea {
background-color: #ff8300;
border-radius: 10px;
width: 350px;
height: 484px;
margin: 50px auto 0px auto;
padding: 15px;
}
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
/* additional */
.row, #myCarousel, .container {
max-width: 100%;
margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Peperoni Pizzeria</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-default navbar-static-top rounded-bottom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navspace" href="index.html">Home</a></li>
<li><a class="navspace" href="menu.html">Menu</a></li>
<li><a class="navspace" href="location.html">Locations</a></li>
<li><a class="navspace" href="contactus.html">Contact Us</a></li>
<!-- Put here your menu items -->
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div class="row">
<div class="col-sm-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active banner">
<p>10% off all pizzas
<br>this weekend only</p>
<h1>LIMITED TIME<br>ONLY</h1>
</div>
<div class="item banner2">
</div>
<div class="item banner3">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="row thumbnails">
<div class="col-sm-offset-1 col-sm-3">
<img class="img-responsive center-block img-rounded" src="images/bodyimg.jpg" alt="">
</div>
<div class="col-md-offset-1 col-md-3 hidden-sm hidden-xs">
<p class="bodytext1">
Year 2004.<br><br> The warmth and comfort of wood-fired pizzas and traditional pastas over chilled drinks with friends and families became an everyday affair that started with the first Peperoni, located in Greenwood Singapore. Charming, vivacious
and full of life, Peperoni Greenwood brings together food lovers from all walks of life. Including many well known and young artists whose work adorn its walls with their expressions of love and creativity. Peperoni Greenwood inspired its owners,
the highly acclaimed Les Amis group, to spread the love and energy of Peperoni with the opening of new outlets across the sunny island of Singapore.
</p>
</div>
<div class="col-md-offset-1 col-md-3 hidden-xs">
<p class="bodytext2">
Peperoni has since evolved into a much-loved destination with its ‘Appetite for Life’ philosophy. This philosophy makes Peperoni more than just a restaurant, as it is a place with a mission - to bring people together, to bind relationships, and to savour
life in all its delightful flavours.<br><br> Share moments of fun, energy and inspiration over hot pizzas and cool conversations!
</p>
</div>
</div>
<div class="row">
<div class="col-sm-offset-1 col-sm-3">
<p class="bodytext3">
Check us out on our social media accounts or subscribe to our newsletter for the latest updates!
</p>
<div class="centersocial">
<a href="#"><img class="socialpadding" src="images/email.png" alt="">
</a>
<a href="https://www.instagram.com/peperonipizzeria/"><img class="socialpadding" src="images/insta.png" alt="">
</a>
<a href="https://www.facebook.com/peperonipizzeria/"><img class="socialpadding" src="images/fb.png" alt="">
</a>
</div>
</div>
<div class="col-sm-offset-1 col-sm-3">
<p class="bodytext4">
Feel free to come explore our outlets
</p>
<a href="locations.html"><img class="findus img-responsive" src="images/findus.png" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-12 foot img-responsive">
<footer class"navbar-fixed-bottom">
Copyright © 2017 Peperoni Pizzeria. All Rights Reserved.
</footer>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
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>
I face some problem in my html and css.
My requirement like this image:-
My code below:-
#font-face {
font-family: "OpenSans-CondLight";
src: url('fonts/OpenSans-CondLight.woff') format('woff');
}
#font-face {
font-family: "Rubik-BoldItalic";
src: url('fonts/Rubik-BoldItalic.woff') format('woff');
}
#font-face {
font-family: "RobotoSlab-Regular";
src: url('fonts/RobotoSlab-Regular.woff') format('woff');
}
/*header area */
header{
height: 350px;
background: #050000;
overflow: hidden;
display: block;
}
.container{
background: #050000;
}
.top-area{
float: left;
width: 20%;
font-family: "Rubik-BoldItalic";
font-size: 60px;
color: #FFFFFF;
text-transform: uppercase;
overflow: hidden;
}
.logo-area {
width: 60%;
overflow: hidden;
display: block;
position: relative;
z-index: 9999;
}
.logo-area img {
width: 500px;
height: auto;
z-index: 9999;
margin-left: 35px;
}
.search-box {
width: 25%;
float: right;
margin: -300px 73px 0 0;
}
.all-events {
overflow: hidden;
background: #FF9D34;
height: 100px;
width: 80%;
margin: auto;
display: block;
position: absolute;
top: 178px;
border-radius: 10px;
z-index: 0;
}
.all-events .left-side span{
float: left;
color: #000000;
text-transform: uppercase;
font-size: 25px;
padding-left: 20px;
padding-top: 40px;
}
.all-events .left-side .glyphicon {
font-size: 45px;
color: #000;
}
.all-events .right-side span{
float: right;
color: #000000;
text-transform: uppercase;
font-size: 25px;
}
.main-content {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
background: #FF931D;
margin: auto;
}
.main-content .left-content .top-content{
float: left;
overflow: hidden;
display: block;
width: 55%;
height: 340px;
margin-top: 22px;
}
.main-content .left-content .top-content img {
width: 600px;
height: 300px;
}
.main-content .left-content .bottom-content{
float: left;
overflow: hidden;
display: block;
width: 75%;
height: 340px;
margin-top: 10px;
}
.main-content .left-content .bottom-content img {
width: 600px;
height: 300px;
}
.main-content .right-content {
float: right;
overflow: hidden;
display: block;
width: 40%;
margin: -688px 52px 0 0;
}
.main-content .right-content img {
width: 522px;
height: 648px;
}
footer{
overflow: hidden;
display: block;
height: 410px;
width: 90%;
margin: auto;
background-color: #FF931D;
}
footer .left-footer {
float: left;
width: 350px;
overflow: hidden;
display: block;
}
footer .middle-footer {
width: 350px;
overflow: hidden;
display: block;
}
.about {
height: 400px;
width: 400px;
border-radius: 50%;
background: #fff;
float: right;
position: relative;
top: -79px;
}
.about p {
position: absolute;
font-family: "OpenSans-CondLight";
font-size: 25px;
text-align: center;
top: 62px;
}
.about img {
width: 80px;
height: auto;
position: relative;
top: 240px;
left: 98px;
margin-left: 31px;
}
.button {
font-size: 15px;
color: blue;
cursor: pointer;
}
.button:active{
color: #000;
}
.caption {
background: #fff;
width: 599px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="IE=edge">
<title>Spotlight</title>
<!-- style -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<!-- js -->
<link rel="stylesheet" type="text/css" href="js/modernizr.js" media="all" />
</head>
<body>
<header>
<div class="container">
<div class="top-area">
<h2>24 hour event</h2>
</div>
<div class="logo-area">
<img src="images/logo.gif" alt="Logo">
</div>
<div class="search-box">
<div class="row">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
<div class="all-events">
<div class="left-side">
<span>donate here</span>
<div class="donate_img">
<img src="images/07.tif" alt="">
</div>
</div>
<div class="right-side">
<span>all events faq</span>
</div>
</div>
</div>
</header>
<section class="main-content">
<div class="container">
<div class="left-content">
<div class="top-content">
<img src="images/damien-rice-tour-italia.jpg" alt="">
<div class="caption">
<span>Damien Rice, Kildare Culture Centre at 8pm. Ref: DMK</span>
<div class="button">
Book now
</div>
</div>
</div>
<div class="bottom-content">
<img src="images/glenhansard_100x445.jpg" alt="">
<div class="caption">
<span>Glen Hansard, Olympia Theatre Dublin at 7pm. Ref: GHO </span>
<div class="button">Book now
</div>
</div>
</div>
</div>
<div class="right-content">
<img src="images/tommytiernan.jpg" alt="">
<div class="caption">
<span>Tommy Tiernan, Cork Comedy Club at 7pm. Ref: GHO</span>
<div class="button">Book now
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="left-footer">
<span>Click on the blue <div class="button">Book now</div> now link on any
event enter your email and you will recive your
ticket via email.
Alternativly or if you have any questions not
listed on the faq tab you can book your tocket
dierectly with us qouting the event refrence
number.
</span>
</div>
<div class="middle-footer">
<span>phone:0741237451
email:24hourevent#spotlight.ie
get involved
Would you like to volunteer even one
hour of your time. Make a diffrence
contact us at:
volunteer#spotlight.ie
</span>
</div>
<div class="about">
<p>ABOUT <br>
Focas Ireland works with
people who are homeless or
who are at risk of losing there
homes across ireland.
<br> Focas Ireland website click </p>
<img src="images/d2c4efe596a6d313c1005ff33ff627ff.jpeg" alt="focus">
<img src="images/here_fixed_wm.jpg" alt="download">
</div>
<div class="social-icons">
<img src="images/youtube heart shaped free social media icon .png" alt="you tube">
<img src="images/Facebook heart shaped free social media icon.png" alt="facebook">
<img src="images/twitter heart shaped free social media icon.png" alt="twitter">
</div>
</div>
</footer>
</body>
</html>
My main problem is in my footer I can't change the color. Image bottom side. Can anyone help me?
You can try adding this line of CSS:
footer:after {
content: "";
display: table;
clear: both;
}
I created a fiddle here : http://jsfiddle.net/celiostat/zgUgn/
this is for a dynamic webpage. depending on the user, their might be 4 (as in the example) or 13 collections (on square = one collection). Height of image and collection title can vary. Consequently boxe height varies, and on the second row, I get a gap between collection above and collection below whereas I would like to keep that space between the boxes even; say 25px.
Thanks for your help !
HTML:
<div class="collection_bookmars_container">
<img class="collection_random_image" src="http://img.foodnetwork.com/FOOD/2012/05/04/FNM-060112_NTD-Hot-Dog-Sandwich_s4x3_lg.jpg">
<div class="collection_bookmark_title_container">
<span class="collection_bookmark_title">Thai favorites</span>
</div>
<div class="modify_collection_container">
<span class="number_of_articles">1</span>
<span class="article_text_only">articles</span>
<img class="icon_modify_collection" src="http://www.mricons.com/store/png/124258_43263_128_monotone_pen_write_icon.png">
</div>
</div>
<div class="collection_bookmars_container">
<img class="collection_random_image" src="http://img.foodnetwork.com/FOOD/2013/07/19/FNM_090113-Name-This-Dish-Stacked-Salad-Recipe_s4x3_lg.jpg">
<div class="collection_bookmark_title_container">
<span class="collection_bookmark_title">Best France food stuff</span>
</div>
<div class="modify_collection_container">
<span class="number_of_articles">1</span>
<span class="article_text_only">articles</span>
<img class="icon_modify_collection" src="http://www.mricons.com/store/png/124258_43263_128_monotone_pen_write_icon.png">
</div>
</div>
<div class="collection_bookmars_container">
<img class="collection_random_image" src="http://img.foodnetwork.com/FOOD/2012/05/04/FNM-060112_NTD-Hot-Dog-Sandwich_s4x3_lg.jpg">
<div class="collection_bookmark_title_container">
<span class="collection_bookmark_title">Snacks</span>
</div>
<div class="modify_collection_container">
<span class="number_of_articles">1</span>
<span class="article_text_only">articles</span>
<img class="icon_modify_collection" src="http://www.mricons.com/store/png/124258_43263_128_monotone_pen_write_icon.png">
</div>
</div>
<div class="collection_bookmars_container">
<img class="collection_random_image" src="http://www.secondhomemalaysia.co.uk/uploads/Food3.jpg">
<div class="collection_bookmark_title_container">
<span class="collection_bookmark_title">Soups and veloutes</span>
</div>
<div class="modify_collection_container">
<span class="number_of_articles">1</span>
<span class="article_text_only">articles</span>
<img class="icon_modify_collection" src="http://www.mricons.com/store/png/124258_43263_128_monotone_pen_write_icon.png">
</div>
</div>
CSS:
body
{
background-color: #ECF0F1;
}
.container
{
max-width: 550px;
width: 100%;
margin: 0px auto;
position: relative;
}
.table_presentation_two_column
{
height: auto;
display: table;
width: 100%;
margin: 0 auto;
}
.collection_bookmars_container
{
height: auto;
background-color: white;
display: inline-block;
vertical-align: top;
width: 46%;
box-sizing: border-box;
margin: 20px 2% 0% 2%;
}
.collection_random_image
{
margin-bottom: 10px;
width: 100%;
}
.collection_bookmark_title_container
{
margin: 30px 4% 0px 4%;
}
.collection_bookmark_title
{
font-family: "Roboto Slab","serif";
font-size: 30px;
}
.modify_collection_container
{
margin-top: 10px;
margin: 20px 4% 0px 4%;
padding-top: 15px;
border-top: 3px solid #EBEBEB;
width: 92%;
}
.number_of_articles
{
font-size: 16px
font-family: "Montserrat";
padding-bottom: 4px;
color: #AFAFAF;
font-weight: bold;
}
.article_text_only
{
font-size: 16px;
font-family: "Montserrat";
padding-bottom: 4px;
color: #AFAFAF;
font-weight: bold;
}
.icon_modify_collection
{
float: right;
position: relative;
overflow: hidden;
width: 12%;
max-width: 250px;
padding-bottom: 10px;
margin-top: -5;
}
You will need something like Masonry (http://masonry.desandro.com/) to do what you want, there is no other way doing it nicely because of the height difference. The wrapper is what is wrecking it for you.
Perhaps another idea is to create the wrappers for each column instead of each row.