I want to make a square shape text area of fixed size.The label of the text-area will be inside the text-area as shown in the picture below.This heading will always be displayed.It will not dissapear on entering text inside the text area like a placeholder.
I tried it in this fiddle http://jsfiddle.net/jwB2Y/2/ but was not able to place it inside the text-area..
The CSS code..
label
{
float: top;
width:120px;
padding:10px 10px;
font-weight:bold;
}
The Desired Output..
I moved the label under the textarea and added the following CSS.
http://jsfiddle.net/kkctL/1/
textarea {
display: block;
width: 300px;
height: 300px;
padding-top: 30px;
}
label {
display: block;
margin: -330px 5px 0 5px;
width: 290px;
height: 25px;
font-weight:bold;
background-color: white;
}
try this;
CSS
.wrapper{
position:relative;
border:1px solid #000;
overflow:auto;
display:inline-block;
width:350px;
padding:10px;
}
.wrapper .first-heading {
width:100%;
text-align:center;
font-weight:bold;
float:left;
text-decoration:underline;
}
.wrapper .second-heading {
width:100%;
text-align:center;
float:left;
}
.wrapper .textarea1{
width:100%;
height:300px;
float:left;
display:block;
border:none;
outline:none;
}
HTML
<div class="wrapper">
<label for="qual" >The main heading underlined:</label>
<textarea id="qual" rows="5" cols="20" style="resize:none" placeholder="The secondary heading of this space in brackets"></textarea>
</div>
New Jsfiddle => http://jsfiddle.net/jwB2Y/7/
Old Jsfiddle => http://jsfiddle.net/jwB2Y/5/
Absolutely position the label over the text area and then add some top padding to the textarea. Remove 'float:top' as this doesn't do anything.
I would wrap the whole lot in a div, then place a span inside the label to format the font:
CSS
div {
border:1px solid black;
width:250px;
height:250px;
padding:10px;
}
span {
display:block;
font-weight:bold;
text-decoration:underline;
}
label {
display:block;
margin-bottom:10px;
}
textarea {
border:none;
width:100%;
}
HTML
<div>
<label for="qual"><span>The main heading underlined </span>Sub heading</label>
<textarea id="qual" rows="5" cols="20" placeholder="Placeholder text"></textarea>
</div>
see updated demo here.
Related
I have been looking for ways to turn checkboxes to look like button, I stumbled upon this question and I did but I added a padding on mine,
.ck-button {
padding: 5px 5px 0px 5px;
}
here is the jsfiddle
As you can see, when clicked, it will just change the color of the span and not the whole button. I tried to add the padding here
.ck-button input:checked + span {
background-color:#0077CC;
color:#fff;
}
or remove the span but neither of them is working. Please help me and thank you in advance.
Try this. You have to give padding to the ck-button label span not in ck-button class.
div label input {
margin-right:100px;
}
body {
font-family:sans-serif;
}
.ck-button {
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
/*padding: 5px 5px 5px 5px;*/
}
.ck-button label {
display:block;
width:5.0em;
}
.ck-button label span {
text-align:center;
padding:5px 5px;
display:block;
}
.ck-button label input {
position:absolute;
opacity:0;
/*top:-20px; don't use this thing use opacity:0 */
}
.ck-button input:checked + span {
background-color:#911;
color:#fff;
}
<div class="ck-button">
<label>
<input type="checkbox" value="1"><span>red</span>
</label>
</div>
<div class="ck-button">
<label>
<input type="checkbox" value="2"><span>red</span>
</label>
</div>
I'm trying to get rid of many divs on my page so I wonder if this "tile" could be done without using one.
Something like this:
<a href="mks.html" class="big-tile big-tile-1">
<h1>town<br>
library</h1>
</a>
The anchor tag would have a background: url(big-tile-1) top no-repeat; I guess. Big-tile would have static width and height. But how do I style the h1? Can You help me please?
You could do something like this: JSFiddle Demo
CSS
.big-tile {
border:10px solid #ccc;
display:inline-block;
position:relative;
height:200px;
width:200px;
color:#fff;
background:url("http://lorempixel.com/400/200/nature/");
}
.big-tile h1 {
margin:0;
background:teal;
position:absolute;
padding:20px;
bottom:0;
left:0;
right:0;
}
Or if you want the image in the markup and not as a background image - you could do this : http://jsfiddle.net/UFUq5/3/
Demo Fiddle
HTML
<a href="#">
town<br />
library
</a>
CSS
a {
display:inline-block;
height:450px;
width:300px;
background-image:url(http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg);
background-color:teal;
background-size:300px 300px;
background-repeat:no-repeat;
padding-top:350px;
padding-left:50px;
box-sizing:border-box;
color:white;
text-decoration:none;
font-family:arial;
font-size:20px;
border:10px solid #c0c0c0;
}
technically, you wouldn't need to use the big-tile-1 class. but you could do something like this: http://jsfiddle.net/RU23A/1/
with a couple changes:
1. add an image to the background url
2. change the font to whatever that font is.
You can do this:
<a id="image-overlay" href="mks.html" class="big-tile big-tile-1">
<img src="your image">
<h1> town <br> library </h1>
</a>
then your css:
#image-overlay{
width: 300px;
height: 500px;
position: relative;
border: 10px #999 solid;
border-radius: 1px;
}
#image-overlay h1{
position: absolute;
bottom: 0;
left: 0;
background-color: green ////whatever your choice
color: white;
padding: 10px;
font-family: //your choice
font-size: 20px;
}
I am trying to make a large button with 2 lines of text that looks something like:
What I want
This is my current JSFiddle showing what I've "accomplished"
I am fairly new to asp.net and programming in general so excuse my poor CSS.
Thanks for any help that anyone can offer.
The HTML:
<div class="bigGreenButton"> <a href="/Liquor/specialorder/supplier-info">Submit a special order request <br />
for information ➧
</a> </div>
The CSS:
.bigGreenButton a{
font-family:'TradeGothic LT CondEighteen';
font-size:18px;
background-color:#60a74a;
color:white;
font-weight:bold;
padding-bottom:10px;
padding-top:10px;
padding-left:25px;
padding-right:25px;
text-transform:uppercase;
text-decoration:none;
height:auto;
width:auto;
text-align:center;
}
.bigGreenButton a:hover {
background-color:#cccccc;
}
button {
text-align: center;
padding: 0px 0px 0px 0px;
border: none;
}
Add this to your css:
.bigGreenButton a{
display: inline-block;
...
}
You can see it here.
Change display since there's not a block inside your link and set the width how you want it.
.bigGreenButton a{
...
display: block;
width: 400px;
}
Shown here
The problem is that i have a form with different fields of different sizes. Each field is inside a div with float:left. And they distribute automaticlly in 2 columns. If they are all of the same height there is no problem but if not it happens the following:
The divs are selected in blue. I need that the last div for example goes up because if not i have a dead space there and in many other forms of my site. They are dinamic forms so i cant solve it manually. The placement must be automatic. I searched in Stack Overflow and in the internet but i couldnt find any solution.
Here is the Divs CSS
#popup #form .left{
float:left;
margin-left:25px;
display:inline-block;
vertical-align:top;
}
And the General CSS
#popup{
width:645px;
height:auto;
background-color:#e3e3e3;
border-style:solid;
border-width:1px;
border-radius:5px;
border-color:#afafaf;
padding:15px;
color:#4d4d4d;
}
#popup #titulo{
font-size:15px;
font-weight:bold;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#afafaf;
padding-bottom:10px;
}
#popup #form #input{
display:block;
width:289px;
margin-top:10px;
}
#popup #form .left{
float:left;
margin-left:25px;
display:inline-block;
vertical-align:top;
}
#popup #form .right{
float:right;
margin-right:25px;
}
#popup #form #input label{
font-size:12px;
font-weight:bold;
}
#popup #form #input input[type='text'], #popup #form #input select, #popup #form #input textarea{
font-size:12px;
border-radius:5px;
border-style:solid;
border-width:1px;
border-color:#afafaf;
width:280px;
background-color:#f0f0f0;
}
#popup #form #input #foto{
width:191px;
height:87px;
background-image:url(images/img_background.png);
border-style:solid;
border-width:1px;
border-color:#afafaf;
border-radius:5px;
}
#popup #form input[type='button']{
text-align:center;
border-radius:5px;
border-style:solid;
border-width:1px;
border-color:#afafaf;
font-size:12px;
color:#4d4d4d;
-moz-box-shadow: inset 1px 1px 1px #ffffff;
-webkit-box-shadow: inset 1px 1px 1px #ffffff;
box-shadow: inset 1px 1px 1px #ffffff;
}
#popup #form #input input[type='button']{
width:82px;
height:17px;
margin-left:4px;
line-height:14px;
}
#popup #form #submit_buttons{
text-align:right;
border-top-style:solid;
border-top-width:1px;
border-top-color:#afafaf;
padding-top:10px;
margin-top:15px;
}
#popup #form #submit_buttons input[type='button']{
width:82px;
height:30px;
}
#popup #form input[type='button']:hover{
background-color:#cccccc;
cursor:pointer;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#popup #form #input table{
width:284px;
margin-top:2px;
margin-bottom:5px;
}
#popup #form #input table tr{
text-align:right;
vertical-align:top;
}
#datepicker{
background-image:url(images/datepicker.png);
background-repeat:no-repeat;
background-position:right;
}
#popup #form #input textarea{
height:115px;
max-height:115px;
min-height:115px;
width:275px;
max-width:275px;
min-width:275px;
}
I'm providing a simplified version of the problem, but is simple enough to carry on to your example. You just need to alternate the float between left and right so they don't break :)
HTML Code:
<div class="box boxSize1"></div>
<div class="box boxSize1"></div>
<div class="box boxSize1"></div>
<div class="box boxSize2"></div>
<div class="box boxSize3"></div>
CSS Code:
.box {float:left; width:48%; height:40px; background:red; margin:0 1% 2%;}
.box:nth-child(even){float:right;}
.boxSize2 {height:80px; background:green;}
.boxSize3 {height:120px; background:blue;}
Live example:
http://jsfiddle.net/h4kE8/
I would try throwing a position:relative; in with those two DIVs. I've found that any sort of positioning problem can usually be fixed by setting a clear position attribute.
Also helps when using position:absolute; to have it's parent's position set. If that doesn't work, don't underestimate tables. People might not like them much, but if you know how to use them, they work well for stuff like this.
Lengthy, but the best advice I can give.
The Multi-column Layout module spec has been around for a long time, but browsers have been slow to implement, so IE is almost definitely out (though there may be a polyfill that will help it limp along).
http://www.quirksmode.org/css/multicolumn.html
http://www.opera.com/docs/specs/presto28/css/multicolumnlayout/
Note that this will change the order that your elements display, but it will eliminate the gap.
I would in your case have the id, nombre and descripcion sit in the same div, call it left div. Then have the rest of the content on the right sit on another div call it right div and have them both float left. as follows
css
.left {
float:left;
}
.right {
float:left;
}
HTML
<div id="left">
/*id, nombre and descripcion */
</div>
<div id="right">
/* the rest */
</div>
I want to show a search icon over the start of the a text input box.
Currently my code looks like this:
<div id="search-icon"></div>
<input type="text" name="search" id="search"/>
And my CSS:
#search-icon {
display:inline-block;
background-color:#455a21;
height:60px;
width:60px;
border:thin solid black;
border-radius:30px;
z-index:100;
}
input#search {
position:relative;
top:-25px;
left:-30px;
padding:10px;
padding-left:35px;
border-radius:20px;
border:thin solid #6d6e71;
z-index:1;
}
It shows the div right where I want it, but below the actual text box. When I change the search icon position to absolute, it screws up my positioning.
How do I swop it?
You can solve it using relative position for both. But just change their z-index.
#search-icon {
background-color:#455a21;
height:60px;
width:60px;
border:thin solid black;
border-radius:30px;
z-index:100;
position: absolute;
z-index: 2;
}
input#search {
position:absolute;
top:15px;
left:30px;
padding:10px;
padding-left:35px;
border-radius:20px;
border:thin solid #6d6e71;
z-index:1;}
is this what you are looking for here
Are you talking about having search-icon being on top of input#search?
Such as this: http://jsfiddle.net/52YfE/?
I dont know what you want exactly but check it out this one http://jsfiddle.net/V8AZE/