between these two p elements.
I checked the box model and there is no margin set.
Here it the fiddle and code -
https://jsfiddle.net/f3m2apgy/
<body>
<style>
#container{
display: inline-block;
width: 500px;
border: solid 1px;
text-align: center;
}
#si_but{
cursor: pointer;
padding: 14px 14px;
font-size: 14px;
border: solid 1px;
margin: 0px;
display: inline-block;
}
#su_but{
cursor: pointer;
padding: 14px 14px;
font-size: 14px;
border: solid 1px;
margin: 0px;
display: inline-block;
}
#hold_button{
display: inline-block;
border: solid 1px;
text-align: center;
margin: 0 auto;
padding: 0px;
}
</style>
<div id="container">
<divi id="hold_button">
<p id='si_but' class='blue_but radius_left medium_white'>SignIn</p>
<p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
</div>
</div>
</body>
You have newline after the first </p> and indenting spaces before the second <p>.
If you put <p> elements in a line, the space will disappear.
<div id="container">
<div id="hold_button">
<p id='si_but' class='blue_but radius_left medium_white'>SignIn</p><p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
</div>
</div>
And, <divi> should be typo of <div>.
If you put the <p> elements on a single line in your code, the gap is eliminated.
<p id='si_but' class='blue_but radius_left medium_white'>SignIn</p><p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
DEMO: https://jsfiddle.net/f3m2apgy/6/
It's because all inline-block elements have a space to the left if seperated by spaces in the HTML code. To fix it, you should change them to <ul> or <div> elements, or add a negative margin to one of them.
Adding margin-left: -5px; to #su_but would also fix this, although it is a little hacky.
The usual way to fix the whitespace problems coming up with display: inline-block; is to set the parent element's font-size to zero. Of course the consequence is that you will have to re-set the necessary font-size on the child elements - which you already do in your example, so
#hold_button { font-size: 0; }
fixes your problem already.
https://jsfiddle.net/f3m2apgy/7/
Related
I'm trying to align my text with the icon next to it but some reason it doesn't work. I put margin-bottom and margin-top but still not working so I would be really appreciated if I can get any help or suggestion.
<div class="notification"
[ngClass]="{'noty-error' : (caraouselItems[notificationIndex].notificationType==1),'noty-warn': (caraouselItems[notificationIndex].notificationType==2)}"
*ngIf="caraouselItems[notificationIndex].message">
<div class="firstPart">
<i-feather name="x-circle" *ngIf="caraouselItems[notificationIndex].notificationType==1" class="noty-error-icon"></i-feather>
<i-feather name="alert-triangle" *ngIf="caraouselItems[notificationIndex].notificationType==2" class="noty-warn-icon"></i-feather>
<span>
{{caraouselItems[notificationIndex].message}}
</span>
</div>
</div>
.notification {
padding: 0px 14px ;
font-weight: bold;
display: flex;
align-items: center;
height: 50px;
}
.noty-error {
background-color:#32111C;
border: 1px solid #D2232B;
}
.noty-error-icon {
color: #D2232B;
margin-right: 14px;
stroke-width: 1 !important;
width: 30px;
height: 30px;
}
Just put this style and adjust according to your position for alignment
whatever you need bottom it will work hopefully
<span style="position:relative;bottom:2px;">
{{caraouselItems[notificationIndex].message}}
</span>
In my mobile theme I have been playing around with the CSS of my tables to make the information clearer and easier to understand for my users.
In column 1 I have a network logo, in column 2 I have text which I have formatted both as (display:table-cell) and given them a border of 1px.
The problem is I can't get them to vertically align exactly I have attached an image to show you exactly what I mean.
http://pasteboard.co/1vII00Yg.png
As its an image in column one when I first inserted it in there it was messed up so I did this in the CSS to try to align it to the adjacent text cells.
HTML
<td class="network-cell">
<center><img alt="EE" src="/wp-content/themes/wootique-child/images/network-logos/ee-logo.png" class="network-logo"></center>
</td>
CSS
.network-logo {
min-height: 30px;
min-width: 30px;
position: relative;
top: 5px !important;
}
.network-cell > center {
border-bottom: 1px solid gainsboro;
border-right: 1px solid gainsboro;
border-top: 1px solid gainsboro;
height: 39px;
position: relative;
top: 5px;
width: 100%;
}
The adjacent cells are formatted differently because they don't contain an image.
For example.
HTML
<td>
<p id="minutes" align="center">300</p>
</td>
CSS
#minutes, #texts, #data, #infinity {
background-color: ghostwhite;
border-color: gainsboro;
border-style: solid;
border-width: 1px;
color: black !important;
font-size: 13px;
font-weight: normal;
line-height: 3em;
padding-left: 1px;
padding-right: 1px;
width: 100%;
}
How can I make the column 1's border align exactly to the border of column 2,3 + 4?
I know I need to change these to classes also - to view the problem scroll to the bottom of the website and select view mobile version.
http://mobilereactor.co.uk/shop/mobile-phones/samsung-galaxy-j1-white-deals/
This question is way more complex than the question you highlighted it
to be a duplicate of, the rules are different and we are talking about
aligning objects formatted as table cells not table cells themselves!
Replace all the id= with class=, as id shouldn't be duplicated. Just remove the <tbody> structure there and replace with the following:
.row {font-family: 'Open Sans', 'Segoe UI', sans-serif; font-size: 10pt;}
.row > div {display: inline-block; vertical-align: middle; height: 40px; background: #f5f5f5; border: 1px solid #ccc; line-height: 40px; padding: 0 10px;}
.row .network-cell {background: #fff; padding: 0;}
.row img {display: inline-block; line-height: 1; vertical-align: middle;}
<div class="row">
<div class="network-cell">
<img class="network-logo" src="http://mobilereactor.co.uk//wp-content/themes/wootique-child/images/network-logos/three-logo.png" alt="Three" />
</div>
<div class="minutes">100</div>
<div class="infinity">unltd*</div>
<div class="data">500MB</div>
</div>
Preview
Try border-collapse: collapse on each offending element. I believe that would be <center> and <img>. border-spacing: 0 may be of use as well. Keep in mind that your metro stylesheet reset the border-collapse: separate, so either place the styles in a <style> block with !important, or use inline, or better yet, assign classes.
With minimal effort:
.network-cell > center {
...
...
top: 6px;
...
...
}
But use table for alignment isn't so good, in this case better div with display: inline-block, and the tag center is deprecated.
I have the task of using CSS to create a stylized text box that looks like this:
I've been the server developer for many sites and occasionally do jump in to CSS, and usually figure things out in a reasonably clean way. However, I'm really stuck with this one - it's been an hours-long drag slowly working my way through things, to begin to get this going.
I have not yet begun the colorizing or borders. For now, I'm stuck trying to position the first line of text vertically. I would rather not force the height or width of any of the lines of text, as this seems to me to risk breaking if text/size is slightly changed.
Instead, I'd rather use semantics such as centering and vertical-align: top; (etc) (at least partially).
The green colorization is optional for this question. I'm much more concerned about the positioning of the text. Also, please don't be concerned about the choice of font (I'll hopefully be able to figure that out myself) - but font SIZE (and bolding) is important.
The current state of my attempted CSS is shown below - which doesn't work. My current CSS (below) leaves the image on the page looking like this:
(The blue colorization is just Chrome Web Developer highlighting, which I've provided to indicate the size of the div that includes the text of the first line. The actual background color is white.)
In the above image, I have not begun worrying about the colorization or borders. The current status of the above image is that I'm just trying to get the text "CLICK HERE for a" to appear at the TOP of its div - as noted, WITHOUT setting the height or width of the div to "collapse" onto the text, if possible.
My current trouble positioning the "CLICK HERE for a" text vertically is just one issue I've been dealing with. I would like to have a complete, working sample of the text and text positioning for this image, done "the right way" (or at least done in not a bad way). Perhaps the right way really is to set the width and height of the click-here-for-a div (see CSS below) to be nearly equal to the text dimensions, in order to force its absolute positioning (but as noted, I'd rather not unless answers here correct me, by telling me that this is a good way to do it).
Here is the HTML / CSS for the above (incorrect) image:
HTML:
<div class="smooth-click-region">
<div class="click-here-for-a">
CLICK HERE for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer">Special Introductory Offer</div>
<div class="on-home-delivery">on Home Delivery</div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
CSS:
.intro-offer-smooth-click-region {
position: relative;
display: inline-block;
overflow: hidden;
width: 258px;
height: 61px;
}
.click-here-for-a {
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
vertical-align: top;
font-size: 8pt;
}
.intro-offer-on-home-delivery {
font-size: 9pt;
text-align: center;
}
.intro-offer {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.on-home-delivery {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.discount-description {
position: absolute;
font-size: 9pt;
height: 12px;
}
What is the right way to use CSS to create the image above - at least in terms of text formatting and positioning?
Posting as an answer at your request. It helps to add span tags around single lines of text that you want to style independently.
JSFiddle Example
HTML:
<div class="smooth-click-region">
<div class="click-here-for-a">
<span>CLICK HERE</span> for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer">Special Introductory Offer</div>
<div class="on-home-delivery">on Home Delivery</div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
CSS:
.smooth-click-region {
display: inline-block;
overflow: hidden;
width: 258px;
height: 61px;
background: #cebd44;
border: inset 1px dotted;
border-style: double;
}
.click-here-for-a span {
font-weight: bold;
}
.click-here-for-a {
display: block;
text-align: center;
vertical-align: top;
font-size: 8pt;
}
.intro-offer-on-home-delivery {
font-size: 9pt;
text-align: center;
font-weight: bold;
}
.intro-offer {
margin-left: auto;
margin-right: auto;
}
.on-home-delivery {
margin-left: auto;
margin-right: auto;
}
.discount-description {
font-size: 9pt;
height: 12px;
text-align: center;
}
Here you are, as simple as it gets http://jsfiddle.net/1dmhLm9c/
.smooth-click-region{
text-align: center;
width: 300px;
background: green;
padding: 10px;
}
p, h2{
margin: 0px;
}
You can style it as you want :)
You can find some site with a similar boxes that works well and inspect it with firebug. That will show you the html layout.. You can get some good ideas for how you want to create your own.
Very simple.
Demo http://jsfiddle.net/7xtf1f8m/
CSS:
.smooth-click-region {
display: inline-block;
border: 2px solid #aa6;
padding: 2px;
background-color: #cc0;
box-sizing: border-box;
text-align: center;
font-family: Arial;
}
.smooth-click-region span {
font-weight: 700;
}
.inner {
padding: 0.3em 3em;
background-color: #aa6;
}
.click-here-for-a {
font-size: 0.8em;
}
.intro-offer-on-home-delivery {
font-weight: 700;
}
.discount-description {
font-size: 0.7em;
}
HTML:
<div class="smooth-click-region">
<div class="inner">
<div class="click-here-for-a"><span>CLICK HERE</span> for a</div>
<div class="intro-offer-on-home-delivery">
Special Introductory Offer<br/>
on Home Delivery
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
</div>
You can create the multiple borders by using the CSS3 box-shadow property. HTML tags have by default some CSS attributes so you do not have to define them in your CSS. For example the tag <div> is a block level element and by default has display: block; (you defined it for div.click-here-for-a).
You do not have to write too much unnecessary css.
This is my example for you:
.smooth-click-region {
background:#acb014;
width:260px;
padding:5px;
position:relative;
box-shadow: 0 0 0 5px #FFF,0 0 0 10px #acb014;
text-align:center;
}
<div class="smooth-click-region">
<div class="click-here-for-a">
CLICK HERE for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer"><strong>Special Introductory Offer</strong></div>
<div class="on-home-delivery"><strong>on Home Delivery</strong></div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
I did not changed your html code but I advise you to use other HTML tags that have their default css. Use h1, h2, h3 for headlines and p for paragraphs, etc.
I have this following html codes.
<div class="box extend">
<h1>CLOUD SERVICES FOR SMALL BUSINESS</h1>
<figure><img src="myimg.png" /></figure>
<p>
<strong>Hosted Exchange Server</strong>
<strong>Cloud Server Solutions</strong>
<strong>Backup Servicesd Server Solution</strong>
</p>
</div>
and the css of the above html (updated css)
.box p strong{
font-weight: 700;
font-size: 20px;
color: red;
padding: 0px;
margin: 0px;
background: blue;
}
now the problem is the strong element has spaces between each other as supposedly it should not (base on my css set up), please refer to the image below
Is there anyway I could get raid or remove that space gap between each others element? Any recommendations, suggestions and ideas, I would love to hear! thank you in advance.
It seems making them display block kills the thin line
http://jsfiddle.net/5qqLR/2/
.box p strong{
font-weight: 700;
font-size: 20px;
color: red;
padding: 0px;
margin: 0px;
background: blue;
display: block;
}
After further research setting the parent line-height to 1 will solve this issue
http://jsfiddle.net/5qqLR/3/
.box p {
line-height: 1;
}
Take a look at here http://www.sitepoint.com/forums/showthread.php?824112-space-below-inline-elements-inside-a-block-element
Add to strong HTML tag:
white-space: break-spaces;
I am creating a webpage (first time) and i'm following as much of the CSS rules and tags as I can. However, I ran into a problem with white space. I've underlined the first line of text but now the second line seems to have drifted below. Is there a way to make it a bit more snug, i'd like the second line of text to be just below the above line.
body,td,th {
color: #000000;
}
body {
margin: 0;
padding: 0;
padding-top: 6px;
text-align: center;
background-color: #FFFFFF;
}
#centered
{
width: 800px; /* set to desired width in px or percent */
text-align: left; /* optionally you could use "justified" */
border: 0px; /* Changing this value will add lines around the centered area */
padding: 0;
margin: 0 auto;
}
.style3 {
font-size: 32pt;
color: #666666;
margin-left: 0px;
border-bottom: 3px double;
}
.style5 {
margin-left: 390px;
font-size: 32pt;
color: #CCCCCC;
}
-->
</style></head>
<div id="centered">
<body>
<p class="style3"> FIRST LINE OF TEXT</p>
<p class="style5">INDENTED SECOND LINE</p>
</body>
</div>
</body>
</html>
You need to adjust the line-height. More specifically, add the following declaration:
.style5 {
line-height: 0.72em;
}
If you only want the first line of .style5 to be snug, you need to adjust the top margin. Use this declaration instead:
.style5 {
margin-top: -10px;
}
See fiddle.
Note: You should always validate your markup using the W3C Markup Validation Service and your css using the W3C CSS Validation Service. It will help you a lot when you're starting out.
p.style3, p.style5 {
margin-top: 2px;
margin-bottom: 2px;
}
Play with those two values until you are happy with the result :)
Have you tried the CSS line-height rule?
http://www.w3schools.com/css/pr_dim_line-height.asp
hmm. your code little buggy. first i see that you have div OUTSIDE of body tag.
try to validate your code.
anyway you can change the space weebven lines in the same paragraph with : p {line-height:0.7em} this creates a 7/10 line height of the font size.
if you want to decrease space between paragrapsh you shold change the margin|padding of the paragraphs. p{margin:0 91px 0 37px;padding:0 43px 0 19px}