I am trying to use a pseudoelement to replace the <li> for <ul> with a triangle. I followed this tutorial.
The problem is that my CSS works in Firefox but not Chrome on Windows.
Here is my CSS:
article ul {
list-style: none;
}
article ul > li::before {
font-family: FontAwesome;
content: "\f0da";
color: $darkbrown;
display: inline-block;
width: 1em;
margin-left: -1em
}
I am targeting article because I have <ul> in the header and footer that I do not want to apply the triangle to.
In Firefox, this works as expected (<ul> in the article have the triangle, and <ol> in the article show numbers). However, in Chrome, the <ul> in the article have a triangle, but the <ol> in the article also have triangles.
Here's an example of the HTML (sorry, it's from Drupal and a little ugly; I cleaned it up as best I could):
<body class="path-node page-node-type-lp navbar-is-static-top has-glyphicons">
<a href="#main-content" class="visually-hidden focusable skip-link">
メインコンテンツに移動
</a>
<div role="main" class="main-container container js-quickedit-main-content">
<div class="row">
<div class="col-sm-12" role="heading">
<section class="col-sm-12">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 col-xs-12">
<a id="main-content"></a>
<div class="region region-content">
<article role="article" about="/myurl" class="lp full clearfix">
<div class="content">
<div class="layout layout--onecol">
<div class="layout__region layout__region--content">
<section
class="block block-layout-builder block-field-blocknodelpbody clearfix">
<div class="field field--name-body field--type-text-with-summary field--label-hidden field--item">
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>
</section>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
I'm not sure i'm understanding your issue as your code appears to work the way you intend. I've added a <ul> inside your <article> to show that it has a triangle next to it while the <ol> shows the default numbering. Try browsing this example in Chrome to see the results.
article ul {
list-style: none;
}
article ul>li::before {
font-family: FontAwesome;
content: "\f0da";
color: red;
display: inline-block;
width: 1em;
margin-left: -1em
}
<a href="#main-content" class="visually-hidden focusable skip-link">
メインコンテンツに移動
</a>
<div role="main" class="main-container container js-quickedit-main-content">
<div class="row">
<div class="col-sm-12" role="heading">
<section class="col-sm-12">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 col-xs-12">
<a id="main-content"></a>
<div class="region region-content">
<article role="article" about="/myurl" class="lp full clearfix">
<div class="content">
<div class="layout layout--onecol">
<div class="layout__region layout__region--content">
<section class="block block-layout-builder block-field-blocknodelpbody clearfix">
<div class="field field--name-body field--type-text-with-summary field--label-hidden field--item">
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</section>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
I finally found the problem, which related to inlining critical css using the Drupal CriticalCSS module.
Basically, what happened is that I had generated the critical CSS based on old CSS, and this inline css (the critical CSS) was overriding the working CSS in the file I was editing.
Apparently, Firefox gives priority to the non-inline CSS, while Chrome and Edge prioritize the inline CSS, hence the reason for the difference in what was displayed.
Lesson learned: Make sure any inline CSS is current when editing CSS. (I am looking in to ways to automate that right now.)
Related
<section class="services-section" id="services">
<video src="services.mp4" autoplay loop muted></video>
<div class="container section-padding services-d-content">
<h3 class="left-liner">Services</h3>
<p>List of my services</p>
<div class="row">
<div class="col-md-6">
<div class="service-content">
<h3 class="bottom-liner">Here is my services</h3>
<div class="row">
<div class="col-md-6">
<ul>
<li>sliders</li>
<li>max 10 section per page</li>
<li>carousels</li>
<li>image gallery</li>
<li>awesome background particles!</li>
<li>Countdown (Realtime server side)</li>
<li>contact form</li>
<li>Pixel Perfect Design</li>
<li>All code is hand coded</li>
<li>W3C Validated</li>
<li>Quickly Converted PSD to Html</li>
<li>Highly Professional code!</li>
<li>Cross-Browser Compatibility</li>
<li>jQuery effects</li>
<li>animated content in On scroll</li>
</ul>
</div>
<div class="col-md-6">
<ul>
<li>Highly Professional Design</li>
<li>100% Unlimited revisions</li>
<li>Mobile-Friendly websites</li>
<li>E-commerce with various payment methods</li>
<li>Websites for All professions</li>
<li>Secure Websites</li>
<li>Custom Designing(if you say)</li>
<li>User-friendly and attractive layout</li>
<li>Opt in form (MY SQL DATABSE)</li>
<li>Meta description</li>
<li>maps</li>
<li>Free 3Month support</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6 ">
<img src="img/services.png" class="img-fluid Services-scale-up" alt="">
</div>
</div>
</div>
</section>
**css
#services:hover > .Services-scale-up{
transform: scale(1.1);
}**
Heading ##i want to scale up the image when #services hover i have
used ~ this sign Also! can anyone tell me how to scale up a image
when i hover the parent section i have tried both ~ and > sign i dont
know more sign to hover parent element
========================================================================
I am trying to place Bootstrap breadcrumb navigation in a template.
What I would like is a full-width 100% with a background color, and then within that place a col-lg-12 but I can't figure it out.
This image might help:
<div class="container-fluid darkgrey">
<div class="row">
<div class="col-lg-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Section</a></li>
<li class="breadcrumb-item active" aria-current="page"><?php the_title();?></li>
</ol>
</nav>
</div>
</div>
</div>
I think I might need to "nest" columns but I can't figure it out.
Am I on the right path? Thanks
Read the docs, Luke :-)
Use .container-fluid for a full width container, spanning the entire width of the viewport.
You are using .container-fluid, so you get a fluid, 100% width container. Use .container to get a fixed with container.
Here's a workig JSFiddle.
Also note you have an unbalanced </a> after Section, maybe just a copy-paste error here on SO.
To align the contents to .content width while keeping section background full-page width, you could nest a .container inside your .container-fluid:
.darkgrey {
background-color: #e9ecef;
}
.darkgrey .breadcrumb {
background-color: transparent;
margin-bottom: 0;
padding: .75rem 0;
}
.darkgrey + .container {
padding-top: .75rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid darkgrey">
<div class="container">
<div class="row">
<div class="col-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href>Home</a></li>
<li class="breadcrumb-item">Section</li>
<li class="breadcrumb-item active" aria-current="page">
Test Post 3
</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2>Test Post 3</h2>
<p> Lorem ipsum dolor sit amet... </p>
</div>
</div>
Important note: .containers can be placed inside .container-fluids but should not be placed inside another .container.
Another note: you probably don't need the CSS (from the screenshot it looks like your theme already handles that part, but I needed it on SO).
I am working on visual studio express 2013 and create a default project based on webform with default template as shown in link http://codepen.io/anon/pen/dPWzRd
For some reason Header & footer elements appear our their main wrapper as it is show in the codepen example. I tried to play around with few css properties but it breaks the design.
<header>
<div class="header-wrapper">
<div class="float-left">
<p class="site-title"> logo here</p>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Test</li>
</ul>
</nav>
</div>
</div>
</header>
How can ii fix this so that Logo and menu items show inside the Header Wrapper (basically inside the red box) and same for the footer section
You can just use in CSS
display: inline-block;
instead of
float: left;
Full example:
.float-left {
display: inline-block;
}
It's because style float makes element "invisible" for parent. Style display: inline-block acts similar to float but is "visible".
when you have to element inside in other div and two div's are floating after that you need to add clear.
forked example
http://codepen.io/anon/pen/mymMMz
<header>
<div class="header-wrapper">
<div class="float-left">
<p class="site-title"> logo here</p>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Test</li>
</ul>
</nav>
</div>
<div class="clear"></div>
</div>
</header>
.clear {
clear: both;
}
or add overflow hidden to .header-wrapper
I have a page developed using twitter bootstrap version 2. I have a row that is divided into span8 and span4. Span8 has some image slider (built with jquery) and span4 has just some links. When the page loads, all the links in the span 4 is displayed first and then when the image loads, the text gets pushed to right. Is there a way to prevent this shift/jump effect?
<div class="row-fluid">
<div class="span8" id="imgDiv">
<!-- Image slider goes here -->
</div>
<div class="span4" id="linksDiv">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>
</div>
I have devised the following solution. Here's a JSFiddle: http://jsfiddle.net/sJq6y/
HTML
<div class="container">
<div class="row-fluid">
<div class="span8">
<div class="imgDiv">
<h1> Image slider goes here </h1>
</div>
</div>
<div class="span4 linksDiv">
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Duo
</li>
</ul>
</div>
</div>
</div>
CSS
.linksDiv ul {
list-style:none;
background-color:lightgrey;
width:90px;
height:90px;
padding:10px;
}
.imgDiv h1 {
text-align:center;
color:tomato;
}
Images
Probably due to styling coming from #imgDiv and #linksDiv.
Would this option work for you?
<div class="row-fluid">
<div class="span8">
<div id="imgDiv">
<!-- Image slider goes here -->
</div> <!-- end #imgDiv -->
</div>
<div class="span4">
<div id="linksDiv">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div> <!-- end #linksDiv -->
</div>
</div>
Good luck!
I want to create fluid layout using LESS and without using Bootstrap grid clasess like .span6 on html code. How can I do this?
When I wrote without LESS I create layout like this:
<div class="container-fluid">
<div class="row-fluid" id="header">
<div class="span4 block">
<h1 class="title">Sample Site</h1>
<h2 class="sub-title">Powered by Twitter Bootstrap</h2>
</div>
<div class="span6 block">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Pages</li>
<li>Typography</li>
<li>UI</li>
<li>Calendar</li>
<li>Tables</li>
</ul>
</div>
<div class="span2 block">
<div class="btn-group open">
<button class="btn">Dropdown</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Change password</li>
<li>Log in with another user</li>
<li>Change token</li>
<li>Log out</li>
</ul>
</div>
</div>
</div>
<div class="row-fluid" id="slider">
<div class="span12 block">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
Now, my layout looks next way:
<div id="wrap">
<div id="header">
<div id="logo">SiteLogo</div>
<div id="top-menu">
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
<div id="logout">
Logout
</div>
</div>
<div id="slider">
and what I should write on my .less file if I want to make div#wrap -> .container-fluid,
div#header -> .row-fluid, div#logo -> .span4, div#top-menu -> .span6, div#logout -> .span2
without writting this clasess on html code?
First, this wouldn't really be semantic, at least, no more so.
The semantic form of <div id="top-menu"> is <nav> or <nav id="top">
The semantic form of <div id="header"> is <header>
In any case, there are instructions on doing this here:
Please stop embedding Bootstrap classes in your HTML
Honestly, though, it's not as simple as the author makes it look. Just because you have a <nav> inherit the styles of .nav from Bootstrap doesn't mean its children will inherit inherited styles as well.
So if I define a style from .nav ul, a <ul> element will not receive this style if it's in a <nav>.
This worked for me.. posting in case it helps anyone else.
Mixins for semantic fluid grid:
.makeFluidRow(){
width: 100%;
.clearfix();
}
.makeFluidCol(#span:1,#offset:0){
float: left;
#grid > .fluid .span(#span);
#grid > .fluid .offset(#offset);
&:first-child {
margin-left: 0;
.offsetFirstChild(#offset);
}
}
Use them just like the non-fluid mixins:
div#header{
.makeFluidRow();
div#logo {
.makeFluidCol(4); //Spans 4 cols
}
div#top-menu {
.makeFluidCol(6); //Spans 6 cols
}
div#logout {
.makeFluidCol(2); //Spans 2 cols
//Or you could have span1, offset1 using .makeFluidCol(1,1);
}
}