I need to get tiles beside but now whenever i add new one it comes under the old one.
this is my codes
<div class="tiles">
<div id="metro-array">
<a class="metro-tile" style="cursor: pointer; width: 110px; height: 110px; margin:10px; display: block; background-color: deepSkyBlue; color: #fff;">
Name
Age
</a>
<a class="metro-tile" style="cursor: pointer; width: 110px; height: 110px; margin:10px; display: block; background-color: deepSkyBlue; color: #fff;">
name2
Age 2
</a>
</div>
<script src="js/tileJs.js" type="text/javascript"></script>
</div>
my css
.tiles {
margin: 0px;
font-family:'Lato', Helvetica, sans-serif;
line-height: 28px;
font-size: 16px;
color: #333;
font-weight: lighter;
}
#metro-array a, #downloads a {
text-indent: 5px;
font-weight: normal;
text-transform: uppercase;
}
i tried to add margin-left manually . it works , but i will add tiles dynamically so manually adding it is not possible. and please tell me what should i change in my css?
what i'm expecting
what i'm getting
Add
float:left
to your CSS #metro-array a
Here is the demo : Working Fiddle
add float:left to #metro-array a
You can try this. #metro-array a{float:left;}
Add float:left to #metro-array a
Try this,
#metro-array a, #downloads a {
text-indent: 5px;
font-weight: normal;
text-transform: uppercase;
float:left;
}
http://jsfiddle.net/La2g1md6/1/
Related
`Hi, I'd like to make a button with two lines of text and have them in different font sizes... Is there any way? My current way was trying it with an kind of designed button. Could that work in some way? Any help is appreciated! Beneath you see what I'm working with right now... I want to have a second line under "START" which is displayed in a much smaller font size
<a class="smallbtn">START</a>
.smallbtn {
font-family: "Lato Light";
background-color: #58B947;
border-radius:5px;
color: white;
padding: 15px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
width: 73%;
cursor: default;
margin-bottom: 5px;
}
you could do this if you just want to add a new line of text under your "START"
<a class="smallbtn">START<br><sub>hello</sub></a>
or
p{
font-size:12px;
padding:0px;margin:0px;}
<a class="smallbtn">START<br><p>hello</p></a>
You can try insert a div inside the button, give an id to the element and add css, like this:
<a class="smallbtn">START<div id="smallbtnFont">hello</div></a>
#smalbtnFont{
font-family: "arial";
font-size: 1em;
}
good question, heres how:
button {
font-family: "Lato Light";
background-color: #58B947;
border-radius:5px;
color: white;
padding: 15px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
width: 73%;
cursor: default;
margin-bottom: 5px;
}
<button>Start<br><small style="font-size:50%;">Now</small></button>
I have a logo/home button for my webpage which is the abbreviation of my project (the temp letters I use are ABCDEF). I am using Arial for the font (although may change it later). As you can see from the photo of the logo, the letters do not completely align under each other.
I've tried font-kerning: none; which helps but does not completely make it do what I want it to do.
I've made a jsfiddle for this example and here's the link: https://jsfiddle.net/7dfetxto/
Otherwise, here's my code (same as in the jsfiddle):
HTML
<div id="logo">
<a href="#">
<h1>ABC</br>DEF</h1>
</a>
</div>
CSS
#logo{
font-family: "arial", "times", "sans-serif";
width: 128px;
height: 100%;
background-color: #336699;
float: left;
}
#logo a{
width: 100%;
height: 100%;
display: block;
text-decoration: none;
}
#logo h1{
margin: 0px;
padding: 26px 30px;
text-align: center;
text-transform: uppercase;
font-kerning: none;
display: block;
color: white;
}
My goal is to get the letters on the second line to fall directly under their respective letter on the first line.
Thank you.
letter-spacing
Use CSS letter-spacing property.
JSfiddle.
#logo {
font-family: "arial", "times", "sans-serif";
width: 128px;
height: 100%;
background-color: #336699;
float: left;
}
#logo a {
width: 100%;
height: 100%;
display: block;
text-decoration: none;
}
#logo h1 {
margin: 0px;
padding: 26px 30px;
text-align: center;
text-transform: uppercase;
font-kerning: none;
display: block;
color: white;
}
.h1b {
letter-spacing: 3.25px;
}
<div id="logo">
<a href="#">
<h1>ABC<br><span class="h1b">DEF</span></h1>
</a>
</div>
You might find this interesting: kerningjs
There are more possible ways. One is
font-size
By making the font-size of the second line (in this case) bigger, it will grow and reach the two sides of the first line: JSFiddle.
I am working on a simple html/css web page.
What I am trying to do is having an image and a div. Both will be inline display and in div I want to put a link. But when I put a long link title it is not what I expect it to be.
My code is this-
code
<div class="heading"> featured posts
</div>
<div class="img_src">
<img style="height:120px;" src="/uploads/1.jpg"></img>
</div>
<div class="link_src">
<a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</div>
</div>
CSS-
.img_src{
display: inline-block;
margin-top: 3px;
margin-left:-2%;
}
.link_src{
display: inline-block;
background-color: white;
height: 120px;
line-height: 120px;
width: 61%;
margin-top: 3px;
text-transform: uppercase;
}
.inside_link{
margin-left: 2%;
margin-right: 2%;
font-size: 15px;
}
.heading{
display: block;
background-color: #000;
color: #fff;
font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
font-size: 20px;
margin-top:5px;
font-color:white;
margin-left:-2%;
margin-right:-2%;
text-align: center;
line-height: 40px;
height: 40px;
font-style: oblique;
text-transform: uppercase;
}
I searched on google and StackOverflow but I did not get anything useful.
I want it to look like this(DIV wraps full)-
Any suggestion?
You csn use diplay:table-cell instead of inline-block but also I made edit in html by adding div.post that contain the image and title, and remove the inline-style that gave height to the image
<div class="post">
<div class="img_src">
<img src="http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg">
</div>
<div class="link_src">
<a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</div>
</div>
and in the css I give width:20%; to .img_src and width:80%; to .link_src (you can change the widths as you like) and remove height and line height from them and the diplay:table-cell will handle those height
.post{
font-size:0;
display:table;
width:100%;
}
.img_src{
display: table-cell;
vertical-align:top;
width:20%;
}
.img_src img{
width:100%;
}
.link_src{
display: table-cell;
background-color: white;
margin-top: 3px;
text-transform: uppercase;
vertical-align:middle;
width:80%;
}
.inside_link{
margin-left: 2%;
margin-right: 2%;
font-size: 15px;
}
.heading{
display: block;
background-color: #000;
color: #fff;
font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
font-size: 20px;
margin-top:5px;
font-color:white;
margin-left:-2%;
margin-right:-2%;
text-align: center;
line-height: 40px;
height: 40px;
font-style: oblique;
text-transform: uppercase;
}
https://jsfiddle.net/IA7medd/gg7ygdLs/17/
You can achieve that by changing the inline-block display to table-cell and then apply the vertical-align:middle; property on the text container.
That way, the text will be perfectly vertically centered if there are one, two, three lines of content.
.parent{
display: table;
border: 5px solid #ccc;
width: 100%;
}
.img_src{
display: table-cell;
}
.link_src{
display: table-cell;
vertical-align: middle;
background-color: white;
width: 61%;
text-transform: uppercase;
}
See this fiddle
Ok you are using the wrong approach. Line height is causing you the problem. Your html should look like this
<img class="img_src" style="height:120px;" src="/uploads/1.jpg">
<div class="link_src">
<div class="inner_link_src">
<div class="inner_margin">
Link will go here but if there is a long title then it may create some problems..
</div>
</div>
</div>
and your css like this
.img_src{
float:left
}
.link_src{
float:left;
position:relative;
width: 61%;
text-transform: uppercase;
background-color: white;
vertical-align: top;
display:table;
height:120px;
}
.inner_link_src{
display:table-cell;
width:100%;
height:100%;
vertical-align:middle;
margin-left:10px;
}
.inner_margin{
margin-left:10px;
}
see the jsfiddle it is working great
https://jsfiddle.net/gg7ygdLs/27/
You just change your CSS and HTML by following and then you get the desired result.
CSS:
.img_src{
display: inline-block;
margin-top: 3px;
margin-left:-2%;
}
.link_src{
display: inline-block;
background-color: white;
height: 120px;
width: 100%;
margin: 10px 0 10px 3px;
-webkit-box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
-moz-box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
}
.inside_link{
margin: 2%;
display: inline-block;
position:absolute;
padding: 8px;
}
.heading{
display: block;
background-color: #000;
color: #fff;
font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
font-size: 20px;
margin-top:5px;
font-color:white;
margin-left:-2%;
margin-right:-2%;
text-align: center;
line-height: 40px;
height: 40px;
font-style: oblique;
text-transform: uppercase;
}
HTML:
<div class="heading"> featured posts
</div>
<div class="link_src">
<img style="height:120px;" src="http://smashinghub.com/wp-content/uploads/2011/11/Text-Shadow-Box.jpg" />
<a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</div>
Demo
You can simplify your code a lot by using Flexbox.
You can use it for your header as well, to center the title.
.your-header {
display: flex;
align-items: center;
justify-content: center;
}
Then the image container. Use it's more semantic and it's a block element, perfect to wrap an image with a caption or a link in your case:
<figure class="your-figure">
<img class="your-image" src="http://pipsum.com/200x150.jpg"></img>
<a class="your-link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</figure>
and the CSS
.your-figure {
display: flex;
align-items: center;
padding: 4px;
border: 1px solid #ccc;
background-color: #fff;
}
.your-image {
margin-right: 10px;
}
Have a look here for the complete code ;)
Follow this if you don't know Flexbox, might seems daunting at first, but when it clicks in your head it will change your life :) Complete guide to Flexbox
This is my code i try to align texts name and age to bottom but it does not work
<div class="tiles">
<div id="metro-array">
<a class="metro-tile" style="cursor: pointer; width: 110px; height: 110px; display: block; background-color: deepSkyBlue; color: #fff;">
<span style="margin-top:100px">
Name
<span>
Age
</a>
<a class="metro-tile" style="cursor: pointer; width: 110px; height: 110px; display: block; background-color: deepSkyBlue; color: #fff;">
name2
Age 2
</a>
</div>
</div>
My Css
.tiles {
font-family:'Lato', Helvetica, sans-serif;
line-height: 28px;
font-size: 16px;
color: #333;
font-weight: lighter;
}
#metro-array a, #downloads a {
font-weight: normal;
text-transform: uppercase;
float:left;
}
}
I tried these for that span
margin-top:100px and `margin-top:-100px`
but it is not working
I have edited your code to accomplish the margin you are aiming for.
http://plnkr.co/edit/VJYpZa76UL06FLlRpRJr?p=preview
I moved all the styles to style.css because it is good practice to separate your CSS from your HTML.
please remove float and display blog and try it.
Love Demo
HTML
<div class="tiles">
<div id="metro-array">
<a class="metro-tile align-top">
<span>
Name
<span>
Age
</a>
<a class="metro-tile align-middle">
name2
Age 2
</a>
<a class="metro-tile align-bottom">
name3
Age 3
</a>
</div>
CSS
.tiles {
font-family:'Lato', Helvetica, sans-serif;
line-height: 28px;
font-size: 16px;
color: #333;
font-weight: lighter;
}
#metro-array a, #downloads a {
font-weight: normal;
text-transform: uppercase;
cursor: pointer;
width: 110px;
height: 130px;
display: table-cell;
background-color: deepSkyBlue;
color: #fff;
}
a.align-bottom{
vertical-align:bottom;
}
a.align-top{
vertical-align:top;
}
a.align-middle{
vertical-align:middle;
}
You can apply the display block style to the element and it should fix the top and bottom margin issue. Before that make correction on your code. close the span tag.
<span style="display:block;margin-top:100px;">Name</span>
If you need it stick to left side or right side of any other inline element, use the float:left or float:right style.
span is an inline element. First make it block or inline-block and then add margin.
I have the following code:
.tratoresList h3{
font-family: "opensans-light-webfont";
font-size: 17px;
color: #000;
width: 210px;
text-align: center;
}
.tratoresList strong{
font-family: "opensans-extrabold-webfont";
font-size: 17px;
color: #000;
width: 210px;
}
.tratoresList strong, .tratoresList h3:hover{
font-family: "opensans-extrabold-webfont";
font-size: 17px;
color: #a80000;
width: 210px;
}
And here is the HTML, can someone say me what is wrong?
<ul class="margin-top-50 tratoresList">
<li>
<img src="./imagens/trator1.png" />
<h3>linha <strong>4000</strong></h3>
<div class="tratoresListArrow"></div>
</li>
When I hover within the h3 he has to do the hover also in strong and vice versa.
What did I do wrong?
.tratoresList h3{
font-family: "opensans-light-webfont";
font-size: 17px;
color: #000;
width: 210px;
text-align: center;
}
.tratoresList strong{
font-family: "opensans-extrabold-webfont";
font-size: 17px;
color: #000;
width: 210px;
}
.tratoresList h3:hover, .tratoresList h3:hover ~ strong{
font-family: "opensans-extrabold-webfont";
font-size: 17px;
color: #a80000;
width: 210px;
}
<div class="tratoresList">
<h3>CSS - HOVER AN ELEMENT THAT WILL TAKE EFFECT IN ANOTHER</h3>
<strong>I THINK ITS POSSIBLE NOW !</strong>
</div>
I hope it helps you....
You cannot do this in CSS3 unless the strong element can be specified in the same selector as h3:hover (right now, this only works when the strong element is an sibling), however otherwise you cannot do "disjoint" effects using pure CSS, you must use scripting. Here's a quick example (that doesn't use jQuery for once). I haven't tested it - it might work, it might not. Have fun!
document.querySelectorAll(".tratoresList h3")forEach( function(el1) {
el1.addEventListener("mouseover", function() {
document.querySelectorAll(".tratoresList strong").forEach( function(el2) {
el2.classList.toggleClass("hoverEffect");
} );
});
} );
If you want to change the style of text in strong tags(inside h3) when you hover over h3..
.tratoresList h3:hover strong{
color: green;
}}