I have a label and an input in an ol like this
<ol>
<li>
<label for="testing" style="display:inline-block;width:200px;">
<!-- Content Here -->
</label>
<input type="checkbox" id="testing" name="test" value="" />
</li>
</ol>
If I add width to my label, this is the result I get
As you can see, the first line in my label (starting with the first word Donex) is not aligned with the number 1 of my list. I want the text of my label to start on the same line as the number of my list.
Style the label to vertical-align:top;
is this what look like demo 1 or this demo 2
html
<ol>
<li><label for="testing">Donec vitae sem et purus luctus venenatis. In hac habitasse platea dictumst. Vivamus posuere fermentum dapibus.</label> <input type="checkbox" name="testing" value="" /></li>
</ol>
added css for demo 1
ol li label {
display:block;
width:200px;
}
added css for demo 2
ol li label {
float:left;
width:200px;
}
hope this help
Please Try this :
<ol>
<li ><label for="testing" style="width:200px;display:inline-block;vertical-align:top">Donec vitae sem et purus luctus venenatis. In hac habitasse platea dictumst. Vivamus posuere fermentum dapibus.</label> <input type="checkbox" name="testing" value="" /></li>
</ol>
Run on Fiddle. Hope it will be your expected output.
Related
Currently I'm working on a way for my company to streamline some of our customer's day-to-day, by allowing them to generate their own questionnaires through our system.
Styling has become a bit of an issue. Because I do not know how long the text they put in their questions/answers will be, nor do I know how many answers (i.e. checkboxes, radio buttons, etc) there will be, I cannot set fixed widths on any elements.
The wish as well is for this to become dynamically scalable to browser width (for mobile compatibility). I've been messing a bit with css "grid" functionality, which works up to a certain point.
Aligning the "question" on the left side, regardless of how many rows the "answer" will take is proving troublesome. Placing the divs inside of a table will automatically "disable" the whole grid functionality.
Any suggestions on making this work are very welcome!
.mainContainer {
/* Borders temporary, to see if element exceeds max-width */
width 95%;
max-width: 1200px;
padding: .4em;
margin: auto;
border: 1px solid #b5b5b5;
}
.questionContainer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
}
.question {
align-self: center;
grid-row-start: 1;
grid-row-end: span 1000;
}
.answer {
border: 1px solid #b5b5b5;
align-self: center;
}
.answer input[type=text] {
width: 20em;
}
hr {
border-style: dotted;
}
<div class="mainContainer">
<!-- Start first question -->
<div class="questionContainer">
<div class="question">
This text should, always, be filling the entire row. Regardless of how many rows are created by the elements next to it, and the css grid.<br /><br /> Problem:It should by default have more width than the answers.
<br /><br /> Problem 2: The answers should now be more vertically aligned to the center, if the question asked is as long as this.
</div>
<div class="answer">
<input type="radio" name="Radio" id="Radio1" />
<label>In tincidunt semper sapien</label>
</div>
<div class="answer">
<input type="radio" name="Radio" id="Radio2" />
<label>Quisque hendrerit tellus nec ex pellentesque gravida.</label>
</div>
<div class="answer">
<input type="radio" name="Radio" id="Radio3" />
<label>Cras in odio</label>
</div>
<div class="answer">
<input type="radio" name="Radio" id="Radio4" />
<label>Nunc nec orci eros.</label>
</div>
<div class="answer">
<input type="radio" name="Radio" id="Radio5" />
<label>Curabitur in tempor justo.</label>
</div>
<div class="answer">
<input type="radio" name="Radio" id="Radio6" />
<label> Integer ac volutpat nulla, vitae congue arcu.</label>
</div>
<div class="answer">
<input type="radio" name="Radio" id="Radio7" />
<label>Problem 3: This_one_will_exceed_the_width.</label>
</div>
</div>
<!-- End first question -->
<hr />
<!-- Start second question -->
<div class="questionContainer">
<div class="question">
Phasellus ac aliquam ex. In lacinia nisi nec felis vestibulum porta.
</div>
<div class="answer">
<input type="text" placeholder="Nulla ultricies maximus quam ut fermentum." />
</div>
</div>
<!-- End second question -->
</div>
I'm building a layout with CSS, customizing some 'div' tags. On of them (the div with the id "col3") is with a strange padding-top and I don't know why. I have already tried to use 'padding: 0;', but it's not working. I know I can fix it with the property 'position', but why is it happening with my div? The codes are these:
HTML
<section id="getintouch">
<h3>Get in Touch</h3>
<p>Etiam at mi at quam suscipit auctor a ac urna. Nullam non euismod felis, sed rhoncus risus. Donec erat enim, convallis eu facilisis at, hendrerit sed ligula.</p>
<div id="getintouchlayout">
<div id="col1-2">
<form action="#" method="POST">
<label for="name">Name</label>
<input type="text" name="nome" id="name">
<label for="email">Email</label>
<input type="email" name="email" id="email">
<label for="message">Message</label>
<textarea name="message" id="message"></textarea>
<input type="submit" value="Send Message">
</form>
</div>
<div id="col3">
<address>
<p>
<span>Endereço</span>
1234 Somewhere Rd. Nashville, TN 00000 United States
</p>
<p>
<span>Telefone</span>
000-000-000
</p>
<p>
<span>Email</span>
email#server.com
</p>
</address>
</div>
</div>
</section>
CSS
#getintouchlayout{overflow: auto;}
#col1-2{
width: 63.5%;
margin-right: 5%;
float: left;
}
#col3{
width: 31.5%;
float: right;
}
Obs: I know 'float' is not so used to do that, but I am using it because I am learning about this property in a course and I need to use it in a project.
Remove the <p> margin, that tag has inherent paddding that <label> does not have.
I want main container color should cover child element also. I can't give 100vh or fixed height.
Please see image for details.
Code Link
<div class="container">
<input class="nav" type="radio" name="nav" checked=true/>
<div class="nav">CategoryA</div>
<input class="nav" type="radio" name="nav" />
<div class="nav">CategoryB</div>
<input class="nav" type="radio" name="nav" />
<div class="nav">CategoryC</div>
<input class="nav" type="radio" name="nav" />
<div class="nav">CategoryD</div>
<div class="main clearfix">
<section>
<h1>Category A</h1>
<main>
<label class="heading" for="checkbox_1A">HEADING A</label>
<input type="checkbox" id="checkbox_1A" style="display:none;">
<div id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus turpis ac posuere laoreet. Donec vehicula hendrerit nibh, in laoreet nibh rutrum a. Aenean vestibulum lectus sem.</div>
</main>
<main>
<label class="heading" for="checkbox_1B">HEADING B</label>
<input type="checkbox" id="checkbox_1B" style="display:none;">
<div id="hidden">Lorem ipsum dolor sit amet,.</div>
</main>
</section>
<section>
<h1>Category B</h1>
<main>
<label class="heading" for="checkbox_2B">HEADING B</label>
<input type="checkbox" id="checkbox_2B" style="display:none;">
<div id="hidden">Praesent non nulla id tortor malesuada tincidunt</div>
</main>
</section>
<section>
<h1>Category C</h1>
</section>
<section>
<h1>Category D</h1>
</section> </div>
</div>
The problem is that everything inside the main section is positioned absolute, so basically the browser sees the main content as empty.
So either you position the sections inside the main content in other ways (not using absolute position), or you give .main a height of 100vh:
.main {
width: calc(100% - 200px);
height: 100vh;
}
I have some troubles with my html and css structure for this layout on the picture below.
Can you give me some suggestions how to accomplish it properly ? How to separate left section and right section with the form because I want to be able to create this full height black transparent background ?
Here is my code until now.
.enroll-bg { background: linear-gradient( rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.52)), url(https://s30.postimg.org/6uy1f1rxd/enroll_bg.jpg) 0 0 no-repeat; background-size: cover; padding: 40px 0 230px 0; width: 100%; }
.form-container { position: relative; }
.form-wrapper { position: absolute; bottom: -230px; right: 0; left: 50%; background: red; width: 539px; height: 520px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="header">
<div class="enroll-bg">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="enroll-logo">
<div class="logo">
logo
</div>
<!-- logo -->
</div>
<!-- enroll-logo -->
<div class="enroll-content">
<h1>Enroll today and <span>save money & time</span></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.Com sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<!-- enroll-content -->
</div>
<!-- col-md-6 -->
</div>
<!-- row -->
<div class="form-container">
<form action="#" class="form-wrapper">
<div class="form-content">
<p>
<input type="text" id="fname" name="firstname" placeholder="Full Name..." required="required" class="field">
</p>
<p>
<input type="text" id="fname" name="firstname" placeholder="+44 01 234 5678" required="required" class="field">
</p>
<p>
<input type="email" id="email" name="email" placeholder="Email Address..." required="required" class="field">
</p>
<p>
<input type="email" id="confirm-email" name="confirm-email" placeholder="Confirm Email..." required="required" class="field">
</p>
<p>
<input type="text" id="electric-provider" name="electric-provider" placeholder="Current Electric Provider..." required="required" class="field">
</p>
<p>
<input type="text" id="gas-provider" name="gas-provider" placeholder="Current Gas Provider..." required="required" class="field">
</p>
<div class="form-actions">
<button type="button" class="btn btn-danger">enroll today</button>
</div>
<!-- form-actions -->
</div>
<!-- form-content -->
</form>
<!-- form-wrapper -->
</div>
<!-- form-container -->
</div>
<!-- container -->
</div>
<!-- enroll-bg -->
</header>
<!-- header -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I've made some minor tweaks to both HTML and CSS - see jsfiddle here.
I've removed position: absolute from the .form-wrapper, wrapped the form in a .col-xs-6, and put in the same .row so that it sits alongside the enroll content.
Each .row can contain any combination of .col-xx-xx or .col-xx-offset-xx, as long as the sum of the numbers is no more than 12. You can read more about this here.
HTML:
<div class="enroll-bg">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="enroll-logo">
<div class="logo">
logo
</div>
</div>
<div class="enroll-content">
<h1>Enroll today and <span>save money & time</span></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.Com sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
<div class="col-xs-6 form-container">
<div class="">
<form action="#" class="form-wrapper">
<div class="form-content">
<p>
<input type="text" id="fname" name="firstname" placeholder="Full Name..." required="required" class="field">
</p>
<p>
<input type="text" id="fname" name="firstname" placeholder="+44 01 234 5678" required="required" class="field">
</p>
<p>
<input type="email" id="email" name="email" placeholder="Email Address..." required="required" class="field">
</p>
<p>
<input type="email" id="confirm-email" name="confirm-email" placeholder="Confirm Email..." required="required" class="field">
</p>
<p>
<input type="text" id="electric-provider" name="electric-provider" placeholder="Current Electric Provider..." required="required" class="field">
</p>
<p>
<input type="text" id="gas-provider" name="gas-provider" placeholder="Current Gas Provider..." required="required" class="field">
</p>
<div class="form-actions">
<button type="button" class="btn btn-danger">enroll today</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS:
.enroll-bg { background: linear-gradient( rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.52)), url(https://s30.postimg.org/6uy1f1rxd/enroll_bg.jpg) 0 0 no-repeat;
background-size: cover;
width: 100%; }
.form-container {
height: 100vh;
background: red;
}
Your form must be in the same row as the left column, and in another col-md-6.
if it is for a single page you may not need to use boostrap (class and structure) and relay on the flex model with a few mediaqueries to allow font-size resizing and eventually break into 1 column:
header,
main {
width: 30vw;
min-width: 360px;
height: 100vh;
}
html,
header,
form {
display: flex;
flex-flow: column;
min-height: 100vh;
}
body {
min-height: 100vh;
margin:0;
display: flex;
justify-content: center;
flex-wrap: wrap;
background: linear-gradient(to bottom, #55707B, #677B82, #484926, #685125);
background-size:100% 100%;
color: white;
}
header img {
min-height: 40px;
margin: 1em auto 1em 1em;
}
header h1 {
flex: 1;
display: flex;
flex-flow: column;
justify-content: center;
font-size: 3.5em;
margin: 0;
}
header h1 b {
display: block;
color: #A7FE2B
}
main form {
justify-content: space-around;
align-items: center;
padding: 5vh 3vw;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.25)
}
main form label {
font-size: 5vh;
width: 100%;
position: relative;
}
main form label input:not([type="submit"]) {
width: 100%;
padding-left: 1.5em;
box-sizing: border-box;
}
label:not(:last-of-type):before {
font-family: FontAwesome;
content: "\f007";
position: absolute;
z-index: 1;
left: 0.2em;
top: 0.25em;
color: gray;
}
label:nth-child(2):before {
content: "\f10b";
/* etc ..*/
}
label:last-of-type input {
padding: 0.25em;
color: white;
background: turquoise;
border: none;
}
#media only screen and (max-height: 500px) {
header h1 {
font-size: 20px;
}
main form label {
font-size: 20px;
}
body,
main,
header,
form {
height: auto;
min-height: 100vh
}
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<header>
<img src="http://dummyimage.com/150x40&text=\LOGO/" alt="logo" />
<h1>HTML Ipsum Vestibulum &<b> test me full page too</b></h1>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum,
elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</header>
<main>
<form>
<label>
<input placeholder="place holder" />
</label>
<label>
<input placeholder="place holder" />
</label>
<label>
<input placeholder="place holder" />
</label>
<label>
<input placeholder="place holder" />
</label>
<label>
<input placeholder="place holder" />
</label>
<label>
<input placeholder="place holder" />
</label>
<label>
<input type="submit" value="tempus lacus" />
</label>
</form>
</main>
http://codepen.io/gc-nomade/pen/MbBNaO
I have this HTML code:
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
<span>Proper format "exampel#something.com"</span>
</div>
I've configured 'text-align: center' on the div but unfortunately span text is also centered (see the image below).
I need span to be near it and not centered.
You probably should center your parent element, and not div inside form:
.center-form {
text-align: center;
}
.center-form form {
display: inline-block;
text-align: left;
}
<div class="center-form">
<form action="">
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
</div>
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
<span>Proper format "exampel#something.com"</span>
</div>
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
</div>
<button>Submit</button>
</form>
</div>
Or if you want span not to affect form position, use position: absolute:
.center-form {
text-align: center;
}
.center-form form {
display: inline-block;
text-align: left;
}
.center-form form div {
position: relative;
}
.center-form form div span {
position: absolute;
left: 100%;
top: 0;
/* for demo */
white-space: nowrap;
}
<div class="center-form">
<form action="">
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
</div>
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
<span>Proper format "exampel#something.com"</span>
</div>
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
</div>
<button>Submit</button>
</form>
</div>
You should apply 'text-align: center;' on the input#cemail, not on the div.
What about a nice -
position: absolute
You get a free relative with the div. Then the error will never get in the way of the input box as its absolutely positioned.
Of course you will need to fix the top, left, right, bottom to conform to your design.
You can also do something like this, to allow wrapping of text.
body {
font-family: sans-serif;
}
input {
width: 160px;
position: relative;
left: 50%;
margin-left: -80px;
box-sizing: border-box;
}
p {
clear: right;
}
.legend {
float: right;
width: 50%;
}
.legend small {
background: #ccc;
display: block;
margin-left: 80px;
word-wrap: break-word;
padding: 0.5em;
}
<form>
<p>
<input type="text" placeholder="Your Last Name">
<span class="legend">
<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consectetur libero magna, ultrices vehicula dui hendrerit ut. Mauris dictum urna nec justo tristique, id rutrum sapien blandit. Ut pellentesque, augue ornare pellentesque dictum, sem lectus hendrerit massa, nec gravida elit mauris sit amet lorem.</small>
</span>
</p>
<p>
<input type="text" placeholder="Your User Name">
</p>
<p>
<input type="email" placeholder="Your Email">
<span class="legend">
<small>Proper format "exampel#something.com"</small>
</span>
</p>
<p>
<input type="text" placeholder="Your Password">
</p>
<p>
<input type="submit" value="Add Me Now">
</p>
</form>
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
<span class="float-right">Proper format "exampel#something.com"</span>
</div>