I like to put all my inline elements in a single line.
<ul>
<li><a>click<span>here</span><strong>!</strong></a></li>
Wondering if there's a better way to create inline elements in Jade than this:
ul
li
a(href="#") click
span here
strong !
This get's a little closer but I'm not sure how to add the span and strong tags without breaking the lines.
ul
li: a(href='#') click
span ...
This obviously isn't a super big problem but it's a little annoying that I can't put inline elements inline. Thanks for the help
Since version 1.0, jade supports inline tags:
#[tag(attribute='value') inner stuff]
In your case that would be:
ul
li #[a(href="#") click #[span here #[strong !]]]
Ran into this today myself. Found a way to do this in jade using the pipe.
Here is my example wrapping a strong tag inside a p element.
p.some-class
strong This Renders Strong
|This renders normal
I also struggled with this a while back; the only answer I found is to just use HTML.
ul
li: a(href='#') click<span>here</span><strong>!</strong>
Related
I am currently using the following css to display a list of items with a flexbox
section ol li div ul {
display:flex;
flex-direction:row;
flex-wrap: wrap;
gap:7px;
row-gap:0;
list-style-type: none;
}
This satisfies me on all but one problem:
when I have a big item that will not fit entirely on the rest of the line, it will be set at the beginning of a new line, thus possibly making a huge part of the line before unused. I do not wish that (note that for small items, this is exactly what I want).
Initial goal (probably not achievable): I have been thinking on what kind of rule I would like and it would be something like "if more than x% of the line is wasted, then display the item inline instead". This would enable to continue filling the line.
I have currently abandoned on doing that with only html and css and I might consider trying to write such a rule in js later, but not for now (unless somebody has a very nice solution).
Current goal: I have thus decided to manually specify some items (that are "big") that should be inlined (sometimes using media queries, but we can ignore them for now). The idea is to add the following class to those objects.
.inlineitem {
display:inline;
}
Problem: display:inline; within a flex container does not work and I do not wish to change the whole flex container for the other items... Is there a way to achieve what I want ?
I'm trying to make a two-lines menu with bootstrap 4, and I found some examples on the web:
https://www.codeply.com/go/DpHESPqZsx
https://www.codeply.com/go/cxXqBnGrPx
In the first example they use "div class='navbar'" to create the menus.
<div class="navbar">...</div>
In the second example they use "nav class='navbar'" to create the menus.
<nav class="navbar">...</nav>
Which is the correct way? Which one should be used?
I have another question. Why do they NOT use the bootstrap grid with the rows and columns? When should you use it?
Thank you very much
Div and nav are similar element, in terms of what they do. However, nav is better in this situation because you want to have semantic markup. It is because of SEO and more readable for developers.
And why they are not using grid is probably because they haven't implemented it yet and should be coming. Their grid system is done with flex currently, but should change. And CSS Grid does not work that great with IE11.
You should use Grid when you feel that it will be easier to structure your site. It's a great tool, and combine it with Flex is so easy and comfortable
The difference is that a div has no meaning and a nav Element has a semantic meaning (indicating that there is a navigation). You can remove every div and span from a website and have no difference about the semantic structure of a page, every other element has a meaning: For example, states that there is the main content, says here is the header-part of the site.
These parts tell for example search engines what's on a site. So if you have the text "Stackoverflow" in your Element somewhere, google (and other search engines) know that you have a stackoverflow link in your navigation. If you have it in your Tag, you probably have a text about stackoverflow.
Keep in mind: These are some simplified examples.
The html5 nav tag has semantic meaning.
Please follow the Bootstrap docs. The grid (row>col) should not be used in the Navbar as it's not a supported component. Using the grid inside the Navbar will through off alignment, spacing and the responsive behavior controlled by the navbar-expand-* classes. I'm the author of both Navbar examples from Codeply you posted.
Here is a question for the code bbcode in phpbb3. As we can see here (official site of phpbb3) two ways of presenting a code are used. Is this a bbcode? If so, how can I add it to the board? If not, is this a mod? If yes, where can I find it?
I have searched a lot of how I can achieve a result like this but I came up empty. I appreciate for your help.
Edit: I am talking of course about the code that is presented as an inline next to the text.
I'm not sure how phpBB implement it, but you could use BBcode to achieve the same effect. To add custom BBcode go to the Posting tab in your ACP, and BBcodes is the first option in the left column.
BBcode usage:
[inline-code]{TEXT}[/inline-code]
HTML replacement:
<span style="background: #fff none repeat scroll 0 0;border: 1px solid #c9d2d8;color: #2e8b57;display: inline;font-family: Monaco,"Andale Mono","Courier New",Courier,monospace;font-size: 0.9em;font-style: normal;line-height: 1.3em;padding: 0 3px;">{TEXT}</span>
Help line:
[inline-code]Your code here[/inline-code]
The above css is taken from the link you posted so should look the same on your site.
I am getting this error
I had found this answer for formatting lists in jade. And have this error when I add the next section of content which has a list
h3 Patient Benefits
ul
li Chip-resistant, as it is made of solid zirconia with no porcelain overlay
li Glazed to a smooth surface to reduce plaque accumulation
You've got a space after the ul remove that and the problem should go away.
Jade is whitespace sensitive syntax like HAML, i used to face this error due to extra spaces.
Below are the few helpful link:
Jade Template Language Editor
Jade Syntax Documentation
HTML to Jade converter
I have a website which has to be working on all browsers. I am designing a menu like the below image
I made this menu by using the following html and css code
Html
<ul class="menu">
<li><img src="images/ico1.png" alt="home"><span>Home</span></li>
li><img src="images/ico2.png" alt="products"><span>Products</span></li>
<li><img src="images/ico3.png" alt="Quality Assurance"><span>Quality Assurance</span></li>
<li><img src="images/ico4.png" alt="Gallery"><span>Gallery</span></li>
<li><img src="images/ico5.png" alt="Contact"><span>Contact Us</span></li>
</ul>
Css
.menu { float:left;}
.menu li {float: left;padding: 19px 45px; background:url(../images/seperator.png) no-repeat right;}
.menu li.last{ background:none !important;}
.menu li a { text-decoration:none; color:#553614; font-size:18px; font-family: 'fengardo_neueregular';}
.menu li a:hover{ color:#fff;}
.menu li span { float: left; margin-left: 5px;margin-top: 9px;}
It works perfectly in chrome, Ie9, firefox etc. But when i check in Ie8 the menu is collapsed like the below image
How do i rectify this error?
don't have ie8 at my disposal currently, but after looking # your markup/styles here are my thoughts:
1. the misalignment is more than likely margin-padding issues...looks like there is not enough room for the spans on the same line as the icon, and this break is amplifying it because once the spans are pushed off that line, they have margin-top declared, which is just pushing them farther away.
You have a few options here: 1st of all, target the menu in IE8 with conditional comments; illuminate the involved elements (i like to use contrasting bgs/borders/etc., whatever makes each element stand out from the group) and inspect them in F12...if the answer(s) isn't obvious off the bat, start comparing physical pixel sizes to another browser. So if you use Chrome in this case...you can find an element's dimensions by hovering over if Developer Tools are open...how does Chrome's size(s) compare to IE8's size(s)? If they sizes are not disparate, repeat this process for the same elements, only checking positioning, layout, padding, and margins. (# least) One of these should not match up to the other browser. You're going to want to compensate for the user agent rendering differences, and this is achievable using the conditional comments we've already used to target the menu. So lets pretend that all the li elements are vaguely 130px wide...if you notice that they're only 115px in IE, apply 15 more pixels of width to IE8 and only IE8 via the cc's.
i'm rambling bc i suck, but i'll try and wrap this up...your markup example is missing an opening bracket on the second li, prolly want to fix that first before you do anything else.
ditch the padding on the lis. also, apply display:inline to them and make your anchors display:block; float:left...that's a super easy to way to get rid of and/or test margin/padding issues.
i'd also place the icon into the a as background-images...that's me being particular, but that's actually a solution to your problem too...the spans can't collide with the imgs if there are no more img elements in the markup.
another possible easy solution here: the spans are floating left and applying a left margin...simply having the float:right could be a solution; floating them right and ditching the margin-left would be my second attempt, if simply float:right didn't resolve it.