I have created this page here Page
and I want to make it editable in such a way that I want pencil icons in front of each heading and in front of each paragraph and image respectively and once I click on the edit icon the text comes in the textbox field. How can i do this? What is the best possible solution. I just need a little help with bringing the text in textbox field on pencil icon click. Should i be using any built in property of css if there is any? or should I use any package?
If I'm understanding your intent correctly, you just want to do something like this with a quick illusion of editable labels?
.special-edit {
position: relative;
}
.special-edit input {
font-family: 'FontAwesome';
font-size: 2rem;
padding: .5rem 0 .5rem 2.5rem;
width: 100%;
border: none;
border-bottom: transparent 3px solid;
outline: 0;
transition: .35s ease;
}
.special-edit input:hover, .special-edit input:focus {
background-color: #f1f1f1;
border-bottom: #ddd 3px dotted;
}
.special-edit:after {
font-family: 'FontAwesome';
content: '\f044';
position: absolute;
top: 1rem;
left: .5rem;
color: gray;
font-size: 1.5rem;
}
body {
margin: 3rem 5rem;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="special-edit">
<input type="text" placeholder="Hey this needs edited" required/>
</div>
...and a CODEPEN to tinker. Cheers!
Many WYSIWYG editors use a HTML property called "editable" to turn divs into editable objects
https://www.w3schools.com/TAGS/att_global_contenteditable.asp
That said, what you want to achieve is a homoungus task, you´d be better using some js framework to create text editors, and tinyMCE is the industry standard.
Related
I have a list of links on the left hand side of the page.
I would like to improve this list so that when I put the cursor over an item in this list, some sort of label appears which gives a brief description about what the link is pointing to. The html in question is generated automatically using Antora from AsciiDoc sources and, as far as I can see, all I am able to do is to add a css class or id for the different parts of the link text which are in bold. I cannot add any Javascript or nested css classes.
So here is my attempt:
<!DOCTYPE html>
<html>
<head>
<style>
#Bob.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
#Bob.tooltiptext {
font-size: 5px;
}
#Bob.tooltiptext:hover {
visibility: visible;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
font-size: 10px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
</style>
<title>Page Title</title>
</head>
<body>
<a href="http://www.bob.com" class="searchEngineLink" >
<strong id="Bob" class="tooltip">Bob</strong>
<strong id="Bob" class="tooltiptext">What a great guy!</strong>
</a>
</body>
</html>
This does not achieve what I want obviously. All it does is have one bit of text in a small font that, when I roll over it, increases into a larger font in a kind of box.
If anyone can think of some way to have a label pop up over some link in a page, even using some completely different approach that I have not thought of, I would be grateful. Note that I will have about 200 links so if I can have a solution that does not require me to have a set of css properties for every different id for each link, that would be preferable.
If any of the this question is not clear, please feel free to ask me.
Simple tooltip can be achieved by usi title attribute: The information is shown as a tooltip text when the mouse moves over the element.
<a href="http://www.bob.com" class="searchEngineLink" title="What a great guy!">
<strong id="Bob" class="tooltip">Bob</strong>
</a>
You can also make your own custom tooltip, by using content property to insert generated content. (description of each link).
.searchEngineLink {
display: inline;
position: relative;
}
.searchEngineLink:hover:after {
background: #eee;
border-radius: 5px;
bottom: -34px;
color: black;
content: attr(gloss);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: auto;
white-space:nowrap;
}
.searchEngineLink:hover:before {
border: solid;
border-color: #ddd transparent;
border-width: 0 6px 6px 6px;
bottom: -4px;
content: "";
left: 40%;
position: absolute;
z-index: 99;
}
<a class="searchEngineLink" gloss="What a great guy" href="http://www.bob.com">Bob</a>
<a class="searchEngineLink" gloss="What a smart guy" href="http://www.bob.com">Bob2</a>
<br>
<a class="searchEngineLink" gloss="What a handsome guy" href="http://www.bob.com">Bob3</a>
currently learning how to develop HTML/CSS websites and I'm struggling to find resources that could help me dev a practice project that I'm doing.
Could anyone teach me how to dev something like this through CSS.
Button Samle
A button with circular icons/image for mobile. I need to make the image/icon circular and fit the button but when I just use this, the whole button resizes to the image size.
<button class="btn"><img src=""></img> Home</button>
And hopefully someone could also help with with the CSS in order to make it something like this on mobile. A menu of buttons that 2 of the buttons take up the whole size of the screen.
Button List
For learning CSS and HTML i don't suggest you to start creating elements like this button because your button is not useful in websites, like its not flat or material its something basic and after days of learning css you can make it.
anyway i suggest you to do front-end of this page its much useful for you!
and almost every basic ui developer uses this page.
I love teaching code's so if you're really interested i can help you in every time you stuck on this project. :)
btw i created your button take a look hope you like it. :)
.btn {
padding: 13px 0;
background-color: #fff;
border:1px solid #707070;
width:100%;
display:inline-block;
max-width: 229px;
position: relative;
cursor:pointer;
}
.txt {
font-size: 23px;
color: #707070;
font-weight: 500;
margin-right: 40px;
}
.btn:focus {
outline: 0;
}
.icon {
width: 43px;
height: 43px;
background-color: #fffbc6;
border-radius: 50%;
border: 1px solid #707070;
position: absolute;
top:4px;
left: 9px;
}
<button class="btn"><div class="icon"></div><span class="txt">Button</span></button>
Check this neat button, used font-awesome icons, and bootstrap themed btns
.btn {
display: inline-block;
font-weight: 400;
color: #000;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.875rem 1rem;
font-size: 0.875rem;
line-height: 1;
border-radius: 0.1875rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-primary {
color: #fff;
background-color: #248afd;
border-color: #248afd;
}
.btn-primary:hover {
color: #fff;
background-color: #0276f8;
border-color: #0270ec;
}
.btn i {
padding: 0 5px 0 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button type="button" class="btn btn-primary btn-icon-text">
<i class="fa fa-upload "></i>
Upload
</button>
You can look w3schools tutorials.
For HTML : https://www.w3schools.com/html/
For CSS : https://www.w3schools.com/css/
I highly recommend you look Bootstrap 4 to build responsive pages.
For Bootstrap4 : https://www.w3schools.com/bootstrap4/
button{
display:table;
width:100px;
text-align:left;
padding:2px;
}
button > img {
display:inline-block;
vertical-align: middle;
padding-right:10px;
}
<button><img src="https://davidwalsh.name/demo/css-circles.png" width="20px" height= "20px">Home</button>
w3schools is a great resource for the basics of css and html
basically you change the style of the button :on hover
The hover style sets the image for the button to be different.
https://www.w3schools.com/css/css3_buttons.asp
I have a problem with styling a textarea, i use bootstrap 4 css
i was trying to styling by my self but if i using a padding or margin it's make the textarea height to big
.comment-box {
padding: 0.8rem 1rem;
border-radius: 30px;
}
<textarea class="form-control comment-box" rows="1"></textarea>
i want this textarea look like input field with button in inside just like this image
textarea input
Here
is the complete explanation about overriding bootstrap style. I am sure you can follow that rule and solve that issue.
Edit:
Also you don't need to implement his first and second step. You can follow only 3 and create new style that override the bootstrap style
https://www.w3schools.com/howto/howto_css_contact_form.asp">here is a link to your answer
that should solve your issue, check out the css they use and play with it.
input[type="text"],
select,
textarea {
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 10px;
}
input[type="submit"] {
border: none;
background: #4aaaa5;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
color: #ffffff;
font-size: 16px;
}
This is my first time posting here, but I have found this site an invaluable repository for many years.
I have recently been adding tooltips to a website form. Initially, my concern was to make these work when a mouse-user hovers over the tooltip icon (in my case simply '(?)'). I was using the following CSS:
.tooltip
{
border-bottom: 1px dotted #000000;
color: #000000;
outline: none;
cursor: help;
text-decoration: none;
position: relative;
}
.tooltip span
{
margin-left: -999em;
position: absolute;
}
.tooltip:hover span, .tooltip:focus span
{
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000000;
font-family: Arial, Helvetica, sans-serif !important;
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: 0;
width: 250px;
background-color: #b4e0e0;
font-size: 1em;
}
.ttipcontent
{
padding: 0.8em 1em;
}
With the following HTML:
<a class="tooltip" href="#">(?)<span class="ttipcontent">This is the tooltip content which will be displayed</span></a>
This worked well enough for the intended use, creating on-hover tooltips for use with a mouse/ pointer device. However, to use this with a touchscreen device was a nightmare. Every time you clicked the (?) icon, you were of course taken to the top of the page.
So I replaced the HTML with the following (keeping the same CSS):
<span class="tooltip">(?)<span class="ttipcontent">This is the tooltip content which will be displayed</span></span>
This now works well with both mouse/ pointer devices and touchscreen devices. However, I have inadvertently removed the ability of a user to keyboard-navigate to the tooltips by 'tabbing' through the links. This poses an accessibility problem.
My question is, is there a way to combine all three elements of functionality: the ability to display tooltips on hover, on touch, and by keyboard navigation?
Thanks in advance for any help!
You need to realize that tabbing is mostly good for when you are filling out forms. When I'm filling out a form, I don't expect to land on a button with a question mark.
This element does not (necessarily) need to be focusable. However, you do need to notify the user that it exists. For example:
<label for="mytextbox">First name <span class="tooltip">(?)<span class="ttipcontent">Fill in your real first name</span></span></label>
<input id="mytextbox" />
This way, when a user passes over the text field, his screen reader announces "First name (?)", which alerts him to explore the question mark, and press enter on it (screen readers announce that an item is "clickable" if it has an onclick event).
I would advise you to stop presenting this item using just CSS and throw in some Javascript as well. For example, show and hide the extra text using Javascript by dynamically setting the contents of an element with the aria-live attribute set to polite (which makes the screen reader read out the help text presented), or just hiding and showing the extra text (which should just be beneath the line that has the question mark in it) when a click happens on the question mark.
Please have a look at Making clickables accessible if you do decide to take the (recommended) clickable approach I presented in the previous paragraph.
With many thanks to Parham Doustdar, I now appear to have something which is fully functional across devices and with a screen reader. I am including what I have ended up with below in case it is useful to others.
The 'hover' functionality has now been removed, and the user must now click on/ touch/ tab to the tooltip icon to show/ hide the tooltip text.
CSS:
.ttipcontainer
{
position: relative;
}
.tooltip
{
border-bottom: 1px dotted #000000;
color: #000000 !important;
outline: none;
cursor: help;
text-decoration: none !important;
position: relative;
}
.tooltip:focus
{
border: 1px dotted #000000;
}
.ttiptext
{
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000000;
font-family: Arial, Helvetica, sans-serif !important;
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: -999;
width: 250px;
background-color: #b4e0e0;
font-size: 1em;
}
HTML:
<span class="ttipcontainer">
<span class="tooltip" title="tool tip" role="button" tabindex="0" onclick="show('tttext1')">
(?)
</span>
<span class="ttiptext" id="tttext1" style="display:none" aria-live="polite">
This is the tooltip text
</span>
</span>
JavaScript (Sourced from: http://www.codeproject.com/Articles/15237/Hide-and-Show-Any-Element):
function show(ele) {
var srcElement = document.getElementById(ele);
if(srcElement != null) {
if(srcElement.style.display == "block") {
srcElement.style.display= 'none';
}
else {
srcElement.style.display='block';
}
return false;
}
}
If you want to have the keyboard navigation you will need one of the following elements that support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.
The button would be your best shot here.
I am trying to create a box that has a 'highlight' down the sides of it, and at the top.
The CSS for the box was pretty simple, however, now that I introduced this 'highlight' to the design, it has added another level of complexity to the CSS...
I have tried a lot of things, not sure if they will help but here is my most recent:
/* Define the Main Navigation Drop Downs */
#mn_navigation .dd {position:relative;width:226px;padding:29px 0 0;background:transparent url("//beta.example.co.uk/_images/_global/dd_handle.png") no-repeat;z-index:1000;}
#mn_navigation .dd nav {padding:30px 0;background:#3E5032 url("//beta.example.co.uk/_images/_global/dd_bg.png");border-radius:3px;}
#mn_navigation .dd nav a {font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#fff !important;height:25px;line-height:25px;}
Please note I have posted the above to show that I have actually tried to sort this myself. The above code will probably not even help as a starting point as a restructure of the HTML may be necessary!
Here is the current HTML (probably needs to be restructured):
<div id="dd_foo" class="dd">
<nav>
LINK
</nav>
</div>
Here is a possible restructure (something like):
<div id="dd_foo" class="dd">
<div class="handle"><!-- Dropdown Handle --></div>
<nav>
LINK
</nav>
</div>
This is what I need the box to look like (notice the faint white border at the top and half way down the sides):
I have also included the box split into its separate elements (handle and background)
I think I can see how this can be done with clever overlaps and nested divs, but ideally I don't really want to resort to this... Can anybody suggest an alternative solution?
Simplest approach
You can try achieving this using a simple box shadow:
.plaque {
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);
/*...*/
}
An Example
Here's an example using 1 class and a div on jsbin.
Copy paste code
This code is only for modern browsers; it might cause ie < 9 and other non supporting browsers to explode.
.plaque:after {
top: -9px;
content: " ";
height: 11px;
width: 30px;
position: absolute;
pointer-events: none;
left: 50%;
margin-left: -15px;
display: block;
background-repeat: no-repeat;
}
.plaque {
width: 250px;
height: 100px;
display: block;
border: 0;
outline: 0;
padding: 12px 16px;
line-height: 1.4;
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);
border-radius: 5px;
border: 1px solid transparent;
font-family: sans-serif;
color: white;
font-size: 1.2em;
text-overflow: ellipsis;
position: relative;
top: 6px;
}
/* Use whatever background you want */
.plaque { background-color: green; }
.plaque:after { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcJJREFUeNqMUktPU0EU/mZuL6Up1RCjC4oRau4t4FJ84EKID/ZAjI9/6Mo/4MadG5dqJGjBatpyuY+2UNreeXDOBE0MNHGSSWZyzvnOd77zicdbd+EVJKyxGPSHmC4XIYSAMQYCoJhn81wJKSnHWhR8D1oZl69yhamiD8GBSefpywc2XKzjy7fP+PDuk5iUJxnksvvkxX1buxkgThOEt5exvr1qJ+XKy5CfvXpow9oSsn6GdqeF40EPK+GKY/ZfTNa3Vm1AI6TdFAeNfQgp0CKgrJehVg1AGl5gJLTWfxGfv15zI3BBnB5CehJGG5Cw8EjY6tw8KjNXsfv9K96//SguMOERgoU6+ic9NH8eQClNGzDQBMLb4FU1fzdxFB+hev0WNnbu2X802TxnkGQJoriNymwZHrFgAbhdidbOK+YTxR0ojLEc3sHmm0dOI8Gq10n9OI1xGLVcMvuGGYyHOYqlKcfK9wvOF3/i12ZvoFK+gsavPUgGSLsJkm4En4xDTqMi45iUZqZdd34zJY7L8was2enoGMHCEmS3l6LxYx9qrJ2I7FTNelBxPlKuYDgYu9nzUe6cenoygqF/J2o7AmcCDACumSjtgWp8aAAAAABJRU5ErkJggg==); }