How can i add arrow bullets in ck-editor?
currently i can see only square,disc,and circle.
enter image description here
You can create your own li bullets using :before pseudo elements
ul {
list-style: none;
}
li {
position: relative;
}
li:before {
content: '';
background: url('https://vignette3.wikia.nocookie.net/arrow/images/6/64/Favicon.ico/revision/latest?cb=20121123054146') no-repeat center center;
display: block;
left: -20px;
top: 3px;
width: 16px;
height: 16px;
position: absolute;
}
<ul>
<li>Text</li>
<li>Trext</li>
<li>Tesfd</li>
<li>Tesddf</li>
</ul>
Related
I Need Help.
I want to create a hero-image, but I'm having trouble positioning the text.
I want it to look like this:
enter image description here
When I do it my way, then I have a problem with RWD positioning later.
Maybe it is possible to do it somehow simpler?
<header>
<div class="hero-img">
<div class="hero-shadow"></div>
<div class="hero-text">
<h1>Zięba</h1>
<p>gallery</p>
</div>
<i class="fas fa-chevron-down"></i>
</header>
header {
.hero-img {
position: relative;
height: 100vh;
width: 100vw;
background-image: url('../img/Kapiaca-sie-small.jpg');
background-position: center;
background-size: cover;
background-attachment: fixed;
z-index: -2;
overflow: hidden;
.fa-chevron-down {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 95%;
color: $white-color;
font-size: 35px;
}
}
.hero-text {
position: absolute;
transform: translate(1430px, -50px);
height: 100%;
z-index: 5;
h1 {
color: $black-color;
font-size: 30rem;
font-family: 'Disclaimer', sans-serif;
}
h1::before {
content: 'Sławomir';
position: absolute;
display: inline-block;
transform: rotate(270deg);
top: 312px;
right: 180px;
font-size: 5rem;
font-family: 'Roboto', sans-serif;
color: $green-color;
}
p { position: absolute;
top: 540px;
right: 10px;
text-transform: uppercase;
color: $brown-color;
font-size: 1.6rem;
}
}
I am sending link to CodePen:https://codepen.io/Ewelaa/pen/MWoVwvY
header .hero-text {
position: absolute;
right:40px;
height: 100%;
z-index: 5;
}
Just use Right Property to fix position.
Is it possible to make this 2 circles always on the right and left of the bottom of the image? They need to be always one on the bottom left, the second on the bottom right of an image- when I resize the image. (they should always stick to the bottom corners of an image) How to position them like that?
enter code here
Codepen:
https://codepen.io/anami90/pen/KeEqRw?editors=1100
according to your quesrion the circles should appear on the outer column isnot it?
hope this helps:
div {
height: 100vh;
}
.col-3 {
background: lightgreen;
}
.col-6 {
background: pink;
padding: 0;
display: flex;
align-items: center;
position: relative;
}
.circle-left {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: yellow;
position: absolute;
left: 0;
bottom: 0;
}
.circle-right {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
img {
width: 100%;
height: auto;
vertical-align: middle;
}
<div class="row">
<div class="col-3">col-3</div>
<div class="circle-left"></div>
<div class="col-6">
<img src="https://www.w3schools.com/w3css/img_lights.jpg"/>
</div>
<div class="col-3">col-3</div>
<div class="circle-right"></div>
</div>
https://codepen.io/anon/pen/zabLoq?editors=1100
I would like to position this 2 circles as it is on this picture below:
enter image description here
I'm working on a horizontal menu with a vertical submenu. I have most of the display features set the way I want, but I'm running into trouble with displaying the submenu items with the same width. I want to display them as a nice, even block, but I'm left with a jagged edge on the right side of the submenu.
Here's a snippet of the html I'm using for the menu itself.
<nav class="navbar">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >item with sub</a>
<ul>
<li><a href="#" >sub item 1</a></li>
<li><a href="#" >sub item 2 which is longer</a></li>
<li><a href="#" >sub item 3</a></li>
</ul>
I'm not sure which part of the css I'm using might be affecting the width of the dropdown menu, so here's everything.
.navbar {
font-size: 20px;
text-align: center;
position: relative;
z-index: 1;
white-space: nowrap;
}
.navbar a {
background-color: #333;
color: #999;
text-decoration: none;
}
.navbar ul {
padding: 0;
margin: 0;
list-style: none;
}
.navbar li {
float: left;
position: relative;
min-width: 120px;
padding: 10px 10px 10px 10px;
background-color: #333;
color: #999;
}
.navbar li ul {
display: none;
position: absolute;
left: 0;
}
.navbar li > ul {
top: 42px;
left: 0px;
}
.navbar li:hover,
.navbar li:hover > a,
.navbar li a:hover{
background-color: #999;
color: #333;
text-decoration: none;
display: block;
}
.navbar li:hover ul,
.navbar li:hover ul li {
display: block;
clear: both;
min-width: 120px;
}
The fiddle is here: http://jsfiddle.net/jasotastic/yso6v2po/
Possible that this is a duplicate, but I haven't been able to find a similar question asked.
You could set 100% width to <li> to adjust with content width.
.navbar li ul li {
display: block;
width: 100%;
text-align: left;
}
Fiddle: http://jsfiddle.net/yso6v2po/4/
You can set a width to li and use white-space: normal. Then you will have a fixed width and break the phrase if it is bigger than the width.
Your code modified:
.navbar li ul li {
width:200px;
white-space:normal;
display: block;
}
Here is the jsfiddle: http://jsfiddle.net/yso6v2po/3/
i'm creating this base structure :
<ul>
<li>
<a>
blabla
</a>
</li>
</ul>
with css :
ul{
height: 100%;
list-style: none outside none;
margin: 0;
padding: 0;
}
ul li{
height: 25%;
text-align: right;
width: 100%;
}
a{
display: block;
float: right;
height: 75%;
padding-right: 2%;
position: relative;
width: 98%;
padding-top:25%;
}
i can't manage to simply put the a at the bottom...
i thought giving the A a height of 25% and a padding of 75% would work but it takes 75% of the UL and not 75% of the LI.
anyone has an idea how come?
thanks a lot
What exactly are you trying to achieve?
If I am assuming correctly you want an <li> that is 25% the height of its container and the <a> to sit at the bottom-right of the <li>
If that is the case you could use this css
updated RE comment In this case we could use a <span> inside the <a> to position the text and set the <a> to fill the <li>
ul {
height: 100%;
list-style: none outside none;
margin: 0;
padding: 0;
background-color: red;
}
li {
height: 25%;
text-align: right;
width: 100%;
}
a {
display: block;
position: relative;
height: 100%;
width: 100%;
background-color: blue;
}
span {
display: block;
position: absolute;
bottom: 0;
padding: 2%;
width: 96%;
background-color: green;
}
and the html
<ul>
<li><span>blabla</span></li>
</ul>
Fiddle here
Please note that for this to work you need to set html, body { height:100%; } or have a container with an explicit height set. i.e. ul { height: 200px; } or div.container { height: 200px; }
I would also recommend applying the styles via classes.
I have looked through a tonne of posts which have similar issues, but I just can't figure out my problem. Please could someone help, it is driving me insane.
The below code is for my Site Navigation. I would like the background to be an image rather than just a background colour. I would also like the background image to change on hover. As our Meerkat friends would say...Simples!....but not for me.
<div class="sub-menu" id="sub-menu">
<ul>
<li><a class="on" href="#" title=" You Are Here ">» Overview</a></li>
<li>Endorsements</li>
<li>The Detail</li>
<li>Funding</li>
<li>Apply Online</li>
<li><a class="end" href="graduates-terms.html" title=" Terms & Conditions ">Terms</a></li>
</ul>
</div>
div.sub-menu { position: relative; width: 920px; height: 40px; padding: 0; margin: 0; border-top: solid 1px #FFFFFF; }
#sub-menu ul { list-style: none; padding: 0; margin: 0; }
#sub-menu li { float: left; margin: 0; }
#sub-menu li a { padding: 0 30px; width: 93px; height: 40px; line-height: 36px; text-align: center; float: left; display: block; color: #FFFFFF; text-decoration: none; background-color: #555555; border-right: solid 1px #858585; }
#sub-menu li a:hover { color: #050505; background-color: #f3b607; }
#sub-menu li a.on { background-color: #555555; color: #FBAF5D; cursor: default; }
#sub-menu li a.end { width: 89px; }
#sub-menu li a.end-on { text-align: center; float: left; display: block; color: #FBAF5D; text-decoration: none; border-right: none; }
/* Hide from IE5-Mac \*/
#sub-menu li a{ float: none }
/* End hide */
#sub-menu { font-weight: normal; font-size: 14px; font-family: verdana; }
Thank you, I really appreciate your help.
In your question subject, you said you wish to put background image to "li" tag, but as per the code you have shown, you have given background to "a" tag.
You can put background image and color both together to any of the tag "li" and "a"
Eg.
background: #00ff00 url('smiley.gif') no-repeat fixed center;
For details refer:
http://www.w3schools.com/cssref/css3_pr_background.asp
If you want to put hover effect as well, implement it on anchor "a" tag. Because old browsers like ie6 doesn't have inbuilt support for li hover effect.
Use following pattern.
a{
background: url('img1') no-repeat fixed center;
}
a:hover{
background: url('img2') no-repeat fixed center;
}
Hope it helps you.