Hi i have following css which give me the following results:
.pop-up .amount {
position: relative;
height: 100%;
width: 195px;
background-color: #e6c515;
background-size: 10px;
padding-left: 18px;
padding-right: 3.5px;
font-size: 29px;
line-height: 32px;
color: white;
float: left;
margin: 3px;
text-shadow: 1px 2px #A7A2A2;
}
.pop-up .amount p {
float: left;
text-shadow: 1px 2px #A7A2A2;
padding-right: 47px;
width: 31px;
line-height: 15px;
text-align: left;
color: white;
font-size: 19px;
vertical-align: middle;
border-right: 2px solid #ACACAC;
height: 100%;
margin-right: 4px;
}
my current html snippet as follow
<div class="amount">
<p>1 UNDI</p>RM0.50
</div>
Following are the screenshots:
But the result i expecting are like this:
It seems the 1 UNDI words is not align centre properly and also the border is not fully cross the box, how can i fix this issues? Thanks
Here is a working example that matches the example screenshot you posted above: http://jsfiddle.net/6DnPX/
I changed the HTML slightly to split things into divs. To achieve the formatting that you are after, it is typically easier to put extra containers in place for more fine grained control.
<div class="amount">
<div class="left"><span>1</span> UNDI</div>
<div class="right">RM0.50</div>
</div>
Accordingly, I altered the CSS to add the border around the interior as well as the divider. You'll likely need to adjust the dimensions slightly as you appear to be using a different font, but hopefully this gets you closer to where you want to be.
CSS:
.amount {
font-family: Helvetica, Arial, sans-serif;
position: relative;
height: 100%;
width: 235px;
background-color: #e6c515;
background-size: 10px;
font-size: 39px;
line-height: 32px;
color: white;
float: left;
margin: 3px;
text-shadow: 1px 2px #A7A2A2;
border: 5px solid #eee;
}
.amount .left {
float: left;
text-shadow: 1px 2px #A7A2A2;
padding: 10px 25px 10px 15px;
width: 31px;
line-height: 20px;
text-align: left;
color: white;
font-size: 19px;
vertical-align: middle;
border-right: 2px solid #ACACAC;
height: 100%;
margin-right: 5px;
text-align: center;
}
.amount .left span {
font-size: 30px;
}
.amount .right {
border: 2px solid #ACACAC;
padding: 15px;
}
Just change the color's values in the below code and you are done. I just used yellow, red and white for illustration.
HTML:
<body class="pop-up">
<div class="amount">
<p>1 <span>UNDI</span></p>
<span class="s">RM0.50</span></div>
</body>
CSS:
.amount{
background:yellow;
float:left;
border:5px solid #c0c0c0;
padding-right:40px;
1padding-top:20px;
line-height:60px;
font-size:30px;
padding-left:5px;
color:#fff
}
.amount p {
margin:0;
border-right:5px solid red;
float:left;
width:80px;
padding-left:10px;
line-height:40px;
font-size:18px;
height:60px;
}
.amount p span {
display:block;
margin-top:-8px;
line-height:8px;
}
.s{
text-align:center;
display:inline-block;
padding-left:15px;
}
DEMO
<div class="amount">
<p>1<br /> UNDI</p>RM0.50
</div>
and use
.pop-up .amount p{text-align: center;}
instead of text-align: left;
demo :http://jsfiddle.net/parslook/6DnPX/1/
html :
<div class="amount">
<div class="left"><span>1</span> UNDI</div>
<div class="right">RM0.50</div>
</div>
css :
.amount {
font-family:Helvetica, Arial, sans-serif;
position: relative;
height: 100%;
width: 235px;
background-color: #e6c515;
background-size: 10px;
font-size: 39px;
line-height: 32px;
color: white;
float: left;
margin: 3px;
text-shadow: 1px 2px #A7A2A2;
border:5px solid #eee;
}
.amount .left{
float: left;
text-shadow: 1px 2px #A7A2A2;
padding:10px 10px;
line-height: 23px;
color: white;
font-size: 19px;
vertical-align: middle;
border-right: 2px solid #ACACAC;
min-height: 100%;
margin:0 auto;
text-align:center;
}
.amount .left span {
display:block;
font-size:30px;
}
.amount .right {
border: 2px solid #ACACAC;
padding:20px 95px;
text-shadow: 1px 2px #A7A2A2;
line-height: 23px;
color: white;
font-size: 30px;
vertical-align: middle;
border-right: 2px solid #ACACAC;
min-height: 100%;
height:100%
margin:0 auto;
text-align:center;
}
Related
I have arranged the anchor tag with text with borders.
I want to make the text to center inside the block.
I have tried padding, margin left, float but nothing is working.
body {
background-color:black;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.title{
height: 17%;
width: 100%;
margin: 0%;
text-align: center;
font-size: 2rem;
color: white;
}
.subjects{
color: white;
width: 28%;
height: 7%;
border: 2px solid white;
font-size: 2rem;
border-radius:20px;
margin-top: 86px;
margin-left: 8px;
text-align:center;
vertical-align: middle;
}
.maths{
margin-left: 24%;
margin-top: 41px;
}
.maths a{
text-decoration: none;
color: white;
border: 2px solid white;
padding: 4px;
padding-right: 140px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
}
.physics{
margin-left: 24%;
margin-top: 41px;
}
.physics a{
text-decoration: none;
color: white;
border: 2px solid white;
padding: 4px 103px;
padding-right: 206px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
}
.chemistry{
margin-left: 24%;
margin-top: 41px;
}
.chemistry a{
text-decoration: none;
color: white;
border: 2px solid white;
padding: 4px;
padding-right: 169px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
}
<div class="title">
<h1>Syllabus</h1>
</div>
<div class="subjectsList">
<div class="subjects">
Syllabus
<span class="triangle"></span>
</div>
<div class="maths">
<a href="mathsinfo.html" target="_blank">
<!--<img src="images/maths.jpg" height="50px" width="50px" alt="Mathematics Icon">-->
Mathematics</a>
</div>
<div class="physics">
Physics
</div>
<div class="chemistry">
Chemistry
</div>
</div>
that physics text must be at middle.Can anyone help me out to solve this problem.
Just change the padding (left and right padding to half of what you had for right padding):
.physics{
margin-left: 24%;
margin-top: 41px;
}
.physics a{
text-decoration: none;
color: black;
border: 2px solid black;
padding: 4px 103px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
}
<div class="physics">
Physics
</div>
remove padding-right:206px; add text-align:center
.physics a{
text-decoration: none;
color: black;
border: 2px solid black;
padding: 4px 0px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
text-align:center;
}
remove margin-left from .physicsc and padding-right from .physics a and set
.physics {
text-align: center;
}
.physics a {
width:30%; // or anything you need
}
Also check out centering guide.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
Trying to put this on an imaged background. I've got it to semi-work but doesn't attach for some reason. Is it wrong to make it as 2 elements trying to connect them? Is there a way to make it one element, or a better way to do it?
Here's what it is now:
http://codepen.io/anon/pen/MJJJog
.wrapper {
text-align: center;
}
p {
font-family: arial;
font-weight: normal;
margin: 0;
padding: 0;
text-align: left;
}
.header__ribbon {
padding: 10px 20px;
background-color: #ad0304;
color: #fff;
width: 70%;
max-width: 350px;
text-transform: uppercase;
font-size: 24px;
display: inline-block;
vertical-align: middle;
}
.header__ribbon__point {
margin: 0;
width: 0;
height: 0;
border-top: 35px solid #ad0304;
;
border-right: 35px solid transparent;
border-bottom: 35px solid #ad0304;
;
display: inline-block;
vertical-align: middle;
border-left: 10px solid #ad0304;
}
.header__ribbon--secondaryText {
font-size: 16px;
}
<div class="wrapper">
<div class="header__ribbon">
<p>Complimentary Event -</p>
<p class="header__ribbon--secondaryText">
mark your calenders for <span class="text__B">march 1<sup>st</sup>!</span>
</p>
</div>
<div class="header__ribbon__point"></div>
</div>
There's a space between the 2 header DIV's. You can set font-size:0 in your wrapper class.
It's better to use psuedo elements, before and after IMO. Here's a fiddle for you.
https://css-tricks.com/pseudo-element-roundup/
https://jsfiddle.net/vvupo6ha/1/
<div class="wrapper">
<div class="header__ribbon">
<p>Complimentary Event -</p>
<p class="header__ribbon--secondaryText">
mark your calenders for <span class="text__B">march 1<sup>st</sup>!</span>
</p>
</div>
</div>
.wrapper {
text-align: center;
}
p {
font-family: arial;
font-weight: normal;
margin: 0;
padding: 0;
text-align: left;
}
.header__ribbon {
padding: 10px 20px;
background-color: #ad0304;
color: #fff;
width: 70%;
max-width: 350px;
text-transform: uppercase;
font-size: 24px;
display: inline-block;
vertical-align: middle;
position: relative;
}
.header__ribbon:before,
.header__ribbon:after {
position: absolute;
content: '';
top:0;
border-top: 35px solid #ad0304;
border-bottom: 35px solid #ad0304;
}
.header__ribbon:after {
right: -35px;
border-right: 35px solid transparent;
border-left: 10px solid #ad0304;
}
.header__ribbon:before {
left:-35px;
top:0;
border-right: 10px solid #ad0304;
border-left: 35px solid transparent;
}
You've styled .header__ribbon and .header__ribbon__point as inline-blocks, so inline rules apply: you have to remove all spaces between them.
I would use flexbox on the .wrapper
.wrapper{
text-align:center;
display: flex;
justify-content: center
}
p{
font-family:arial;
font-weight:normal;
margin:0;
padding:0;
text-align:left;
}
.header__ribbon{
padding: 10px 20px;
background-color: #ad0304;
color:#fff;
width:70%;
max-width: 350px;
text-transform: uppercase;
font-size: 24px;
display:inline-block;
vertical-align: middle;
}
.header__ribbon__point{
margin:0;
width: 0;
height:0;
border-top:35px solid #ad0304;;
border-right: 35px solid transparent;
border-bottom: 35px solid #ad0304;;
display: inline-block;
vertical-align: middle;
border-left: 10px solid #ad0304;
}
.header__ribbon--secondaryText{
font-size: 16px;
}
http://codepen.io/anon/pen/xgggjq
When the text in a table cell is larger than the width, it overflows the cell. See this picture
i remove white-space: nowrap; Pic
I need when text in a cell larger than the width, put on cell txt Break.
/***************************************************************************/
This is my table code:
<div class="main-container-list-news-tabel-container-header">
<div class="main-container-list-news-tabel-container-header-title">
<label>title</label>
</div>
<div class="main-container-list-news-tabel-container-header-time">
<label>date</label>
</div>
<div class="main-container-list-news-tabel-container-header-type">
<label>type</label>
</div>
<div class="main-container-list-news-tabel-container-header-operation">
<label>operation</label>
</div>
</div>
<div class="main-container-list-news-tabel-container-element">
<div class="main-container-list-news-tabel-container-element-title">
<label>txttitle</label>
</div>
<div class="main-container-list-news-tabel-container-element-time">
<label>date</label>
</div>
<div class="main-container-list-news-tabel-container-element-type">
<label>type</label>
</div>
<div class="main-container-list-news-tabel-container-element-operation">
<label>operation</label>
</div>
</div>
And this is my CSS:
.main-container-list-news-tabel-container-header {
width: 100%;
height: 50px;
background-color:#EDEDED;
border-bottom:2px solid #000000;
border-top:2px solid #000000;
border-right:2px solid #000000;
border-left:2px solid #000000;
}
.main-container-list-news-tabel-container-header-title {
width: 376px;
direction: rtl;
font-family: 'Iranian Sans';
height: 46px;
float: right;
text-align:center;
border-left: 2px solid #000000;
}
.main-container-list-news-tabel-container-header-title label {
margin-top: 10px;
margin-right: 15px;
}
.main-container-list-news-tabel-container-header-time {
width: 140px;
direction: rtl;
font-family: 'Iranian Sans';
height: 46px;
float: right;
text-align:center;
border-left: 2px solid #000000;
}
.main-container-list-news-tabel-container-header-time label {
margin-top: 10px;
margin-right: 15px;
}
.main-container-list-news-tabel-container-header-type {
width: 140px;
direction: rtl;
font-family: 'Iranian Sans';
height: 46px;
float: right;
text-align:center;
border-left: 2px solid #000000;
}
.main-container-list-news-tabel-container-header-type label {
margin-top: 10px;
margin-right: 15px;
}
.main-container-list-news-tabel-container-header-operation {
width: 178px;
direction: rtl;
font-family: 'Iranian Sans';
height: 46px;
text-align:center;
float: right;
}
.main-container-list-news-tabel-container-header-operation label {
margin-top: 10px;
margin-right: 15px;
}
.main-container-list-news-tabel-container-element{
margin-right:2px;
}
/************************************************/
.main-container-list-news-tabel-container-element-title {
width: 376px;
direction: rtl;
font-family: 'Iranian Sans';
float: right;
border-left: 2px solid #000000;
border-bottom:2px solid #000000;
word-break:break-all;
}
.main-container-list-news-tabel-container-element-title label {
margin-top: 10px;
margin-right: 15px;
white-space: nowrap;
}
.main-container-list-news-tabel-container-element-time {
width: 140px;
direction: rtl;
font-family: 'Iranian Sans';
float: right;
border-left: 2px solid #000000;
border-bottom:2px solid #000000;
}
.main-container-list-news-tabel-container-element-time label {
margin-top: 10px;
margin-right: 15px;
}
.main-container-list-news-tabel-container-element-type {
width: 140px;
direction: rtl;
font-family: 'Iranian Sans';
float: right;
border-left: 2px solid #000000;
border-bottom:2px solid #000000;
}
.main-container-list-news-tabel-container-element-type label {
margin-top: 10px;
margin-right: 15px;
}
.main-container-list-news-tabel-container-element-operation {
width: 178px;
direction: rtl;
font-family: 'Iranian Sans';
float: right;
border-bottom:2px solid #000000;
}
.main-container-list-news-tabel-container-element-operation label {
margin-top: 10px;
margin-right: 15px;
}
.main-container-list-news-tabel-container-element{
margin-right:2px;
}
Add this to your css
.main-container-list-news-tabel-container-header>div,.main-container-list-news-tabel-container-element>div{
word-wrap: break-word;
word-break: break-all;
}
How to make this effect (cross-browsed) without using float: left?
I need to center this form so float attribute is wrong for me. Anybody can help?
I've made code as you can see below.
My code:
footer input[type=text] {
border-top: 1px solid #efefef;
border-left: 1px solid #efefef;
border-bottom: 1px solid #efefef;
border-right: 0;
width: 230px;
padding: 0 10px;
font-size: 16px;
line-height: 18px;
height: 35px;
display: inline-block;
float: left;
margin: 0 auto;
}
footer input[type=submit] {
border: 1px solid #df242b;
background: #df242b url('../../../gfx/submit.jpg') no-repeat center center;
color: #fff;
width: 38px;
height: 37px;
font-size: 18px;
line-height: 18px;
cursor: pointer;
display: inline-block;
float: left;
margin: 0 auto;
}
Because you want it cross-browser and without using float:left, you can use inline-block with vertical-align:top
And to center, you need to apply margin:0 auto to footer with some width instead
I made a few tweaks to your code.
*,
*::before,
*::after {
box-sizing: border-box
}
body {
margin: 0;
/* demo */
background: lightgreen
}
footer {
/*fix inlin block gap */
font-size: 0;
margin: 0 auto;
width: 265px; /* 230px + 35px */
}
footer input {
line-height: 18px;
height: 35px;
display: inline-block;
vertical-align: top;
}
footer input[type=text] {
border: solid #efefef;
border-width: 1px 0 1px 1px;
width: 230px;
padding: 0 10px;
font-size: 16px;
}
footer input[type=submit] {
border: 1px solid #df242b;
background: #df242b url('//dummyimage.com/35x35') no-repeat center center;
color: #fff;
width: 35px;
font-size: 18px;
cursor: pointer
}
<footer>
<input type="text">
<input type="submit">
</footer>
Your code without float:left actually works fine. Maybe you experience the line break on small sized screens. If it is the case, just add a piece of CSS for your footer like this example.
footer {
white-space: nowrap;
text-align: center;
}
footer input[type=text] {
border: 1px solid #efefef;
border-right: 0;
width: 230px;
padding: 0 10px;
font-size: 16px;
line-height: 18px;
height: 35px;
display: inline-block;
margin: 0 auto;
}
footer input[type=submit] {
border: 1px solid #df242b;
background: #df242b url('../../../gfx/submit.jpg') no-repeat center center;
color: #fff;
width: 38px;
height: 37px;
font-size: 18px;
line-height: 18px;
cursor: pointer;
display: inline-block;
margin: 0 auto;
}
<footer>
<input type="text" />
<input type="submit" />
</footer>
Use like this
<style>
body{margin:0;}
footer{
width:100%;
background:#ccc;
height:250px;
}
.form{
width:292px;
margin:0 auto;
}
footer input[type=text] {
border-top: 1px solid #efefef;
border-left: 1px solid #efefef;
border-bottom: 1px solid #efefef;
border-right: 0;
width: 230px;
padding: 0 10px;
font-size: 16px;
line-height: 18px;
height: 37px;
display: inline-block;
float: left;
margin: 0 auto;
}
footer input[type=submit] {
border: 1px solid #df242b;
background: #df242b;
color: #fff;
width: 38px;
height: 37px;
font-size: 18px;
line-height: 18px;
cursor: pointer;
display: inline-block;
float: left;
margin: 0 auto;
}
</style>
<footer>
<div class="form">
<input type="text">
<input type="submit" value=">">
</div>
</footer>
I'm making a simple website, but struggling with its layout.
This is what I have to do:
and this is what I did:
<div id="cabecalho">
<div id="logo"><img src="img/logo.png" alt="Advocacia" /><img src="img/inico.png" alt="IN" id="inico" /><img src="img/twitterico.png" alt="Twitter" id="twitterico" /></div>
<div id="escritorio">ESCRITÓRIO</div><div id="atuacao">ATUAÇÃO</div><div id="contatos">CONTATOS</div><div id="artigos">ARTIGOS</div>
</div>
and this is the CSS:
body{
border: 0;
padding: 0;
margin: 0;
}
#logo {
width: 80%;
margin: 0;
padding: 0;
background-color:#ffffff;
display: table;
margin: 0 auto;
}
#twitterico{
float: right;
padding-right: 10px;
}
#inico{
float: right;
}
#cabecalho{
width: 100%;
border: 0;
padding: 0;
margin: 0;
}
#escritorio{
background-color:#243655;
height: 50px;
text-align: center;
line-height: 50px;
width: 30%;
display: inline-block;
color:#ffffff;
font-family: arial;
font-weight: bold;
}
#atuacao{
background-color:#ffffff;
height: 48px;
text-align: center;
line-height: 48px;
width: 20%;
display: inline-block;
border-left: 1px solid #aab1bd;
border-bottom: 1px solid #aab1bd;
border-top: 1px solid #aab1bd;
color:#243655;
font-family: arial;
font-weight: bold;
}
#contatos{
background-color:#ffffff;
height: 48px;
text-align: center;
line-height: 48px;
width: 19.7%;
display: inline-block;
border-left: 1px solid #aab1bd;
border-bottom: 1px solid #aab1bd;
border-top: 1px solid #aab1bd;
color:#243655;
font-family: arial;
font-weight: bold;
}
#artigos{
background-color:#ffffff;
height: 48px;
text-align: center;
line-height: 48px;
width: 30%;
display: inline-block;
border-left: 1px solid #aab1bd;
border-bottom: 1px solid #aab1bd;
border-top: 1px solid #aab1bd;
border-right: 1px solid #aab1bd;
color:#243655;
font-family: arial;
font-weight: bold;
}
so, the problem is that when I resize the window, the layout is completely screwed...
How can I solve that?
Is there a better way to do everything I did?
Thanks in advance for any help.
What you want to do is called Responsive Design. Depending on the current screen size (or in your case browser window), you have to rearange/shrink/remove different elements so that they can all fit on the screen. Learn how to do it here: http://learn.shayhowe.com/advanced-html-css/responsive-web-design/