I'm currently working on a site that requires slideshows, and I'm using the bxSlider script. The way it works right now is the code finds a span id="next_1" and span id="prev_1' and inserts a <a href=''>+</a>. I've got it setup so the span elements are white boxes, and when hovered will go black. The only clickable element is the + inside the span. I'm wondering how to resize the <a> element to fit the entire span element.
Here's my code.
In the CSS you can select the <a> tag and add display: block and padding: 8px and remove those properties from the .button class. Hope it helps you. Thanks.
Related
This is what I tried.
CSS:
div#Layer3:hover div#Layer3copy
{
display: inline-block;
}
HTML:
<div id="Layer3"><img src="images/Layer3.png">
<div id="Layer3copy"><img src="images/Layer3copy.png"></div>
</div>
I want this div to be hidden and when hover another div it appear, however, its working OK,
But moved a little bit from it actual place,
is there a solution for it?
Alright, first you need to know display,position and pseudo state properties of CSS
in your snippet #Layer3 is wrapping #Layer3copy so we can invoke it on hover state by using direct child selector i.e
#Layer3:hover > #Layer3copy{
/*Do your things here*/
}
working example: https://jsfiddle.net/ishusupah/eupfr101/
In this example as you wanted i am using #Layer3copy display:none and on hover state i am making it display:block.
you can display and position however you want.
You are not hiding/showing any div. What you are actually doing in the code above is when Layer3 div is hovered on, you are changing Layer3copy div style to be inline block - and that's why it is moving. A div is by default a block element - which means it is taking up a full width of a row. When you change it to an inline-block you are "telling" the div to align next to another element if there is enough width in a row, and not take the full width - that's why the div is moving next to the parent div.
You also need to modify your selectors to achieve your requirement.
To actually achieve what you want (hiding and displaying back the Layer3copy without it being moving), use this CSS code:
#Layer3 #Layer3copy{
display: none;
}
#Layer3:hover #Layer3copy{
border: 3px solid red;
display: block;
}
The first selector is giving the default definition when layer3 - the container div is not hovered - in which the child Layer3copy div is not displayed (display:none).
The second selector is saying when layer3 is hovered apply styling to Layer3copy and turn it to display:block - which is the default display for divs (they are block elements) - this it is getting displayed and staying it its initial position without "movement".
Here is a working example with the above code.
I've additionally added a thin red border to the inner div, so you'll see what i mean in a block element - which is taking the entire width of a row.
try using this
#Layer3:hover > #Layer3Copy {
position: absolute;
display: inline-block;
/** Postion of your div **/
}
Try to adjust the position until it is placed wherever you want it to be in.
I think you want to be like a tooltip or something
I'm writing the following HTML markup:
<span> Some Text
<div id="ch">татата</div>
</span>
and styles:
span{
border: 1px solid black;
text-align:center;
width: 300px;
height: 300px;
background: aqua;
}
#ch{
width:100px;
height:100px
background: yellow;
}
jsFiddle
Why is the height property not applied to a div element which inside the span, but width is applied?
Why is the right border of my span is missing?
Your markup is incorrect ( plus missing semi-colon as quoted by Steini, mentioning this for sake of completeness of answer )
Answer 1 : span is an inline element, so having a div inside span is a bad idea, also, it would be better, if you nest span inside span and give inner span display:block property!
Answer 2 : add display:block to span to change the default behavior
working fiddle with correct markup
fiddle with the layout you wanted
span display:inline you must set it display:inline-block
but this not standard you must use div span always use for text
your fiddle demo
Because you are missing a semicolon after height: 100px <- this ; is missing in you css file
span is an inline element so it will not take notice of your height and width. For this you need to give it either:
display:block; or display: inline-block
First answer: You forgot the semi-colon after height style, that's why it is not rendered.
Second answer: If you look closely, the border appears after the div. This is because you
are inserting block level element inside inline element. So, block level element takes it to the next line and then it takes the whole line. On the very next line you can see the right border for the span.
It is bad practice to put block level element inside inline element. In fact, I do not see any practical use of this kind of structure. Please, correct it if you are learning.
By default div's is a block element and span is an inline element. Block elements always flow vertically and inline elements always flow next to each other from top left to the bottom right depends on screen width.
We can use inline elements under the block element, not vice versa. If we override we expect to see some issues like this on responsive layout.
span is an inline-element, while div ist not. you should consider swapping them..
Is there a way to limit the width of an "a" element? I'm using "a" elements as toggle buttons, but the blank space to the right of the "a" element remains of the pointer cursor style, which I do not want. Here's some code:
HTML:
<a class="ChartLink" id="CapstoneLink"> Global Leadership </a>
CSS:
.ChartLink, a {
padding: 10px;
cursor: pointer; }
All of the white space to the left of the text remains of the pointer cursor. How do I limit the length of the text to just the text?
As you commented, I guess what you need is margin and not padding, because padding is counted inside the element whereas margin is counted outside. Learn CSS Box Model and you will get the concept.
Demo
.ChartLink, a {
margin: 10px;
cursor: pointer;
}
Well, your question explains something different, and your provided markup is different so I assume that you are nesting div element inside a as if it's just a than the white space won't be there as it's an inline element by default.. And since div is a block level element by default you need to make it inline.
Demo
a.ChartLink div {
display: inline;
}
What you are doing
What you want to
Though we are making div element inline here, it would be more preferable to use span instead.
A very simple task in hand.. but my browser is laughing on my face with my futile attempts.
How do I style a div class just around the text
So I am using jinja on backend and my html looks like this
<div class="content">
<pre> {{contents}}</pre>
</div>
and my css is
div.content {
background-color: #add8e6;
}
But what is happening is.. if "content" is half the line.. this styling is running across the whole horizontal line..
I just want to gracefully wrap the color across the text rather than whole horizontal page.
When I try
display: inline;
all the background color vanishes.
Use display:inline-block
div.content {
background-color: #add8e6;
display:inline-block
}
DEMO
Difference between inline and inline-block
inline-block - This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
inline - This value causes an element to generate one or more inline boxes.
Try this:
div.content * {
background-color: #add8e6;
}
This will apply the style to all the elements within the div block.
I have a div with a classname "test". The class "test" has a cursor pointer assigns to it. The class also has a fixed width of 200px. Inside the div is text of length that is shorter than the width of the div. I don't want the point to appear when the mouse is placed in the blank part of the div.
Is there a way that I can assign the css pointer to the text inside the div without wrapping the text inside another <span> tag. I just don't want to go back and add the span tag to every single div and rewrite the javascript.
I am thinking of something like this pseudo css code
.test.text {
cursor:pointer;
}
CSS doesn't work this way. As biziclop says in the comments, text nodes can't be selected with CSS. You'll either have to wrap your text in a <span> and use
.test span {
cursor: pointer;
}
With
<div class="test">
<span>Text</span>
</div>
Or set .test to display: inline, but that won't let you give it a width, which is not the behaviour you want. <span>s are fine, in this case.
You could try using the :before or :after pseudo-elements.
I was playing with this solution, for 1-line divs:
http://jsfiddle.net/yAfKw/
Multi-line divs:
http://jsfiddle.net/yAfKw/1/
Works in Firefox, does not work in Safari.