I am trying to create a page that shows a label and the corresponding text (might be multi-line), but I do not get the lines from the label and the text in the same line.
HTML Code:
<label for='name'>Name:</label>
<div class='input' id='name'> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
<label>Date:</label>
<div class='input' id='date'> 10.10.2012 </div>
<label>Sum:</label>
<div class='input' id='sum'>ABC </div>
CSS:
label {
width:150px
float: left;
}
.input{
margin-left:150px
}
Here is the JSFiddle Link
Semicolon ; is missing after width:150px
Correct it. It works
DEMO
Missing ";" after 150px and clear:both after div
label {
width:150px;
float: left;
display: block;
border: 1px solid red;
}
.input{
margin-left:150px;
}
br {
display: block;
clear: both;
}
http://jsfiddle.net/DGolub/msvVc/1/
You lost in your style ; after width:150px
Try this: JS Bin
label {
width:150px;
float: left;
}
Try this:
.input{
display:inline
}
Put display:block; in .input:
.input{
margin-left:150px;
display: block;
}
Related
This question already has answers here:
Li item on two lines. Second line has no margin
(8 answers)
How to keep indent for second line in ordered lists via CSS?
(14 answers)
Closed 5 months ago.
Here is a inner section of a page :
The word office is falling right under the fontawesome icon and I want it to align with the text above it.
Code snippet:
.tabcontent {
float: left;
padding: 100px 30px;
border: none;
width: 33%;
border-left: none;
height: 580px;
background: #fff;
box-shadow: 0 -6px white, 0 6px white, -5px -9px 8px 4px #88888878, 5px -9px 8px 4px #88888878;
}
#ctab2 p,
#ctab4 p {
display: inline;
color: #000;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="ctab2" class="tabcontent">
<h3>Place of Service</h3>
<h5>Application Submission</h5>
<i class="fa fa-map-pin"></i>
<p>  Sharjah Ports Website</p>
<i class="fa fa-clock-o"></i>
<p>24 x 7</p><br><br>
<h5>Processing & Approval</h5>
<tr>
<td>
<i class="fa fa-map-pin"></i></td>
<td>
<p> &demo123 game Security & jikoi Dept. Office</p>
</td>
</tr><br>
<i class="fa fa-clock-o"></i>
<p>Monday – Thursday, 07:30 – 15:30</p><br><br>
</div>
you can use flexbox and put two elements in row, center the elements vertical
.container {
display:flex;
align-items: center;
}
.icon {
width: 24px;
height: 24px;
margin: 4px;
background-color: #cccccc;
}
.container-text {
margin: 0
}
css above and html
<div class="container">
<div class="icon"></div>
<p class="container-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
Replace the icon with your icon.
Don't use tr and td elements without table element, use some other elements like div or section
Don't use   in your p element, use margin or padding in css of the p element instead
there are different solutions. one of them is using the display flex.
but anyway good work. i would have stayed away from the float though. it may cause alot of issues for display.
also and should just be used inside
.tabcontent {
float: left;
padding: 100px 30px;
border:none;
width: 33%;
border-left: none;
height: 580px;
background: #fff;
box-shadow:0 -6px white,
0 6px white, -5px -9px 8px 4px #88888878, 5px -9px 8px 4px #88888878;
}
#ctab2 p,#ctab4 p
{display: inline;
color: #000;
}
.custom-wrapper { display: flex;flex-direction:row;}
.custom-wrapper > .fa {display:inline-block;}
.custom-wrapper > p {margin:0'}
<div id="ctab2" class="tabcontent">
<h3>Place of Service</h3>
<h5>Application Submission</h5>
<i class="fa fa-map-pin"></i>
<p>  Sharjah Ports Website</p>
<i class="fa fa-clock-o"></i>
<p>24 x 7</p><br><br>
<h5>Processing & Approval</h5>
<div class="custom-wrapper">
<i class="fa fa-map-pin"></i>
<p> &demo123 game Security & jikoi Dept. Office</p>
</div>
<br>
<i class="fa fa-clock-o"></i>
<p>Monday – Thursday, 07:30 – 15:30</p><br><br>
</div>
I'm not sure if this has been asked to death already. But I can't find a way to grow content upwards.
You know how content behaves normally, extends downward, pushing content after down as the content above extends. Is there a way you can do this, but upwards?
Right now the code is ordered like this:
H1 - Title: needs to adjust if it breaks into two lines
p - Tags: needs to adjust height if it breaks to two lines and move the H1 up
p - Text: same as tags but move both tags and title upwards
p - Number: doesn't grow much, but needs to stick to the corner
p - Button: Never grows and needs to stick to the corner
edit 1: better image, yellow arrows show which ways content need to be able to grow, red shows space between each section.
edit 2: clarified question.
edit 3: edited image to signify that all elements stick to bottom and NOT top.
edit 4: added what I'm trying to avoid to image.
You can use Flexbox to achieve this. Make sure the height of the container is correct and then you can align all the elements to the bottom with flexbox. As the content grows, the container will fill upwards.
Here's another good resource on flexbox: CSS Tricks
--
Specifically in this example, if you set the container to be display: flex; with a flex-direction: column; then it will allow you to align the child elements vertically instead of horizontally like you do with floats.
Setting justify-content to flex-end is what aligns everything to the bottom. That's where the magic happens.
HTML
<body>
<div class="container">
<h1 class="title">TITLE</h1>
<p class="tags">Tags, Things, Stuff, More Stuff</p>
<p class="text">Non via nia sex praemissae spectentur contingere respondeam.
Has scriptis usu corporis physicae. Existentia lor perspicuum sub mutationum
agnoscerem vis advertatur. Multo in entis ad rebus tactu oculi ad. Ii in
innatis viderer me hominem at ipsemet. Vitro errem im is anima famam se istas.
Mea credendas ero persuasum sanguinem vox. Sequeretur uti aut frequenter vul
commendare describere. Ex superare aeternum ob connivet ac earumque co.
Physicae fenestra obturabo ii is se.</p>
<div class="bottom">
<p>Number</p>
<p>Button</p>
</div>
</div>
</body>
CSS
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.text, .bottom {
width: 100%;
}
.container {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
width: 100%;
height: 100%;
}
.bottom {
display: flex;
flex-direction: row;
justify-content: space-between;
}
You have to position the elements at the bottom of the page. Here is my solution:
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
html,
body {
width: 100%;
height: 100%;
}
body {
box-sizing: border-box;
padding: 2rem;
font: 1.6rem/1.4 Roboto, monospace;
}
#number,
#button {
position: absolute;
bottom: 2rem;
background-color: #4caf50;
color: #eee;
padding: 1rem;
}
#number {
left: 2rem;
}
#button {
right: 2rem;
}
#topWrapper {
position: absolute;
bottom: 7.24rem;
width: calc(100% - 4rem);
max-height: calc(100vh - 9.24rem);
overflow: auto;
}
#text,
#tags,
h1 {
background-color: #f44336;
color: #eee;
padding: 1rem;
}
#tags,
#title {
margin-bottom: 1rem;
}
#tags {
background-color: #2196F3;
}
#title {
background-color: #FF9800;
}
<div id="topWrapper">
<h1 id="title">Title</h1>
<p id="tags">Tag, Tag, Tag, Tag, Tag</p>
<p id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<p id="number">100,000</p>
<p id="button">Button</p>
You can also view it in this fiddle. Moreover, see how it behaves if the title is longer or if the tag list is longer. If the content becomes to much, a vertical scrollbar is added.
I need to display an image and some dynamic text inline within a Div.
The problem is when this text is too long the next line text start from the begibning of the Div rather than keeping left alignment of text same.
I want something like this. Thanks
I love to use the css background feature for this kind of task.
padding-left makes space for the image, so make sure to adjust that to your needs. Also you can control the image size with background-size.
.icon-box{
padding: 25px;
padding-left: 75px;
background-repeat: no-repeat;
background-image: url(https://www.gravatar.com/avatar/f087769399da5144ae10c892ae279490?s=32&d=identicon&r=PG);
background-position: 25px center;
background-color: #dedede;
}
<div class="icon-box">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="flex-container">
<div class="flex-item">
<img />
</div>
<div class="flex-item">
<p>This is the short or long text. Longer than shorter. Maybe.</p>
</div>
</div>
.flex-container {
display: flex;
flex-direction: row;
}
.flex-item {
align-self: center;
}
You can display an image and some dynamic text inline within a Div by use below code:
div.main{
border:solid black 1px;
display:table;
padding:5px;
width:100%;
margin:5px 0; /* you can change/remove margin */
}
div.main .image{
vertical-align:middle;
display:table-cell;
padding-right:5px;
width:50px; /* you can change width */
}
div.image img{
width:100%;
height:50px; /* you can change height */
vertical-align:middle;
}
div.your-text{
vertical-align:middle;
display:table-cell;
text-align:justify;
}
<div class="main">
<div class="image"><img src="your_iamge_link" /></div>
<div class="your-text">Type your text here. Type your text here. Type your text here. Type your text here. Type your text here. Type your text here. Type your text here. Type your text here.</div>
</div>
I'm using TYPO3 with a calendar extension (cal). It creates events and shows them as a list. Currently, it looks like that:
Now I want to have a border around the date, but just as big as the text.
This is the extension's template:
<div class="col-md-3 text-center" style="text-align:center;">
<div class="event-wrapper">
<div class="img-wrapper">
<div class="date-wrapper">
<div class="date" title="###MICROFORMAT_START###" class="dtstart"><span class="borderspan">###STARTDATE###</span></div>
</div>
<div class="image">###IMAGE###</div>
</div>
<div class="text-wrapper">
<div class="time">###STARTTIME######ENDTIME###</div>
<h3><!-- ###EVENT_LINK### start-->###TITLE###<!-- ###EVENT_LINK### end--></h3>
<p>###DESCRIPTION###</p>
</div>
</div>
</div>
Div with class "date" is the relevant part.
This template creates this code:
<div class="col-md-3 text-center" style="text-align:center">
<div class="event-wrapper">
<div class="img-wrapper">
<div class="date-wrapper">
<div class="date" title="20170118T210000" class="dtstart"><span class="borderspan">
<div class="day">18.</div>
<div class="month">Januar</div></span>
</div>
</div>
<div class="image"></div>
</div>
<div class="text-wrapper">
<div class="time">21:00 Uhr - 23:00 Uhr</div>
<h3>Frankfurt/Main</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takim</p>
</div>
</div>
</div>
I tried to give the class "borderspan" a border, but this didn't worked and looked like this afterwards:
How can I have a border around the date?
You could try using ::before and ::after like so:
.date-wrapper {
max-width: 200px;
background: orange;
text-align: center;
}
.date::before,
.date::after {
content: "";
width: 1px;
height: 25px;
background: black;
display: block;
margin: 0 auto;
}
.date {
margin: 25px 0;
}
<div class="date-wrapper">
<div class="date" title="###MICROFORMAT_START###">
<span class="borderspan">###STARTDATE###</span>
</div>
</div>
Also notice (like #Banzay mentions) don't use class="" twice per element.
Your date is a <div> element which is block element by default. Means it take up whole width available. We need to make it inline-block, so the width will be content related. Plus add some padding to make some space between the text and a border. I set the border width equal to your text-line width and color to match the text color. Take a look:
.date {
display: inline-block;
padding: 7px;
border: 7px solid #ea644f;
}
I am trying to create a drop down paragraph for my website.
It is similar to a drop down menu but a whole paragraph with centering and a font. I have seen a number of drop down menu's but they don't seem to support large text. The idea would be for a bar say:
===click here to read about====
and when you click it the paragraph will pop out underneath.
The plan is to have a few of them in order. This is to save website space.
So minimizeable paragraphs in HTML
I came upon your post looking for the same.
Here are some that are very nice that I have tried in case others come upon this post also:
'Pure CSS read more toggle': (with a clickable button as per your request): https://codepen.io/Idered/pen/AeBgF
'Readmore.js': http://jedfoster.com/Readmore.js/
And the one I went with:
'jQuery Read More/Less Toggle': https://codepen.io/maxds/pen/jgeoA
Some notes for the Read more/less for beginners (me):
1. The codepen exported zip file contains two sets of closing body and html tags.
2. html code counts as characters when setting how many characters to display in Show less box (index.js). Less by 6. After last text it will add: ...
3. In html inserting a !--comment after: span class="more" breaks it, at least for me.
4. To change link color of Show more/less for example in css:
a.morelink:link {color:#58534d; TEXT-DECORATION: none}
a.morelink:visited {color:#58534d; TEXT-DECORATION: none}
a.morelink:active {color:#f5f5dc; TEXT-DECORATION: none}
a.morelink:hover {color:#f5f5dc; TEXT-DECORATION: none}
$(document).ready(function() {
// Configure/customize these variables.
var showChar = 100; // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> ' + moretext + '</span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
.morecontent span {
display: none;
}
.morelink {
display: block;
}
<html>
<head>
<title>jQuery Read More/Less Toggle Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<span class="more">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<br><br>
<div class="more">
Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac habitasse platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
I recently was looking to do the same thing and discovered the magic word within a Weebly add-on: Accordion. There is a tutorial on this at W3 as well. I haven't tried it yet, but it may save others the trouble of finding workarounds, as you all seem to have. I didn't have the patience so I went looking for "drop-down faq" menu, which was what they had in Weebly (but you have to pay after you use a few lines, and then it's not as easy to style as you like), and was led to/reminded it was called "accordion." Hope it helps some of you! https://www.w3schools.com/howto/howto_js_accordion.asp
It works similar to other drop-down menus just with a paragraph inside. I made a jsfiddle about it: https://jsfiddle.net/nypo1qeu/
You can find the code here too:
<div class="Dropdown">
<button id="DropDown-Button">Hover me</button>
<div class="Dropdown-Menu">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
.Dropdown {
position: absolute;
display: block;
}
#Dropdown-Button {
position: relative;
display: block;
}
.Dropdown-Menu {
display: none;
background-color: green;
margin-top: 10px;
position: relative;
}
.Dropdown:hover .Dropdown-Menu{
display: block;
}
Let me explain the code for you:
I created a div container which is responsible for the trigger of the menu. If you hover over it, it shows you the paragraph.
The Button is just the graphical companion to the <div> trigger.
The second <div> container is responsible for the code which is kept in it. At default, it has the display: none property, but if you hover over the button, it gets the display: block property and you can see it.
Simple huh?
I hope I could help you. If you need more help, just ask. :)
thank you all for your help. What I managed to was use the code and tutorial from this link to help http://www.htmldog.com/techniques/dropdowns/
I was able to edit and chop and change. It was annoying because upper case transform was on so I got rid of it and you can play with making the drop downs absolute and copying and pasting the CSS but renaming it main_nav2 or something that way they don't overlap each other with the drop downs.
That way you can hover over it and the text will appear and you can make the drop down box a different colour. Its drop down now but I want it clickable
css:
#main_nav ul {
background: #f84445;
max-width: ;
float: left;
-webkit-transition: .5s;
transition: .5s;
}
#main_nav li {
float: left;
position: relative;
width: 450px;
list-style: none;
-webkit-transition: .5s;
transition: .5s;
inline-box-align:last
}
#main_nav > ul > li > a, h1 {
text-transform: ;
}
#main_nav a {
display: block;
text-decoration: none;
padding: 5px 15px;
color: #000;
}
#main_nav ul ul {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
opacity: 0;
}
#main_nav ul ul ul {
left: 100%;
top: 0;
}
#main_nav li:hover, #main_nav li:hover li {
background: #ddd;
}
#main_nav li li:hover, #main_nav li li:hover li {
background: #bbb;
}
#main_nav li li li:hover {
background: #999;
}
#main_nav li:hover > ul {
visibility: visible;
opacity: 1;
}
and html
<div ="left">
<tr>
<td><p> </p>
<nav id="main_nav"></nav>
<section id="main_content"></section>
<nav id="main_nav">
<p> </p>
<p> </p><p> </p>
<p><br>
</p>
<div align="center"><em>1</em>
<ul>
<li> </li>
</ul>
</div>
<ul>
<li>
<p align="center"><a href=""><br />
1 one/won.</a></p>
<p align="center"><a href=""><br />
</a></p>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<div align="center"><em>2</em>
<ul>
<li> </li>
</ul>
</div>
<ul>
<li>
<p align="center"><a href="">
2. Two, too or to</a></p>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<div align="center"><em>3</em>
<ul>
<li> </li>
</ul>
</div>
<ul>
<li>
<p align="center"><a href=""><br />
3, three or free</p></a>
</li>
</ul>
</li>
</ul>
here is a brilliant and efficient solution from Paul Obrien for a clickable dropdown paragraph. Only feature missing is to change the label text after a click. Anybody know how to make that magic happen?
https://codepen.io/paulobrien/pen/tpmAi
label {
display:block;
margin:20px 0 0;
border-bottom:1px solid green;
}
label:hover { text-decoration:underline }
input {
position:absolute;
left:-999em
}
.hide {
width:50%;
border:1px solid #000;
background:red;
max-height:99em;
opacity:1;
height:auto;
overflow:hidden;
transition:opacity 1.5s linear, max-height 1.5s linear;
}
.hide p {
padding:10px;
margin:0
}
input[type=checkbox]:checked + div {
opacity:0;
max-height:0;
border:none;
}
.follow{border-top:1px solid blue;margin:0}
html:
<div>
<label for="item-1">Toggle Div</label>
<input type="checkbox" name="one" id="item-1">
<div class="hide">
<p>Equation billions upon billions! Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death. Light years inconspicuous motes of rock and gas from which we spring something incredible is waiting to be known, muse about!</p>
<p>Equation billions upon billions! Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death. Light years inconspicuous motes of rock and gas from which we spring something incredible is waiting to be known, muse about!</p>
</div>
<p class="follow">Following content</p>