I below fiddle, how to to replace "customStyle" CSS with "roundCorner" CSS.
"roundCorner" CSS is a curve DIV, also Is there any chance to keep this "roundCorner" DIV partially inside the dialog and partially outside the dialog?
JS Fiddle Link
<div class="roundCorner" style="display:none;">
Dialog Title
</div>
Related
I have a on/off jquery switch on this page http://www.fospower.com/test that basically overlays the entire page in a dark color. However I need some help in trying to make the div below appear above the overlay. Any help is welcome.
I've tried changing z-index and overflow content but that doesnt seem to help any.
<div id="light">
<div id="itoggle">
<p style="text-align:center">Turn Off The Lights</p>
<label class="itoggle iToff" for="lightswitch"><span></span></label>
<input id="lightswitch" type="checkbox" class="iT_checkbox">
</div>
</div>
If you are adding the overlay via JS then just add the div after the overlay the same thing goes for if you are just using html then styling just add the div you want on top at the end and make it position absolute then it should appear on top of the overlay
I have a button group where I would like to keep the text inside the element. I don't write CSS much and would love to solve it using twitter bootstrap
My problem:
The buttons are the right size, I'd just like to keep the text inside.
The group is generated using angularjs. I'd like the <p> text to stay inside the parent div
<div class="btn-group-vertical col-md-3">
<div class='btn btn-default' ng-repeat="(route_id, route) in routes">
<h2>{{route.short_name}}</h2>
<p>{{ route.description }}</p>
</div>
</div>
use :- on your second div
style="overflow:hidden;height:30px;width:30px"
adjust height and width according to your needs the bootstrap class must be over riding the height and width
if above doesnt work try using style="clear:both"
You can try using word-wrap: break-word; that will help you if you give overflow:hidden it will work but it will chop
In my own case, i applied the following css to the button
style='display: table;white-space: pre-line;word-break: break-all;'
The above css rules will keep the button responsive. Thus the text about to be "overflown" would be moved to the next line of the button.
If I have a navigation menu using css image sprite, is it possible to change the z-index when the link is clicked on/selected?
You can't really use CSS to change on click (unless you use :active, but that only lasts for a moment, while clicking). Use JavaScript instead.
Let's say your CSS looks like this:
#change_me {
z-index: 1;
}
Then you can have HTML with some inline JavaScript:
<div id="change_me">My z-index will change</div>
<div onclick="document.getElementById('change_me').style.zIndex='2'">
Click Me!
</div>
Clicking the second div will change the z-index of the first (i.e. #change_me).
It doesn't matter what the elements are (they can be div's, span's, p's, etc.)
So I'm developing a mobile micro site and that said, I want the links on the page, to behave
like ios links/tabs do, that when you click on them, the whole width of the button is active and changes color to display a click/finger over state etc..plus the WHOLE width of that div behaves like a button so that either on a small phone or a tablet, as long as I don't specify a width, that its active state goes from left to right ALL THE WAY as a "block"
To that effect for example, if I have a regular text link. like this:
<div class="mainBtns">Portfolio</div>
id give it this CSS so that on mouseover/click with finget etc, that it behaves like an ios button/tab.
CSS:
.mainBtns a{
display:block;
}
.mainBtns a:hover{
background-color:#d8d3cb;
}
Now that said. This is the problem im trying to solve.
I have a parent Div called thumbItemW (the content wrapper);
and two child items called galThumb and galThumbtxt
The content block looks like this:
<div class="thumbItemW ">
<div class="galThumb">
<a href="gallery-highrise.php" alt=""><img src="images/thumbs/highrise.jpeg" alt="High rise Gallery" />
</a>
</div> **//this is the gallery thumb floated left**
<div class="galThumbTxt">
HIGH RISE CONTEMPORARY
</div>**//this is the gallery thumb text floated right**
<div class="clearEm"> </div>//clear the float
</div> <!-- thumbItemW ender -->
What I want to do is that, when the user finger clicks the parent div, that the background color changes like in the example above with "mainBtns / mainBtns a:hover"
Problem is that, unlike the first example with mainBtns, since this one has child items, if I do something like:
pseudo CSS:
.thumbItemW a:hover{
display:block;
}
or something like this, this doesn't work the way id want it, since the elements are floats inside this parent div.
What I'm wanting to do is make the parent div .thumbItemW be like a display block so that when the user clicks, that they can click ANYwhere along that divs width and still activate the button as oppose to clicking RIGHT ontop of the button or text.
Can this be achieved the way I have it? Can this be achieved with CSS alone WITHOUT javascript/jquery?
Hope it's not too confusing.
why wouldn't you just specify width and height on the a element?
I'm trying to elegantly solve a styling issue with some buttons and images. My goal is to have buttons that look like the following:
(Hacky mspaint mockup)
(source: robhruska.com)
However, I have a set of criteria I'd like to meet:
I also need to be able to have the icon image exist as a button alone, with no text (i.e. the button background is the icon image and the button width/height = icon image width/height).
The icon-only button needs to support :hover states that change the background icon.
The text buttons need to support the gradient background changing on :hover, but the icon itself does not have to change.
I have both the icon image and gradient image available to me in a vertical CSS sprite image.
Currently, I can only think to do this with separate sets of styles for the text buttons and icon-only buttons, along the lines of:
<!-- text-button -->
<!-- button.text-button would have gradient background and border -->
<!-- button.text-button:hover would change to the hover gradient -->
<!-- .icon would have the icon background (icon border is included in image) -->
<button class="text-button">
<div class="icon-delete">Button Text</div>
</button>
<!-- icon-only button -->
<!-- button.icon-button would have the specific icon image background -->
<!-- button.icon-button:hover would change to the hover state background -->
<!-- button styling is different than .text-button, since icon border is included in image -->
<button class="icon-button-delete"></button>
I don't particularly like using the inner <div> for the text button, since it seems to add more markup that might be unnecessary. It also makes it so that if I wanted to go back later and add text to a button, I'd have to change several components instead of just changing the button class. It also means that I probably have to define the image positions for my icon sprites for several different combinations of button/div styles, which isn't DRY.
To summarize my question: How can I do this with a single top-level style on the <button>, rather than using nested elements or separate styles for the icon- vs text- buttons? It doesn't necessarily have to be a <button> either, it could be any element if it accomplishes this elegantly.
I don't really need a full code sample, just a suggestion for how it might be accomplished best.
You can reduce the markup a bit:
<div class="button">
<a class="yourIcon">Button Text</a>
</div>
.button gets the gradient image.
.yourIcon can then get an icon for a background if desired.
Personally, I'd just use an <img> with a transparent gif and a CSS background-image instead of your icon div. And a span for the text. For the text-free version of the button, just leave out the span and adjust the button class.
I've built a crude demonstration here: http://jsfiddle.net/TTyPZ/3/
Version 2: http://jsfiddle.net/z9pD9/1/
You could use simplify it at max: just use gradient as background and insert insert another tag with icon as background inside, use css vertical-align property (it accepts % values) to place the icon properly aligned to text.
instead of using div tags consider using <b> tag, ir saves ytou some bytes and it is s google technique by the way.
hope this helps
Can you just create 2 separate button elements and use absolute positioning to get the icon button on top of the big button?