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)
Related
I am trying to create a restaurant menu. I would like each menu item to be formatted as such:
Mozzarella Sticks ($9.95)
To do this I have the following html:
<h3 class="menu-item">Mozzarella Sticks</h3><p class="price">5.95</p>
I have the item name and price in different elements because I would like to make the price smaller, change the color, etc...
My problem is getting both elements to appear next to each other since h3 and p are both block elements. Here are the solutions I have come up with. Solution one:
.menu-item{
display: inline;
}
.price{
display: inline;
}
And adding a line break at the end of each entry:
<h3 class="menu-item">Mozzarella Sticks</h3><p class="price">5.95</p>
<br />
This works however I feel this is not the proper way to do this and that it should be done with CSS.
I have also considered the following, solution two:
<h3 class="menu-item">Mozzarella Sticks <span class="price">5.95</span></h3>
This would allow me style the price separate from the menu item, but including the price in the h3 still feels like an odd way to go about this.
Lastly, I have seen that you can set a width on both elements and then apply float: left; and float: right; but this messes up the spacing, as I would like the elements to appear right next to each other.
Any suggestions? Were any of the ways I listed a good way to about this or is there a better solution?
Try this grid layout. You can customize each block to your own liking.
You can add another column by inserting 1fr
.menu{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-template-areas: 'a b';
}
.menu-item{
grid-area: a;
text-align: center;
font-size: 20px;
}
.price{
grid-area: b;
text-align: center;
font-size: 18px;
}
<div class="menu">
<div class="menu-item">Mozzarella Sticks</div>
<div class="price"><i>($9.95)</i></div>
</div>
You can set widths as a percentages, let's say 80% and 20% respectively.
If you set display: inline-block you don't need to set any float. The elements keep having block properties but are kept inside the text flux like they were actual text.
Even though this works alone, i would suggest to also keep a better and cleaner semantic html division, like the ul showdev mentioned or at least a containing div for each couple.
You might consider creating an element for each item with children for the name and price.
Below, I'm using flexbox for item layout.
#menuItems {
margin: 0;
padding: 1em;
}
.menuItem {
margin: 0 0 1em;
display: flex;
}
.menuItemTitle {
flex: 0 0 150px;
margin: 0 1em 0 0;
font-size: 1em;
}
.menuItemPrice::before {
content: "$";
}
<ul id="menuItems">
<li class="menuItem">
<h3 class="menuItemTitle">Mozzarella Sticks</h3>
<span class="menuItemPrice">5.95</span>
</li>
<li class="menuItem">
<h3 class="menuItemTitle">Another Item</h3>
<span class="menuItemPrice">10.50</span>
</li>
<li class="menuItem">
<h3 class="menuItemTitle">Third Item with a Longer Name</h3>
<span class="menuItemPrice">10.50</span>
</li>
</ul>
My problem is getting both elements to appear next to each other since
h3 and p are both block elements. Here are the solutions I have come
up with. Solution one:
In general, if you want two block elements to appear next to each other without using the newer layout methods (flexbox and css grids). You can float the elements and then add a "clear fix" to those elements and here are two ways you do that.
Float the elements, Add an extra div, Add the clearfix
Float the elements, Add a CSS pseudo element "after", Add the clearfix
Method 1: Add extra div
<style type="text/css">
.clearfix{
display: block;
clear: both;
}
h3{
float:left;
}
p{
float:left;
}
</style>
<div class="my-container">
<h3>Hello</h3><p>World</p>
<div class="clearfix"></div>
</div>
Method 2: Add pseudo elem after
<style type="text/css">
.clearfix::after {
display: block;
clear: both;
}
h3{
float:left;
}
p{
float:left;
}
</style>
<div class="my-container clearfix">
<h3>Hello</h3><p>World</p>
</div>
Please note that on method 2, clearfix class was added to the container. Also, notice that a pseudo CSS element ::after was added to .clearfix.
This would allow me style the price separate from the menu item, but including the price in the h3 still feels like an odd way to go about this.
I think you are right. Building HTML should be semantic. Which basically means that your markup/code must be self-explaining or have meaning. In the context of what you are trying to achieve, h3 here (IMHO) doesn't suit what you are really trying to express or do. The reason I say that is because you are to display a list of "menu-items" and h3 by definition is a header so the element doesn't fit what it is trying to display. My recommendation is, instead of using h3, use a list instead, similar to the answer above. This would make your HTML code a lot more semantic and you can now use the other method you've mentioned without making it look weird (because span is inside of h3). It would look similar to the code below instead...
<ul id="menuItems">
<li class="menuItem">Mozzarella Sticks<span class="menuItemPrice">5.95</span</li>
</ul>
Btw, my recommendation above is just my opinion so please take it with a grain of salt. For more info about semantic HTML. You can check the links below
https://www.lifewire.com/why-use-semantic-html-3468271
https://www.w3schools.com/html/html5_semantic_elements.asp
Hope this helps! :)
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
when I add a border to my <h3> tag it wraps around the row instead of the actual element inside it. I have tried various changes of the HTML structure and CSS however I am unable to find a solution.
Here is my HTML:
<div class="container">
<div class="row">
<div class="brand col-md-5"><img src="media/img/logo.png" alt="Driven Car Sales" class="img-rounded logo-custom"></div>
<h3 class="phone-number col-md-7">01429 7654287</h3>
</div>
</div>
Here is my CSS:
.phone-number {
text-align: right;
margin-top: 2.8em;
diaplay: inline-block;
border: 1px solid orange;
As you can see the text aligns right as I need the number to display right of the page.
Any tips would be much appreciated.
almost good, change
diaplay: inline-block;
to
display: inline-block;
Wrap the h3 with a div with the class col-md-7.
The col-md-7 class is used for a column and in most cases, you don't really apply it directly to elements like a header tag.
I simply want all of my p elements to be the length of the text in it. It works if I put .intro p at inline-block, but I would like my p elements all to be displayed underneath each other. Is there a way to do this?
HTML:
<div class="intro">
<p>fjsdqk dhksjfd kjsh kdshjkd</p>
<p>hsdqjkf kjdsh</p>
<p>hdsqkhfj sdhkjf fsjqkfhdks hjs</p>
</div>
CSS:
.intro {
margin-top: 80px;
color: #ffffff;
text-align: center;
}
.intro p {
margin-bottom: 12px;
padding: 6px 12px;
background: #25d6a2;
}
Just add br tag after each p element
<div class="intro">
<p>fjsdqk dhksjfd kjsh kdshjkd</p><br>
<p>hsdqjkf kjdsh</p><br>
<p>hdsqkhfj sdhkjf fsjqkfhdks hjs</p><br>
</div>
Demo
If you don't want to add <br /> in the DOM or for some reason you cannot modify your HTML, you can simulate line break using CSS :after pseudo with content property having an value of \a and white-space set to pre
As far as the explanation goes for \a, its an hexadecimal value for line feed which is equivalent to 10.
p:after {
content:"\a";
white-space: pre;
}
Demo
In a sense, you want to eat your cake and keep it: make the p elements inline elements as far as box formatting is considered (in this case, for the purpose of setting background behind the text only) but block elements in the sense of starting on a fresh line.
There are various methods and tricks, but perhaps the simplest one is to use floating (instead of display: inline-block): float the elements to the left but also clear floating, so that no real floating takes place—you just want the side effect of floating, the effect of making the element just as wide as its content requires:
.intro p {
float: left;
clear: both;
}
In addition, you need to set clear: both on the element after the intro.
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.