Hi there I would need your help in vertical centering of those two elements in this footer, I would like them to be on same vertical level within footer. This is how it looks now:
footer example
This is my code:
<div style="position: fixed; width: 100%; height: 5%; left: 0; right:0; bottom: 0;
background-color:#0065A0; color: #FFFFFF;">
<footer>
<div style="float:left; margin-left: 5%;">© 2014-2017 Calgarry</div>
<div style="float:right; margin: 0 auto; margin-right: 5%;">Report</div>
</footer>
</div>
Updated: I have done what VPx suggest, my code now look like this:
<div style="position: fixed; width: 100%; height: 5%; left: 0; right: 0; bottom: 0;
background-color:#0065A0; color: #FFFFFF;">
<footer style="display: flex; justify-content: space-between; align-items: center; height: 100%;">
<div style="margin-left: 5%;">© 2014-2017 Calgarry</div>
<div style="margin-right: 5%;">Report</div>
</footer>
</div>
It's hovewer still not working as it should, it now looks like this:
second example of footer after suggested changes
Just do it with the Flexbox:
footer {
display: flex;
justify-content: space-between; /* max. horizontal space between them */
align-items: center; /* vertical alignment / centering */
height: 100%;
}
<div style="position: fixed; width: 100%; height: 20%; left: 0; right: 0; bottom: 0; background-color: #0065A0; color: #FFFFFF;">
<footer>
<div style="margin-left: 5%;">© 2014-2017 Calgarry</div>
<div style="margin-right: 5%;">Report</div>
</footer>
</div>
For better presentation I increased the height of the outer div to 20%.
Apply padding for inner elements of footer. Removeheight in footer.
<div style="position: fixed; width: 100%; left: 0; right:0; bottom: 0;
background-color:#0065A0; color: #FFFFFF;">
<footer>
<div style="float:left; margin-left: 5%; padding: 20px">© 2014-2017 Calgarry</div>
<div style="float:right; margin: 0 auto; margin-right: 5%; padding: 20px">Report</div>
</footer>
</div>
<div style="position: fixed;width:100%;left:0;right:0;background-color:#0065A0; color: #FFFFFF;top:0;">
<footer style="height: 50px;display:table;width:100%">
<div style="text-align:left;display:table-cell;vertical-align:middle; padding: 2%;">© 2014-2017 Calgarry</div>
<div style="text-align:right; display:table-cell;vertical-align:middle; padding: 2%;">Report</div>
</footer>
</div>
<div class = "row">
<div class = "col-sm-6 col-sm-offset-3">
<div>© 2014-2017 Calgarry</div>
</div>
<div class = "col-sm-3">
<div>Report</div>
</div>
</div>
Try this!
easiest way is to add a padding top to the footer.
<div style="position: fixed; width: 100%; height: 5%; left: 0; right:0; bottom: 0;
background-color:#0065A0; color: #FFFFFF;">
<footer style="padding-top: 0.5%;" >
<div style="float:left; margin-left: 5%;">© 2014-2017 Calgarry</div>
<div style="float:right; margin: 0 auto; margin-right: 5%;">Report</div>
</footer>
</div>
Related
I tried to use transform and padding on my element, but it didn't work quite well when you resize your window. It sometimes even goes out of my window. I tried to transform one like 60% to the right and the other one 40%, but that didn't work too. So I want my element to be stuck together with an iframe.
#weertekst{
font-weight:bold;
}
#test {
background-color: #0032A1;
height: 515.5px;
width: 200px;
border-top-left-radius:20px ;
border-bottom-left-radius:20px ;
margin: 0px;
padding: 0px;
justify-content: center;
align-items: center;
/* Positioning */
position: static;
top: auto;
bottom: auto;
right: auto;
left: auto;
float: none;
display: flex;
clear: none;
z-index: auto;
}
#intest{
width: 180px;
height: 453px;
text-align: center;
display: flex;
flex-direction: column;
}
<div id="pad">
<div id="test">
<div id="intest">
<div id="dag-datum">
<div id="dag"><h3>Vandaag</h3></div>
<div class="datum"><span id="datum">...</span></div>
</div>
<div id="weer-logo"><img id="plaatje"></div>
<div id="weer-tekst"><span id="weertekst">...</span></div>
<div id="graden"><h3><!---Temp:---> <span id="temperatuur">...</span> ºC</h3></div>
<div id="directie"><h3 id="nbold">Windrichting:<br></h3> <h3><span id="winddir"></span></h3></div>
<div id="snelheid"><h3 id="nbold">Windsnelheid:<br></h3> <h3><span id="windspeed"></span></h3></div>
</div>
</div>
</div>
<div id="kaart">
<iframe id="radarbeeld" width=503.5 height=515.5>
</iframe>
</div>
Nest your code in a wrapper and use position: sticky;. Also, you were using a lot of padding which seemed unnecessary so I removed it. See the CSS changes I made below.
#pad {
float: left;
}
#kaart {
display: block;
transform: translateX(-30px);
text-align: center;
}
#weertekst{
font-weight:bold;
}
#test {
background-color: #0032A1;
height: 520px;
width: 200px;
border-top-left-radius:20px ;
border-bottom-left-radius:20px ;
margin: 0px;
padding: 0px;
margin-right: 1.8rem;
/* Positioning */
position: sticky;
top: auto;
bottom: auto;
right: auto;
left: auto;
float: none;
display: flex;
clear: none;
z-index: auto;
}
#intest{
width: 180px;
height: 453px;
text-align: center;
display: flex;
flex-direction: column;
}
.wrapper {
display: flex;
justify-content: center;
}
<div class="wrapper">
<div id="pad">
<div id="test">
<div id="intest">
<div id="dag-datum">
<div id="dag"><h3>Vandaag</h3></div>
<div class="datum"><span id="datum">...</span></div>
</div>
<div id="weer-logo"><img id="plaatje"></div>
<div id="weer-tekst"><span id="weertekst">...</span></div>
<div id="graden"><h3><!---Temp:---> <span id="temperatuur">...</span> ºC</h3></div>
<div id="directie"><h3 id="nbold">Windrichting:<br></h3> <h3><span id="winddir"></span></h3></div>
<div id="snelheid"><h3 id="nbold">Windsnelheid:<br></h3> <h3><span id="windspeed"></span></h3></div>
</div>
</div>
</div>
<div id="kaart">
<iframe id="radarbeeld" width=503.5 height=515.5>
</iframe>
</div>
</div>
In this application, a column covering 33.3% and 66.6% of a container was created using Bootstrap 5. The second column, occupying 66.6% of the space inside the container, was divided into two separate 40% and 60% columns. Application test image and developed solution are available below.
#pad {
float: left;
}
#weertekst {
font-weight: bold;
}
#test {
background-color: #0032A1;
height: 515.5px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
margin: 0px;
padding: 0px;
justify-content: center;
align-items: center;
/* Positioning */
position: static;
top: auto;
bottom: auto;
right: auto;
left: auto;
float: none;
display: flex;
clear: none;
z-index: auto;
}
#intest {
width: 180px;
height: 453px;
text-align: center;
display: flex;
flex-direction: column;
}
.specialColumn {
float: left;
}
.left {
width: 40%;
}
.right {
width: 60%;
}
.specialRow:after {
content: "";
display: table;
clear: both;
}
<!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.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div style="margin: 75px;">
<div class="row">
<div class="col-md-4" style="margin: 0px !important; padding: 0px !important;">
<div id="pad" style="width: 100% !important;">
<div id="test">
<div id="intest">
<div id="dag-datum">
<div id="dag">
<h3>Vandaag</h3>
</div>
<div class="datum"><span id="datum">...</span></div>
</div>
<div id="weer-logo"><img id="plaatje"></div>
<div id="weer-tekst"><span id="weertekst">...</span></div>
<div id="graden">
<h3>
<!---Temp:---> <span id="temperatuur">...</span> ºC</h3>
</div>
<div id="directie">
<h3 id="nbold">Windrichting:<br></h3>
<h3><span id="winddir"></span></h3>
</div>
<div id="snelheid">
<h3 id="nbold">Windsnelheid:<br></h3>
<h3><span id="windspeed"></span></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8" style="margin: 0px !important; padding: 0px !important;">
<div class="specialRow">
<div class="specialColumn left" style="background-color:#aaa; height: 515px;">
<h1 class="text-center">%40</h1>
</div>
<div class="specialColumn right" style="background-color:#bbb; height: 515px;">
<h1 class="text-center">%60</h1>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm now working on a website. I tried several times to place the card over the picture. Can you have any suggestions?https://i.stack.imgur.com/goigA.png
one way is set minus margin-top for example: margin-top : -100px
.tag {
position: relative;
left: 0px;
background-color: green;
z-index: 1000;
margin-top: -50px;
width: 100px;
height: 100px;
margin-right: 20px;
}
.d-flex{
display: flex;
}
<div class="container">
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png">
<div class="d-flex">
<div class="tag">Featured</div>
<div class="tag">Featured</div>
<div class="tag">Featured</div>
<div class="tag">Featured</div>
</div>
</div>
I am having a really difficult time trying to figure out why this is happening before I move further along in my development process of this page.
I have a very basic setup:
Fixed Footer
Fixed Header
A col-lg-3 nav bar
A col-lg-9 content box
The problem I am having is the div widths inside the nav col-lg-3 are not taking up the full width of the parent div. They appear to want to sit next to each other., even though I haven't declared a float -- and I have even tried clear:both between them. The div with ID of projects is supposed to be below the div with ID problem-div What am I doing wrong, or not understanding in order for this to happen?
NOTE The reason I am assuming this is a Bootstrap issue, is because if I remove the links to the CDN, the html / css functions as expected.
html,
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
.main-wrapper {
height: 100%;
width: 100%;
background-color: #DDD;
}
#header {
position: fixed;
height: 70px;
top: 0;
left: 0;
width: 100%;
background-color: #FFF;
display: flex;
color: #ED6F2B;
text-align: center;
}
#footer {
position: fixed;
height: 70px;
bottom: 0;
left: 0;
width: 100%;
background-color: #FFF;
}
#info-column {
float: left;
display: flex;
background-color: #CCC;
margin-top: 70px;
overflow-x: hidden;
overflow-y: scroll;
height: calc(100% - 140px);
}
#map-column {
float: left;
display: flex;
background-color: #93E7ED;
margin-top: 70px;
overflow: hidden;
height: calc(100% - 140px);
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="header">
HEADER
</div>
<div class="main-wrapper">
<div id="info-column" class="col-lg-3">
<div id="problem-div" class="text-center">
<div>
<img style="width:45%" alt="" src="logo.png">
</div>
<div>
<h2>THIS PERSON'S COMPANY AND SERVICES</h2>
</div>
<div>(555) 555-5555</div>
<div>person#thispersonscompanyandservices.com</div>
<div>thispersonscompanyandservices.com</div>
</div>
<div id="projects">
PROJECTS
</div>
</div>
<div id="map-column" class="col-lg-9">
MAP CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
This is not bootstrap related. If you remove it you will get the same issue:
html,
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
.main-wrapper {
height: 100%;
width: 100%;
background-color: #DDD;
}
#header {
position: fixed;
height: 70px;
top: 0;
left: 0;
width: 100%;
background-color: #FFF;
display: flex;
color: #ED6F2B;
text-align: center;
}
#footer {
position: fixed;
height: 70px;
bottom: 0;
left: 0;
width: 100%;
background-color: #FFF;
}
#info-column {
float: left;
display: flex;
background-color: #CCC;
margin-top: 70px;
overflow-x: hidden;
overflow-y: scroll;
height: calc(100% - 140px);
}
#map-column {
float: left;
display: flex;
background-color: #93E7ED;
margin-top: 70px;
overflow: hidden;
height: calc(100% - 140px);
}
<div id="header">
HEADER
</div>
<div class="main-wrapper">
<div id="info-column" class="col-lg-3">
<div id="problem-div" class="text-center">
<div>
<img style="width:45%" alt="" src="logo.png">
</div>
<div>
<h2>THIS PERSON'S COMPANY AND SERVICES</h2>
</div>
<div>(555) 555-5555</div>
<div>person#thispersonscompanyandservices.com</div>
<div>thispersonscompanyandservices.com</div>
</div>
<div id="projects">
PROJECTS
</div>
</div>
<div id="map-column" class="col-lg-9">
MAP CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
And this is due to the use of display:flex within #info-column. The default direction is row making both child divs next to each other. Switch to a column direction or simply remove display:flex
html,
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
.main-wrapper {
height: 100%;
width: 100%;
background-color: #DDD;
}
#header {
position: fixed;
height: 70px;
top: 0;
left: 0;
width: 100%;
background-color: #FFF;
display: flex;
color: #ED6F2B;
text-align: center;
}
#footer {
position: fixed;
height: 70px;
bottom: 0;
left: 0;
width: 100%;
background-color: #FFF;
}
#info-column {
float: left;
display: flex;
flex-direction:column;
background-color: #CCC;
margin-top: 70px;
overflow-x: hidden;
overflow-y: scroll;
height: calc(100% - 140px);
}
#map-column {
float: left;
display: flex;
background-color: #93E7ED;
margin-top: 70px;
overflow: hidden;
height: calc(100% - 140px);
}
<div id="header">
HEADER
</div>
<div class="main-wrapper">
<div id="info-column" class="col-lg-3">
<div id="problem-div" class="text-center">
<div>
<img style="width:45%" alt="" src="logo.png">
</div>
<div>
<h2>THIS PERSON'S COMPANY AND SERVICES</h2>
</div>
<div>(555) 555-5555</div>
<div>person#thispersonscompanyandservices.com</div>
<div>thispersonscompanyandservices.com</div>
</div>
<div id="projects">
PROJECTS
</div>
</div>
<div id="map-column" class="col-lg-9">
MAP CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
I have an issue with a sticky footer made with flexbox. It works well on resolutions upto 1366*768 but on 1600*1300 pixels the footer gets pushed to the bottom of the visible screen despite there being very little content.
Here is the html structure that I am using.
body , html {
height: 100%;
}
#main {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#content {
flex: 1;
}
<body>
<div class="ui secondary pointing menu">
<a class="active item"><img src="/assets/images/ti.jpg" class="image ui small"></a>
<div class="right menu"><a class="ui item">Logout</a></div>
</div>
<div id="main">
<div id="content" class="ui container">
<div id="pie-menu" style="position: relative;">
<div class="DVSL-resize-triggers">
<div class="DVSL-expand-trigger">
<div style="width: 1128px; height: 501px;"></div>
</div>
<div class="DVSL-contract-trigger"></div>
</div>
<!--ZoomCharts 1.11.7-->
<div>
<div class="DVSL-background-container" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;">
<div class="DVSL-background" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;">
<div class="DVSL-background-image DVSL-PC-background-image" style="bottom: 0px; top: 92px; left: 405px; width: 317px; height: 317px; background-image: url(http://86.47.106.22:8080/assets/images/DublinPortCo.jpg);"></div>
</div>
</div>
<canvas class="DVSL-canvas" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 1127px; height: 500px;" width="1127" height="500"></canvas>
<div class="DVSL-border" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;"></div>
<div class="DVSL-interaction" tabindex="0" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; cursor: default;">
<div class="DVSL-resizer" style="width: 1127px; left: 0px;"></div>
<div class="DVSL-info-left" style="position: absolute; display: none; left: 752px; top: 256px;"><b>Owl</b></div>
</div>
<div class="DVSL-menu-container DVSL-menu-workaround" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; cursor: default;"><span class="DVSL-empty"> </span></div>
</div>
</div>
</div>
<div class="ui inverted vertical footer segment">
<div class="ui container">
<div class="ui grid">
<div class="twelve wide column">Thermtec 2016. All Rights Reserved</div>
<div class="three wide column"><img src="/assets/images/logoenigma.png" class="image ui small"></div>
</div>
</div>
</div>
</div>
</body>
The site is visible at http://86.47.106.22:8080/
Your header (ui secondary pointing menu) is taking some space while the #main div is 100% of viewport so that becomes [header height] + [viewport height] = footer pushed down
You can try to make the header 10% of viewport and content 90% of viewport to ensure consistency
.ui.secondary.menu {
...
height: 10%;
box-sizing: border-box;
margin-bottom: 0;
}
#main {
display: flex;
flex-direction: column;
height: 90%;
}
I have a fixed header and a image below the header.
The image has a property position: fixed.
Now for some devices the image is not in the center as It should be.
Here's the fiddle for it.
The left side has more spaces than the right hand side.
Also above the image, I want to add a p tag which is not showing up for some reason.
Please let me know what's wrong here.
<div class="content-wrapper new-class">
<div class="container">
<div class="row">
<div class="col-xs-12 ">
<div class="center-logo description">
<img src="http://i.imgur.com/ECTLTbK.png" alt="" class="img-responsive">
<P class="step1description" See price</p>
</div>
</div>
</div>
</div>
</div>
Checkout this solution:
body, html {
margin:0;
padding:0;
}
.content-wrapper {
position: relative;
overflow: hidden;
width: 100%;
background-color: #333230;
}
.content-wrapper .center-logo {
position: fixed;
width: 100%;
top: 125px;
left:0;
text-align: center;
margin: 5px 0 15px;
z-index: 1001;
background-color: #333230;
}
.content-wrapper .center-logo img {
margin: 0 auto;
}
.center-logo p.step1description {
position: relative;
top: -30px;
width: 220px;
text-align: center;
color: #fff;
font-size: 12px;
margin: 0 auto;
}
.description {
margin:30px 0 30px 0 !important;
}
.content-wrapper .content {
text-align: center;
width: 100%;
}
.new-class{
padding-bottom: 134px;
top: 134px;
}
<div class="content-wrapper new-class">
<div class="container">
<div class="row">
<div class="col-xs-12 ">
<div class="center-logo description">
<img src="http://i.imgur.com/ECTLTbK.png" alt="" class="img-responsive">
<p class="step1description"> See price</p>
</div>
</div>
</div>
</div>
</div>
You have some typos on html and css! - Here you can find a working fiddle: http://jsfiddle.net/sebastianbrosch/cxumhp9k/1/
Add left:0 on .content-wrapper .center-logo
.content-wrapper .center-logo { left:0;}