My application uses some bars on a timeline. Every line consists of a barkeeper div that holds the bars for this line. The barkeeper also has 2 style properties width and height.
.barkeeper {
margin-bottom: 1px;
position: relative;
}
The bars have some interactive ajax actions that come from Richfaces and CSS hover and jquery javascript. Therefore around each bar there is a form. I've left out the action javascript to simplify this example.
.bar {
position: absolute;
text-align: center;
vertical-align: middle;
z-index: 0;
}
<form id="j_id163:0:j_id165:0:medfrm" onmouseover="" method="post" name="j_id163:0:j_id165:0:medfrm" target="">
<div id="bar1" class="bar antibiotic" onmouseout="" onmouseover="" style="left: 7px; width:1528px;">
<img style="float:right;" src="endarrow.gif">
<div class="cornr_top">
<div></div>
</div>
<div style="text-align: center; direction: ltr;">Bartext </div>
<div class="cornr_bottom">
<div></div>
</div>
<script type="text/javascript">
</div>
<input type="hidden" value="" name="" autocomplete="off">
<input type="hidden" value="" name="autoScroll" autocomplete="off">
<script type="text/javascript">
<input id="javax.faces.ViewState" type="hidden" autocomplete="off" value="" name="javax.faces.ViewState">
</form>
The bars are absolutaly positioned using a left and width parameter.
The bars have to have rounded corners so I've added these cornr_top and cornr_bottom
.cornr_top div, .cornr_top, .cornr_bottom div, .cornr_bottom {
font-size: 1px;
height: 3px;
width: 100%;
}
.cornr_top {
background: url("../img/tr.gif") no-repeat scroll right top transparent;
}
.cornr_top div {
background: url("../img/tl.gif") no-repeat scroll left top transparent;
}
The cornr_bottom classes are identicaly defined except for the images being used.
The last thing I've added is this line
<img style="float:right;" src="endarrow.gif">
This displays a running an arrow at the end of the bar to indicate that it is still running.
Now every browser displays all of this correctly. The corners are added to the corners and if available the arrow overrides the right side of the bar and overlaps the 2 corners over there.
In IE7 the arrow is displayed on a new line. How can I resolve this issue?
I've found the solution myself.
I've changed the arrow image tag from
<img style="float:right;" src="endarrow.gif">
to
<img style="position:absolute; right:0px;" src="endarrow.gif">
Related
I am a novice when it comes to modern HTML (HTML5/CSS/Ajax/JQuery, etc). I have a web application that is using a Google Earth plugin like tool called Cesium. Like Google Earth, it allows you to view and interact with a global map of the earth. Cesium runs as a widget in a div container. The canvas takes up a whole div element. In my app it takes the entire width and most of the body.
I have a need for a small text search form that exists outside of this div container.
It consists of one form input and a couple of buttons. I would like this to sit on top (overlay) the div container that contains the cesium widget. I would like it to only take up a small section in the upper left corner, overlaying the cesium widget. I would be great if the background, underneath the form input field and buttons were transparent.
Below is a small sample of the HTML and CSS. I know it will involve some CSS but as I said I’m a novice.
Any helpful hints on slick ways for doing this would be appreciated.
Thanks!
body
{
background-color : #000000;
margin : 0;
margin-bottom : 20px;
margin-top : 20px;
width : 100%;
}
.textSearchSection
{
display:inline-block;
float:left;
height : 5%;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 5px;
width: 500px;
}
.textInputField
{
width : 200px;
}
.map
{
height : 95%;
overflow : hidden;
width : 100%;
}
.button
{
width : 80px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="../cesium/Build/Cesium/Widgets/widgets.css">
<script>
var cesiumViewer = null; //declare these here so processTextInputForm() has access to them
</script>
</head>
<body>
<!--I want this to semi transparently overlay the cesiumContainer div, and only take a minumum amount of width-->
<div class="textSearchSection" id="textSearchSection">
<form id="searchForm" name="searcForm">
<input type="text" id="searchText" name="searchText" class="textInputField" onchange="somejavascriptfunction()"/>
<input id="searchButton" type="button" value="Text Search" class="button" onclick="somejavascriptfunction()">
<input id="clearButton" type="button" value="Clear" class="button" onclick="somejavascriptfunction()">
</form>
</div>
<!--This is the div that contains the cesium application-->
<div class="map" id="cesiumContainer"></div>
<script>
cesiumViewer = new CesiumViewer(); //This can't be created until after the cesiumContainer id is declared in the div.
</script>
</body>
</html>
My approach would be to move the textSearchSection so that it nests inside a parent container as a sibling element to cesiumContainer:
<div id="parentContainer">
<div class="map" id="cesiumContainer"></div>
<div class="textSearchSection" id="textSearchSection">...</div>
</div>
Then you can style parentContainer so that it is exactly the same size as cesiumContainer and style textSearchSection with:
#textSearchSection {
position: absolute;
top: 0;
left: 0;
z-index: 12;
}
Actually moving the form div (searchContainer below) into the cesiumContainer div, and using CSS z-index attributes as shown below (searchOverlay set to 1, map set to 0) does the trick. So it is a child of the cesiumContainer div.
.map
{
height : 100%;
overflow : hidden;
width : 100%;
z-index : 0;
}
.searchOverlay
{
left : 10;
position : relative;
top : 33;
width : 50%;
z-index : 1;
}
<div class="map" id="cesiumContainer">
<div class="searchOverlay" id="searchContainer">
<input class="textSearch" id="searchText" name="searchText" type="text" onchange="processTextInputForm()"/>
<input class="button" id="searchButton" type="button" value="Search" onclick="processTextInputForm()" onkeydown="searchEnter(event)">
<input class="button" id="searchButton" type="button" value="Clear" onclick="clearResults()">
</div>
</div>
In an overlapping like the one below, how to prevent the large space between the title and text field?
.icon-link-mail {
position: relative;
left: 485px;
top: 29px;
padding: 8px 8px 7px 8px;
z-index: 2
}
<h3>Title</h3>
<form name="mail_form" id="mail_form" method="POST" action="">
<label for="sendto">
<i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i>
<input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
</label>
</form>
Result can be seen in this fiddle
Personally I'd just use a pseudo-element, but if you wish to use the <i> icon, then we can do that a lot better by using position:absolute instead of position:relative. Adding position:relative just moves the icon, but leaves the space that it would have taken. position:absolute won't leave that space.
We need to make sure to set the parent contain (label) to position:relative though, so that the icon will be absolutely positioned in relation to the parent instead of the entire page.
#mail_form label {
position: relative;
}
.icon-link-mail {
position: absolute;
z-index: 2;
right: 0;
}
<h3>Title</h3>
<form name="mail_form" id="mail_form" method="POST" action="">
<label for="sendto">
<i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i>
<input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
</label>
</form>
Result
Fiddle
http://jsfiddle.net/Ay6Hw/4/
I find the best way to do this is to just use an image. Here would be the code:
.search input {
padding-left: 17px;
background: #FFF url("../images/icon_search.png") left no-repeat;
}
.search input:focus {
background:#fff;
}
This will also remove the background image on focus giving the user a better experience overall.
Here is a solution that works with simple CSS and standard font awesome syntax, no need for unicode values, etc.
Create an <input> tag followed by a standard <i> tag with the icon you need.
Use relative positioning together with a higher layer order (z-index) and move the icon over and on top of the input field.
(Optional) You can make the icon active, to perhaps submit the data, via standard JS.
See the three code snippets below for the HTML / CSS / JS.
Or the same in JSFiddle here:
Example: http://jsfiddle.net/ethanpil/ws1g27y3/
$('#filtersubmit').click(function() {
alert('Searching for ' + $('#filter').val());
});
#filtersubmit {
position: relative;
z-index: 1;
left: -25px;
top: 1px;
color: #7B7B7B;
cursor: pointer;
width: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>
I'm 'having a hard time figuring out which css rule is messing up the file upload form element because it's not quite aligned properly with the other form elements.
http://jsfiddle.net/emRr2/
There are some conflicting styles.
This style is overriding the width and padding on your custom element:
form .section > div {
[...]
padding: 0 10px 0 1%;
width: 75%;
}
Adding a DIV around the custom field will fix the width:
<div class="section _100">
<label for="file">Image</label>
<div> <!-- New DIV -->
<div class="customfile">
<button class="customfile-button" aria-hidden="true">Browse</button>
<span class="customfile-feedback" aria-hidden="true">No file selected...</span>
<input type="file" style="left: -53.4167px; top: 24.1667px; margin: 0px;" name="file" value="" class="required customfile-input">
</div>
</div> <!-- /New DIV -->
</div>
In my opinion, you should also remove the following, which is offsetting the button and increasing the height:
.customfile-button {
margin-top:6px;
}
If anyone can suggest a better place than stackoverflow for css questions please let me know.
I have an outer div with background and border and then I need to have two columns within the colored box. Some reason when I place the floating divs inside the outer div, the outer div does not grow.
Here is my HTML:
<div class="tip_box">
<h3>Send</h3>
<hr />
<form id="email_form">
<div class="three-columns">
<div class="contact_form_input">
<h6>Your Name</h6>
<input type="text" name="name_text_box" class="form_input" id="name_text_box" />
</div>
<div class="contact_form_input">
<h6>Your Email</h6>
<input type="text" name="email_text_box" class="form_input" id="email_text_box" />
</div>
</div>
<div class="three-columns">
<div class="contact_form_input">
<h6>Recipient Name</h6>
<input type="text" name="name_text_box" class="form_input" id="Text1" />
</div>
<div class="contact_form_input">
<h6>Recipient Email</h6>
<input type="text" name="email_text_box" class="form_input" id="Text2" />
</div>
</div>
</form>
</div>
<p>This is where your message will go. Anything you want, as long as you want. Make it personal; make the recipient know you care.</p>
Here is my CSS:
.three-columns {
width: 290px;
float: left;
margin-right: 45px;
}
.tip_box {
padding: 20px;
margin: 20px 0px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 10px;
border-radius: 7px;
padding-left: 55px;
background: #eee;
font-style:italic;
background: #eff7d9 url(../images/icons/tip.png) no-repeat scroll 10px 15px;
border: 1px solid #b7db58;
color: #5d791b;
}
Screenshot:
http://dl.dropbox.com/u/2127038/cssissue.png
Non-float blocks containing float blocks will not automatically expand, since float blocks are taken outside the normal flow (or at least specially outside the flow). One way to correct that is to specify the overflow property to hidden or auto.
.tip-box { overflow: auto; }
See quirksmode for more.
Add following HTML after <div class="tip_box"></div>:
<div class="clear"></div>
Here is the CSS:
.clear{
clear:both;
}
It will surely work.
.tip_box { overflow:hidden; zoom:1; }
this establishes new block formatting context in ie7+ and other browsers, triggers haslayout in ie6 to contain floats
You're going to need what is commonly known as a clearfix. In this case a overflow: hidden on the containing element will do - see: http://www.jsfiddle.net/yijiang/zuNwH/2
.tip_box {
overflow: hidden;
}
As an aside, you might also want to use label elements instead of h6 to markup labels for your form elements, and use a list instead of individual divs for containing each label - input pair, and reduce the amount of class attribute you use by relying on more complex selectors for your CSS file.
<li>
<label for="recipient_email">Recipient Email</label>
<input type="text" name="email_text_box" id="recipient_email" />
</li>
In this case I wouldn't float the divs left, I would make them display: inline or inline-block.
Your 3 columns will turn into 2 columns, then 1 column if the browser window shrinks.
I am trying to create a page similar to Google's homepage. It is to have a centrally located input box and a div on top of the page displaying links. I also want the page to resize itself dynamically if I change the size of the browser window. I have achieved partial success using yui2 grid css and a table. Here's a snippet:
<body>
<div id="doc3">
<div id="hd"><a style="float:left" href="link1.com"> link1</div>
<div id="bd" style="display: table; height: 400px;">
<div style="display: display: table-cell; vertical-align: middle">
<input name="searchbox" value="searchinput" size="40" />
<input name="submit" type="submit" value="search />
</div>
</div>
</div>
</body>
The only issue with this html is that the page doesn't dynamically resize upon resizing the browser window. Is there a better way of doing this ?
You can use jQuery to set it to perfectly.
jQuery
$(window).resize(function() {
var wh = (($(window).height()-$('#center').height())/2)+'px';
var ww = (($(window).width()-$('#center').width())/2)+'px';
$('#center').css({
top: wh,
left: ww
});
}).resize();
CSS
#center {
border: 1px solid black;
position: absolute;
width: 50px;
}
If you don't care about perfectly vertically centered, you could do:
#center {
border: 1px solid black;
margin: 0 auto;
position: relative;
width: 50px;
top: 45%; /* or whatever % looks 'right' */
}