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
Related
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.
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>
I am trying to create a div on my site that is supposed to work like the descriptions on Ebay where all the css styles of the main site are stripped off and then whatever styles are in the div are what style the div (if you can understand what I mean). I've been trying to use a reset stylesheet, but my problem is that the reset is also resetting anything I put into the div. For example the following:
<div class="reset_this_div">
<font color="red">This is reformatted</font>
</div>
should reset the css in the div, then make the text "This is reformatted" red with the font tag. However, the reset seems to be overriding the font tag and the text just stays black. Does anyone know how I can fix this?
Thanks!
Have you considered using one div inside another instead of using the tag?. Something like this:
<div class="reset_this_div">
<div style="color: red !important;">This is reformatted</div>
</div>
Regards
OK, DUE TO BEING NEW I WASNT ALLOWED TO POST IMAGES, SO I HAVE ATTACHED LINKS INSTEAD. (images should be inline with this question)
Im writing a webpage and have a div containing some text (inline) an then an image.
Now when one clicks on the image, a hidden div appears below with an input field.
The input field in this div is automatically aligned to the left edge of the div.
I want it aligned to the right of the div.
As pictures speak louder than words, see link below.
http://www.freeimagehosting.net/uploads/d827ecc330.png
Anyhow the closest I got to a solution was to apply direction: rtl to hidden div, but then my text in my input field also changes to rtl.
I just want the placing of the text field to be rtl, not the input.
I hope this isnt too confusing.
Im quite new to css but have searched arund a lot, and have yet to find a solution besides the depreciated align=right.
Any suggestions greatly appreciated.
<div id="container" style="width:500px;">
<div id="text" style="width:250px; float:left;">Text</div>
<div id="image" style="width:250px; float:left;">Image</div>
<div id="input" style="width:500px; float:left; text-align:right">Input</div>
</div>
I have the following on a page:
<div style="max-width: 600px; overflow-x: scroll;">
<a href="PoolPanoramaBig.jpg" target="_blank">
<img src="PoolPanoramaBig.jpg" style=""/>
</a>
</div>
If the image is wider than 600px then you can scroll the image to the left to see the rightmost part. However, I want to default it so that it is already scrolled fully to the left when initially displayed.
I've tried setting a style in the image to float:left which works but that disables the horizontal scrollbar.
Ideas?
EDIT: Here's a page that might help explain what I'm trying to do: http://guyellisrocks.com/ie-example/
Do you see how you have to move the scroll bar to the right to see the right most edge of the image? I'd like it to default to that when you first hit the page.
I don't have a problem doing this in JavaScript and if that's possible some hints would be appreciated. Otherwise if it's possible to do this with CSS then this is how I would first attempt to do this.
Try adding an anchor to the right of the image. Something like:
<img src="foo.jpg"><a name="right_of_image"></a>
When or after navigating to the page, if you append the #right_of_image anchor to the document URL, the browser will try to focus on the anchor, effectively scrolling to the right edge of the image. This probably won't work if you're using a scrolling container like the one you have, but should work if the image is directly embedded in your page. Does this work for you?