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;
}
Related
i am beginner in html and css and when i was trying to build this web page with it (html and css) ,the images always appears in the middle of the tab and i don't know how to organize it,
stackoverflow keep saying "It looks like your post is mostly code; please add some more details" i have nothing more to say lol , so thank you in advance:)
this my html code:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>HOME</title>
</head>
<body>
<div class="mytabs">
<input type="radio" id="tabfree" name="mytabs" checked="checked">
<label for="tabfree">Free</label>
<div class="tab">
<h2>Free</h2>
<p>Mathematics (from Greek: μάθημα, máthēma, 'knowledge, study, learning') includes the study of such topics as quantity (number theory),[1] structure (algebra),[2] space (geometry),[1] and change (mathematical analysis).[3][4][5] It has no generally accepted definition.[6][7]
Mathematicians seek and use patterns[8][9] to formulate new conjectures; they resolve the truth or falsity of such b
h
.</p>
</div>
<input type="radio" id="tabsilver" name="mytabs">
<label for="tabsilver">Ser</label>
<div class="tab">
<h2>Sr</h2>
<p>jctivity from as far back as written records exist. The research required to solve mathematical problems can take years or even centuries of sustained inquiry.
Rigorous arguments first appeared in Greek mathematics, most notably in Euclid's Elements.[10] Since the pioneering work of Giuseppe Peano (1858–1932), David Hilbert (1862–1943), and others on axiomatic systems in the late 19th century, it has beco.</p>
</div>
<input type="radio" id="tabgold" name="mytabs">
<label for="tabgold">Gd</label>
<div class="tab">
<h2>Gd</h2>
<p>slow pace until the Renaissance, when mathematical innovations interacting with new scientific discoveries led to a rapid increase in the rate of mathematical discovery that has continued to the present day.[11]l
</p>
</div>
<!--
IMAGES
-->
<div class='all-image'>
<div class='single-pic'>
<img src='images/brid2.jpg' >
<div class="image-text">
<h1>bride</h1>
<p>hapyy bride happy life</p>
<p>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-instagram"></i>
</p>
</div>
</div>
</div>
<div class='all-image'>
<div class='single-pic'>
<img src='images/brid1.jpg' >
<div class="image-text">]
<h1>bride</h1>
<p>hapyy bride happy life2</p>
<p>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-instagram"></i>
</p>
</div>
</div>
</div>
<div class='all-image'>
<div class='single-pic'>
<img src='images/image.jpg' >
<div class="image-text">]
<h1>bride</h1>
<p>hapyy bride</p>
<p>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-instagram"></i>
</p>
</div>
</div>
</div>
</body>
</html>
this is my css code:
/*tab*/
.mytabs {
display: flex;
flex-wrap: wrap;
max-width: 600px;
margin: 50px auto;
padding: 25px;
}
.mytabs input[type="radio"] {
display: none;
}
.mytabs label {
padding: 25px;
background: white;
font-weight: lighter;
}
.mytabs .tab {
width: 100%;
padding: 20px;
background: #fff;
order: 1;
display: none;
.mytabs .tab h2 {
font-size: 2em;
}
.mytabs input[type='radio']:checked + label + .tab {
display: block;
}
.mytabs input[type="radio"]:checked + label {
background: #18ffff;
border-radius: 18px;
}
.all-image{
text-align: center;
}
.all-image .single-pic{
display: flex;
padding: 24px;
position: relative;
width: 30%;
height: 30%;
}
thank you in advance :).
Consider deleting
.mytabs .tab {
width: 100%;
padding: 20px;
background: rgb(114, 35, 35);
order: 1;
display: none;
.mytabs .tab h2 {
font-size: 2em;
}
It already looks a whole lot better.
The all-image class have text-align set to center. Since you defined the class in the div element that is the parent element of your img tag, your image will be aligned to the center too.
To avoid your image being centered and I assume you only want your text to be aligned centered, try to set the CSS property text-align: center under the class image-text.
I have some css which works in mobile but not sure how to make it work in desktop.As in mobile view, Post an Event and Find an Event should be listed on the same line below Events.
This css makes the layout work in mobile:
.event {
float :right;
}
.findanevent
br {
display: none;
}
<div class="lasvegas">Events</div>
<div class="findanevent"></div>
<div class="event_wrapper"><a href="https://adsler.co.uk/find-an-event">
<span id="findanevent" class="event">Find an Event</span>.</a>
<span id="postanevent" class="event">Post an Event</span></div>
Page: https://adsler.co.uk/events/
Is this what you mean? Please try making your question clearer and more detailed so you can be better helped.
.event {
float :right;
}
.findanevent
display: none;
}
<div class="lasvegas">Events</div>
<div class="findanevent"></div>
<div class="event_wrapper"><a href="https://adsler.co.uk/find-an-event">
<span id="findanevent" class="event">Find an Event</span></a>
<br>
<span id="postanevent" class="event">Post an Event</span></div>
I have a user managment block on my website and I'm trying to display a bit information there.
I think that nothing is better than example with pictures.
This is how the block looks now:
And this is how I want the block to look like:
Is there any good way to do that? I added those dashes manually, and this is not the way I'm looking for, I want it responsive.
Here is the block code:
<div class="account-box">
Welcome, guess. <br>
<hr>
Coins: <span style="float: right;">0</span> <br>
Points: <span style="float: right;">0</span> <br>
Total Referrals: <span style="float: right;">0</span> <br>
<hr>
Logged as [username] <span style="text-align: right;"><span class="fa fa-sign-out fa-fw"></span>Logout</span>
</div>
I recently had to do something similar. Here's what I came up with:
.entry {
display: flex;
align-items: center;
}
.entry>.spacer {
flex-grow: 1;
border-bottom: 1px dashed currentColor;
margin: 4px;
}
<div class="entry">
Label:
<ins class="spacer"></ins>
123
</div>
Adjust as needed!
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.
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.