For example:
<div id="slideshow-nav">
... ...
Example
... ...
</div>
In CSS, I have
#slideshow-nav a {
background: url(url-to-image) no-repeat;
color:#fff;
outline:none;
text-decoration:none;
}
My object is to hide the text ("Example") and only display the background. However, I still want the link click-able.
How can I do that?
Thank you.
#slideshow-nav a {
background: url(url-to-image) no-repeat;
color:#fff;
outline:none;
text-decoration:none;
text-indent: -9999em;
}
Will that work?
Related
TL;DR: Here's a CodePen.
I have a UI with an image and a grid of text with long lines which looks like this:
I'm using CSS Flexbox with two elements: the image and the text. And then to lay out the text, I'm using CSS Grid. Now, when I view this on a narrow screen for mobile, it correctly wraps everything and stacks the two elements:
But on desktop, with a slightly narrower div, the flex box wraps before the grid text like this:
How can I get the text to wrap while leaving the flex box alone in this case? I fear I may need to use some media queries, but I'm not even sure if I'm using the right CSS components for this.
Here's the code:
index.html:
<div class="media-callout">
<div class="media-thumb">
<img height="170" width="120">
</div>
<div class="media-callout-grid">
<div class="media-callout-key">Authors</div>
<div>Babalola, J & Ogunkola, Babalola</div>
<div class="media-callout-key">Year</div>
<div>2013</div>
<div class="media-callout-key">Title</div>
<div class="media-callout-value">Scientific Literacy: Conceptual Overview, Importance and Strategies for Improvement</div>
<div class="media-callout-key">Journal</div>
<div><em>Journal of Educational and Social Research</em></div>
<div class="media-callout-key">Location</div>
<div>vol. 3, no. 1, pp. 265–274</div>
<div class="media-callout-key">DOI</div>
<div>10.5901/jesr.2013.v3n1p265</div>
</div>
</div>
style.css:
.media-callout {
display: flex;
flex-wrap: wrap;
justify-content: center;
row-gap: 20px;
column-gap: 10px;
padding: 1em;
max-width: max-content;
}
.media-thumb img {
float: left;
height: 175px;
width: auto;
}
.media-callout-grid {
display: grid;
font-size: 12pt;
grid-template-columns: 6em 1fr;
align-content: center;
gap: 0 15px;
}
.media-callout-key {
text-align: right;
font-weight: bold;
}
.media-callout-value {
word-break: break-word;
word-wrap: break-all;
}
A media query does indeed resolve this:
#media screen and (min-width: 600px) {
.media-callout {
flex-wrap: nowrap;
}
}
The query must come AFTER the .media-callout block. I also had to use this approach to prevent the image from being squashed.
I am trying to create a simple nav menu using flexbox. My issue here is that i want to position the li.dropdown-c to the right side of the menu using align-self. I have tried something but its not working. Can anyone tell me what is wrong?
<nav>
<div class="top">
<ul class="main-ul">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li class="dropdown-c">Four
<ul class="in-ul">
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS:
* {
padding:0px;
margin:0px;
}
body {
font-family: sans-serif;
color:lightcoral;
background:#506679;
}
ul {
list-style: none;
}
a {
color:grey;
padding:10px 20px;
}
.main-ul {
display: flex;
justify-content: flex-start;
}
li.dropdown-c {
display: flex;
align-self: flex-end;
}
The align-self property only works for the same direction as align-contents, not justify-content. Instead, put a margin-left of auto on the li.dropdown and that should work.
li.dropdown {
display: flex;
margin-left: auto;
}
Also after testing this in codepen, I realized you're not even selecting the li correctly. It has class dropdown-c, not dropdown:
li.dropdown-c {
display: flex;
margin-left: auto;
}
I currently have several <section> elements that repeat themselves and I want to assign a 5 different alternating background colors.
Right now I'm using :nth-of-type(#n) but I'm almost positive that I'm not using it right and some weird behavior is happening where one of the colors does not repeat through the cycle.
This is an example code:
HTML
<section>
<article>This is A1</article>
</section>
<section>
<article>This is A2</article>
</section>
<section>
<article>This is A3</article>
</section>
<section>
<article>This is A4</article>
</section>
<section>
<article>This is A5</article>
</section>
CSS
section:nth-of-type(1n) {
background-color: red;
}
section:nth-of-type(2n) {
background-color: orange;
}
section:nth-of-type(3n) {
background-color: blue;
}
section:nth-of-type(4n) {
background-color: green;
}
section:nth-of-type(5n) {
background-color: gray;
}
Is there a more efficient way of doing this?
I would prefer to keep this within the realms of CSS but I do not mind adding JS instructions.
Here's the JFiddle demo.
Many thanks!
You're close. Just change your nth-of-type counting to the following.
section:nth-of-type(5n+1) {
background-color: red;
}
section:nth-of-type(5n+2) {
background-color: orange;
}
section:nth-of-type(5n+3) {
background-color: blue;
}
section:nth-of-type(5n+4) {
background-color: green;
}
section:nth-of-type(5n+5) {
background-color: gray;
}
Here's the JFiddle.
I would to use compass/susy and I need to make the same thing as pure css.
This is an example : http://www.lycee-celony.com/
I need that text be positioned on to the image, in the slideshow.
How can I do that with these tools or others from compass?
For image, I can use :
.adaptable-img {
max-width: 100%;
}
My need is about the grid management for that, and in the technical nesting for these blocks.
Thanks
EDIT1: My css classic code that work for now:
#include at-breakpoint($desktop) {/* //Dimensions pour les pc*/
aside.DiapoHP{
img{#include adaptable-img;}
}
#transparency{ #include span-columns($desktop);}
#contenu-diapo{#include span-columns($desktop);}
}
#transparency{
background:none repeat scroll 0 0 $orange;/*Couleur du fond*/
height:em(65px);
bottom:em(70px);
left:em(12px);
position:absolute;
z-index:15;
#include opacity(0.6);
}
#contenu-diapo {
position: relative;
left: em(10px);
color: white;
z-index: 20;
h2 {
color: white;
padding: em(5px);
font-family: $AristaFont;
position: inherit;
bottom:em(85px);
}
a {
text-decoration: none;
}
}
For this html:
<aside class="diapoHP">
<div id="transparency"></div>
<div id="contenu-diapo">
<h2>blblblb</h2>
</div>
</aside>
It's my problem:
http://jsfiddle.net/Vqa7v/
body {
background: url("http://imgs.ir/imgs/201307/1336_menu.png") no-repeat scroll center top transparent;
}
#menu {
display: block;
height: 193px;
margin: auto;
position: relative;
top: 32px;
width: 400px;
}
nav {
left: 0;
min-width: 426px;
position: absolute;
text-align: center;
top: 79px;
}
nav a {
padding: 5px 7px;
color:white;
}
<div id="menu">
<nav>
HOME
SERVICES
ABOUT
BLOG
CONTACT
</nav>
</div>
At first, the menu is fit to background position, but make the Result window smaller & smaller to see when the menu get out of the background position.
How to avoid that and fix menu to background image position? (I want to have a menu in center of my website on its background image)
Had some real trouble understanding what you were looking for, but is this it? Basically it needed a whole bunch of changes that I've made to nav etc.
http://jsfiddle.net/robsterlini/Vqa7v/2/
I solved it by my self: http://jsfiddle.net/Vqa7v/4/
.menu {
position:absolute;
top: 20px;
left:15px;
}
nav {
text-align: center;
position:absolute;
width:100%;
height:100px;
background:url('http://upload7.ir/images/27569577012963327319.jpg') no-repeat;
min-width:500px;
}
nav a {
padding:0 5px 0 0;
line-height:35px;
color:oldlace;
text-shadow:0 0 2px #000;
text-decoration:none;
letter-spacing:1px;
}
<nav>
<div class="menu">
HOME
SERVICES
ABOUT
BLOG
CONTACT
</div>
</nav>
Small the RESULT window width and see the menu is fixed to the background image.