I'm developing an application with Ionic and Angular, and i'm trying to rewrite the css of the list items to display data the way I want.
Here is what I want it to look like :
But I'm having some problem setting the padding between the images, it doesn't work at all.
and also the automatic height, I'm using ng-if for wether display the news or not, when not displaying the news I have this empty div showing
Here is my code :
<div class="list">
<div class="item item-divider">
Teams
</div>
<div class="item" style="height:150px;" ng-repeat="team in teams">
<img ng-src="https://upload.wikimedia.org/wikipedia/en/thumb/4/47/FC_Barcelona_(crest).svg/1010px-FC_Barcelona_(crest).svg.png" style="position:absolute; top:10px; left:10px; width:25px; height:25px" >
<p style="left:50px; position:absolute; color:black; font-size:16px; top:12px">{{team.name}}</p> <p style="right:30px; position:absolute; top:12px"> Tout</p>
<i class="icon ion-chevron-right" style="position:absolute; right:10px; color:grey; top:12px"></i>
<ion-scroll direction="x" scrollbar-x="false" style="width:100%; position:absolute; top:50px" ng-if="team.news=='true'">
<div style="height:85px; width:500px; position:relative " >
<div style="width:110px; display: inline-block; position:static; padding-right:5px" ng-repeat="item in items">
<img src="http://fr.starafrica.com/football/wp-content/blogs.dir/2/files/2015/07/sporever/272576_PALERME_LAZAAR_220215-615x340.jpg" style="height:65px; width:110px">
<p style="font-size:9px; color:black">News1</p>
</div>
</div>
</ion-scroll>
</div>
Here is also a plunker DEMO
You can give padding-right to img.
Hi Now you can used to this css i see your demo and suggest to you used to this css
.scroll > div > div + div {
margin-left: 5px;
}
You can do what others have said or
Try this.
.scroll img {
padding-left: 2px;
}
Demo here:http://codepen.io/anon/pen/LVXeRy
Related
I tried several things but I am out of luck. I need to build a button containing an image and text over a button background image. Also, clicking anywhere inside the button should redirect to a page, for example, google.com. This is how the button should look like
The challenge I am having is that when the button text changes or when the screen size changes, the alignment of the image and the text gets messed up. I want to wrap the button text if it is too large. How do I wrap the button text and still align everything correctly? Also, I want the button width to be the same as I have to build multiple buttons of the same size with varied texts and images. Thank you so much. A quicker solution will be appreciated as I am anxious to see what I am doing wrong. Here is the code I have so far: JSFiddle
<a href="https://www.google.com" style="color: white !important; background-color: #7FFF00;padding: 25px;width: 50px;">
<span style="margin-bottom: 5%;">
<img src="http://placehold.it/30x30" height:100%; style="display: inline-block;" width="30" height="30" />
<span style="display: inline-block;">
<b><font size ="2" color="BLACK" face="Arial">CLICK ON THE IMAGE TO VIEW MORE DETAILS ABOUT THE ITEM </font> </b>
</span>
</span>
</a>
img{
width:30px;
height:30px;
}
a{
text-decoration:none;
color:black;}
#img{
float:left;
}
#img,#text{
display:inline;
}
#main{
margin-top:20px;
width:250px;
border:2px solid black;
border-radius:10px;
background:yellowgreen;
}
#container{
margin:15px;
}
div.clickable {
position:relative;
}
div.clickable #mainlink {
position:absolute;
width:100%;
height:100%;
}
<div class="clickable">
<a href="www.google.com" id="mainlink">
<div id="main">
<div id="container">
<div id="img">
<img src="http://oer.nios.ac.in/wiki/images/thumb/4/47/Thumpsup.png/200px-Thumpsup.png"/>
</div>
<div id="text">
<span>Click on the image to view more about the item</span>
</div>
</div>
</div>
</a>
</div>
I am trying to work out the best way for me to center each of my pictures (#contact1, #contact2, #contact3) inside each of their containers. I have tried to put margin left etc but doesnt work for when I scale up.
I have a JSFiddle I have started: http://jsfiddle.net/tJugd/3592/
HTML:
<div class="slide" style="height:66px;">
<div class="staff staff-matt" data-hammer="[object Object]">
<div id="contact1"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
</div>
<div class="staff staff-shail" data-hammer="[object Object]">
<div id="contact2"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
</div>
<div class="staff staff-leah" data-hammer="[object Object]">
<div id="contact3"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
</div>
</div>
CSS: (View all on JSFiddle)
#contact1, #contact2, #contact3{
position:relative;
background-color:white;
width:100%;
height:66px;
}
You will need to make you images display block and add margin 0 auto to it
#contact1 img, #contact2 img, #contact3 img{
margin: 0px auto;
display:block;
}
Try:
margin-left: auto;
margin-right: auto;
This makes your image have an equal margin on both sides, and usually works with most divs and images.
Try with adding the attribute text-align: center; to staff class.
I am trying to create a simple menu using the following html setup:
<div class="container">
<div class="container-cell">
<a href="play.html">
<div class="menu-option no-margintop">
<div class="play-icon">
<span class="helper"></span><img src="./img/icon_1.png"/>
</div>
<div class="menu-text"><span>Play</span></div>
</div>
</a>
<a href="index.html">
<div class="menu-option">
<div class="play-icon">
<span class="helper"></span><img src="./img/icon_3.png"/>
</div>
<div class="menu-text"><span>Highscore</span></div>
</div>
</a>
<a href="index.html">
<div class="menu-option">
<div class="play-icon">
<span class="helper"></span><img src="./img/icon_2.png"/>
</div>
<div class="menu-text"><span>FAQ</span></div>
</div>
</a>
</div>
</div>
In the process of creating this, I made a switch from hard pixels to percentages. Whereas the pixel version of setting hights works, it does not seem to work in percentages. The hight for one particular class, menu-option, does not seem to get picked up by the browser.
I have been searching for a while, and the only solutions I came across, was setting a height to both the body and html (100%). I have also set a height to any of the container-elements.
See css below:
html, body{
height:100%;
}
.container {
display:table;
width:100%;
height:70%;
}
.container-cell {
display:table-cell;
vertical-align: middle;
height:100%;
}
.menu-option{
width:90%;
margin-left:5%;
border-radius:10px;
background-color:rgba(17,23,28,0.2);
height:6.94%;
margin-top:5%;
font-size:150%;
}
Why is the browser not picking up on the height in percentage and how can make it use the height in percentage?
Add display: inline-block; to your menu-option class for the height property to work. Something like this:
.menu-option{
display: inline-block;
width:90%;
margin-left:5%;
border-radius:10px;
background-color:rgba(17,23,28,0.2);
height:6.94%;
margin-top:5%;
font-size:150%;
}
Here's a jsfiddle of the above: https://jsfiddle.net/AndrewL32/e0d8my79/17/
This is my code which is working fine but when i change my headline2text to "Sale Price $25 . This is a sample text. $244" then auto logo image changes its position. I do not want logo to change its position but it should remain on its place and should not be affected by the headline2Txt. How to fix this issue?
<div id="wrapper">
<div id="mainContainer">
<p class="copyrights" id="copyrights"></p>
<div>
<img id="Image_Car" src="http://i.share.pho.to/25a090ef_c.png" />
</div>
<div id="headlineText">
<p id="headline1Txt" >Sample bag1</p>
<p id="headline2Txt" >Sale Price $25 </p>
</div>
<div id="disclaimer" >
Details*
</div>
<div id="Image_logo">
<img id="Imglogo" src="http://i.share.pho.to/93578bd4_o.png" />
</div>
<div >
<button class="btn btn-primary" type="button" id="ctaBtn"><div id="fadeIn" > Learn More Now </div></button>
</div>
</div>
#Image_logo img
{
position:relative;
width:140px;
height:30px;
top:-3px;
left:390px;
}
</div>
I may not understand what you're asking, but I think the lack of a float is throwing you. Adding some css like this..
<style>
#Image_logo img {
width:140px;
height:30px;
}
#wrapper {
float:left;
}
</style>
...should work. It should be in a separate .css file of course.
You have position: relative; on #Image_logo img yet you try to position it the "absolute way". Try to change your CSS like this:
#Image_logo img {
position:absolute;
width:140px;
height:30px;
top:40px;
left:390px;
}
Try giving your #Image_logo img position: absolute instead of relative, then modify top, left etc. Then it should be always in the same place;
I have a web page which is designed using twitter bootstrap along with it's responsive css inclusion to make everything responsive on different window sizes.But the image in the following codes not re-sizing itself when browser resized, so is not showing responsiveness
<div class="container-fluid">
<div class="row-fluid">
<div class="span"> <div class="media">
<img class="mod-picture" src="images/picture.jpg" alt="post picture" /> <div class="media-container"><a class="link-name" href="#" target="_blank">media name</a></div>
</div></div></div></div>
In css file styles are -
.media-link
{
float:left;
border:1px solid #ccc;
display:inline-block;
color:#3B5998;
cursor:pointer;
margin-right:5px;
}
.mod-picture{
margin-right:10px;
border:0;
display:block;
margin:3px;
}
but if i remove float:left; and display:inline-block; styles from media-link class then image is resizing on browser window size changes.But i can't remove these two properties because next content with class "media-container" need to be appear on right.I tried in many ways like adding float:left in the div before link but failed.Please suggest me.
If you are using bootstrap 3, then you may need to add the class 'img-responsive' to your 'img' tag.
You can take styles from Bootstrap 3 and apply for your code:
<a href="http://facebook.com" target="_blank" class="media-link">
<img class="mod-picture" src="images/picture.jpg" alt="post picture" />
</a>
.media-link{
//nothing styles
}
.mod-picture{
// max width of image
max-width: 50%;
float: left;
display: block;
border:1px solid #ccc;
}
If you are using bootstrap 3 which you should. Then just add class img-responsive to img tag. and That's all to make it responsive.
Here is CDN link for bootstrap3 css. You don't even need to add bootstrap-responsive css.
//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
In case bootstrap 2.3 existing problem use this-
<div class="container-fluid">
<div class="row-fluid">
<div class="span-12">
<div class="media">
<a href="http://facebook.com" target="_blank" class="media-link">
<img class="mod-picture" src="images/picture.jpg" alt="post picture" />
</a>
<div class="media-container">
<a class="link-name" href="#" target="_blank">media name</a>
</div>
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
.mod-picture{
width:40%;
padding:5%;
max-width: 200px;
height:auto;
float:left;
}
.media-container{
display:inline-block;
}