I am trying to make this menu
now so far i can get to this point where i have the > appearing before each <li> with a margin of 10px before the text but the problem is that i can't get the circle
i tried adding <divs> thinking i could just give it a background-color and border-radius but the problem is that the html comes up as text so i wouldn't be able to apply any css to it.
the easiest solution would be to add a <div> in each <li> however the list is generated by a php function which returns the HTML as a single string. i could use str_replace() to locate every opening <li> and add in a <div> or do the same thing in javascript but i want to know if i can do this though CSS
Try using li:before with a content of > to make these bullet points, like so:
li:before {
align-items: center;
background-color: #fcbe35;
border-radius: 50%;
color: white;
content: '>';
display: inline-flex;
font-weight: bold;
height: 24px;
justify-content: center;
margin-right: 10px;
width: 24px;
}
Here's a JsFiddle.
CSS
ul{
list-style-type:none;
}
li::before {
content: ">";
background: gold;
font-family: serif;
font-style:bold;
display:inline-block;
font-weight: 800;
padding: 1px 3px;
line-height: .8em;
text-align:center;
vertical-align: center;
margin:0px 10px 0px 0px;
border-radius: 50%;
color: #fff;
}
EDIT: updated to make it look better.
How about making those circles in a Photo Editing Software and using them as the marker of your list like this :-
li{
list-style-image : url("circles.gif");
}
Or if you just don't want to use an Image :-
li::before{
content : ">";
background : yellow;
border-radius : 50%;
/* and some other styles as per your wish */
}
use an image: list-style-image: url(...);
Use pseudo elements as 'li::before' to adjust the pointers dynamically using only CSS.
Related
I try to edit CSS for a list but I did not find how to go to line and to adjust height between list elements properly.
Link to the website : https://denkimedia.com/prod/K2211001/test/
menu open
But I don't know how to fix the size between the list elements :
Display list is not ok
Any idea? :)
I modified position and white-space in article-verticle.css for adjusting the line.
.flowpaper-reflow-tocitem{ position:relative; white-space: normal;
padding, margin, height did not work for adjusting the space between lines.
Please apply below CSS:
li.flowpaper-reflow-tocitem-listitem {
margin-left: -13px !important;
min-height: 38px;
display: flex;
align-items: center;
background: #4f84eb;
margin-bottom: 5px;
border-radius: 5px;
}
li.flowpaper-reflow-tocitem-listitem .flowpaper-reflow-tocitem {
font-family: Lato;
color: #fff;
text-decoration: none;
display: block;
padding-left: 12px;
white-space: break-spaces;
line-height: 1.2;
}
You will get this result:
https://i.imgur.com/KrxyhBS.png
Please let me know if you find any issues
So i wish to put an icon above an h3 solely using css. Reason being that i don't wish to edit the html in a wordpress plugin.
So i decided to use pseudo element ::before which displays the icon correctly but places it before the h3 rather than above.
Adding display:block solved this issue until i decided to put a border around the icon, which then puts a border around the entire block, which is not what i want.
So i'm looking for better options if anyone can advise.
h3.icon:before {
font: normal normal normal 16px/1 FontAwesome;
content: "\f0c1";
display: block;
margin-bottom: 25px;
padding: 20px;
border: 1px solid #000;
}
<h3 class="icon" style="color: #000000;">Los Angeles</h3>
h3.icon:before {
font: normal normal normal 16px/1 FontAwesome;
content: "\f0c1";
display: block;
margin-bottom: 25px;
padding: 20px;
border: 1px solid #000;
text-align:center;
width:50px;
margin:auto;
}
<h3 class="icon" style="color: #000000;">Los Angeles</h3>
Not exactly sure what you want to achieve, do you want a border around the icon but not with all the extra padding in the block?
If that is the case try giving it a width and margin either side.
I used to have no problem with the css code i have been using. But, after I have changed from using "Lightbox2" to "fancybox", the spacing between the thumbnails and the thumbnail border (when mouse hovering above) disappeared. What has gone wrong?
Compare the problem page after switching to using fancybox (www.lixiao-art.com/test.html ) with the page using Lightbox2 ( www.lixiao-art.com/latest.html )
This is the code I use:
body { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
margin: 0px;
background-color: RGB(181,170,128);}
*{
font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:normal
}
#nav {float: left;
position: fixed;
background-color: RGB(233,231,197);
text-align: left;
font-size: 11px;
color: #645630;
width: 90px;
font-weight: bold;
padding: 100px 20px 100px 30px;
border: none;
min-height: 100%;
}
#content {float: left;
margin-left: 150px;
padding: 15px 20px 10px 80px;
width: 900px;
margin-top: 0px;
border: none;
font: black;
font-size: 11px;
}
#content a {text-decoration:underline}
h2 {height: 2em;}
.footer {
text-align:center;
padding-top: 50px;
padding-bottom: 1em;
font-size: 11px;
}
a{text-decoration: none;
color: #645630;}
a:hover {color: red;}
* {margin: 0;}
html, body, wrapper {height: 100%;}
.ImgBorder img { border:2px solid transparent;
height:100px;
}
.ImgBorder:hover img{ border-color: white}
.ImgBorder {display: block;
float: left;
margin: 30px 20px; }
h5{
clear:both
}
img { border: none; }
Thank you!
In your previous Lightbox2, each image is wrapped in an anchor
<a class="ImgBorder">
and the class ImgBorder has the value margin: 30px 20px
In your current Fancybox, you can just add this missing margin margin: 30px 20px to the class fancybox as each image is now wrapped in an anchor
<a class="fancybox"/>
As I just noticed that there doesn't seem to be any class fancybox already defined, you just have to add
.fancybox
{
margin: 30px 20px;
}
e.g. in your global.css
Update: In case you also want to display the border for the fancybox-images, there are two ways of achieving this: Currently you have both lightbox versions on your test page. For the first image the border is still displayed for hover. Following CSS is taking care about that:
.ImgBorder img {
border: 2px solid transparent;
height: 100px;
}
.ImgBorder:hover img {
border-color:white;
}
for an image markup as follows for your first image:
<a class="ImgBorder" rel="lightbox[gaze]"
href="http://www.lixiao-art.com/work/2014/52.jpg">
<img src="work/2014/52_t.jpg">
</a>
Your current fancybox-markup is like this for your second image:
<a href="work/2014/52.jpg" rel="group" class="fancybox">
<img src="work/2014/52_t.jpg">
</a>
So all you have to add is the border and hover for the fancybox-class:
.fancybox img {
border: 2px solid transparent;
height: 100px;
}
.fancybox:hover img {
border-color:white;
}
It's possible that there are some additional adjustments because of the CSS that fancybox uses, but it's easier if you just check this on your site as I just noticed that you're currently working on it.
At the moment your fancybox images "jump" because you added the CSS
.fancybox:hover
{
border-color:white;
margin:30px 20px;
}
which results in setting this margin on hover (therefore jumping then). I suggest you just try the CSS I posted above, that should work.
Update 2 for the comments follow-up questions:
The attributes class and rel stands for the following:
rel (='related') is an attribute containing information for you previous lightbox. The lightbox script will just fetch the information for e.g. a big image or a link from there.
class: as you noticed, almost all in your css-file starts with a dot (.) followed by a name. This name is the name of the class to which the style information will apply. So .test {color:red;} results in displaying a text red in case it's wrapped in an element with the class test, e.g. a <div>: <div class="test">This is red text</div>.
Update for the margins:
To keep the margins to your images when you remove it for the :hover - the correct way to have the margins is just like that:
.fancybox img
{
margin:30px 20px;
}
As you already have one .fancybox img in your CSS, just add this margin to it, though you can also have these selectors multiple times in a CSS file, it's better to keep the styles applying to an element together.
Thank you very much! You've pointed out the problem with my multiple classes, and I've fixed it accordingly like this:
<a class="fancybox ImgBorder" rel="group" href="work/2014/52.jpg"">
<img src="work/2014/52_t.jpg">
</a>
(instead of making new definitions in my global.css)
But, a small problem shows up: this line shows in red colour in the editor at the backoffice. Is there a problem with this line? but I guess I will open a new thread for this.
Thanks again!
I cannot figure this out. I HAVE DONE RESEARCH so please, no comments about me doing more research. Also, I am a noob, so be nice ;)
Here's my site: http://library.skybundle.com/
Hover your mouse over the two black rectangles in the main blue nav bar (header area). The a:hover should make the color change to a gray. The ISSUE is that in Chrome, this looks perfect. But, in Firefox, the padding-right isn't long enough or something, so there is always a small black rectangle at the far right side of the "Educational Courses" button (this will only be visible when hovering your cursor over the button). In other words, the gray box doesn't go all the way to the right-side end of the button area upon mouse hover. I just don't understand why this looks and works great in Chrome, but bugs out in Firefox...
Believe me when I say I have tried everything I can to fix it using Firebug in Firefox. If you play around with it using an editor in your browser, you will see that if you try to make the padding longer for Firefox, it pops the whole button down onto a new line. So to fix THAT problem, you must make the container wider, but then the original problem comes back. It's a circle of problems and I'm sure one of you geniuses out there will see a simple solution that I am missing.
Please help. Thanks!
EDIT :
Here's my JSFiddle and code. Notice how it looks great in Chrome but not in Firefox?
http://jsfiddle.net/S4st8/
HTML:
<div id="navigation">
<div id="navigation-inner">
<div id="page-nav">
<div id="primary-nav">
<ul id="top-menu">
<li id="li-left">Product Training Videos</li>
<li id="li-right">Educational Courses</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
#navigation {
background: url(http://library.skybundle.com/wp-content/themes/business-services/library/styles/colour-images/mu-nav.jpg) repeat-x;
margin: 0px;
padding: 0px;
height: 40px;
width: 100%;
}
#navigation-inner {
margin: 0px auto;
padding: 0px;
height: 48px;
width: 960px;
}
#page-nav {
margin: 0px;
padding: 0px;
height: 40px;
width: 960px;
}
div#primary-nav {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
}
ul#top-menu {
margin: -5px 0.325em 0 0.325em;
position: absolute;
padding: 0;
z-index: 100;
top: 0;
left: 3em;
width: 367px;
}
ul#top-menu li {
line-height: 3em;
list-style-type: none;
height: 49px;
background-color: #2C2C2C;
float: left;
}
li#li-right {
list-style-position: inside;
border-left: 2px solid #5E5E5E;
}
ul#top-menu li a {
font-weight: bold;
font-size: 11pt;
text-decoration: none;
padding: 15px 10px 16px 10px;
color: #ffffff;
}
ul#top-menu li a:hover {
text-decoration: none;
width: auto;
color: #ffffff;
background-color: #505354;
padding: 15px 10px 17px 10px;
}
its because a tags (anchor tags) have a default display property of inline
due to CSS Box Model you would need to adjust your padding and set the anchor tags display property to display:block;
the display block allows the anchor tag to fill the whole space of the LI tag
change ul#top-menu li a to this:
ul#top-menu li a{
color: #FFFFFF;
font-size: 11pt;
font-weight: bold;
display: block; /* add this */
padding: 0 10px; /* add this */
}
the CSS Box Model adds the content + padding + border + margin
https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
Take a look at this CSS rule:
li#li-right {
border-left: 2px solid #5E5E5E;
list-style-position: inside;
}
Dropping list-style-position: inside seems to fix your issue in Firefox (and still works in Chrome), but I haven't tested the implications in other browsers. The CSS rule is documented here.
The reason why : browsers apply their own css if you don't specify it. Firefox added the space for your bullet (somehow)
FF :
list-style-image none
list-style-position outside
list-style-type disc
GooChrome :
list-style-image: none;
list-style-position: inside;
list-style-type: none;
User JasonSperske gave you a fixing solution,
i invite you to RESET your css.
PS. in the meantime, you are invited to see : https://stackoverflow.com/help AND http://sscce.org/
Reading and understanding those pages will give you few reputations points
I have an <h2> title into a fixed with <div> (238px). When this page is rendered, the browser manage line breaks into the title to make the text fit the width (238px).
But the width property of the h2 element is still 238px, no matters where the line breaks are.
I want to set a border-bottom only under the text, and not under the full width of the h2 element, and I don't know how to achieve this using CSS.
You can see what I mean here : http://jsfiddle.net/np3rJ/2/
Thanks
I think this is what you need:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
h2 span {
position: relative;
padding-bottom: 5px;
}
h2 span::after{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #000;
content: ""
}
Working demo in jsFiddle
I used the technique described in this answer: Advanced CSS challenge: underline only the final line of text with CSS
I introduced a span into the H2 in order not to change the display attribute of it, but you could just as easily use the same technique with a display: inline on your H2. This method would allow the control of the actual line though rather than setting display: inline if needed
This works on Chrome.
h2 {
width: fit-content;
}
If you are willing to use display: table-cell, and pseudo-elements, you can have a pretty good solution (with some minor limitations).
The HTML does not change:
<div class="dossier_titre">
<h2>Horizon 2020, nouvelles opportunités</h2>
</div>
and you can apply the following CSS:
.zone_33 {
width: 238px;
padding: 0px;
margin: 0px;
}
.zone_33 .dossier_titre {
margin: 0px 0px 20px 0px;
}
.zone_33 h2 {
color: #616263;
font-size: 150%;
font-weight: lighter;
padding: 0px 0px 12px 0px;
background: none;
border-bottom: 1px solid grey;
display: table-cell;
text-transform: uppercase;
}
.zone_33 .dossier_titre:after {
content: "";
display: table-cell;
width: 100%;
}
For the <h2> element, set display: table-cell, and add a pseudo-element after .dossier_titre (the containing block for the header/title element). The pseudo-element is also a table-cell and has a width of 100% (this is the key).
Also, since h2 is no longer a block element, add your margins to .dossier_titre to maintain the visual spacing in our layout.
How This Works
I am creating a two-cell table with the second cell (the pseudo-element) having a width of 100%. This triggers the browser to calculate the shrink-to-fit width for the first cell (h2) that contains the title text. The first cell's width is thus the minimal needed to display the text. The bottom border is as long as the longest text line in the text block within the table-cell.
Limitations
table-cell is not supported in IE7 without a hack, but the work-around is fairly well known and can be found if needed.
If the title had many short words, you might get the line breaking in unexpected places. You would need to insert   to keep specific words together as needed.
Fiddle: http://jsfiddle.net/audetwebdesign/h34pL/
Maybe display: inline-block; Or display: inline; is what you need?
Why not try:
text-decoration:underline
?
EDIT
Just make a span around "OPPORTUNITÉS" with the underline.
<h2>Horizon 2020, nouvelles <span class="underline">opportunités</span> </h2>
.underline {
text-decoration:underline
}
Can try "text-underline-position" property instead of table-cell and border. Make it simple!
text-decoration: underline;
text-underline-position: under;
All you can do is put your h2 element text into span like this:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
and in css remove border-bottom from .zone_33 h2 {} and put it like this:
.zone_33 h2 span{ border-bottom: 1px solid grey;}
by this border-bottom will come under full text.
Try this, (I think it will help you)
.heading {
position: relative;
color: $gray-light;
font-weight: 700;
bottom: 5px;
padding-bottom: 5px;
display:inline-block;
}
.heading::after {
position: absolute;
display:inline-block;
border: 1px solid $brand-primary !important;
bottom: -1px;
content: "";
height: 2px;
left: 0;
width: 100%;
}
You could put a border-bottom and change the width of your h2 so that the border length matches your h2 length. Adjust the width to the width of your h2, taking into consideration it's font-size. Then add a padding-bottom to your h2 and set it to your liking.
<h2>Cats</h2>
h2{
border-bottom: 5px solid black;
font-size: 16px;
padding-bottom: 5px;
width: 64px;
}