Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I see a lot of people have asked about this problem, but none of what i've found has helped. I have a dropdown that displays on hover of list link, and first link in drop down hovers no problem. But, when I hover on the second link the drop down disappears. I don't understand what I'm doing wrong.
enter code herehttp://jsfiddle.net/yoq0wyds/
Remove the hard width you have applied to your ul element.
#cssmenu > ul li.has-sub ul {
text-align: left;
display: none;
/* width: 24px; */
position: absolute;
margin: 0;
padding: 0;
list-style-type: none;
background: #ffffff;
border: 1px solid #ece6e8;
border-bottom: 3px solid #d9ced2;
border-top: 0 none;
}
Function example
width is not 24px. hover works fine, but only in the first 24px. remove the width setting and this works fine.
...
#cssmenu > ul li.has-sub ul {
text-align: left;
display: none;
width: 24px;
...
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I love how the textarea can be resized by placing the mouse on the slanted lines in the lower right hand corner and dragging the mouse. I am wanting to add css styles to text and this cannot be achieved with a textarea. Does anyone know a way to emulate the textarea resizing using another DOM element? This way, I can add my CSS styles to the text and whatever else i place inside. Thanks in advance.
I think you will find that you can apply css to a text-area just like you can with any other element. Theres only two elements which are funny with css, thats file uploader and select.
For example, see http://codepen.io/cshaw/pen/YyVxRE for an example of a text-area styled with basic css.
<style>
textarea {
border: 1px solid black;
background: green;
color: white;
padding: 10px;
width: 500px;
height: 300px;
}
</style>
<textarea name="youtextarea">
SOME CONTENT
</textarea>
Or if it must me a re sizable div see http://codepen.io/cshaw/pen/zvwdbB
<style>
div {
resize: both;
border: 1px solid #222;
width: 500px;
height: 200px;
overflow: auto;
background: #222;
color: #999;
padding: 10px;
}
</style>
<div>Resizable Div</div>
Or pop over to https://www.chris-shaw.com for more.
did you try the css resize property ??
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
<div>Let the user resize both the height and the width of this div element.</div>
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have 3 rectangles that I've created with CSS. I want them to be clickable and link them to a file called "index.html". I've been searching over the web but could not find a way to do it. Is there also a way where hovering your mouse over the rectangle would just have the index.html file pop up but not open in a completely new window? Here is a snippet of what I have so far:
.rec
{
height: 100px;
width: 125px;
}
#d1
{
background : lightgreen;
border: 2px solid black;
display: inline-block;
left: 0%;
}
#r1
{
background : red;
border: 2px solid black;
display: inline-block;
left: 10%; position: relative;
}
#r3
{
background : white;
border: 2px solid black;
display: inline-block;
left: 20%; position: relative;
}
You should see JavaScript and jQuery tutorials. It's what, mostly, makes web pages interactive. Although in here, the best solution is clearly to use
<a href="index.html">
it would be good for you to learn them, and their incredible power. Check this fiddle here: http://jsfiddle.net/qjntjyyr/
As you can see, it's quite simple. In the next fiddle, I'm using an event for when the mouse goes over the squares.
http://jsfiddle.net/qjntjyyr/1/
Have fun with it, you can manipulate almost everything you want.
The clickable rectangles:
Index
Index
Index
As for the little box that appears when you hover them, you could use a title="" in the anchor tag, but that has the default styling the OS gives it. To customize one yourself you'd need JavaScript.
I found an interesting link to learn for your problem:css-trick
But the first answer is a good one to use.
I was looking for jQ plug-in which gives same result as StackOverflow tags. Found one using Tokeninput. The problem is, it uses ul, li technique and when I use it inside form with another real textboxes, it looks totally different. For example take a look at this picture.
The first is - Tokeninput. And second is standard textbox. What I want to get is exactly same look and feel of textbox or another jQ plug-in that does same thing as Tokeninput but for textboxes (not ul li based).
Here is CSS for horizontal ul that plug-in authors tried to give same look and feel as real textbox.
ul.token-input-list {
overflow: hidden;
height: auto !important;
height: 1%;
width: 400px;
border: 1px solid rgb(240,240,240);
cursor: text;
font-size: 12px;
font-family: Verdana;
min-height: 1px;
z-index: 999;
margin: 0;
padding: 0;
background-color: #fff;
list-style-type: none;
clear: left;
}
Here is something similar, i wrote it a few month ago
It enhances a normal textarea and splits the initial textarea value on the "," character to create the tags.
It may not feet your needs 100%, but its a good starting point and can be easily modified.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Is there a way to place padding or a transparent border around the "cells" when one does display:table-cell? I would like the background to show up through this space, so I can't just set the border to white, and border-color:transparent doesn't work for me for some reason. I've checked w3schools and similar sites but I haven't been able to find this particular trait.
From user Praveen Vijayan: http://jsfiddle.net/geymU/
Use border-spacing: 10px on the parent container.
In your case
#nav ul{
display:table;
width:100%;
border-spacing: 10px;
}
You can also give top/bottom and left/right separately like border-spacing: 10px 20px;
The space between cells is controlled by the border-spacing and border-collapse properties in the table.
#nav ul {
display: table;
width: 100%;
background: yellow;
border-collapse: separate;
border-spacing: 12px 6px;
}
I'm a web designer and new in stackoverflow, I have this issue with positioning drop-down menu links (more specifically aligning them to the left of the menu) because there is a space between the menu left border and the beginning of the links (check the live demo link below). I've tried text-align, float, margin, padding, and position properties but none of them seem to solve this. I think that the menu css might be conflicting with other css code of the page, but I just can't seem to find it.
You can check the source code from a live demo of the page here.
Ok, based on how your code is structured, this is how I would modify your css to do what I think it is you're trying to do - I'll ** the css changes I've made:
.dropdown dd {
position: absolute;
overflow: hidden;
width: 200px;
display: none;
background: #f8f8f8;
z-index: 200;
opacity: 0;
**border-right: 1px solid #004e8e;**
}
.dropdown ul {
**overflow: hidden;**
width: 204px;
border: 1px solid #004e8e;
list-style: none;
}
.dropdown li {
**display: block;**
**position: relative;**
**left: -40px;**
}
This should get rid of the extra space on the left as well as put that blue border around the drop-down that I believe you were also trying to create.