Simple html formatting that I just can't seem to gt right.
I have the following div:
<div class="fc-event-time" data-hasqtip="true" aria-describedby="qtip-6">
2:54 - 6:54
<i class="icos-refresh" style="float: right; margin-top: -17px; margin-right: 2px"></i>
<i class="icos-acces-denied-sign" style="float: right; margin-top: -17px; margin-right: 2px"></i>
</div>
that according to firebug has the following css classes acting on it:
padding-left: 5px;
white-space: nowrap;
font-weight: 500;font-size: 12px !important;
padding: 0px 1px;
color: rgb(0, 0, 0) !important;
cursor: pointer;
direction: ltr;
text-align: left
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 18px;
Now the above code is rendering like below:
if you can see, there are two icons on top of one another, the <i></i> elements', my problem is that I would like to have it side by side. My first thought was to adddisplay:block;` but that doesn't work. how can I have them line up rather than superimposed?
UPDATE:
After taking out the margin-top: -17px; I get the following results, but I need them (the text and the icons) to be in the same row.
UPDATE 2:
Finally Figured out the problem and fixed this issue, it turned out to be the 2:54 - 6:54 plain text that was not allowing the <i>s to get in the same line. all I did was modify the Full Calendar source to place the time inside a <span> and gave it a style attribute of `float: left' and its all lined up and working now. Thank you all for helping, if a better answer is submitted (one that I don't need to modify the javascript I will still award it as an answer since that would be a better method.
As far as I can tell you don't have any widths applied to your i icons, plus the negative margin-tops could be playing havock with the floats. If you define actual widths for your i elements you shouldn't have a problem (at least based on what I can see).
If that doesn't work you may also have some kind of absolute positioning involved. If this is the case, and is applied to the i elements, then you'll need to remove it.
But without seeing the style applied to the i elements it's a bit impossible to tell.
update
Ah, ok so the negative top margin was causing the issue. In order to get your text and your icons to align on the same line you'll have to wrap the text with a span and apply a float:left to it.
<span style="display: block; float:left;">2:54 - 6:54</span>
<i class="icos-refresh" style="float: right; margin-right: 2px"></i>
<i class="icos-acces-denied-sign" style="float: right; margin-right: 2px"></i>
However I'd recommend that you not use inline styles and extract these to specific css classes.
Related
I have a piece of code that compares the same line across multiple poems. It works fine, except for when the initial letter of the line appears in the manuscript original as a large capital, like this:
As you can see, when that happens the comparison gets all wonky. As far as I can tell, this is because the W is a span encapsulated inside of a div:
<div class="comparison" id="EETS.QD.1" style="display: block;">
<div class="compare_item" style="margin-left: 25px;">London, British Library Harley 2251:
<a style="text-decoration:none; color:#D5D5E5;" href="Quis_Dabit/British_Library_Harley_2251/British_Library_Harley_2251_f42v.html">
<span class="capital_2_blue">W</span>
ho shal gyve ยท vnto my hede a welle
</a>
</div>
</div>
with the style attributes generated via javascript because the comparison is generated onClick. The CSS I use to style both the divs and the span is as follows:
div.comparison {
display: block;
height: auto;
width: 755px;
margin-right: 10px;
padding-left: 10px;
margin-left: auto;
background-color: #454595;
border-width: 1px;
font-size: 12pt;
color: #EFFFFF;
display: none;
}
span.capital_2_blue{
float: left;
color: blue;
font-size: 60pt;
line-height: 12pt;
padding-top: 30px;
padding-bottom: 20px;
padding-right: 20px;
}
My question is this: how can I display each of the lines so that any oversized letters appear at the beginning of the actual line of text, as expected? This is what I'm shooting for:
I've been able to achieve it, sort of, by adding display:contents to the styling for my span, but that makes the W extend outside of the generated div on the page:
How would I go about styling these elements to achieve the look I'm hoping for, with the initials staying the height they're displayed in the text proper but not wrapping as they are currently? And how do I make sure the span plays nicely with its surrounding div? Thank you.
You should remove float:left and add display:inline-block to span.capital_2_blue.
That is because floated content removed from normal flow and other content will wrap around it.
https://developer.mozilla.org/en-US/docs/Web/CSS/float
Working on a project, did some standard inline block elements. To get the count display to the right area I had to put in a negative margin-top. I'm not sure why it wouldn't just position there on it's own accord. Is it because the count title is taking up an area or something else? I'd like to know why I had to do that and if there's a better way to avoid having to do that in the future or if I did it right and how to identify what happened so I can make sure I do it the same way in the future.
https://jsfiddle.net/ybh9qz37/
.count-display {
height: 35px;
width: 65px;
background: black;
color: red;
display: flex;
float: left;
align-items: center;
border-radius: 5px;
//why is this needed
margin-top: -60px;
margin-left: 40px;
font-family: Orbitron, sans-serif;
font-size: 200%;
}
The best way to organize any div with a lot of divs is to group subdivs.
For example, in your case you have 3 subdivs with different height going one under another. This causes a lot of problems, you should use this schema:
<div class="row2">
// your left side div
<div class="left" style="display: inline-block;vertical-align: top;">
<span class="count-title">Count</span>
<span class="count-display"><p>00</p></span>
</div>
// the right way is to create here <div class='right'> with similar styles as left
<span class="strict-button">
<a rel="external" href="#button" class="button">Strict</a>
<span></span>
</span>
</div
And change your .count-title to :
.count-title {
display:block;
}
This way you can easily extend your stucture in future without problems and save it organized
I think you should better know how the float works and you will get the reason why you require a negative margin in your case.
You can refer this I hope that you will get a better understanding of the issue
Everything You Never Know about css float
I am having a very difficult time getting rid of this persistent 5px whitespace on my website eternalminerals.com
I highlighted it in this screenshot: http://s15.postimg.org/de4sjvqob/5pxwhitespace.png
In google chrome, if I edit the element to have a margin-top: -5px, it gets rid of the whitespace, but since I am using Avada shortcodes, I cannot attach this style to it since it is a shortcode:
<p style="text-align: center; margin-top: -10px; font-size: 19px !important; line-height: 42px !important; color: #FFE396!important; font-family: 'MuseoSlab500Regular', Arial, Helvetica, Sans-Serif;"><strong>That's my opinion. I am Dr George Lundberg, at large at The Eternal Minerals of Life.</strong></p>
</div>
[/raw]
[fullwidth backgroundcolor="#140100" backgroundimage="" backgroundrepeat="no-repeat" backgroundposition="top left" backgroundattachment="fixed" bordersize="0px" bordercolor="#e5e4e4" paddingTop="-5px" paddingBottom="0px"]
<br>
[ajax_load_more post_type="testimonials-widget" posts_per_page="5" pause="true" transition="fade" button_label="Click to show testimonials from real physicians"]
[/fullwidth]
As you can see, paddingTop="-5px" doesn't cut it. Does anyone have a better idea on how to get rid of this whitespace? I will keep trying and keep you posted on my findings. Thank you so much!!!
It is because of the line-height taking for all the individual elements. After changing the line-height of the body tag that space will disappear. Below is the code.
body {
line-height: 0.7;
}
As all the elements are having individual line-height you can give even lesser value (<0.7) for line-height of the body tag.
So although the originally accepted answer of using the line-height worked, it messed up all of the line-heights on the page, and after a little bit more tinkering, all that was needed was to add the margin-bottom: -5px; to the canvas element.
This solution is less invasive and achieves the same visual effect, so I will be accepting my own answer as the solution instead. Sorry Masoom!
This is the code now:
<canvas id="matrix" style="margin-left:-20px;margin-bottom:-5px;"></canvas>
I have a page with a header, followed by a (menu/tool) bar underneath, which is supposed to carry two elements: a text to the left (big font) and a login link (smaller text). The right hand link is supposed the be centered vertically.
The following resource seemed to be exactly what I need:
http://www.css4you.de/Texteigenschaften/vertical-align.html
and
http://www.css4you.de/example/vertical-align.html
Here's my HTML:
<div style="border: 1px solid purple;">
<h1 style="border: 1px solid red; display: inline;">Textext</h1>
<span id="logindisplay" style="border: 1px solid lime; float: right; vertical-align: middle;">Log In</span>
</div>
The CSS ID selector for logindisplay doesn't exist. h1 is just
h1
{
font-size: 18pt;
}
I basically did everything as in the resource above, but it doesn't work - neither on IE9 nor on FF. Here's what I get:
Does anybody know what I'm doing wrong?
Note: Workarounds/hacks aren't desired. (One would be to set padding-top: on the span...)
Try this
#logindisplay { line-height: 18pt; }
...and get rid of your vertical-align property.
vertical-align doesn't work in the way you thinkit does, it seems. Take a look at http://css-tricks.com/what-is-vertical-align/ for a good explanation of what it does.
Using float:right negates the vertical-align as you found. Mark's suggestion doesn't work with position:relative on the div? In which case, line-height seems like the easiest way.
make your outer div be display: table-cell, or give it a line-height of appropriate size.
vertical-align is one of the stupidest bits of CSS, and rarely works as you'd expect without having to hack up containing elements: http://phrogz.net/css/vertical-align/index.html
A different approach would be putting position relative on the parent div and then absolute position the span like this:
#logindisplay {
position: absolute;
right: 0;
top: 50%;
margin-top: -9px;
}
Example
Using letter-spacing seems to really screw with text-align: http://jsfiddle.net/NFAzv/
Googling hasn't turned anything up. Am I missing something here?
EDIT #1: Here's what I'm getting (Firefox 3.6.8 and Chrome 12.0.742.91 on Vista): link removed due to link limits for newbies (it can be found in the comments) (notice how the centers do not line up at all)
EDIT #2: Here's IE9, with a centered vertical line to show what's wrong: http://i.stack.imgur.com/C0J0n.png
EDIT #3: I have a confirmation in the comments below that the problem shows up for Chrome 10 on Windows 7. At least I'm not the only one going crazy.
It seems that all the browser have converged on a letter-spacing implementation that is plainly at odds with what css3 says should happen.
In particular see Example XV at http://dev.w3.org/csswg/css3-text/#letter-spacing0
Browsers simply don't do this. IE has even changed its behaviour recently (IE9, I think) to be more like the other browsers, and less like the CSS3 spec as it's currently written.
The CSS3 spec in question is still at working draft status, so presumably at some point it will be changed to match what the browsers do.
You may be able to rebalance the lines by adding a padding-left value to match the letter-spacing but that may not always be possible.
Since the problem isn't really described I assume that the text isn't centered perfectly..
You can use text-indent at half the size of the letter spacing to correct this..
.centered {
letter-spacing:12px;
text-indent:6px;
}
Only tested on Chrome OSX though..
It seems to work, but your requirement for this pixel perfectness does not comply with the default working of letter-spacing. If you highlight the text, you will see that it does center.
You could use the following workaround: demo fiddle
<div style="text-align: center;">
<div style="font-size: 130%; letter-spacing: 0.6em; padding-left: 0.6em;">THIS</div>
<div style="font-size: 350%; letter-spacing: 0.4em; padding-left: 0.4em;">ILLUSTRATES</div>
<div style="font-size: 130%; letter-spacing: 0.4em; padding-left: 0.4em;">THE</div>
<div style="font-size: 200%; letter-spacing: 0.1em; padding-left: 0.1em;">PROBLEM</div>
</div>
I have seen similar problem with links underline:last letter's width includes the letter-spacing value.
So apply letter-spacing:0; for the last letters should resolve the issue.
It's ugly but it works
...
<div style="font-size: 350%; letter-spacing: 0.4em;">
ILLUSTRATE<span style="letter-spacing:0;">S</span>
</div>
...
add 50% of the font size as text indent like this
<div style="text-align: center;">
<div style="font-size: 130%; letter-spacing: 0.6em;text-indent:0.3em">THIS</div>
<div style="font-size: 350%; letter-spacing: 0.4em;text-indent:0.2em">ILLUSTRATES</div>
<div style="font-size: 130%; letter-spacing: 0.4em;text-indent:0.2em">THE</div>
<div style="font-size: 200%; letter-spacing: 0.1em;text-indent:0.05em">PROBLEM</div>
</div>
Although this wasn't the exact question here, I had an issue that the starting left point of the text was too far to the right:
I had an issue that my text wasn't centered horisontally any longer after letter-spacing was applied but it was due to that I had restricted the texts container in width, so it was overflowing it's container.. worth to look into.. it may seem stupid but it's an easy misstake actually.
I may be late to this, but just in case my solution helps anyone.
This is an example simple button set up:
<button>Enter</button>
In my stylesheet:
button {
color: #f5ebe0;
border-color: #f5ebe0;
background-color: #00000000;
text-indent: 2rem;
width: 33%;
}
a {
color: inherit;
text-decoration: none;
letter-spacing: 2rem;
}
It seems that letter-spacing does indeed only add spacing either to the right, or only in between the letters. This being the case, (when using letter-spacing) I recommend using an anchor tag with in the button and applying your letter-spacing amount to the text inside the anchor, and then apply the SAME amount of text-indent inside your button.