I am having a few problems with CSS. I have scripted a simple text box, that when it is clicked a div drops down, but it does not seem to be working. If anyone could help me, I'll be greatfull.
CSS:
input {
top:18px;
left:20px;
width:1230px;
padding:4px;
border:1px dashed #eeeeee;
font:16px arial;
font-weight:bold;
color:#d8d8d8;
}
input:focus {
height:200px;
}
div {
overflow:hidden;
padding:0;
margin:0;
height:0;
width:1230px;
border:1px dashed #eeeeee;
background-color:transparent;
transition:height.5s;
-moz-transition:height 0.5s;
-o-transition:height 0.5s;
-webkit-transition:height 0.5s;
}
body {
background-image:url('pic.bmp');
background-repeat:no-repeat;
}
I'm guessing that you need to change input:focus to input:focus div (if the div is in the input element), or something like input:focus + div (if the div is after the input), but without seeing your markup it's hard to say.
You have to use input:focus + div to select your division.
Here is the Pure CSS version of what you want : jsFiddle
The div has overflow: hidden property, which will cause any inner elements' heights to be ignored in the rendering of the div's height.
Related
I have the following problem and it drives me crazy:
Basicly I have a div-container with an background. This background should change when I hover it (see pichture). It is an png and instead of white it should turn red.
What I have done until now:
First: CSS sprite
Thought it will be the best solution but becuase the div changes it's size (responsive) and the icon does not have a fixed size it was not very clean: I had a small offset on hovering. Not sure why… mybe this can be fixed…
Second: 2 separate images
But this is not an option in this case because I need to work with inline styles. :hover ist not available as inline style.
Thrid: tried mask-box-image
Was a woderful solution… but Firefox does not support it.
Does anyone has another idea how to solve it?
Give This a Try
CSS
.icon-cont{
height:300px;
width:300px;
background-color: #ff0000;
text-align:center;
}
.icon-cont:hover{
background-color: transparent;
}
.icon-cont:hover .icon,
.icon-cont:hover .icon::before,
.icon-cont:hover .icon::after
{
border-color:#ff0000;
}
.icon{
height:0px;
border-bottom:2px solid #fff;
width:60%;
line-height:300px;
position: relative;
margin:auto;
top:50%;
}
.icon::before{
content:"";
position: absolute;
top:0;
bottom: 0;
left:-30px;
margin:auto;
height:20px;
width:20px;
border:2px solid #fff;
border-radius:50px;
}
.icon::after{
content:"";
position: absolute;
top:0;
bottom: 0;
right:-30px;
margin:auto;
height:20px;
width:20px;
border:2px solid #fff;
border-radius:50px;
}
HTML
<div class="icon-cont">
<div class="icon"></div>
</div>
Link for reference
hope this helps..
May be it will help
I posted an example following
.box {
padding: 20px;
display: inline-block;
background:tomato;
}
.box:hover {
background: transparent;
}
.box:hover span {
color: tomato;
}
.box span {
display: inline-block;
color: #fff;
}
<div class="box">
<span>a</span>
<span>----</span>
<span>b</span>
</div>
You can't change color of .png with css. I think you should make a font out of your icons in order to change their color with css later.
I haven't done that myself, but I know those fonts, like font-awesome can change color. There are some automatic generators in google to make your own font.
Try this.
I would like an easier / efficient way to edit the CSS of the <img class "search-button> when hovering over <button class="search-button"> instead of changing the search-button itself like I have done below.
The fact that the img is changing height and the button isn't is also bizarre to me. I would think changing the height attribute would change the height of the button and not the height of the img
Is it possible to do without using Javascipt and a pure CSS method? An explanation would be appreciated as I am self-studying and more information is far valuable than just a solution.
After fix and edit - My Question : Could it be simplier?
HTML
<button type="submit" class="search-button">
<img class="search-button-img" src="http://teacherweb.co.za/wp-content/uploads/2014/10/search.png" alt="">
</button>
CSS
search-button {
padding:0px;
margin:0px;
width:145px;
height:145px;
border-radius: 5px;
background-color:transparent;
overflow:hidden;
}
.search-button-img {
height:80%;
}
.search-button:hover .search-button-img { /*Fixed hover space */
margin-top:-1px;
margin-left:-1px;
height:100%;
}
Original : http://jsfiddle.net/x8xwxg3z/
Updated (Working Well) : http://jsfiddle.net/x8xwxg3z/5/
*random magnifier image for example
Use Tramsform scale
.search-button {
padding:0px;
margin:0px;
width:145px;
height:145px;
border-radius: 5px;
background-color:transparent;
overflow:hidden;
}
.search-button-img {
width: 80%;
transition: transform .3s ease
}
.search-button-img:hover {
transform: scale(1.2,1.2)
}
<button type="submit" class="search-button"><img class="search-button-img" src="http://teacherweb.co.za/wp-content/uploads/2014/10/search.png" alt=""></button>
Or apply the :hover on the parent
.search-button {
padding:0px;
margin:0px;
width:145px;
height:145px;
border-radius: 5px;
background-color:transparent;
overflow:hidden;
}
.search-button-img {
width: 80%;
transition: transform .3s ease
}
.search-button:hover .search-button-img{
transform: scale(1.2,1.2)
}
<button type="submit" class="search-button">
<img class="search-button-img" src="http://teacherweb.co.za/wp-content/uploads/2014/10/search.png" alt="">
</button>
your problem is from the space between :hover and your class so remove the space
.search-button:hover {
margin-top:-1px;
margin-left:-1px;
height:100%;
}
So if I understood you right, you want only the image to become bigger, but not the button?
You could try the following:
.search-button:hover .search-button-img {
height: 90%;
}
instead of:
.search-button :hover {
margin-top:-1px;
margin-left:-1px;
height:100%;
}
This won't work, because you're using a space between the class/selector and the pseudo class. In CSS you write selector:pseudoclass as soon as you use a space, CSS interprets that as a child. So .foo .bar would adress the div with the class bar in <div class="foo"><div class="bar">Baz</div></div>. CSS Selectors can be ID's, Classes or simply selectors. Classes are adressed by a . in front and IDs by a #. I hope this helps.
With CSS you are able to adress a child element like the image. And it's Javascript, what you meant not Java ;)
try this : http://jsfiddle.net/x8xwxg3z/3/
and css code is here:
.search-button {
padding:0px;
margin:0px;
width:105px;
height:105px;
border-radius: 5px;
background-color:transparent;
overflow:hidden;
position:relative; transition:all 0.5s ease-in 0s;
}
.search-button-img {
height:50px;
position:absolute; top:10px; left:20px
}
.search-button:hover {
margin-top:-1px;
margin-left:-1px;
height:500px;
width:80%;
}
I think that you want is to make bigger the button without making bigger the image. The image is getting bigger because it has a % size (it depends of his parent, in this case, the button).
Anyway:
.search-button:hover{} refers to: when you hover over the button do this to the button.
.search-button:hover .search-button-img{} refers to: when you hover over the button do this to the image.
Then you only need the change, that you want to do.
Yeah, my titles suck :p
So I have a container, which contains <div>s. Dotted in this container are <span>s that mark off labels. These <span>s have position:absolute to make them not interfere with the layout of the <div>s.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
position:absolute;
background:#ccf;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><span>Marker</span><div></div><span>Marker</span><div></div><div></div></div>
In Internet Explorer, this works fine.
In Chrome, it does not. The label falls out of the box.
I understand why this happens - it's because the <span> has zero width and height within the flow of the document, allowing it to squeeze into the zero remaining space.
But I'm wondering if there's any other way to achieve the effect I want here?
EDIT: Desired effect, Chrome's bad effect
don't really quite get where you want them, something like this ? added display block to the span.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
display:block;
position:absolute;
background:#ccf;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><div></div><span>Marker</span><div></div><div></div></div>
strong text
Borrowing ideas from #Billy and with help from #JacobGray in the comments, the following solution applies display:block to <span>s, but only if the immediately follow an Nth <div>, N being the number of columns.
It works, but I'm not too happy with it being dependent on a constant number of columns - not great for responsive design ;) Better solutions are of course welcome.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
position:absolute;
background:#ccf;
}
#container>div:nth-of-type(3n)+span {
display:block;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><span>Marker</span><div></div><span>Marker</span><div></div><div></div></div>
Adding display:block to the span is what I'd suggest, or putting a marker span inside every div you want to label.
If I understand well, try this. Put tags <span> into each <div> that you want have a "label". Add position:relative to all <div> and set the properties top and left for the span.
Ps. I've modified your code below, but you should use classes
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
position: relative;/* added */
}
#container>div>span {/* modified */
position:absolute;
background:#ccf;
top:-5px;/* added */
left:-5px;/* added */
}
<div id="container"><div><span>Marker</span></div><div></div><div><span>Marker</span></div><div><span>Marker</span></div><div></div></div>
I have a error message to be displayed
i can center it using text-align center if there was no background. but now its clearly visible that it occupies the whole width of the container it being a <p>.
so i gave width and margin:0 auto;
but i cant give its class to every other error message because width changes.
so is there any way to center it without giving width.
here is what i currently have JSFIDDLE
HTML:
<p class="error"><b>Error:</b> Dont select corners, select edges!</p>
CSS:
.error{
padding:15px;
border:1px solid #ebccd1;
border-radius:4px;
background-color: #f2dede;
margin:0 auto;
font-family:consolas;
font-size:17px;
color:#a94442;
width:370px;
}
Change the display of the p element to inline-block and then add text-align:center to the parent element to center it.
UPDATED EXAMPLE HERE
.parent {
text-align:center;
}
.error {
padding:15px;
border:1px solid #ebccd1;
border-radius:4px;
background-color: #f2dede;
font-family:consolas;
font-size:17px;
color:#a94442;
display:inline-block;
}
Alternatively, you could change the display of the p element to table as King King points out.
It's worth noting that this approach wouldn't work in IE7 though.
You can use display:table for the p:
.error {
...
display:table;
}
Demo.
Is there any way to set a default width for a group of divs, but then change each width regardless of order in just CSS? Example JSFiddle is at http://jsfiddle.net/RfHSA/.
I'm attempting to have each div set to width:20%, but then upon the mouse hovering one of the inner divs, the specific div hovered over should be set to width:72% and the others set to width:7% (including ones that occur prior to it in the HTML structure). Is this possible with just CSS, or is Javascipt/jQuery required?
Edit: Example of what I'm trying to achieve is here: http://www.kriesi.at/themes/newscast/
I'd like to recommend an easy solution to your need: http://jsfiddle.net/linmic/qcnmu/1/
We simply apply display: table to the "listwrapper" and display: table-cell to the "outerbox", then everything works perfectly.
Cheers
You were 99% there: http://jsfiddle.net/RfHSA/2/
.featuredwrapper {
width:100%;
height:350px;
margin:auto;
background-color:rgba(0,0,0,0.5);
padding-top:12px;
position:relative;
}
.listwrapper {
width:95%;
max-width:1100px;
height:325px;
margin:auto;
position:relative;
}
.listwrapper:hover .outerbox {
width:7%;
}
.outerbox {
width:20%;
height:100%;
display:inline-block;
background-color:#e8e8e8;
margin-left:-4px;
box-shadow:-5px 0px 5px rgba(51,51,51,0.85);
-webkit-transition: width .3s ease-out;
}
.listwrapper:hover .outerbox:hover {
width:72%;
}
.outerbox:first-child{
margin-left:0px;
}
.hoveractive {
position:absolute;
width:95%;
height:325px;
z-index:1000;
padding-top:12px;
}
I minimally fixed them all errantly closing, I think the remaining problems related to decimal widths associated with % widths...
http://jsfiddle.net/RfHSA/15/
Here's a working version of your script. You definitely need some javascript manipulation here to make it work. I tried to use as little as possible and as you can see from the results, it's a little shaky, but hopefully it gets you on the right track.
EDIT: Oh well, I tried, but the other guy's solution is better =P
Updated to prevent premature collapsing
Tweaking your CSS gave this solution (see fiddle). It requires the padding-top to move from the .listwrapper to the .featuredwrapper to prevent premature collapse from top entry:
Tweaked CSS
.outerbox {
width:20%;
height:100%;
display:inline-block;
background-color:#e8e8e8;
margin-left:-4px;
box-shadow:-5px 0px 5px rgba(51,51,51,0.85);
-webkit-transition: width .3s ease-out;
}
/*prevents premature collapse on right side entry*/
.outerbox:last-of-type:after {
content: '';
width: 2px;
height: 100%;
position: absolute;
top: 0;
right: -2px;
}
.listwrapper:hover .outerbox {
width: 7%;
}
.listwrapper .outerbox:hover {
width:72%;
}