I tried to use css grid from reagent.
In the .css file a "container" class is defined:
.container {
display: grid;
width: 600px;
height: 400px;
background: #999999;
grid-template-rows: repeat(6, minmax(30px, 50px));
grid-template-columns: repeat(7, minmax(30px, 50px));
}
And then I use the clojurescript code below to display "test" in the second row:
[:div {:class "container"}
[:div {:grid-row-start 2
:grid-row-end 3
:grid-column-start 1
:grid-column-end 2}
"test"]]
But it does not seem to work as it appears in the first row.
Any ideas why?
Many thanks in advance
Related
I built a css grid with areas header, search, filters and results in html/css
The areas are defined as:
#whole {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"header"
"search"
"filters"
"results";
}
/* laptop and wider, the search and filters appear next to each other..*/
#media screen and (min-width: 760px) {
#whole {
display: grid;
grid-template-columns: 33% auto;
grid-template-rows: auto 15% auto;
grid-template-areas:
"header header header"
"search filters filters"
"results results results";
}
}
Now, I would like to separate the css/html into angular components mapping each to these areas. I added base
I'm focussing on the header which should always be 3 grid columns wide but fits only into column 1.
The header.component.css is:
header {
grid-area: header;
width: 100%;
color: var(--tertiary);
}
and it appears 100% of the first column..
I added View encapsulation none but it seems the component limits itself to only fill grid column 1. Here's most of the code :
https://stackblitz.com/edit/angular-ivy-5uts9t?file=src/app/app.component.ts
Oh, the problem is that in the header css it should be now: app-header not : header
It seems to work now with:
app-header {
grid-area: header;
width: 100%;
color: var(--tertiary);
}
I am working to create some slides using reveal.js (from within R markdown if it matters). Compared to other frameworks (like ioslides or slidy) there are HUGE margins to the left of the text, as in the graphic below.
I've been trying to edit the css to move the text further to the left but to no avail.
Any ideas?
My css style section is:
<style type="text/css">
.reveal p {
text-align: left;
}
.reveal ul {
display: block;
}
.reveal ol {
display: block;
}
Reveal.initialize({ width: 1920, height: 1080, margin: 0.00, });
</style>
After much investigation, I did figure out a solution (at least in Rmarkdown). Specifically, I added the width and height argument under reveal_options in my output header. The settings below look much better for a 16:9 aspect ratio display.
output:
revealjs::revealjs_presentation:
reveal_options:
width: 1280
height: 720
I am trying to create two divs using foundation.
I used this code:
<div id=”containerLeftWrap” class=”small-4 small-centered medium-offset-2 medium-2 medium-uncentered columns” >
…content…
</div>
<div id="containerRight" class="medium-7 columns">
<div id="aboutArea">
…content…
</div>
</div>
In small size it looks fine
but in the medium and large size it looks like this
instead of like this
I've tried to add:
style=”display:inline-block; vertical-align:top”
But then the first div (the smaller one) was stuck to the left side, in all sizes, like this:
Does someone have an idea how to solve this?
Thank you!!!!
Update:
I have this css:
#containerLeftWrap {
background-color: #262626;
height: 256px;
min-width: 245px;
padding-top: 28px;
border-radius: 7px;
margin-top: 60px;
}
#aboutArea {
width: 90%;
margin: 0 auto;
background-color: #262626;
border-radius: 7px;
padding-bottom: 15px;
}
I am new to foundation 4 and we are currently using foundation 4 in our project MVC4 + Foundation 4 (through NuGet package)
We want to use accordions on our views.
Foundation 4 offers Sections; http://foundation.zurb.com/docs/components/section.html
but as this looks too bland on the website, we looked at foundation 3 accordion which we felt suited our website; http://foundation.zurb.com/old-docs/f3/elements.php.
Need experts help in understanding how can we make the look & feel of accordions sections similar to the one's available in foundation 3.
We understand foundation 4 doesnot offer images anymore, so how can we implement the small icons on the right.
I'm no expert, but if I understand correctly you just want to add the little triangle image on the right. First of all, are you using scss files ? If not you should definitely check it out here. All you need is to install this visual studio plugin, then download and add the zurb-foundation scss files to your project.
Next up, go to the _section.scss file and look for this part of the code:
#mixin section($section-type:accordion) {
// Accordion styles
#if $section-type == accordion {
border-top: $section-border-size $section-border-style $section-border-color;
position: relative;
.title {
top: 0;
cursor: pointer;
width: 100%;
margin: 0;
background-color: $section-title-bg;
***********************************
*** add a background image here ***
***********************************
a {
padding: $section-padding;
display: inline-block;
color: $section-title-color;
font-size: emCalc(14px);
white-space: nowrap;
width: 100%;
}
&:hover { background-color: darken($section-title-bg, $section-function-factor/2); }
}
.content {
display: none;
padding: $section-padding;
background-color: $section-content-bg;
&>*:last-child { margin-bottom: 0; }
&>*:first-child { padding-top: 0; }
&>*:last-child { padding-bottom: 0; }
}
&.active {
.content { display: block; }
.title { background: $section-title-bg-active;
**********************************************
*** add the "active" background image here ***
**********************************************
}
}
}
There are two ways to add the triangle, either use an image of your choice, or even better, use foundation's css function that creates triangles !
#include css-triangle(5px, #aaaaaa, top);
Note I have not tested modifying foundation's sections, but I'm pretty sure this should do the trick.
SCSS is always the best option. But, for others who are not yet ready to dive into SCSS, you can do it via CSS. In your CSS file, just include the following:
.section-container.accordion > section > .title:after,
.section-container.accordion > .section > .title:after {
content: '\25B8';
position:absolute;
right:10px;
font-size:22px;
}
.section-container.accordion > section.active > .title:after,
.section-container.accordion > .section.active > .title:after {
content: '\25BE';
position:absolute;
right:10px;
font-size:22px;
}
Of course, you can change the font-size as desired or you can simply ommit it. Hope that helps.
Does anyone have a suggestion for creating paragraph-type line spaces within a <li> tag that includes a hovered pop-up pseudo-class?
I have a <span> that pops up on a:hover and I want the text that pops up to be broken into 2 paragraphs. It works with <br> in FF but I want to do the right thing (now that I've discovered it's wrong!)...
html:
<div id="rightlist">
<ul>
<li><a href="">List item
<span>
words words words that are "paragraph" 1 of List item
<br><br>
different words that make up "paragraph" 2 of List item
</span></a></li>
css:
#rightlist {
margin-top: 10px; margin-right: 5px; width: 387px ; height: 239px ;
background-color: #7EBB11 ;
display: table-cell;
z-index: 100 ;
float: right ;
}
#rightlist ul {
text-align: left;
margin: 0;
margin-top: 6px;
font-family: sans-serif;
font-size: 20px ;
color: black ;
}
#rightlist a
{
display: table-cell;
text-decoration: none; color: black;
background: #7EBB11 ;
}
/*appearance of the <a> item (but before the <span> tag) on hover*/
#rightlist a:hover {
color: white;
}
/*appearance of the spanned content within <a></a> tags when not hovered */
/* %%%%% important - keep position:absolute in this div %%%%% */
#rightlist a span {
display: none;
position: absolute ;
margin-left: -412px;
top: -10px; left: 10px; padding: 10px ;
z-index: 100;
width: 380px; height: 222px;
color: white; background-color: #7EBB11;
font: 0.75em Verdana, sans-serif; font-size: 13px ; color: black;
text-align: left;
}
/*appearance of spanned content within <a> tags when hovered*/
#rightlist a:hover span {
display: table-cell ;
}
Err there's nothing wrong with having <br> inside <a> or <span>. It's perfectly valid according to the HTML 4.01 spec.
Edit: <li> can contain <p>, <br>, and pretty much anything else.
The spec is a bit hard to read but basically says:
LI can contain block or inline
block is made of P + some other things
inline is made of special + some other things
special is made of A + BR + some other things
Regarding <a> it says:
A can contain inline except A
inline... see above
Your problem may arise from the fact that you're using a <span> tag incorrectly.
Spans are supposed to be inline elements and you're styling it as though it were a block element. Admittedly you can force a span to behave as a block element by adding the right style, but this may not always be honoured by the various browsers out there.
Ideally you should be using a div instead. You can then use either p tags or further div tags to indicate the paragraphs (ideally p, since semantically they actually are paragraphs rather than unrelated blocks of text).
You could stick another span in there as a "fake" p tag:
<li><a href="">List item
<span>
<span>words words words that are "paragraph" 1 of List item</span>
<span>different words that make up "paragraph" 2 of List item</span>
</span></a></li>
And in your css:
#rightlist span span {display:block;margin:...}
Note anything you declare for #rightlist span will apply to #rightlist span span, so you might need to override some of the rules in #rightlist span span.
Why is it 'Wrong'?
your br tag should perhaps be coded as:
<br />
Why is your current way wrong ?
You can try this
<span>
<p>words words words that are "paragraph" 1 of List item</p>
<p>different words that make up "paragraph" 2 of List item</p>
</span>