create a line break within a div - html

I will have 3 icons side by side that will float left when the window shrinks. Under each icon, I'd like to add some text. I can pretty much get it as you can see below.
.icons {
BORDER-TOP: black 1px solid;
HEIGHT: 100px;
BORDER-RIGHT: black 1px solid;
WIDTH: 100px;
BORDER-BOTTOM: black 1px solid;
FLOAT: left;
BORDER-LEFT: black 1px solid
}
<div class="icons">div 1</br><a>some text</a></div>
<div class="icons">div 2</div>
<div class="icons">div 3</div>
In jsfiddle, this </br> tag seems to come up as invalid. Is there a valid and / or better way to accomplish this?
http://jsfiddle.net/kp950/mum68pwv/

Just apply display: block to your text elements.
a { display: block; }
The will force each element to consume the full available width of the container, and subsequent elements to the next line.
http://jsfiddle.net/mum68pwv/4/

You're getting an error thrown in jsfiddle due to your linebreak syntax being wrong.
You're using </br> when you should be using <br/>
2020/HTML5 EDIT
You no longer need to use self-closing tags in HTML5 (though browsers can still handle them), instead you can simply use <br>.

Instead of </br> use <br> or <br />
<br /> is a valid tag whereas </br> is not so.
Use :
<div class="icons">div 1
<br>some text
</div>
<div class="icons">div 2<br>some
<br>some text
</div>
<div class="icons">div 3
<br>some text
</div>
P.S.
<a> is anchor tag and it is not a good option for adding little elements to your webpage. Instead use <span> tag which will be more efficient.

You have a syntax error in your <br> tag
So this
<div class="icons">div 1</br><a>some text</a></div>
should become
<div class="icons">div 1<br><a>some text</a></div>

Related

Somewhat new to html and css

I´ve been working with Html for a bit these last 2 weeks and just started css today. I understand some of the basics of css (some of the elements and how to make the code look neater) but there are a few things i dont quite understand and haven´t been able to find so far. Such as making an image smaller for example. Can anyone explain to me why this css code isn't working?
h1{
Color: #8a1319
}
.name {
color: #ba454b;
}
/*help with this part please? Cant figure out how to properly make it smaller*/
.joke{
border: 2px solid red;
max-height: 250px;
width: 50%;
}
body {
text-align:center;
background: powderblue
}
<div class="name">
<h1>Dylan Carlson</h1>
</div>
<section>
<h1 class="title">
website
</h1>
<p>
<div class=joke>
<img src=http://www.jeremychin.com/repository/tickled/0355.jpg class=image />
<div>
<br>
<br> Age: 17
<br>
<br> Grade:12
<br>
<br> Intrest: programming
<br>
<br> extra curricular: N/A
<br>
<img src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSJjXu1Ulhi3ExUJYOsgRxEcXywik5FG2B-ouj4E3RqgDIARssdQ>
</div>
</p>
<p>
Favorite Icecream: IDFK
<br>
<br>
Favorite color: Gold/Black
</p>
</section>
Remove the DIV around the image and add joke to the class:
<img src="http://www.jeremychin.com/repository/tickled/0355.jpg" class="joke">
Since you had joke as a class of the DIV, it applied to the DIV and NOT the IMG. Thus, the max height of the DIV was 250px and since the picture was larger, it overlapped.
A bit of advice: Keep CSS at the lowest level you can (the IMG in this case and not the DIV).
You are editing the image's parent div, that's why it's not working. Use the image's class instead.
.image{
border: 2px solid red;
max-height: 250px;
width: 50%;
}
Css is not for creating things on the browser it is for styling elements. Ii is used to make things look as desired. The code as per your question will make a div (if styled on to) have a border with 2px in size with red colour and the div would be having width 50 percent as per the availability space and a maximum height of 250px

Break not working in <p> tag

I am struggling to get a break to work in my code. The break is not being recognised at all and just displays all text in one line.
I have tried a combination of using divs, spans and p tags, but still the same problem. I can only assume that the code i am using is illegal. I would be grateful if someone could clarify where I am going wrong. Thanks
<div class="message">
<div style="margin-top: 5px; font-size: 24px;">
ALERT
</div>
<p>Landscape mode has been disabled in the app<br>
Please continue by turning your device to protrait<br>
Thank you
</p>
</div>
You probably have display:none on all <br>. If using this doesn't work:
br {display:block}
try using JavaScript to override any display properties on all <br>
Demo
var brArray = Array.from(document.querySelectorAll('br'));
brArray.forEach(function(brk, idx) {
brk.style.display = 'block';
});
/* There's a possibility thisproperty might be somewhere */
p {
white-space: nowrap;
}
/* More than likely this is the culprit */
.message br {
display: none;
}
<div class="alert message">
<div style="margin-top: 5px; font-size: 24px;">
ALERT
</div>
<p>Landscape mode has been disabled in the app <br>Please continue by turning your device to protrait<br> Thank you
</p>
</div>
<p>Click the text above</p>
OPTION 1: Add one more <br> in the second line.
The primary purpose of <br> is to insert a single line break. And this is how it is exactly working in your code. If you need an empty line above Thank You, just add one more br>.
<div class="message">
<div style="margin-top: 5px; font-size: 24px;">
ALERT
</div>
<p>Landscape mode has been disabled in the app<br>
Please continue by turning your device to protrait<br><br>
Thank you
</p>
</div>
OPTION 2: You can wrap your text inside <pre> tag and style it
accordingly.
.no-format{
font-family: initial;
}
<div class="message">
<div style="margin-top: 5px; font-size: 24px;">
ALERT
</div>
<pre class="no-format">Landscape mode has been disabled in the app.
Please continue by turning your device to protrait.
Thank you
</pre>
</div>
In my case I have applied the following style to my label:
white-space: pre-line;
#divWithPreline {
white-space: pre-line;
border: solid 2px red;
}
#divWithoutPreline {
border: solid 2px blue;
}
<div id="divWithPreline">
This is a div
whose content has line breaks
and the <b>white-space pre-line</b> has been applied
</div>
<br>
<div id="divWithoutPreline">
This is a div
whose content has line breaks
and <b>no styling</b> has been applied
</div>

How to place text below boxes

I have placed two boxes next to each other and now I want to place some text directly underneath the boxes. The HTML/CSS I have so far keeps placing the text in the top right corner of the right hand box. Any suggestions?
<div id="one-off-pricing" style="width:800px;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
</div>
</div>
<span style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span>
</div>
Use display: inline-block; on <span>.
Like:
span {
display: inline-block;
}
Have a look at the snippet below:
span {
display: inline-block;
}
<div id="one-off-pricing" style="width:800px;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
</div>
</div>
<span style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span>
</div>
Hope this helps!
Here's a better version, with the actual boxes next to eachother, instead of inside eachother and moved via margins.
<div id="one-off-pricing" style="width:800px; overflow: hidden;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float: left;margin-top:20px;">
</div>
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;display: inline-block;margin-top: 20px;">
</div>
</div>
<p style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</p>
Try this
<div id="one-off-pricing" style="width:800px;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
</div>
</div>
<span style="font-weight:bold;clear:both;display:block;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span>
</div>
Try this (and see the notes and explanations below):
.one-off-pricing {
width: 800px;
}
.one-off-pricing div {
display:inline-block;
width:370px;
height:400px;
border:1px solid #cecece;
}
p {
font-weight:bold;
}
<div class="one-off-pricing">
<div></div>
<div></div>
<p>*If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</p>
</div>
1) Why put all the inline CSS in a stylesheet?
It massively helps with scaling and maintenance.
2) Why use a class for "one-off-pricing" instead of an id?
When CSS selectors start to get long and complex, ids in long chained selectors can mess things up. For this reason it's often (not always but often) better to use a class instead of an id.
3) Why use <p> instead of a <span>?
Because the element in question is best described as a paragraph.
4) Why use display:inline-block instead of a float?
Because you simply don't need floats in this situation.

Convert whole div which contains anchor tags into a link

<div style="height: 100px; border: solid; border-width: 2px; border-color: #000">
Box 1
<p>A</p>
</div>
I want to convert the div into a link. Note that div includes an anchor tag. What is the best way to do it.
Following code doesn't work. But that's the rough idea to my problem.
<a href="/x">
<div>
Box 1
<p>A
</p>
</div>
</a>
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).— W3C Documentation
The anchor element may not contain any interactive content. This includes other anchors. This is one of the more strict rules too. It not only goes against spec, but it completely breaks functionality in major browsers. Chrome alone parses your example to include four links!
You'll need a preprocessing language to alter the markup (server side language or javascript on the front end manipulating ajax return data), or you'll just have to manually change the HTML. Either way, in the end, you'll need to switch that inner anchor out with a span or some other non-interactive element.
I have found a useful jsfiddle for you that uses <a class='default-link' href='javascript:void(0)' onclick='window.location = "http://www.google.com"'</a> for the actual <div>'s link, and then has independent links within this.
Click here to see the jsfiddle
You can simply add display: block; and use the height you need it will do the trick !
DEMO
or you can use inline javascript as that
<div style="height: 100px; border: solid; border-width: 2px; border-color: #000; cursor: pointer;" onclick="window.location='/a'">
Box 1
<p>A
</p>
</div>
The following code is worked for me. But I don't know it's a valid one even with HTML5.
<a style="display:block" href="/a">
<div style="border: solid; border-width: 1px; border-color: #FFF">
<div>
<h3>Heading</h3>
</div>
B
C
</div>
</a>

Click the Text in a Div and Type to change It

Here is my HTML:
<div class="div1" id ="div1" onclick="onStepClicked()" style ="text-align:center">Step 1</div>
Here is my CSS:
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
I'm trying to do something like Google does and when you click the text it allows you to edit it. I don't know if there is something in css or in the Div itself for me to be able to do this.
You can use contenteditable to edit make the text or div editable.
HTML:
<div contenteditable="true">This is an editable text.</div>
Contenteditable
you can add contenteditable="true" attribute to your div.
Reference: http://html5doctor.com/the-contenteditable-attribute/
Why don't you just use an input element like so?
<input type="text" placeholder="type some text here"/>
Hi you should contenteditable attribute which is one of cool html5 features
http://www.w3schools.com/tags/att_global_contenteditable.asp
This is a paragraph. It is editable. Try to change this text.