someone recommend me to use the fieldset but it didn't work,
here is the code
.block{
display: inline-block;
border: 2px solid white;
}
.title2{
color: white;
font-size: 1.5em;
text-align: center;
}
<fieldset class="block">
<legend class="title2">
Services
</legend>
</fieldset>
it show like this
I want is like this
here is the underline
Try this code:
Because your theme can override your fieldset style, you can just use !important to fix.
fieldset.block {
font-family: sans-serif!important;
border: 5px solid #1F497D!important;
background: #eee!important;
border-radius: 5px!important;
padding: 15px!important;
}
fieldset.block legend.title2 {
background: #1F497D!important;
color: #fff!important;
padding: 5px 10px!important;
font-size: 32px!important;
border-radius: 5px!important;
box-shadow: 0 0 0 5px #ddd!important;
margin-left: 20px!important;
}
<fieldset class="block">
<legend class="title2">Services</legend>
<p>Some text.</p>
</fieldset>
Related
I have a link and a submit button styled with the same .button class. Is there an easy way to make them look exactly the same (to have a same height)?
body .button {
text-align: center;
line-height: 15px;
background: #3333CC;
border-color: #5033CC;
border-radius: 4px;
color: #fff;
font-size: 11px;
border: 1px solid;
padding: 4px 7px 4px 7px;
cursor: pointer;
min-width: 90px;
text-decoration: none;
display: inline-block;
}
<form>
<a class="button" href="http://www.example.org">Link as button</a>
<input class="button" type="submit" value="button as button"/>
</form>
EDIT: I just found out that they look the same in Google Chrome, but not in Firefox.
In this example, they do have the same height (25pixels). You can always set a height in the CSS.
One thing you missed is changing the font-family.
In this example I've added one just to Helvetica, but that will make them more similar.
You can set box-sizing:border-box, set a solid height (25px in this example) and then change display:inline-block; to float:left;
body .button {
text-align: center;
line-height: 15px;
background: #3333CC;
border-color: #5033CC;
border-radius: 4px;
color: #fff;
font-size: 11px;
border: 1px solid;
padding: 4px 7px 4px 7px;
cursor: pointer;
min-width: 90px;
text-decoration: none;
float:left;
font-family:'Helvetica';
box-sizing:border-box;
height:25px;
}
<form>
<a class="button" href="http://www.example.org">Link as button</a>
<input class="button" type="submit" value="button as button"/>
</form>
I am trying to achieve something like the website here: http://bit.ly/1f55jUR (where it says Space Min.) but I fail miserably lol..
Here is what I have done until now:
<input type="text" class="textbox" id="box" /><span class="textbox2">TB</span>
.textbox {
border: 1px solid #cccccc;
outline:0;
height:22px;
width: 30px;
}
.textbox2 {
border: 1px solid #cccccc;
font-size: 16px;
background-color: #f0f0f0;
padding: 3px 6px 3px 6px;
}
Live example:
http://jsfiddle.net/55Nb3/
Any help would be highly appreciated.
Thank you!
You need to modify your html like this (span don't have the same properties than div):
HTML
<input type="text" id="textbox" /><label for="textbox" clhttp://jsfiddle.net/55Nb3/#forkass="textbox2">TB</label>
Here is the CSS
#textbox {
border: 1px solid #cccccc;
outline:0;
height:30px;
width: 30px;
border-radius: 4px 0 0 4px;
box-sizing: border-box;
font-size: 16px;
}
label {
display: inline-block;
vertical-align: top;
border: 1px solid #cccccc;
border-left: none;
font-size: 16px;
background-color: #f0f0f0;
line-height: 30px;
padding: 0 6px;
height: 30px;
border-radius: 0 4px 4px 0;
box-sizing: border-box;
}
Here is a link to it
They used Twitter Bootstrap on that website to get that styling: http://getbootstrap.com/components/#input-groups-basic.
I do it by using a mix of jQuery and CSS
jQuery
$('input[type="text"], input[type="email"], input[type="tel"], .post textarea').on('focus blur',function(e){
if(e.type == 'focus' || e.type == 'focusout'){
$(this).addClass('focussed');
} else {
$(this).removeClass('focussed');
}
});
CSS
input{
/* General style here */
}
input.focussed{
/*Different styles for focussed input here */
}
I've done an update on your fiddle: http://jsfiddle.net/55Nb3/5
It's mostly done by:
label {
display: inline-block;
}
And a few style adjustments.
It really doesn't matter if it is a label or something else.
I need to align labels and inputs of my form using CSS. The result should be something like this (I hope this simple scheme is clear):
Label1: ______
Labellll2: ______
Button
So, my HTML and CSS look as follows. The problem is that labels are placed on top of inputs, and also the button is on the right side instead of a bottom.
<form width="200px" name="optform" method="post" action="#">
<div class = "boxx">
<label for="param1">Param1:</label>
<input type="text" class="input-text" value="5" size="11" maxlength="11" name="param1" id="param1">
<label for="param2">Param1:</label>
<input type="text" class="input-text" value="5" size="11" maxlength="11" name="param2" id="param2">
</div>
<div class="buttons">
<a href="#">
<img src="images/opt.png" alt=""/> Run
</a>
</div>
div.boxx {
width: 500px;
}
div.boxx .input-text{
border:1px solid #A9C7F5;
color: #00557F;
font: 12px Arial;
float:left;
width:66%;
margin:0 0 0.5em 0.25em;
}
div.boxx label{
display:block;
font: 13px Arial;
color:#00557F;
width:33%;
float:left;
text-align:left;
padding-right: 8px;
}
.buttons a, .buttons button {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DFF4FF;
border-color: #EEEEEE #DEDEDE #DEDEDE #EEEEEE;
border-style: solid;
border-width: 1px;
color: #565656;
cursor: pointer;
font-family: Verdana,arial,sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 130%;
margin: 10px 10px 0 0;
padding: 4px 10px 3px 7px;
text-decoration: none;
}
.buttons button {
overflow: visible;
padding: 4px 10px 3px 7px;
width: auto;
}
The label needs to be
display:inline-block;
and the width is too large of either your label or input boxes. Padding and margins will cause problems with percentage widths because they are not taken into account.
Here is the updated css
div.boxx {
width: 500px;
}
div.boxx .input-text{
border:1px solid #A9C7F5;
color: #00557F;
font: 12px Arial;
width:60%;
margin:0 0 0.5em 0.25em;
}
div.boxx label{
display:block;
font: 13px Arial;
color:#00557F;
width:33%;
float:left;
text-align:left;
padding-right: 8px;
}
.buttons a, .buttons button {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DFF4FF;
border-color: #EEEEEE #DEDEDE #DEDEDE #EEEEEE;
border-style: solid;
border-width: 1px;
color: #565656;
cursor: pointer;
font-family: Verdana,arial,sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 130%;
margin: 10px 10px 0 0;
padding: 4px 10px 3px 7px;
text-decoration: none;
}
.buttons button {
overflow: visible;
padding: 4px 10px 3px 7px;
width: auto;
}
I know modern CSS people hate tables, but in this case (and with many alignment issues with divs) I recomment a nice little table.
<table>
<tr>
<td>Label1: </td><td><input type="text" /></td>
</tr><tr>
<td>Label2: </td><td><input type="text" /></td>
</tr><tr>
<td>Label3: </td><td><input type="text" /></td>
</tr>
</table>
<input type="button" />
Try something like this http://jsfiddle.net/mmyxD/
Is there a reason for all the margins/padding? Your width's are forcing the elements onto new lines.
You can also use divs and spans. Something like this:
<form action="">
<div class="row"><span class="label">label1:</span><span class="formw"><input type="text" size="25"></span></div>
<div class="row"><span class="label">label2:</span><span class="formw"><input type="text" size="25"></span></div>
<div class="spacer"> </div>
</form>
and css:
div.row {
clear: both;
padding-top: 10px;
}
div.row span.label {
float: left;
width: 33%;
text-align: left;
}
div.row span.formw input{
width: 100%;
}
div.row span.formw {
float: right;
width: 66%;
text-align: left;
}
I'm trying to get two columns side by side (float left/right), but they both have dynamic text.
!
Link to code
<div class="news-item">
<div class="news-pic">
<a href="#">
<img src="" width="126" height="80" alt="">
</a>
</div>
<div class="news-description">
<h3>Long post title this is. What is this? this is a long post title. Even longer. (dynamic)</h3>
Longer category name (dynamic)
<div style="clear:both"></div>
<small><i>Published {{ post.published|date:"j. F Y" }}</i></small>
<p class="text-min">Blah blah body</p>
<div style="clear:both"></div>
</div>
<div style="clear: both"></div>
</div>
html, body {
font-size: 13px;
font-family: arial;
}
.news-item {
padding: 10px 10px 10px 10px;
border: 1px solid #f2f2f2;
cursor: default;
width: 658px;
margin: 10px 0 20px 0;
border-radius: 5px;
}
.news-pic {
display: inline-block;
vertical-align: top;
padding: 3px;
border: 1px solid #DADADA;
margin-right: 10px;
background: white;
}
.news-description {
margin-left: 0;
display: inline-block;
width: 510px;
}
.news-description h3 {
margin: 0;
float: left;
font-size: 15px;
}
.news-description h3 a {
text-decoration: none;
color: #137541;
}
.category-name {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
text-decoration: none;
padding: 1px 4px 1px 5px;
font-weight: bold;
border: 1px solid #dadada;
border-right: none;
background: rgba(215, 214, 214, .2);
color: #807f7f;
white-space: nowrap;
display: inline-block;
font-size: 10px;
margin-right: -11px;
z-index: 5;
float: right;
}
I'm trying to make the left main text "break" into a new line when it reaches the right category (which is also dynamic, so it can't be a static width). Is this at all possible with just CSS? Or do I have to reach for JS?
Thanks a lot! :)
Make sure that the text is not floated, and the button is both floated right and before the text in HTML
http://jsfiddle.net/vR3eE/4/
I've looked at a number of different answers here, and they all seem to boil down to text-align: center in the parent div's style. I've tried that, and it's working for labels, but not actual input elements.
JSFiddle
Here's the basic code:
html
<div id="content">
<div id="login_form">
<h2>Log in to DOT Voting</h2>
<form>
<label for="username">Username</label>
<input type="text" name="username" value="" />
<label for="password">Password</label>
<input type="password" name="password" value="" />
<input type="submit" name="submit" value="Log In" />
</div>
</div>
css
#login_form {
width:90%;
background-color: #bdd2ff;
border: 1px solid white;
margin: 50px auto 0;
padding: 1em;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
}
input[type=text], input[type=password] {
text-align:center;
display: block;
margin: 0 0 1em 0;
width: 90%;
border: 1px solid #818181;
padding: 5px;
}
input[type=submit] , form a {
border: none;
margin-right: 1em;
padding: 6px;
text-decoration: none;
font-size: 12px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #cfdeff;
color: black;
box-shadow: 0 1px 0 white;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
}
input[type=submit]:hover, form a:hover {
background: #007cc2;
cursor: pointer;
}
The login_form div is centered on the page, the form labels are centered in the div, and the submit button is centered in the div. But the text input boxes are not centered. What can I do to force them to center? (I don't care if the content of the input boxes is centered; I just want the boxes themselves centered in the div.)
Add
margin: auto;
to your input[type=text], input[type=password] class.
Also be sure to remove the text-align: center; attribute because that causes the text in the input to be centered.
JSFiddle
Amend the margin declaration for your input elements to use auto for margin-left and margin-right:
#login_form {
width:90%;
background-color: #bdd2ff;
border: 1px solid white;
margin: 50px auto 0;
padding: 1em;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
}
input[type=text], input[type=password] {
text-align:center;
display: block;
margin: 0 auto 1em auto;
width: 90%; /*280px;*/
border: 1px solid #818181;
/* -moz-border-radius: 1px;
-webkit-border-radius: 1px; */
padding: 5px;
}
input[type=submit] , form a {
border: none;
margin-right: auto;
margin-left: auto;
padding: 6px;
text-decoration: none;
font-size: 12px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #cfdeff;
color: black;
box-shadow: 0 1px 0 white;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
}
input[type=submit]:hover, form a:hover {
background: #007cc2;
cursor: pointer;
}
Updated JS Fiddle.
text-align does not work on block elements. Remove the display:block on input[type=text], input[type=password] or change it to display:inline-block. Note that inline-block does not work for < IE7.
Or since you have a width declared on the input, you can remove the text-align:center and use margin: 0 auto 1em auto;
It's centering based on the 90% input[type=text], input[type=password] css value. You can define that with a fixed width, or for liquid layouts, set it to 100% width and adjust it's margin.