CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user7349650
user7349650

Reputation:

Putting div directly above footer

I am currently making an app. I would like the time to be directly above the footer instead of below the google translator. Is there anyway to do this? I have attached a picture at the end to show how it is looking like right now. 

<!-- codes that not related-->

    <div id="demo"></div> <!-- TIME -->

<footer data-role="footer" class="ui-footer-fixed">
    <h4>Copyright 2017</h4>
</footer>

I have added in the css as requested below. 

.ui-header,
.ui-footer {
border-width: 1px 0;
border-style: solid;
position: relative;
}

.ui-header:empty,
.ui-footer:empty {
min-height: 2.6875em;
}

.ui-header .ui-title,
.ui-footer .ui-title {
font-size: 1em;
min-height: 1.1em;
text-align: center;
display: block;
margin: 0 30%;
padding: .7em 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
outline: 0 !important;
}

.ui-footer .ui-title {
margin: 0 1em;
}
.ui-content {
border-width: 0;
overflow: visible;
overflow-x: hidden;
padding: 1em;
}

/* Corner styling for dialogs and popups */
.ui-corner-all > .ui-header:first-child,
.ui-corner-all > .ui-content:first-child,
.ui-corner-all > .ui-footer:first-child {
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
}

.ui-corner-all > .ui-header:last-child,
.ui-corner-all > .ui-content:last-child,
.ui-corner-all > .ui-footer:last-child {
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}

Upvotes: 0

Views: 102

Answers (2)

Raihanul Alam Hridoy
Raihanul Alam Hridoy

Reputation: 561

I wanted to show image on top of footer text. So, I wrote this code.

<footer class="footer bg-white" data-background-color="black">
    <div style="position: absolute; right: 20px; top: -90px">
        <img src="{{asset('assets/img/ict_div.png')}}" alt="" style="width: 150px">
    </div>

    <div class="container">
      footer data
    </div>
</footer>

Upvotes: 0

Master Yoda
Master Yoda

Reputation: 4402

Will something like the below work for you?

I had to tweak your HTML markup a little bit to show how it would work. 

.ui-footer-fixed {
  position: fixed;
  bottom: 0;
  width: 100%;
}

#demo, h4 {
  margin:  0;
  padding: 5px;
}

.center {
  text-align: center;
}
<article class='center'>
  <header>
    <h1>Heading</h1>
  </header>
</article>

<article>
  <div>Main body of page</div>
</article>

<article class='center'>
  <footer data-role="footer" class="ui-footer-fixed">
    <div id="demo">
      4th December 2017 @16:40
    </div>
    <h4>Copyright 2017</h4>
  </footer>
<article>

Upvotes: 2

Related Questions