I am trying to build a timeline to display a series of events, between each event is a margin which I cannot work out where it has come from, for visual purposes I have the code here: http://codepen.io/tomevans1664/pen/obvWyW
HTML:
<div class="center">
<div class="timeline-wrapper">
<div class="event">
<div class="event-date"></div>
<div class="event-marker"></div>
<h3 class="event-title">Experiment Created</h3>
<p class="event-description"></p>
<img class="event-img" alt="" src="">
</div>
<div class="event">
<div class="event-date"></div>
<div class="event-marker"></div>
<h3 class="event-title">Experiment Updated</h3>
<p class="event-description"></p>
<img class="event-img" alt="" src="">
</div>
</div>
</div>
CSS:
body{
margin: 0;
padding: 0;
}
.center{
margin-left: auto;
margin-right: auto;
width: 800px;
height: 500px;
border: 1px solid #dddddd;
}
.timeline-wrapper{
position: absolute;
height: inherit;
width: inherit;
}
.timeline-wrapper::before {
/* this is the vertical line */
content: '';
position: absolute;
top: 0;
left: 50%;
height: 100%;
width: 5px;
background: #d7e4ed;
}
.event {
width: 100%;
height: 100px;
background-color: #e8e8e8;
}
It's coming from the default margin applied to the headings (h3)
Just add this
h3 {
margin: 0;
}
More commonly, a "universal reset" is used rather than just on the body :
* {
margin: 0;
}
Codepen Demo
Related: SO Question
Its coming from the header tag h3. You can add
.event-title {
margin:0px;
}
If you want to remove default margin, padding etc. You can use reset.css
Hope this helps!
Related
I'm new to Bootstrap. Trying to implement a fixed footer to the page with a logo whose height > height of the footer. The footer with an image are fixed at the bottom, while the image sticks out of the footer.
Like this...
If I make the image a part of the footer it resizes to the height of the footer. How do I implement this? I have been stuck on this for a while now.
/***Footer***/
footer {
width: 100%;
z-index: 9;
background: #bff;
position: fixed;
bottom: 0px;
left: 0px;
height: 40px;
padding: 0 25px;
color: #808080;
}
.foot-lg {}
.foot-lg img {
width: 50px;
}
.footer-logo-copyright,
.foot-menu,
.foot-social {
overflow: hidden;
display: flex;
height: 40px;
}
/*** added on 04.Jun.21 to display GPTW logo sticking out of footer ***/
.foot-pop img {
overflow: visible;
max-height: 100%;
height: 100%;
width: auto;
}
/**********************************************************************/
.footer-logo-copyright *,
.foot-menu *,
.foot-social * {
align-self: center;
}
.footer-logo-copyright p {
padding: 0 10px;
font-size: 11px;
}
.foot-menu li {
float: left;
list-style: none;
border-right: 1px solid #808080;
}
.foot-menu li:last-child {
border-right: none;
}
.foot-menu li a {
display: block;
padding: 0px 15px;
text-decoration: none;
color: #808080;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
}
.foot-menu li:hover a {
color: #f37e1f;
}
.foot-social li {
float: left;
margin-right: 10px;
}
.foot-social li:last-child {
margin-right: 0;
}
.foot-social li a img {
width: 13px;
filter: invert(.7);
opacity: 0.5;
}
.foot-social li:hover a img {
/* filter: invert(0); */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<footer>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-pd">
<div class="footer-logo-copyright">
<a href="" class="pull-left foot-lg">
<img src="img/logo-animation.gif" alt="footer-logo">
</a>
<p class="pull-left">is a registered trademark of XYZ Pty Ltd.</p>
<p class="pull-left">© 2021. all rights reserve to XYZ Pty Ltd.</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<ul class="pull-right foot-menu">
<li>
Careers
</li>
<li>
Sitemap
</li>
</ul>
</div>
<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
<ul class="foot-pop pull right">
<li>
<a href="# ">
<img src="img/gptw21.jpg ">
</a>
</li>
</ul>
<ul class="foot-social pull-right ">
<li>
<a href="https://www.linkedin.com/company/sjs-enterprises-pvt.-ltd./?originalSubdomain=in " class=" ">
<img src="img/linked-in-logo-key.svg ">
</a>
</li>
</ul>
</div>
</div>
</footer>
Thanks
Keep the HTML structure you have now, that is with the logo as part of the footer so it is positioned and is sized in relation to the footer.
What you want is for the logo to be able to be set at the bottom of the footer (perhaps with some padding or a margin) but to have, say, twice the height, or the height of the footer plus a bit (it's not possible to tell exactly which from the question).
This boiled-down snippet assumes you want the logo to be the height of the footer plus a bit. If you want it to be twice the height of the footer, say, see the comment.
body {
width: 100vw;
height: 100vh;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 10%;
background-color: cyan;
}
footer .logo {
position: absolute;
right: 1vmin;
bottom: 1vmin;
height: calc(100% + 30px); /* CHANGE to be what you want - e.g. height: 200% for twice the footer height %/
width: auto;
}
<footer>
<img src="https://i.stack.imgur.com/csy1S.png" class="logo">
</div>
</footer>
In your img tag add following style :
img {
max-height: 100%;
height: 100%;
width: auto;
}
If you're wanting to have a fixed image appear in the corner of the page, over the footer, you can easily use fixed positioning to achieve the desired result.
All you would need to do is create a new div container and add the fixed positioning to that element. See the below implementation for more information.
<style>
.fixed-image {
position: fixed;
bottom: 0;
right: 0;
}
</style>
<div class="fixed-image">
<img src="https://dummyimage.com/120x170/000/fff" alt="Image">
</div>
Documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Attached is a JsFiddle:
https://jsfiddle.net/aus_tin/0dsoqecz/2/
You can achieve this result if you make the footer relative positioned and image as absolute
position: absolute;
bottom: 0;
right: 20px; // Change it as per your requirement
html,
body {
height: 100%;
background-color: cadetblue;
margin: 0;
padding: 0;
}
div#wrapper {
height: 100%;
display: grid;
grid-template-rows: 100px auto 50px;
}
header {
background-color: purple;
}
footer {
position: relative;
background-color: lime;
}
footer>img {
position: absolute;
bottom: 0;
right: 20px;
}
<div id="wrapper">
<header>header</header>
<main>body</main>
<footer>
footer
<img src="https://picsum.photos/100" />
</footer>
</div>
I'm working on id card project and I have a data into MYSQL db and a id card blank image in PHP page with fixed size.
Now I need to place MYSQL db data into the image finally I need to get id card with all valid data.
I tried:
<body>
<div class="image_holder">
<img src="bg2.jpg" />
<div class="overlay"> </div>
</div>
<div>NHS SUB</div>
</body>
and csss
.image_holder {
position:relative;
float:left;
}
.overlay {
position:absolute;
top:0;
background-color:rgba(34,70,118,0.7);
width:100%;
height:100%;
}
please check this image i need place text in this format id card layout
Something like this?
.wrapper {
height: auto;
height: 280px;
display: inline-block;
}
.image_holder {
position: relative;
float: left;
margin-right: 10px;
width: 180px;
background-color: #ccecec;
display: block;
min-height: 100%;
}
.overlay {
position: absolute;
top: 0;
text-align: center;
/*background-color: rgba(34, 70, 118, 0.7);*/
width: 100%;
height: 100%;
}
p {
position: absolute;
bottom: 0;
margin: 0 auto 0;
padding: 2px 0;
display: inline-block;
background-color: #FE9D86;
width: 100%;
text-align: center;
color: #000;
}
img {
display: block;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
top: 90px;
border-radius: 8px;
}
<div class="wrapper">
<div class="image_holder">
<img src="https://www.w3schools.com/howto/img_paris.jpg" alt="Snow" style="width:40%;">
<div class="overlay">
<pre>Content over image</pre>
</div>
<p>Content</p>
</div>
<div class="image_holder">
<div class="overlay">
<pre>NHS SUB</pre>
</div>
<p>Content</p>
</div>
</div>
Having a hard time figuring out where and i need to use to avoid over extend of width to right causing the scroll to right appear and the height of the small images gets smaller. it should be 250px in height each to fit. Plus i need to add text in the bottom left of each image.
This is the picture for reference. Click here
HTML
<div class="news-banner">
<h1 class="text-center header-text">News</h1>
</div>
<div class="row">
<div class="col-md-8 img-container">
<img class="img-responsive" src="/assets/icons/people-crowd-child-kid-large.jpg">
</div>
<div class="col-md-4 img-small">
<img class="img-responsive" src="/assets/icons/13-Cuidados-alternativos-en-familia.jpg">
<img class="img-responsive" src="/assets/icons/man-person-cute-young-large.jpg">
</div>
CSS
.news-banner {
height: 120px;
background: #eb1212;
position: relative;
border-bottom: 2px solid white;
}
.header-text{
color: white;
width: 50%;
height: 50%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.img-container {
height: 500px;
display: flex;
}
.img-small {
height: 100%;
}
Solution for both the points
It should be 250px in height each to fit.
Plus I need to add text in the bottom left of each image.
Adding img-wrapper class to your div with class row, and with some additional css rules, Here is the demo. View it in Full Page Mode
.news-banner {
height: 120px;
background: #eb1212;
position: relative;
border-bottom: 2px solid white;
}
.header-text {
color: white;
width: 50%;
height: 50%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.img-container {
height: 100%;
display: flex;
}
.img-small {
height: 100%;
}
.img-small div {
height: 50%;
}
.img-small img {
height: 100%;
}
.img-wrapper {
height: 500px;
}
span.img-desc {
color: white;
bottom: 5px;
left: 30px;
font-size: 20px;
position: absolute;
}
.img-wrapper.row div[class|='col-md'] {
padding: 0px;
}
html {
overflow-x: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="news-banner">
<h1 class="text-center header-text">News</h1>
</div>
<div class="row img-wrapper">
<div class="col-md-8 img-container">
<img class="img-responsive" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<span class="img-desc"> This Image Description </span>
</div>
<div class="col-md-4 img-small">
<div class="col-md-12">
<img class="img-responsive" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg">
<span class="img-desc"> This Image Description </span>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg">
<span class="img-desc"> This Image Description </span>
</div>
</div>
</div>
Fix
Dont really know of the side effects of Bootstrap with your other code. But you can try this, too. It worked for me with Bootstrap.
html {
width: 100%;
overflow-x: hidden;
}
See https://jsfiddle.net/bzLo33n8/ for the working example.
It appears as if there is padding between two of my elements - content1 and footer. I do not want this 'padding' but I cannot understand why it is there at all. Here is part of problematic html text on its own - the 'padding' still appears. I've tried adding in padding: 0 and margin: 0 to both the elements with no result.
<style type="text/css">
body{
margin: 0;
}
.footer{
position: relative;
width: 100%;
min-width: 512px;
height: 150px;
background-color: black;
font-size: 12px;
font-family: arial;
color: gray;
z-index: 5;
}
.content1{
position: relative;
width: 100%;
height: 300px;
background-color: #E6E6E6;
z-index: 5;
}
.imagecontainer{
height: 80%;
float: right;
}
.image{
position: relative;
display: block;
height: 100%;
}
</style>
<body>
<div class="content1">
<!--<div class="textcontainer">
<p style="color: gray; font-size: 15px; font-family: arial;">this is some text</p>
</div>-->
<div class="imagecontainer">
<img class="image" src="C:\Users\wrigh\Pictures\SWITCH\capture01.png"></img>
</div>
</div>
<div class="footer">
<center><p style="padding-top:50px; max-width: 50%;">ONLY AVAILIBLE ON ANDROID<br><br>UPDATE: NO CURRENT WORK IS SCHEDULED</p></center>
</div>
</body>
In response to the proposed answer to this question. I have removed the image from the text and unfortunately the 'padding' was not removed.
It seems that your paragraph tag has a margin.
Apply this css rule:
.footer p {
margin: 0;
}
Here is a fiddle
You have encountered collapsing margins.
When elements have top or bottom margin, and the parent element doesn't have a border or padding, the margins collapes. The effect is that the margin is visible outside the parent element, not between the parent element boundaries and the child element.
It's the margin of the p element in the footer that is collapsing. It creates the distance between the content1 and the footer element.
By removing the margin on the p element, you get rid of the distance:
.footer p {
margin: 0;
}
Demo:
.footer p {
margin: 0;
}
body{
margin: 0;
}
.footer{
position: relative;
width: 100%;
min-width: 512px;
height: 150px;
background-color: black;
font-size: 12px;
font-family: arial;
color: gray;
z-index: 5;
}
.content1{
position: relative;
width: 100%;
height: 300px;
background-color: #E6E6E6;
z-index: 5;
}
.imagecontainer{
height: 80%;
float: right;
}
.image{
position: relative;
display: block;
height: 100%;
}
<div class="content1">
<!--<div class="textcontainer">
<p style="color: gray; font-size: 15px; font-family: arial;">this is some text</p>
</div>-->
<div class="imagecontainer">
<img class="image" src="C:\Users\wrigh\Pictures\SWITCH\capture01.png"></img>
</div>
</div>
<div class="footer">
<center><p style="padding-top:50px; max-width: 50%;">ONLY AVAILIBLE ON ANDROID<br><br>UPDATE: NO CURRENT WORK IS SCHEDULED</p></center>
</div>
if you want, you can always CSS your way through it, something like
* { margin:0; padding:0; }
It should reset All elements, after that you define new paddings and margins, which is much easier ;)
Your using a <center> tag if your using HTML5 it's not supported... if your not using HTML5 the <center> tag is a block element, add display: inline-block in the css.
How do I center a text over an image in css?
<div class="image">
<img src="sample.png"/>
<div class="text">
<h2>Some text</h2>
</div>
</div>
I want to do something like the one below but I'm having difficulties, here's my current css
<style>
.image {
position: relative;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
margin: 0 auto;
width: 300px;
height: 50px;
}
</style>
When I use background-image I do not get any output from html2pdf:
<style>
#image_container{
width: 1000px;
height: 700px;
background-image:url('switch.png');
}
</style>
Print
<?php ob_start(); ?>
<div id="image_container"></div>
<?php
$_SESSION['sess'] = ob_get_contents();
ob_flush();
?>
Here's prints.php:
<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML($_SESSION['sess']);
$html2pdf->Output('random.pdf');
?>
How about something like this: http://jsfiddle.net/EgLKV/3/
Its done by using position:absolute and z-index to place the text over the image.
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 350px;
}
<div id="container">
<img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
<p id="text">
Hello World!
</p>
</div>
This is another method for working with Responsive sizes. It will keep your text centered and maintain its position within its parent. If you don't want it centered then it's even easier, just work with the absolute parameters. Keep in mind the main container is using display: inline-block. There are many others ways to do this, depending on what you're working on.
Based off of Centering the Unknown
Working codepen example here
HTML
<div class="containerBox">
<div class="text-box">
<h4>Your Text is responsive and centered</h4>
</div>
<img class="img-responsive" src="http://placehold.it/900x100"/>
</div>
CSS
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 100%;
text-align: center;
width: 100%;
}
.text-box:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
h4 {
display: inline-block;
font-size: 20px; /*or whatever you want*/
color: #FFF;
}
img {
display: block;
max-width: 100%;
height: auto;
}
Why not set sample.png as background image of text or h2 css class? This will give effect as you have written over an image.
For a responsive design it is good to use a container having a relative layout and content (placed in container) having fixed layout as.
CSS Styles:
/*Centering element in a base container*/
.contianer-relative{
position: relative;
}
.content-center-text-absolute{
position: absolute;
text-align: center;
width: 100%;
height: 0%;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 51;
}
HTML code:
<!-- Have used ionic classes -->
<div class="row">
<div class="col remove-padding contianer-relative"><!-- container with position relative -->
<div class="item item-image clear-border" ><img ng-src="img/engg-manl.png" alt="ENGINEERING MANUAL" title="ENGINEERING MANUAL" ></div> <!-- Image intended to work as a background -->
<h4 class="content-center-text-absolute white-text"><strong>ENGINEERING <br> MANUALS</strong></h4><!-- content div with position fixed -->
</div>
<div class="col remove-padding contianer-relative"><!-- container with position relative -->
<div class="item item-image clear-border"><img ng-src="img/contract-directory.png" alt="CONTRACTOR DIRECTORY" title="CONTRACTOR DIRECTORY"></div><!-- Image intended to work as a background -->
<h4 class="content-center-text-absolute white-text"><strong>CONTRACTOR <br> DIRECTORY</strong></h4><!-- content div with position fixed -->
</div>
</div>
For IONIC Grid layout, evenly spaced grid elements and the classes used in above HTML, please refer - Grid: Evenly Spaced Columns. Hope it helps you out... :)
as Harry Joy points out, set the image as the div's background and then, if you only have one line of text you can set the line-height of the text to be the same as the div height and this will place your text in the center of the div.
If you have more than one line you'll want to set the display to be table-cell and vertical-alignment to middle.
as of 2017 this is more responsive and worked for me.
This is for putting text inside vs over, like a badge.
instead of the number 8, I had a variable to pull data from a database.
this code started with Kailas's answer up above
https://jsfiddle.net/jim54729/memmu2wb/3/
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 30%;
text-align: center;
width: 100%;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 30px;
}
.img-responsive {
display: block;
max-width: 100%;
height: 120px;
margin: auto;
padding: auto;
}
.dataNumber {
margin-top: auto;
}
<div class="containerBox">
<img class="img-responsive" src="https://s20.postimg.org/huun8e6fh/Gold_Ring.png">
<div class='text-box'>
<p class='dataNumber'> 8 </p>
</div>
</div>
A small and short way of doing the same:
.image {
position: relative;
margin-bottom: 20px;
width: 100%;
height: 300px;
color: white;
background: url('https://via.placeholder.com/600') no-repeat;
background-size: 250px 250px;
}
<div class="image">
<p>
<h3>Heading 3</h3>
<h5>Heading 5</h5>
</p>
</div>
Quick solution: Set position: relative; on the container element and set position: absolute; on child elements in that container element, with the necessary top, left, bottom, right-adjusting parameters:
.top-left {
position: absolute;
top: 2px;
left: 2px;
}
.bottom-right {
position: absolute;
bottom: 2px;
right: 2px;
}
.container {
position: relative;
text-align: center;
color: white;
float:left;color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
<div class="container" style="">
<img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2#2x.png" width="100">
<div class="top-left">Wikipedia</div>
<div class="bottom-right">Everyone's Encyclopedia</div>
</div>
Center it directly in the middle with the following CSS...
top: 50%;
left: 50%;
transform: translate(-50%, -50%);