I would like to get an idea from you guys. I have 3 checkboxes that I would like to display one in each line inside a box, kind of like a text area. What Bootstrap tool would allow me to accomplish that?
I tried to create a text area and out my checkboxes in them, but the code is translated as text in the text area. So I could not do that. What's the way of doing it?
You shouldn't restrict yourself to using only Bootstrap elements when making your site. Bootstrap is just a collection of nifty elements; it's fine (and probably necessary) to make your own, too.
If you just want your checkboxes to be in a box with an outline, well, that's a bit too simple for there to be a corresponding Bootstrap element.
In the simplest form, the HTML and CSS for this would look like this JSFiddle.
Html
<div class='checkbox-container'>
<input type='checkbox' id='one'>
<label for='one'>Hello</label>
</div>
Css
.checkbox-container {
margin: 10px 0;
padding: 10px 0;
border: 1px solid #aaa;
}
If you want all of the checkboxes in a single box, then you can do that with just a bit more code. View on JSFiddle.
If for some strange reason you must only use use Bootstrap elements, ananda's answer is pretty good. Using the well element gives you a border, but also an inner shadow and a background color. View the well on JSFiddle
try putting them inside the 'well' element
Related
What I want it to look like
I have uploaded a photo of exactly what I'm trying to do. Just to clarify, this is an assignment and I do not want it to be done for me. I'm simply asking how I should go about doing this. The white box that has text boxes within it is what I am trying to create. Any help is appreciated,
Just add all the elements of the box inside a div tag and then you can manipulate the divs background-color positioning etc. using CSS.
.white-box {
background-color: white;
color: black;
<!--other positioning attributes-->
}
<div class="white-box">
Content
</div>
That's a form! If its not a form and you are trying to do it via css, you are going to do what frogger said.
Here: http://www.w3schools.com/css/css_form.asp
Conditions
I'm essentially trying to replicate the webpage output for this assignment. Pictures used in webpage are here. That's basically my ultimate goal in all of this, getting this webpage as close to the Desired Output as possible. Not just similar, but as close to identical as possible.
This needs to be done in a way that doesn't just superficially reflect the intended output, but is done in the "right" way. For example, I could very well just adjust padding and margin sizes until it looks the way it needs to be, but that wouldn't solve the overarching problem and makes for badly styled code.
This has to be predominantly done with CSS. Only organizational HTML tags can be used and no packages or code can be imported.
Problem:
Each review is supposed to be separated by 20pt of vertical distance. This isn't working out for whatever reason.
It might have something to do with the fact that I've got some of my reviews looking like this when I need them to look like this.
That might have to do with the fact that padding is applying only to the text when it needs to apply to the review as a whole.
You can see in the first image that the blue bar, which represents padding, is only under the text and not under the image and the text.
I'm wondering if this has something to do with img elements being inline elements and not block elements? Any advice you have on this would be greatly apprecaited.
Code:
CSS
HTML
The padding does not work with your images because you have
float: left
applied to them. If you take that property out, the padding will take the img into account.
On a side note: maybe you should reconsider your html structure. Logically the review text and the reviewer belong together, so they should be enclosed by some parent div element. Just look at the real rotten tomatoes website and how they structure their reviews and let that "inspire" you ;-)
But basically it should be something like this:
<div class="review">
<div class="review_quote"></div>
<div class="review_source"></div>
</div>
Well structured HTML really helps with styling. HTML and CSS go hand in hand, so if your HTML is messy your CSS will be messy and "hacky" too. So first make sure your HTML makes sense (grouping, nesting, etc.) first.
add this class in your css
.reviewer-text::after {
clear: both;
content: "";
display: block;
}
Well.. your padding in css is refering only to class 'reviewer-info'. Elements with class 'reviewer-text' got their padding set to 8px;
If you want to have result for that block like on the picture apply bottom padding for 'reviewer-text'. Change:
.reviewer-text {
padding: 8px;
}
to:
.reviewer-text {
padding: 8px 8px 20px 8px;
}
See: https://fiddle.jshell.net/a9xxoz8L/1/
How can I completely change the design of a element? i am trying to make drop down like following image, what i wrote is
<select>
<option value="0">Title</option>
<option value="1">Mrs</option>
<option value="2">Mr</option>
</select>
i am stuck at put custom image to open drop down list for dropdown and also how to style select element
Some form elements are notoriously hard to style with CSS alone and still appear visually the same across all browsers.
The recommended practice for styling SELECT elemets is generally to use a javascript solution as this will work cross-browser.
Have a look at Chris Coyle's article on this:
http://css-tricks.com/dropdown-default-styling/
You can't style elements such as select in such a way you described it. Things like background-color or border are possible.
Styling with CSS only could go as far like this:
select {
border-radius: 5px;
color: lightgrey;
font-weight: bold;
}
With this CSS you will have the round corners and the font changed.
What's not possible:
Change the icon
Change the background or font of the dropped down box
Try fiddling with javascript, nested divs and a hidden input field. Also a glance at http://jqueryui.com could help you quite much.
I tried to figure it out using Firebug, but no chance. How is the Facebook status input border wrapped round the autosize input? Particularly, I am interested in the small triangle joined into the border. Using Firebug, I managed to find the triangle itself, which is provided in the form of a GIF image:
.uiComposerAttachment, .nub {
background: url(http://static.ak.fbcdn.net/rsrc.php/v1/zf/r/PfBgtiydy5U.gif) no-repeat center top;
height: 7px;
width: 11px
position: absolute;
left: 2px;
top: 18px;
}
But I couldn't figure out how it is placed above the input and how the border is added, in the form of a background image or defined as a CSS border?
I made a fiddle that mimics the facebook status box...
http://jsfiddle.net/UnsungHero97/mFuD4/5/
I added some functionality to the example, in particular, I found a cool jQuery plugin that allows for textarea auto-resizing.
Facebook actually uses a <textarea> element and the way they take care of the border is simple.
The "What's on your mind?" text is inside the <textarea> element and the border around it is due to several <div> element wrappers (more than the 2 I've shown above). Also, as you pointed out, the little arrow on top of the "What's on your mind?" is a .gif image, but there are ways to do this using only CSS!
Regarding the triangle...
If you're interested in alternative ways to do this using only CSS, I asked a question recently about the little triangle! Here's the question...
How can I create a "tooltip tail" using pure CSS?
... and here are the answers:
answer 1
answer 2
answer 3
answer 4 (this one is REALLY cool!!!)
I hope this helps.
Hristo
Here's how you can do it using only CSS: http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/
A similar question has been asked before though...
The border around the textarea is actually around parent div's (.uiTypeahead, .wrap) within the form. Looks like the actual textarea has no border.
As for the triangle it is just a css background inside the li (the items status, photo, video, link, etc are a list). The triangle is this element: <i class="nub"></i>. It is then positioned absolute to sit at the bottom of the list which has the form just below.
Thanks for your useful hints,
I finally managed to solve it in a four-liner:
#type_indicator { /* img#type_indicator is the triangle image tag, followed by the input field in HTML code */
position:absolute;
left:100px;
}
Greetings
Chris
I would like to know if there is a framework that can make standard html forms look more web 2.0 style, I would like to have rounded corners on text boxes and a more casual looking submit button, other than the out of box html one, which looks very old school.
If you know of something that's quick to implement, and open source, thank you in advance.
Try NiceForms a Javascript library for styling forms.
Or JqTransform for jQuery.
You can find some other resources below:
http://www.noupe.com/css/form-elements-40-cssjs-styling-and-functionality-techniques.html
http://speckyboy.com/2009/08/26/20-jquery-plugins-and-tutorials-to-enhance-forms/
http://devsnippets.com/reviews/using-jquery-to-style-design-elements-20-impressive-plugins.html
You will have to style the form elements with a combination of css and image backgrounds. This is fairly easy to do though and you should be able to find a lot of examples out there...
http://www.assemblesoft.com/examples/form/
http://pupungbp.erastica.com/css/rounded-corner-input-form/
It's called CSS.
The plain old HTML look is created by the default CSS settings. If you want to change the look, then you need to change the CSS. Find a website that has a look similar to what you want, and look at the HTML source. You will see a lot of CSS near the begining wrapped by STYLE tags. For instance:
<style type="text/css">
input {
border: none;
background: #FFF;
width: 165px;
}
.rounded {
background: url(rounded.gif) no-repeat left top;
padding: 8px;
width: 180px;
}
</style>
In order to get the actual rounded corners you are going to need some images that can cover the sharp corners. In the example CSS it refers to a single image of a box, but generally you will need four corner images, and four separate line images (top, bottom, left, right).
Check this article about creating forms with rounded elements: http://www.picment.com/articles/css/funwithforms/
Regarding rounded corners, you can use a background image which is rounded off using transparencies or if a user is using mozilla based browser or opera, you can use:
#formbox {
-moz-border-radius: 5px;
background-image: url('roundededges.jpg');
}
In your CSS to add rounded corners to any div. Either that or use some simple flash.