I'm forced to use a website that had too many distracting elements and I'm trying to adjust it using custom CSS. I stumbled upon this wonderful navigation links:
______Link#1__________
______Link#2__________
Can I remove those _'s only by using CSS properties that currently work in latest stable version of FF?
If the links are similar in width, you could hide the offending underscores out of view through overflow: hidden:
a {
display: block;
width: 50px;
overflow: hidden;
text-indent: -45px
}
If they do have different widths, you could target each one individually through the nth-of-type selector...
ul.nav li:nth-of-type(3) a {
display: block;
width: 70px;
overflow: hidden;
text-indent: -45px
}
It's an interesting challenge, good luck!
http://jsfiddle.net/F24rh/
No; You can currently only add text before and after elements using CSS (and even that support is limited).
To do what you're attempting, consider writing a Greasemonkey script.
Related
I am trying to hide a .div in based on this page http://pdtuk.com/learn-with-rockjam/ so that the contents of the page moves up.
If I change the properties in the custom CSS in the admin panel of the to the below it functions in inspector but does not seem to update or take any effect when I preview or try and make live. Any ideas on how I can resolve?
.page_banner .background_wrapper{
position: relative;
display: none;
width: 100%;
height: 46.500rem; /* 730px */
background-position: center left;
background-size: cover;
}
I hope I understood your question correctly.
There seems to be an unknown background-image.
<div class="background_wrapper" style="background-image:url('')">
So the specified height: 46.5rem converts to empty space.
One way to solve that:
height: 0
Adding this CSS rule should help:
.page_banner .background_wrapper {
display: none;
}
That element has a defined heigth which creates the unwanted space. Adding display: none makes it invisible and removes it from the document flow. But to be on the safe side you could also add height: 0;
http://alexandermasters.com/flora/2015/10/05/corey-boyce/
Trying to horizontally center the image within its respective container.
Can't seem to isolate the correct element with which to apply
display: block;
margin-left: auto;
margin-right: auto;
Have progressively worked my way through the code starting from the image and moving up to no avail.
Try this CSS code
.gallery-item {float:none; margin:0 auto; text-align:center}
targeting the IMG tag would not work because it is nested in another element, so you have to center the parent of the img.
when there is a float, margin:auto will not work properly
If you're not concerned about IE9 compatibility, you can easily achieve this by applying display: flex to the parent <dt> element.
Check out Chris Coyier's Complete Guide to Flexbox if you haven't already read up on this beautiful member of CSS3. I also recommend this article by Paddi McDonnell.
Flexbox underwent some prefixing inconsistencies, so it would be wise to have a fallback style if those users are important to you.
try this:
.gallery {
text-align: center;
}
.gallery dl {
display: inline-block;
float: none;
}
(also clear your browser cache)
I have this plugin that displays a tag cloud for Wordpress (http://www.hothouseblog.org/). Typically it displays in a horizontal running list. I seek the answer to turn this list into three or four columns of vertically-running items.
With CSS, I've gotten the items to display in rows, but still the links are running horizontally, while I want the items to be vertically stacked. Is this a pipe dream?
.widget_tag_cloud {
display: table;
background-color: #000000;
padding: 10px 20px;
width: 580px;
height: 200px!important;}
.widget_tag_cloud a {
font-size: 14px!important;
text-transform: uppercase;
float: left;
width: 100px;
display: block;}
In its current html format, yes, that would be a pipe dream. Anchor elements aren't design for that. You have to section them into div columns or split them into stacks of ul >li lists instead. And display: table; isn't really appropriate here.
Filling a box the way you are trying to do it, with a vertical constrain, is almost impossible unless perhaps using multiple :nth-child() pseudo-classes, but that would be a convoluted solution which would require a javacript polyfill for IE8 to support it.
I was using the advice given here: https://stackoverflow.com/a/5174967 to lay out some form elements inline. It suggested using word-spacing: -1em; on the parent element and then resetting the spacing back to normal. I found that I didn't need to reset the word-spacing on the form elements inside the <form> tag.
form
{
word-spacing: -1em;
}
input,
textarea
{
width: 90%;
display: inline-block;
vertical-align: middle;
}
label span
{
display: inline-block;
width: 10%;
vertical-align: middle;
}
No, there are no special rules for word-spacing in forms. You can see this by viewing <form>hello world</form> as styled with your (malformed) style sheet. But word-spacing affects spacing between words only, for some (partly browser-dependent) definition for “word”.
Using negative word spacing to deal with spacing of inline blocks is unreliable trickery, and it is not the accepted answer to the question you refer to.
I am having the hardest time trying to figure out this (should be) simple css:
Website is here:
http://mibsoftware.us/fct/index.php
I'm simply trying to get my #leftcolumn and #maincolumn to be inside the #content_container, yet whatever I'm doing isn't working at all. I'd like for the #content_container to be a dynamic height since the height of #leftcolumn and #maincolumn change depending on the page you are on.
From the framework of my css it should work fine, so I must be missing something in my .css file declaring these divs. Any help would be greatly appreciated, as this will be a great learning experience for me.
Set overflow:hidden on your #content_container.
Here is a nice resource to learn more about clearing floats and such.
You could also set .clearfix class on your #content_container and define it in CSS like this:
/* Clearing floats without extra markup
Based on How To Clear Floats Without Structural Markup by PiE
[http://www.positioniseverything.net/easyclearing.html] */
.clearfix:after, .container:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow:hidden;
}
.clearfix, .container {display: block;}