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
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
I'm using Bootstrap and I'm having trouble placing two divs next to each other. I've tried display: inline and that makes it look even worse. I created a div to hold them both called steven-and-leah and got the same result, however if use a specific type of inline such as inline-flex I get a result which near what I want, but they are too close together and cannot be separated when using that.
I'm sorry if this isn't specific enough, but I don't notice anything that even effects the code.
.steven-and-leah{
display: inline;
}
.team-bx{
width: 500px;
height: 570px;
margin-top: 80px;
border: 5px solid #FFF;
border-radius: 120px;
padding: 20px 0px 20px 0px;
overflow: hidden;
background-color: #111924;
}
You're using bootstrap wrong here. Remember that the strength of Bootstrap is on its grid.
If you want to place two divs next to each other, you simply have to apply a col-£-6 to them (£ being the device you want to target). For example:
<div class="row">
<div class="col-md-6">div number one!</div>
<div class="col-md-6">div number two!</div>
</div>
This will automatically place both divs next to each other as if they were "inline", with the huge plus of them being automatically responsive.
If this is not your question, please reframe it.
You can find great examples in their getting started site
Did you try with this. check the demo
.steven-and-leah > * {
display: inline-block;
}
Demo
You better use grid system if you have specific pattern in mind (as Obed mentioned). But if you want to have a bit of freedom use d-inline
<div class="d-inline p-2 bg-primary">box1</div>
<div class="d-inline p-2 bg-dark">box2</div>
You should manage the spacing and alignment by your own and you should not wrap the divs with class="row" div to allow d-inline to take effect.
I have coded this simple code :Html
<div class="row offset3">
<div class="title">Title1</div>
<div class="title-arrow">
<i class="icon-arrow-left"></i>GoBack
</div>
</div>
css
.title{
margin-top: 20px;
}
.title-arrow{
margin-top: -22px;
margin-left: 50px;
margin-bottom: 14px;
}
my problem is that if i change the Title1 to a bigger one e.g titllleeeeeeeeeeeeee the arrow don't move at right.. Ok i get it its normal behavior! I have to put a property margin in class title. I tried to put an margin-right:10px; but nothing happens..
Just do this:
HTML:
<div class="row offset3">
<div class="title">Titleaa</div>
<span class="title-arrow">
<i class="icon-arrow-left"></i>GoBack
</span>
</div>
CSS
.title{
margin-top: 20px;
display: inline;
}
DEMO
The class title-arrow isnt needed anymore but its there in case you want it.
Its because you set a fixed margin-left: 50px on the arrow. You should wrap it as a span within the the title div.
Check it out: http://bootply.com/83546
You're using two block elements, which are rendered below eachother and are not aware of the flow of their preceding block. That means that if the Title gets longer the arrow does not know about it (and shouldn't) because it's a block-level element. It should not be influenced by it.
You moved the arrow next to the title by using static margin values. Those values don't change and yes, that means that if the title gets longer the arrow will overlap it.
Instead, try to make use of the document flow, either by using inline(-block) elements or a float. Try this for example:
To .title, add:
float: left
Replace the entire rule for .title-arrow with:
.title-arrow {
margin-top: 20px;
line-height: 17px;
}
(these values are the same as that of title, to make sure they are on the same height)
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.
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