I'm working on mobile app. I'm trying to align 3 images one below the other at the right corner with adjacent to the text. Please suggest me. Thanks in advance. Below is my Code
<div>
<ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-icon="false">
<li class="custom">
<h3>Week </h3>
<p class="topic">Sun </p>
<p>Mon</p>
<p>Tue </p>
<p class="ui-li-aside"> <span> <img src="images/progressnew.png" alt="download"> </span> <span> <img src="images/progressnew.png" alt="download"> </span> <span> <img src="images/progressnew.png" alt="download"> </span> </p>
</li>
</ul>
</div>
<styles>
.ui-listview .ui-li-aside {
position: absolute;
top: 1em;
right: 0.444em;
margin:24px;
text-align: right;
}
</styles>
Just add:
.ui-listview .ui-li-aside span{
display: block;
}
This tells the SPANS that contain the images to display as block elements instead of inline elements.
DEMO
Related
I ran into problem, I'm CSS newbie and can't figure it out how to dynamically stretch comment section to fit height.
Height of right div is dictated by image width, so I cant set static height of right div, also can't set min-height and max-height on comment div, because it will not fit on bigger picture.
What I want is somehow to fit comment section that has height of like 50% correlating to height of parent div.
Any ideas how to make it work ? Some ideas would be enough to look into right direction. Don't care about old IE versions, so newest CSS additions are viable, and javascript is also an option if it's hassle to do with css.
<div class="post-container">
<div class="image-container">
<div class="image-holder">
<img class="image" src="http://www.onionlegal-fortstjohn.ca/wp-content/uploads/2015/03/300x600-Half-Page-Display-Ad-Placeholder.jpg"/>
</div>
</div>
<div class="post-details-container">
<div class="header">
<div class="image-container">
<div class="image-holder">
<img
class="profile image"
src="https://i.stack.imgur.com/7lf40.gif"
/>
</div>
</div>
<ul class="comments-container">
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
</ul>
<div class="footer">
FOOTER ALWAYS ON BOTTOM
</div>
</div>
CSS
.post-container {
display: flex;
border: 1px solid #e6e6e6;
flex-direction: row;
max-width: 906px;
background-color: #fff;
}
.header {
padding-bottom: 15px;
padding-top: 15px;
margin-right: 20px;
margin-left: 20px;
flex-direction: row;
align-items: center;
}
.image {
height: auto;
width: 100%;
height: auto;
max-width: 100%;
}
.profile {
width: 45px;
height: 45px;
border-radius: 50%;
}
.comments-container {
list-style-type: none;
margin: 0;
padding: 0;
max-width: 280px;
}
.comment {
margin-bottom: 15px;
}
.footer {
bottom: 0;
position: fixed;
}
If the image and the comment section are siblings then
Remove any height attribute(min-height, max-height, height)
Give display: flex; to their parents and
Give align-items: stretch to comment section.
I may make any mistake cause this kind of question should have demo link or you should share your html and css here.
Additional Problems:
Header Tag is not closed.
Footer need not required to be fixed.
Solution:
Add a closing div tag before .comments-container
Remove css for .footer
Make .post-details-container display as flex and direction as column
Set .comments-container to flex-grow as 1
Working code at https://jsfiddle.net/ou21qe09/
.post-details-container {
display: flex;
flex-direction: column;
}
.comments-container {
flex-grow: 1;
}
I am new to html coding and I could not find exact and clear solution for my problem.
I want to create a page with this format: I want to do the page with list of html.
Here is my html code:
Although I made alignment center my picture is on the left side of the page. What is wrong or missing with my code?
There is no float: center. Only float: left and float: right. You can left-float all of <p> inside the <li> and set the width of them to 33.33%.
In this case the image has to be responsive:
img {
height: auto;
max-width: 100%;
}
Every <li> represent a row
<ul>
<li>
<p>text</p>
<p><img src=""></p>
<p>text</p>
</li>
</ul>
In total
img {
width: 100%;
height: auto;
}
ul {
list-style-type: none;
}
ul>li>* {
box-sizing: border-box;
display: block;
float: left;
word-break: break-all;
padding: 0 5px;
width: 33.333%;
}
.text-center {
text-align: center;
}
.full-width {
width: 100%;
}
<ul>
<li>
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
<p class="text-center">
<img src="http://placehold.it/300x200" alt="">
</p>
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</li>
<li>
</li>
<li>
<p class="full-width">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</li>
<li>
<p class="full-width">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</li>
<li>
<li>
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
<p class="text-center">
<img src="http://placehold.it/300x200" alt="">
</p>
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</li>
</ul>
You would probably be best looking into using a grid system. I would recommend using Twitter's Bootstrap - definitely the best as easiest to start using
http://getbootstrap.com/
I'm trying to align two divs horizontally inside my HTML: the first one contains an image and the second a text, and this is the used code:
<div style="float: left; width: 55px;">
<img src="../img/look.svg" alt="">
</div>
<div style="display: inline-block;">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
I tried many methods, but I've been unable to get the text line in the same level as the image vertical axis, and the text inside the second div gets displayed very far from the image vertically.
So, is there any possibility to fix that?
The problem is with the float. The vertical-align: middle; line-height: 1; will fix the issue:
div {
display: inline-block;
vertical-align: top;
line-height: 1;
}
div:first-child {
width: 55px;
}
<div>
<img src="//placehold.it/50?text=DP" alt="">
</div>
<div style="display: inline-block; vertical-align: middle; line-height: 1;">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
Preview
Top Alignment:
Middle Alignment:
The vertical-align decides the vertical alignment. If you want the image and text to be on the same line, use vertical-align: top.
A few things first:
don't use inline styles
don't mix float with inline-block
Option 1: using flebox
section {
display: flex;
gap: 10px;
}
<section>
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
</section>
Option #2 using inline-block
div {
display:inline-block;
vertical-align:top;
margin-right:10px
}
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
Option #3 using float
div {
float: left;
margin-right:10px
}
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
flexbox to the rescue.
I added your divs inside another one, which will align its items. In my CSS my image has 100px so I changed the width to 100px. Change yours accordingly.
.halign {
display:flex;
align-items: center;
}
<div class="halign">
<div style="width: 100px;">
<img src="http://lorempixel.com/100/100/" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
</div>
Try to seprate the CSS and HTML and do not mix display:inline-block with float:left. Also use clear:both after both div
<style>
.fisrstDiv {
float: left;
display:block;
}
.secondDiv {
float: left;
display:block;
}
.clear {
clear: both;
}
</style>
HTML
<div class="fisrstDiv">
<img src="//placehold.it/50?text=DP" alt="">
</div>
<div class="secondDiv">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
<div class="clear"></div>
I have got the look I desire with my css. A centered <p> and <div> one on top of the other and they are both wrapped in <a> tags.
Now my issue is that the <a> tags go for the entire width of the page, I just want to be able to click on the link where the actual content is.
example link:
https://jsfiddle.net/vinko_k_design/dge4fx2z/
Put the anchor tags inside the p tag.
<p class="page-nav">Check out our Map</p>
Using a span (inline element) instead of a div/p (block element), and moving the text-align property to the upper level will fix your issue. As follows:
.page-nav-buttons {
text-align: center;
}
.page-nav {
}
.page-nav-img {
width: 20px;
height: 20px;
background-color: red;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
<div class="page-nav-buttons">
<a href="#map">
<span class="page-nav">Check out our Map</span>
</a>
<br/>
<a href="#map">
<span class="page-nav-img"></span>
</a>
</div>
Try this
https://jsfiddle.net/dge4fx2z/1/
<div class="page-nav-buttons">
<p class="page-nav"> <a href="#map">
Check out our Map
</a>
</p> <span class="page-nav-img">
<a href="#map">
<span class="page-nav-img"></span>
</a>
</span>
</div>
QUESTION: I am trying to get my {{TEXT}} or ".acton" section to remain centered in the body of the page and between the footer and header at all times.
I'm using this template to build out landing pages in a marketing automation software called ACT-ON. So hopefully whatever fix we can put in for the body content to remain centered will take.
Here is my jsfiddle:
http://jsfiddle.net/misterizzo/dMu79/
<body>
<div id="bg">
<img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
<div id="header">
<div id="top-left"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
<div class="acton">
{{TEXT}}
</div>
<div id="footer">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
</div>
</div>
</body>
Hopefully this is my last questions on this template i've been building.
I sincerely appreciate all the help from everyone so far!
you can easely use the display : table,table-row/table-cell properies along with : vertical-align:middle; if your HTML is valid and with the structure needed.
Reset CSS should be loaded in front of your own CSS, it will, as well, avoid to use !important.
// comment // is not a valid comment in CSS, but /* comment */ is.
http://jsfiddle.net/dMu79/7/
basicly the structure is :
<body or wrapper><!-- as heigh/width:100%; and display:table -->
<header> as table-row</header>
<main> as table-cell and height:100% , it will shrink to leave space to header and footer</main>
<footer> as table-row</footer>
</body or wrapper>
Here is one solution that may work for you:
Demo Fiddle
CSS:
.acton {
width: 900px;
position: relative;
margin-left: auto;
margin-right: auto;
height: auto;
top: 106px;
}
You're HTML is broken in places and is missing a closing div. I've fixed it in this Fiddle and the updated code is below:
<div id="header">
<div id="top-left">
<img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li>
<span class="button">NewsWorthy</span>
</li>
<!-- the closing span's were after the closing A -->
...
</ul>
</div>
</div> <!-- this div was missing -->
I fixed it by setting a margin top in the .action section.
Also I removed the position-right and position-left
Notice that the margin-top is set to 40%. This is because it takes in to account the nav and the footer. You can play with the margin depending on the other content that is added above it or below it.
working jsfiddle
http://jsfiddle.net/dMu79/9/
.acton {
width: 900px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 40%;
text-align: center;
}