I am trying to put 2 buttons on a web page, one floated to the left and the other to the right. Both command buttons have multiline styled text within them. Below is my latest attempt. It seems to work on in Firefox, but not even close in IE 8. Any ideas how I can get this to work in both environments? thanks.
CSS:
body {
background-color: green;
}
.idxQuestion {
font-size: 36;
text-align: center;
}
.idxButtons {
margin-top:60px;
margin-left: auto;
margin-right:auto;
width:350px;
}
.buttonchoice1,.buttonchoice2
{
text-align: center;
background:white;
padding: 5px;
}
.buttonchoice1 {
float:left;
border:5px solid red;
}
.buttonchoice2 {
float:right;
border:5px solid blue;
}
.spanchoice1 {
font-size: 30px;
}
.spanchoice2 {
font-size: 10px;
}
HTML:
<div class="idxQuestion">
<h1>Big Question?</h1>
</div>
<div class="idxButtons">
<h:button class="buttonchoice1" onclick="option1?faces-redirect=true" >
<h:outputText escape=false>
<span class="spanchoice1">No</span><br />
<span class="spanchoice2">additional info 1</span>
</h:outputText>
</h:button>
<h:button class="buttonchoice2" onclick="option2?faces-redirect=true" >
<h:outputText>
<span class="spanchoice1">Yes</span><br />
<span class="spanchoice2">additional info 2</span>
</h:outputText>
</h:button>
</div>
Fiddle : http://jsfiddle.net/MF23L/
Replace your code with this piece of code:
<div class="idxButtons">
<button class="buttonchoice1" onclick="option1?faces-redirect=true">
<outputText escape=false>
<span class="spanchoice1">No</span><br />
<span class="spanchoice2">additional info 1</span>
</outputText>
</button>
<button class="buttonchoice2" onclick="option2?faces-redirect=true">
<outputText>
<span class="spanchoice1">Yes</span><br />
<span class="spanchoice2">additional info 2</span>
</outputText>
</button>
</div>
IE isn't recognizing your h:button tag, which you've applied a "buttonchoice1" class to and is the basis of your layout. If you were to wrap those "h:button"s with a div (for example), and move the class from the h:button to the new containing div, it should work. Like this:
<div class="idxButtons">
<div class="buttonchoice1">
<h:button onclick="option1?faces-redirect=true" >
<h:outputText escape=false>
<span class="spanchoice1">No</span><br />
<span class="spanchoice2">additional info 1</span>
</h:outputText>
</h:button>
</div>
....
Why not make images and use <input type="image" alt="No, additional info 1" src="..." /> so it would look the same? I am don't think button is supposed to be fancy.
Related
I want to have the same size for 3 containers defined as follows:
<div class="workingItemContainer">
<div id="workingItemContainer" runat="server">
<a class="workingItem" runat="server" id="workingQuoteAnchor">
<%=quoteNumberAnchor%>
</a>
<br />
<a class="workingItem" runat="server" id="workingPOMAnchor">
<%=pomNumberAnchor%>
</a>
<a class="workingItem" runat="server" id="workingProdCancelAnchor">
<%=prodCancelNumberAnchor%>
</a>
</div>
</div>
This is the code the code in css that implements the background and the font:
.workingItemContainer {
text-align: center;
}
.workingItemContainer div {
display: inline-block;
background-color: #ff9900;
}
If I display the workingQuoteAnchor, it shows differently from the others.
Maybe try removing the <br> tag that is after the #workingQuoteAnchor . That is most probably creating the extra space. Also if you need any spaces do that using CSS instead of changing the DOM for such cosmetic purpose.
I added : max-width in
.workingItemContainer div {
display: inline-block;
background-color: #ff9900;
}
and solved the problem.
I need to change the background color of a span using css when an input field in another span is focused.
<p class="some">
<span class="one">Name</span>
<span class="two"> <input type="text" name="fname"> </span>
</p>
Here is the css:
.one
{ background-color: red; }
I tried doing this:
.two:focus + .one
{background-color-black;}
but its not working.
Any help would be appreciated.
Thanks!
you can use :focus-within,
It worked for me.
This is a document https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
.one { float: left; }
input { margin: 0 0 0 5px; }
.some:focus-within .one { background: red; }
<p class="some">
<span class="one">Name</span>
<span class="two"> <input type="text" name="fname"> </span>
</p>
If you do not mind elements order, try this snippet:
.one { float: left; }
input[name="fname"] { margin: 0 0 0 5px; }
input[name="fname"]:focus + .one { background: khaki; }
<p class="some">
<input type="text" name="fname"/>
<span class="one">Name</span>
</p>
Here is a fiddle
Using javascript:
Html:
<p class="some">
<span class="one">Name</span>
<span class="two"> <input type="text" name="fname" onfocus="changeColor()"> </span>
</p>
Javascript:
<script type="text/javascript">
function changeColor() {
document.getElementsByClassName("one")[0].style.backgroundColor="black";
}
</script>
Css:
.one
{ background-color: red; }
Another javascript solution, using classes, and also handles the input loosing focus:
function getFocus() {
var one = document.getElementsByClassName("one")[0];
one.className = one.className + " one-focused";
}
function looseFocus() {
var one = document.getElementsByClassName("one")[0];
one.className = one.className.replace("one-focused", "");
}
.one { background-color: red; }
.one-focused { background-color: black; }
<p class="some">
<span class="one">Name</span>
<span class="two"> <input type="text" name="fname" onfocus="getFocus()" onblur="looseFocus()"> </span>
</p>
This has some fairly obvious flaws, but works in this case. You may want to loop through all classes, or use id's instead of classes. If you are using jQuery then this becomes slightly simpler, but I have left this using standard javascript and only changing the background of the first element in the document.
I recently just asked a question on here. I am asking a few more (each in a separate question so I don't get flagged). I am making a website for a client, but the label is over top of the title in Firefox but in Chrome it looks like the way I want it. View the photos below.
Chrome
Firefox
Here is the CSS:
.label {
border: 1px solid #000;
}
.label-danger {
background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
background-color: #c9302c;
}
Here is the HTML:
<div class="row features">
<div class="col-lg-4 text-center">
<div class="single-fet">
<div>
<span class="icon-stack icon-4x">
<i class="icon-circle icon-stack-base"></i>
<i class="icon-ok icon-light"></i>
</span>
</div>
<h2>Speedy Servers with <span class="label label-danger">SSDs</span>
</h2>
<p>You will get the fastest servers possible with SSD's clocked at 1gb/s transfer.</p>
</div>
</div>
<h2>Speedy Servers with <span class="label label-danger">SSDs</span>
h2
{
dislay: block;
}
h2 span
{
display: inline-block;
}
I have this code of popup.htlm file:
HTML
<body>
<select style="width: 100%;"
multiple id="HLSlist">
</select>
<span style="display:inline">
<button type="button" id="Deletebut">Delete</button>
<button type="button" id="OpenAllbut">Open All</button>
<t id='VFlagged'>0</t>
</span>
<hr>
<input type="checkbox" id="BlurThumbs">
<t>Blur Thumbnails</t>
</body>
CSS
body {
overflow-x: hidden;
min-width: 200px;
}
t {
font-size: 10pt;
}
I want that the text goes to the right side, like appear on the picture:
You can simply float it.
jsFiddle here - it has the results you expect.
#VFlagged {
float: right;
padding-right: 10px;
}
Some padding might be necessary - I added 10px..
Also.. I changed the t element to a span..
I'm trying to emulate a tab bar with HTML.
I'd like the width of each tab to be set according to the text length (that is, no fixed width) and to word wrap in case it exceeds the screen width.
I've almost achieved it:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
But, there's a very annoying space between the opening tab image and the closing one.
As you can see, I've tried with padding, spacing, and border, with no luck.
EDIT:
I tried replacing the spans with a small table (one row, three <td>s), but it's the same, only the space between is smaller.
Another way besides njbair's one is to add font-size: 0 to parent element.
I prefer this one because it's aesthetically better for tab designing.
Instead of this:
<div id="tabs">
<span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span>
</div>
...we can use this:
<div id="tabs" style="font-size: 0;">
<span id="mytab1">Tab 1</span>
<span id="mytab2">Tab 2</span>
<span id="mytab3">Tab 3</span>
</div>
...which looks better :)
Of course, don't forget to define your real font size for tabs.
EDIT:
There's one more way to get rid of spaces: by adding comments.
Example:
<div id="tabs">
<span id="mytab1">Tab 1</span><!--
--><span id="mytab2">Tab 2</span><!--
--><span id="mytab3">Tab 3</span>
</div>
Get rid of the newlines between the spans. Example:
<div class='tab'>
<span class='tab_left'> </span><span class='tab_middle'>very very looong</span><span class='tab_right'> </span>
</div>
Newlines are counted as a space in HTML.
Another option is to use nagative letter-spacing:-10px - that has a lighter impact on formatting.
<div id="tabs" style="letter-spacing:-10px;">
<span id="mytab1" style="letter-spacing:1px;">Tab 1</span>
<span id="mytab2" style="letter-spacing:1px;">Tab 2</span>
<span id="mytab3" style="letter-spacing:1px;">Tab 3</span>
</div>
Got this idea thanks to this answer
hard to test without the images but I added background color and display:inline to the root tabs. Please try this:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
display:inline;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab' style="background-color:Red;">
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab' style="background-color:Green;">
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
Tab middle, left and right also need to float left.
njbair’s response is correct.
Another option was to use a table, with the border-collapse: collapse; property.
Another gotcha: in Internet Explorer 6.0, the first approach (spans) doesn’t work as expected. When resizing the window, IE wordwraps the span, breaking the tab, while with the table approach even IE sends down the whole tab.