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.
Related
I have an image and some text in p tag and link to be aligned vertically. it works nicely when I float the image. but when I use padding left in the p tag and the link, it doesn't get the padding perfectly.
click here to see the image I need look like
here is a fiddle
.wrapper {
font-family: sans-serif;
width: 400px;
margin-top: 30px;
margin-bottom: 30px;
clear:both
}
img {
float: left;
}
p.text {
padding-left: 30px;
display: block;
padding-bottom: 22px;
color: #222222;
}
a.link {
text-decoration: none;
padding-left: 30px;
text-transform: uppercase;
line-height: 22px;
color: #777777;
}
a.date {
color: #e10622;
text-decoration: none;
}
<div class="wrapper">
<img src="https://placehold.it/100x100" alt="">
<p class="text">Posted By: Simon | 26 July 2016</p>
<a href="#" class="link">Days are all happiness is key
and Free</a>
</div>
<div class="wrapper">
<img src="https://placehold.it/100x100" alt="">
<p class="text">Posted By: Simon | 26 July 2016</p>
<a href="#" class="link">Days are all happiness is key
and Free</a>
</div>
<div class="wrapper">
<img src="https://placehold.it/100x100" alt="">
<p class="text">Posted By: Simon | 26 July 2016</p>
<a href="#" class="link">Days are all happiness is key
and Free</a>
</div>
<br>
<br>
<br>
Please see here what I need
thanks in advance. :)
You need to add display: block; to your a.link class styles. Also, set margin-right: 30px; on your image, and remove the padding-left: 30px; styles from your p.text and a.link elements. Final CSS would be as follows:
.wrapper {
font-family: sans-serif;
width: 400px;
margin-top: 30px;
margin-bottom: 30px;
}
img {
float: left;
margin-right: 30px;
}
p.text {
display: block;
padding-bottom: 22px;
color: #222222;
}
a.link {
text-decoration: none;
text-transform: uppercase;
line-height: 22px;
color: #777777;
display: block;
}
I have a quick solution for you. Looks like you needed to add a container around the text and then add the padding you wish. See below for quick instructions.
Add the following to your css:
div.textcontainer{
padding-left:130px
}
Also remove padding-left:30px from p.text as shown below:
p.text {
display: block;
padding-bottom: 22px;
color: #222222;
}
and lastly add a container around the text as below:
<div class="textcontainer">
//Insert coding you wish
</div>
This is the quick fix to your solution. Ideally you would want to use something like bootstrap or some other css frame work to make this fluid in design. I hope this works for you.
I have a CSS greybox: (When I say greybox, I mean the CSS box I have created that I have made with the color grey as you can see down below.)
.navigation-div
{
margin-top: 14px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.47);
padding: 0;
color: #E3E3E3;
background-color: #333;
}
This greybox is inside of my header and since this greybox is bigger than it appears, it goes past the header image but doesn't appear.
With this:
<div class="navigation-bar">
<a class="navigation-div-blur">
<div class="navigation-div">
<nav class="navigation">
<img id="mailpicture" src="images/gmail.png">
<h1 id="mailtext">Mail Us</h1>
<h1 id="nava">test</h1>
</nav>
</div>
</a>
</div>
The picture and Mail Us show in the correct position not exposing the box. The test however, when I put it in exposes the box.
Here is the CSS I have behind this
#mailtext
{
margin-top: 20px;
display: inline-block;
margin-left: 1230px;
font-size: 20px;
color: white;
font-style: italic;
}
#mailpicture
{
display: inline-block;
margin-top: 16px;
float: right;
}
#nava
{
font-size: 20px;
color: white;
font-weight: bold;
font-style: italic;
margin-top: 20px;
display: inline-block;
margin-left: 500px;
}
You already saw the box for CSS.
I would like to accomplish either one of two things: Make the CSS box smaller and lower it, or have the CSS correctly position the test along with more elements to stay in the same line as the Mail Us.
NOTE: I have tried for the test margin-top:-pixels, this does not go up high enough and stops going up after a while.
This is what it looks like with the test:
This is what it looks like without the test:
As you can notice the first one has a larger box that drops down beneath the header picture. The one without the test has stayed in the header's picture.
There are a few problems with your code.
First, you should not nest anchors (<a>) in other anchor elements.
Using margin to position elements is not a good idea, you are already trying to use inline-block to change default block display of headers and at the same time you are floating one of your inline-block elements to the right.
Adding big margin to the element makes the element use more space and moves next inline element to the new line if it cannot fit in one line with other elements.
If you want to position all your menu items to the right you can use text- align:right on your inline-block elements to stick them to the right.
If you want your mail element be on the right you may stick to using float:right on it, but it would also be easier to just place mail element as the last one in the nav
You can nest anchors <a> inside headers <h1> to create links inside headers
<h1 id="mailtext">Mail Us <img id="mailpicture" src="images/gmail.png"></h1>
http://jsbin.com/kazocekoba/1/
.navigation-div
{
margin-top: 14px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.47);
padding: 0;
color: #E3E3E3;
background-color: #333;
text-align: right;
}
#mailtext
{
margin-top: 20px;
display: inline-block;
/* margin-left: 1230px;*/
font-size: 20px;
color: white;
font-style: italic;
}
#mailpicture
{
display: inline-block;
margin-top: 16px;
float: right;
}
#nava
{
font-size: 20px;
color: white;
font-weight: bold;
font-style: italic;
margin-top: 20px;
display: inline-block;
/*margin-left: 500px;*/
}
/* use padding to separate your navigation elements */
.navigation > * {
padding-left: 2em;
}
<div class="navigation-bar">
<a class="navigation-div-blur">
<div class="navigation-div">
<nav class="navigation">
<!-- --><img id="mailpicture" src="images/gmail.png">
<h1 id="mailtext">Mail Us</h1>
<h1 id="nava">test</h1>
</nav>
</div>
</a>
</div>
A bit better solution http://jsbin.com/xunokaviju/1/
.navigation-div
{
margin-top: 14px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.47);
padding: 0;
color: #E3E3E3;
background-color: #333;
text-align: right;
}
#mailtext
{
margin-top: 20px;
display: inline-block;
/* margin-left: 1230px;*/
font-size: 20px;
color: white;
font-style: italic;
}
#mailpicture
{
display: inline-block;
margin-top: 16px;
/*float: right;*/
}
#nava
{
font-size: 20px;
color: white;
font-weight: bold;
font-style: italic;
margin-top: 20px;
display: inline-block;
/*margin-left: 500px;*/
}
/* use padding to pad elements */
.navigation > * {
padding-left: 1em;
}
<div class="navigation-bar">
<a class="navigation-div-blur">
<div class="navigation-div">
<nav class="navigation">
<!-- -->
<h1 id="nava">test</h1>
<h1 id="mailtext">Mail Us <img id="mailpicture" src="images/gmail.png"> </h1>
</nav>
</div>
</a>
</div>
In #mailtext the margin-left:1230 is the problem. Keeping your code just as it is the only change you'll have to make looks like this:
#mailtext
{
float: right;
font-size: 20px;
color: white;
font-style: italic;
}
change your
#mailtext
{
margin-top: 20px;
display: inline-block;
margin-left: 1230px;
font-size: 20px;
color: white;
font-style: italic;
}
to
#mailtext
{
margin-top: 20px;
display: inline-block;
float:right;
font-size: 20px;
color: white;
font-style: italic;
}
Hope it solves your problem
I've the following problem:
The a tags automatically align to the bottom of the bigger a tag.
I would like to know why and what i can do against it.
Here is my code:
body {
margin: 0;
font-family: 'Ubuntu', sans-serif;
}
#navigation {
background-color: #760209;
width: 100%;
height: 55px;
}
#navigation a {
text-decoration: none;
color: #FFF;
/*line-height: 55px;*/
}
#navigation .logo {
font-size: 28px;
font-weight: bold;
}
<div id="navigation">
<div class="container_12">
<a class="logo" href="#">test1</a>
<a class="btn" href="#">Mein Profil</a>
<a class="btn" href="#">Fragen</a>
</div>
</div>
Do a vertical-align to your <a>
#navigation a {
text-decoration: none;
color: #FFF;
/*line-height: 55px;*/
vertical-align:middle; //This line over here
}
You need the vertical-align css property.
You can either use vertical-align: middle; or vertical-align: top;
body {
margin: 0;
font-family: 'Ubuntu', sans-serif;
}
#navigation {
background-color: #760209;
width: 100%;
height: 55px;
}
#navigation a {
text-decoration: none;
color: #FFF;
vertical-align: middle; /* <------- */
}
#navigation .logo {
font-size: 28px;
font-weight: bold;
}
<div id="navigation">
<div class="container_12">
<a class="logo" href="#">test1</a>
<a class="btn" href="#">Mein Profil</a>
<a class="btn" href="#">Fragen</a>
</div>
</div>
You can add:
.btn{
vertical-align:top;
}
if you need to align them to the top.
The default value of vertical align is baseline, which means that the element will be aligned to the baseline of the parent element.
That's why in your case the other 2 links seems aligned to the bottom comparing to the first element, just because of different font-size.
I am trying to vertically align font icons. I have tried "vertical-align: middle" but I always get a little align difference. The following example has 2 different ways to use the icons and they are not aligned correctly.
An example on Jsfiddle:
https://jsfiddle.net/crphowLg/7/
<link rel="stylesheet" type="text/css" href="https://fontastic.s3.amazonaws.com/PxvnwqrSXE7pXNDNDqGp4i/icons.css">
<style>
div {
font-size: 50px;
font-family: helvetica,arial,sans-serif;
text-transform: uppercase;
background: yellow;
}
.cart {
margin-top: 20px;
}
.cart:before {
font-family: "fanatic-icons" !important;
font-weight: normal;
content: "b";
margin-right: 5px;
vertical-align: middle;
text-transform: none;
}
</style>
<div>
<span class="icon icon-shopping-cart"></span>
Shopping Cart
</div>
<div class="cart">
Shopping Cart
</div>
Thank you.
I think it difference size of font. Because you using fanatic-icons font for it. So i think you try add padding for cart::before
display: inline;
font-family: "fanatic-icons" !important;
font-style: normal !important;
font-variant: normal !important;
font-weight: normal !important;
padding-bottom: 15px; //added it
text-transform: none !important;
vertical-align: middle;
goodluck !
DEMO
.cart:before {
font-family: "fanatic-icons" !important;
font-weight: normal;
content: "b";
margin-right: 15px;
vertical-align: middle;
text-transform: none;
float: left;
}
Giving it float left and adjusting the margin-right will make it fit at the middle.
Update your css like below. I have added a class to your HTML as well.
This can be achieved by using display:inline-block; and float properties in css
DEMO
CSS
div {
font-size: 50px;
font-family: helvetica,arial,sans-serif;
text-transform: uppercase;
background: yellow;
}
.cart {
display :inline-block;
width : 50%;
}
.cart1{
display: inline-block;
width:50%;
float:right;
}
.cart:before {
font-family: "fanatic-icons" !important;
font-weight: normal;
content: "b";
margin-right: 5px;
text-transform: none;
}
HTML:
<div class ="cart1">
<span class="icon icon-shopping-cart"></span>
Cart
</div>
<div class="cart">
Cart
</div>
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/