The goal is to get the Kanji, English, and Kana rows of text lined up with each other into a specific format. Such that the text is largely interchangeable and isn't hard-coded.
The Kanji and English should be evenly placed next to each other. The Kana should be aligned with the top of the second row.
It was working before, but it was hard-coded, I commented out those regions.
It should look like this:
body {
height: 100%;
padding: 0;
margin: 0;
font-size: 60%;
font-family: Verdana,sans-serif;
word-break: break-all;
}
#header {
padding-top: 10px;
width:100%;
height:286px;
padding-top: 20px;
}
#kanjiTransl{
display: inline-block;
font-size: 5.5em;
font-weight: bold;
/*position: absolute;*/
/*left: 25px;*/
/*top:15px;*/
line-height: 1.1em;
}
#jaN {
margin-bottom: 5px;
}
#kana {
display: inline-block;
vertical-align: top;
color: #777;
/*position: inline;*/
/*right: 30px;*/
/*top:130px;*/
/*font-size: 1.4em;*/
}
.top {
letter-spacing: -0.07em;
}
.bottom {
letter-spacing: -0.02em;
/*margin-left: 12px;*/
}
.topColor {
/*color: #FF2EDF;
color: #84FF00;
color: #b4FF00;*/
color: #a78317;
color: #908090;
}
.bottomColor {
/*color: #84FF00;
color: #FF2EDF;
color: #dc3616;*/
color: #9f3420;
color: #222266;
}
.headerItem {
display: inline-block;
/*height:110px;*/
/*width:900px;*/
/*position: relative;*/
/*left:.6em;*/
/*line-height: 110px;*/
font-size:15em;
font-weight:900;
}
<body>
<div id="header">
<div id="kanjiTransl">
<span id="jaN" class="topColor">驚<br>的<br></span>
<span id="jaV" class="bottomColor">速<br>記</span>
</div>
<span class="headerItem top topColor">LARGE</span><br>
<span class="headerItem bottom bottomColor">WARNING</span>
<span id="kana">ノテイショナルヴェロシティ</span>
</div>
</body>
Use this Layout and tune it to your needs:
#header {
padding-top: 10px;
width: 100%;
height: 286px;
width: 850px;
}
#jaN,
#jaV {
font-size: 5.5em;
font-weight: bold;
line-height: 1.1em;
vertical-align: top;
color: #777;
}
#kana {
float: right;
}
.top,
.bottom {
vertical-align: top;
font-weight: 900;
}
.top {
letter-spacing: -0.07em;
color: #908090;
font-size: 15em;
line-height: 0.3em;
}
.bottom {
letter-spacing: -0.02em;
font-size: 10em;
line-height: 0.3em;
color: #222266;
}
<table id="header">
<tr>
<td id="jaN">驚
<br>的</td>
<td>
<span class="top">NATIONAL</span>
</td>
</tr>
<tr>
<td id="jaV">速
<br>記</td>
<td>
<span class="bottom">VELOCITY</span>
<span id="kana">ノテイショナルヴェロシティ</span>
</td>
</tr>
</table>
Related
1st text part has two lines. 2nd text line has only one line. Here, I attached the image:
How do I do this using css?
<td class="right-col">
<div>
<div>
<span>average<br>cost</span>
</div>
<div>
<span>$2,500</span>
</div>
</div>
</td>
Try to this way
define class on your div and some write css according to your design.
.mainDiv{
padding: 20px;
background: #fcfcfc;}
.left-text {
display: inline-block;
vertical-align: top;
text-align: right;
color: gray;
text-transform: uppercase;
font-size: 11px;
line-height: 13px;
}
.right-text {
display: inline-block;
vertical-align: top;
text-align: right;
color: gray;
text-transform: uppercase;
font-size: 23px;
margin-left: 5px;
}
<div class="mainDiv">
<div class="left-text">
<span>average<br>cost</span>
</div>
<div class="right-text">
<span>$2,500</span>
</div>
</div>
One of the many ways you can do this.
.container {
width: 200px;
background: #E0E0E0;
font-size: 0;
font-family: sans-serif, serif;
padding: 20px;
}
.column {
color: #757575;
font-size: 16px;
display: inline-block;
width: 50%;
padding: 10px;
box-sizing: border-box;
vertical-align: middle;
}
.txt-left {
text-align: left;
font-size: 24px;
}
.txt-right {
font-size: 12px;
text-align: right;
}
<div class="container">
<div class="column txt-right">
<span>AVERAGE<br>COST</span>
</div>
<div class=" column txt-left">
<span>$2,500</span>
</div>
</div>
.right-col div {
table-layout: fixed;
font-family: Arial, sans-serif;
text-transform: uppercase;
background: linear-gradient(to bottom, #f7f8f8 0%,#fbfbfb 56%,#f5f6f6 74%,#e8e9e9 100%);
line-height: 10px;
font-size: 10px;
color: #85929c;
display: table;
width: 200px;
}
.right-col div span {
vertical-align: top;
display: table-cell;
padding: 10px 3px;
}
.right-col .text {
text-align: right;
}
.right-col .amount {
line-height: 20px;
font-size: 18px;
}
<table class="table">
<tbody>
<tr>
<td class="right-col">
<div>
<span class="text">average<br>cost</span>
<span class="amount">$2,500</span>
</div>
</td>
</tr>
</tbody>
</table>
I made a custom list in my ionic app and it runs fine on my browser. But when I built it on android, the text in the h2 tag for the display name breaks to a new line after each word. I've tried removing the word-wrap and word-break from the css, but it still doesn't work.
This is the HTML for the view:
<ion-view view-title="Crave">
<fab ui-sref="post" class="ink"><i class="ion-compose"></i></fab>
<ion-content>
<ion-refresher pulling-text="Pull to refresh" pulling-icon="ion-arrow-down-b" on-refresh="doRefresh()">
</ion-refresher>
<div class="m-cards">
<div class="m-card" ng-repeat="post in posts">
<div class="m-card-header">
<span><i class="ion-android-time"></i>  In 2hrs</span>
<img ng-src="{{post.face}}" class="ink rip">
<h2>{{post.name}}</h2><br />
<p>#{{post.username}}</p><br /><br />
</div>
<span>{{post.postText}}</span>
<div class="m-card-stats">
<i class="ion-ios-heart"></i>  {{post.likes}}
<i class="ion-chatbox"></i>  {{post.comments}}
<i class="ion-android-share-alt"></i>
<span>12d ago</span>
</div>
<hr />
</div>
</div>
</ion-content>
</ion-view>
And this is the css:
.m-cards {
}
.m-card {
border-radius: 2px;
margin-bottom: 5px;
padding: 2px 20px;
width: 100%;
}
.m-card a {
color: #ef473a;
}
.m-card-post-alt {
color: #777;
height: 18px;
overflow: hidden;
}
.m-card-header h2 {
color: #000;
float: left;
font-size: 12pt;
font-weight: 300;
margin: 0;
margin-left: 10px;
word-wrap: normal !important;
word-break: normal !important;
}
.m-card-header p {
color: #000;
float: left;
margin: 0;
margin-left: 10px;
}
.m-card-header span {
color: #444;
float: right;
margin: 0;
}
.m-card-header img {
border-radius: 5px;
float: left;
height: 48px;
width: 48px;
}
.m-card-header span {
color: #444;
float: right;
margin: 0;
}
.m-card-stats {
margin-top: 20px;
}
.m-card-stats span {
color: #000;
float: right;
margin: 0;
}
.m-card-stats a {
color: #000;
margin-right: 20px;
}
Thanks in advance!!!
Finally fixed it. All I needed was to set the word-spacing to normal.
.m-card-header h2 {
color: #000;
float: left;
font-size: 12pt;
font-weight: 300;
margin: 0;
margin-left: 10px;
word-spacing: normal !important;
}
first time poster here. I've been freshing up on my HTML and CSS and I've encountered some small problems.
If you look at the link then you can see some unwanted spacing between the pink colored "My Gaming Life" and the plum colored "My Lack of Religion". Those 2 paragraphs have an id of right and I've set them to float:right as so;
#right {float:right;}
Ive done the same with the elements on the left side like so:
#left {float:left;}
I will put a full list of the code below and a picture of the website:
The CSS:
p {
font-size: 2em;
font-family: "Poiret One", cursive;
color: #D6EBFF;
}
ul {
border:0.2em solid #1f2f31;
border-radius: 10px;
background-color: rgba(123, 321, 78, .2);
padding-right: 5ps;
}
li {
font-size: 2em;
font-family: "Poiret One", cursive;
color: #D6EBFF;
}
h1, h2, h3, h4, h5, h6 {
font-size: 2em;
font-family: "Poiret One", cursive;
color: #D6EBFF;
}
#span1 {
text-decoration: underline;
}
#hello {
margin-top: 1em;
font-size: 3em;
}
#wonder {
font-family: "Poiret One", cursive;
font-weight: bold;
font-size: 2.5em;
}
#mystery {
font-size: 2em;
font-family: "Dancing Script", cursive;
padding-bottom: 5px;
margin-bottom: 15px;
}
.intro {
background-color: rgba(240,230,140, 0.8);
}
.intro p {
color: #000029;
}
#img1 {
width: 75px;
height: 75px;
margin-right: 2px;
margin-bottom: 5px;
}
.img_header {
/*float: left;*/
border: 2px solid #1f2f31;
border-radius: 10px;
background-color: rgba(255,69,0,0.3);
width: 24%;
}
.img_header_container h3 {
padding: 15px;
margin-top: -15px;
margin-bottom: -2px;
}
.picture {
margin-left: 5px;
margin-bottom: 5px;
}
.center {
display: table;
margin: auto;
}
.main_container {
border:0.2em solid #1f2f31;
border-radius: 10px;
background-color: rgba(157, 139, 178, .5);
}
.main_container p {
padding-left: 10px;
}
.list {
width: 24%;
/*float: left;*/
}
.img_header {
width: 24%;
}
.main_content {
/*float:right;*/
width: 73%;
border:0.2em solid #1f2f31;
border-radius: 10px;
margin-right: 10px;
margin-top:17px;
background-color: rgba(205, 120, 200, .5);
margin-bottom: 5em;
}
.main_content_container {
text-align: center;
padding-bottom: 10px;
}
.main_content_container p {
font-size: 1.5em;
line-height: 170%;
text-align: left;
padding-left: 10px;
}
.main_content_container a {
font-size: 2em;
color: #D6EBFF;
}
.religion {
/*float:right;*/
width: 73%;
border:0.2em solid #1f2f31;
border-radius: 10px;
margin-right: 10px;
margin-top:17px;
background-color: rgba(103, 0, 124, .5);
margin-bottom: 5em;
}
.religion_container {
text-align: center;
padding-bottom: 10px;
}
.religion_container {
font-size: 1.5em;
line-height: 170%;
text-align: left;
padding-left: 10px;
}
.religion_container a {
font-size: 2em;
color: #D6EBFF;
}
#left {
float: left;
}
#right {
float: right;
}
body {
background-image: url("http://orig01.deviantart.net/064f/f/2010/064/6/1/arcane_symbols_by_stinkmeaner.jpg");
background-color: black;
font-size: 100%;
}
The HTML:
<div class="intro">
<div class="intro_container">
<p id="hello", class="center">Content </p>
<p id="wonder", class="center">Content</p>
<p id="mystery", class="center">Content</p>
</div>
</div>
<div class="main">
<div class="main_container">
<p>Content</p>
</div>
<div class="list" id="left">
<div class="list_container">
<ul>
<li>MenuItem</li>
<li>MenuItem</li>
<li>MenuItem</li>
</ul>
</div>
</div>
<div class="main_content" id="right">
<div class="main_content_container">
<h2>title</h2>
<p>Some content</p><br>
Read more!
</div>
</div>
<div class="img_header" id="left">
<div class="img_header_container">
<h3>Title</h3>
<div class="picture">
<img src="" id="img1">
<img src="" id="img1">
<img src="" id="img1">
<img src="" id="img1">
</div>
</div>
</div>
<div class="religion" id="right">
<div class="religion_container">
<h2>Title</h2>
<p>Some content</p><br>
Read more!
</div>
</div>
Do you have any clues ?
Id MUST be unique. You cannot have multiple "right" div. If the same style should be applied to multiple elements, it should be a class. It is also true for id img1
<div class="font_links"> is useless since the <link> tags are not displayed.
You used margin-bottom: 5em instead (?) of margin-bottom: 5px
http://jsfiddle.net/29tz5efb/
Your .main_content has margin-bottom: 5em; which causes it to move down
IDs should only be used with a single element; if you intend to apply a particular style to multiple elements, then a class should be used.
The spacing issue is caused by .main_content - the margin-bottom: 5em; produces a 5em (five times the size of a 'M' in whatever font size you were using) gap between your pink- and plum-coloured paragraph.
Remove margin-bottom: 5em; on .main_content
I'm trying to create a result page for matches, however at the moment it looks weird when the VS is not centered at all time. My question is then how can i always center the VS?
http://jsfiddle.net/3adhoker/
.result-in-month:nth-child(even) {
background-color: #ebebeb;
}
.result-in-month {
background-color: #f3f3f3;
}
.result-in-month {
padding: 20px 30px;
font-size: 15px;
}
.gdlr-result-date {
display: inline-block;
width: 20%;
margin-right: 2%;
font-style: italic;
}
.gdlr-result-match-team-wrapper {
display: inline-block;
width: 56%;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
.gdlr-result-match-versus {
margin: 0px 2.5%;
padding: 0px 3px;
font-weight: normal;
}
.gdlr-result-match-team.gdlr-left {
margin-right: 2.5%;
text-align: right;
}
.gdlr-result-match-team.gdlr-right {
margin-left: 2.5%;
text-align: left;
}
<div class="result-in-month">
<div class="gdlr-result-date">25 Sun - 14:00</div>
<div class="gdlr-result-match-team-wrapper">
<span class="gdlr-result-match-team gdlr-left">
Bristol City
</span>
<span class="gdlr-result-match-versus">
VS
</span>
<span class="gdlr-result-match-team gdlr-right">
Real Soccer
</span>
</div>
<div class="clear"></div>
</div>
<div class="result-in-month">
<div class="gdlr-result-date">25 Sun - 14:00</div>
<div class="gdlr-result-match-team-wrapper">
<span class="gdlr-result-match-team gdlr-left">
Bristol City
</span>
<span class="gdlr-result-match-versus">
VS
</span>
<span class="gdlr-result-match-team gdlr-right">
Real MASTERCLASS
</span>
</div>
<div class="clear"></div>
</div>
You can use display: table and display: table-cell and set a fix width(check comments in css):
.result-in-month:nth-child(even) {
background-color: #ebebeb;
}
.result-in-month {
background-color: #f3f3f3;
display: table;/*add display table*/
width: 100%;
}
.result-in-month {
padding: 20px 30px;
font-size: 15px;
}
.gdlr-result-date {
display: table-cell;/*add display to table-cell*/
width: 20%;
margin-right: 2%;
font-style: italic;
}
.gdlr-result-match-team-wrapper {
display: table;/*add display table*/
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
.gdlr-result-match-versus {
display: table-cell;/*add display to table-cell*/
margin: 0px 2.5%;
padding: 0px 3px;
font-weight: normal;
}
.gdlr-result-match-team.gdlr-left {
display: table-cell;/*add display to table-cell*/
margin-right: 2.5%;
text-align: right;
}
.gdlr-result-match-team.gdlr-right {
display: table-cell;
margin-left: 2.5%;
text-align: left;
width: 200px;/*set width to a fixed value for example 200px*/
}
<div class="result-in-month">
<div class="gdlr-result-date">25 Sun - 14:00</div>
<div class="gdlr-result-match-team-wrapper">
<span class="gdlr-result-match-team gdlr-left">
Bristol City
</span>
<span class="gdlr-result-match-versus">
VS
</span>
<span class="gdlr-result-match-team gdlr-right">
Real Soccer
</span>
</div>
<div class="clear"></div>
</div>
<div class="result-in-month">
<div class="gdlr-result-date">25 Sun - 14:00</div>
<div class="gdlr-result-match-team-wrapper">
<span class="gdlr-result-match-team gdlr-left">
Bristol City
</span>
<span class="gdlr-result-match-versus">
VS
</span>
<span class="gdlr-result-match-team gdlr-right">
Real MASTERCLASS
</span>
</div>
<div class="clear"></div>
</div>
Instead of using display: table-cell;, it's better to use real tables for this. For actual tabular data they are still the best solution.
.result-in-month tr:nth-child(even) {
background-color: #ebebeb;
}
.result-in-month{
border-spacing: 0px;
border-collapse: separate;
font-size: 15px;
width: 100%;
background-color: #f3f3f3;
}
.result-in-month td{
padding: 20px 30px;
}
.gdlr-result-date {
font-style: italic;
}
td.gdlr-result-match-versus {
padding: 0;
font-weight: normal;
}
.gdlr-result-match-team {
font-weight: bold;
text-transform: uppercase;
}
.gdlr-left {
text-align: right;
}
.gdlr-right {
text-align: left;
}
<table class="result-in-month">
<tr>
<td class="gdlr-result-date">25 Sun - 14:00</td>
<td class="gdlr-result-match-team gdlr-left"> Bristol City</td>
<td class="gdlr-result-match-versus">VS</td>
<td class="gdlr-result-match-team gdlr-right">Real Soccer</td>
</tr>
<tr>
<td class="gdlr-result-date">25 Sun - 14:00</td>
<td class="gdlr-result-match-team gdlr-left"> Bristol City</td>
<td class="gdlr-result-match-versus">VS</td>
<td class="gdlr-result-match-team gdlr-right">Real MASTERCLASS</td>
</tr>
</table>
JSFiddle
.result-in-month {
...
display: table-row;
}
.result-in-month > div {
display: table-cell;
padding: 10px 0;
}
.gdlr-result-match-team-wrapper > span {
display: table-cell;
padding: 0 10px;
}
Demo
My solution uses position:absolute
http://jsfiddle.net/3adhoker/4/
.result-in-month {
position: relative;
background-color: #f3f3f3;
}
.result-in-month {
padding: 20px 30px;
font-size: 15px;
}
.gdlr-result-date {
display: inline-block;
width: 20%;
margin-right: 2%;
font-style: italic;
}
.gdlr-result-match-team-wrapper {
display: inline-block;
width: 56%;
text-align: center;
font-weight: bold;
text-transform: uppercase;
position: absolute;
}
.gdlr-result-match-versus {
font-weight: normal;
position: absolute;
left: 0;
right: 0;
text-align: center;
}
.gdlr-result-match-team.gdlr-left {
text-align: right;
width: 50%;
position: absolute;
left: 0;
padding-right: 30px;
box-sizing: border-box;
}
.gdlr-result-match-team.gdlr-right {
text-align: left;
position: absolute;
padding-left: 30px;
width: 50%;
right: 0;
box-sizing: border-box;
}
I have 3 buttons and I want that to be of same height.Also I want that to be of same height in tab resolution as well.I want this to be achieved in css.
Can anyone please tell me how can i achieve that.
HTML:
<div class="content">
<p>It's easy to become a member. </p>
<p> Join today online </p>
<div class="btn-wrap">
<div class="row">
<div class="col">Find Nearest Agent</div>
<div class="col"><a href="" >Join Now</a></div>
<div class="col"><a href="" >Download the App</a> </div>
</div>
</div>
</div>
CSS:
.content {
width:75%; //there is a reason to use 75% here coz I have to place an image for remaining 25%.
}
.btn-wrap {
display:table;
border-collapse: separate;
width:100%;
overflow: hidden;
}
.row {
display:table-row;
}
.col {
display:table-cell;
padding: 0 0.5% 0;
width:32%;
float: left;
}
a {
font-size: 20px;
}
input[type="submit"], a {
border: 0 none;
box-sizing: border-box;
display: block;
font-family: "Lato",Arial,sans-serif;
font-size: 17px;
font-style: normal;
font-weight: 900;
margin: 0;
padding: 20px 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
background-color: #ff0;
color: #1d6221
}
JSFiddle:http://jsfiddle.net/qwdduc7z/5/
Add height: 75px; to input[type="submit"], a{. eg. here
HTML
<div class="content">
<p>Easy to become number</p>
<p>Join Now </p>
<div class="btn-wcircle-wrap">
<div class="row">
Find Nearest Agent
Join Now
Download the App
</div>
</div>
</div>
CSS
.content {
width:75%;
}
.btn-wcircle-wrap {
display: table;
height: 100px;
}
.row {
display: table-row;
}
.col {
display: table-cell;
padding: 0 0.5%;
width: 32%;
}
a {
border: none;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
font-family: "Lato",Arial,sans-serif;
font-size: 17px;
line-height: 1.5;
font-style: normal;
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
background-color: #ff0;
color: #1d6221;
}
"to mimic the original example"
.content
{
width:75%;
}
.btn-wcircle-wrap {
display:table;
width:100%;
}
.row {
display:table-row;
}
.col {
display:table-cell;
padding: 20px 0.5%;
width:32%;
text-align: center;
background-color: #ff0;
box-shadow: 5px 0 0 0 white inset;
// or use
// border: 5px solid white;
}
a {
box-sizing: border-box;
vertical-align: text-top;
font-family: "Lato",Arial,sans-serif;
font-size: 17px;
line-height: 1.5;
font-style: normal;
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
color: #1d6221;
}
http://jsfiddle.net/tksek87m/