How to create self-contained borders in HTML? - html

I have
<div id="aboutPyKov">
<h2 id="pyKovSubheading">About PyKov</h2>
<p id="pyKovIs">Lorem ipsum dolor sit amet,<br/>consectetur
adipiscing elit.<br/>Vestibulum congue mattis odio.<br/>Nulla f
acilisi. Quisque tempus<br/>varius enim, quis mattis metus,
<br/>auctor quis. Lorem ipsum dolor sit<br/>amet, consectetur
adipiscing elit.<br/>Pellentesque a euismod sem, a<br/>convallis
turpis. Donec aliquet<br/>quis leo at fermentum. Maecenas<br/>ut
lacinia magna. Maecenas gravida<br/>interdum turpis non
fermentum.</p>
</div>
For styling, I have
#aboutPyKov {
border: 8px dotted rgba(255,198,107,0.93);
border-radius: 20px;
}
This works fine, however it shows a dotted border around the whole width of the whole page. I want it to be self-contained, but instead, it goes around the whole screen as you can see in this picture. How do I make it so it only goes around the text? Also, the top border is hugging the background color above it. I would also like to know how to change that.

This is CSS level 1: block and inline. Block elements take up 100% of available width unless you set them to float or set an explicit width. Either set the border to the paragraph element or set a width to your div.

Try adding padding = 0px" to your <p> tag and <h2> tag,
p, h2 {
padding: 0px;
}
because <p> and <h2> tags have default padding applied.

Just change the display attribute
#aboutPyKov {
border: 8px dotted rgba(255,198,107,0.93);
border-radius: 20px;
display:inline-block; // just change the display
}

Related

Apply css only on the wrapped part of text

I have an HTML component that has an image floating to the left and text on the right. When the text's height is larger than the image, the text will wrap to the left. I want to add some padding between the image and the wrapped text. I could add a bottom padding to the image, but I don't want the padding to show up when the text is not wrapped. Here is what the component should look like when the text is no wrapped. The image should not have a bottom padding:
Here is what it should look like when the text is wrapped. There should be some padding between the image and the wrapped text:
Is there a way to do this through css?
An idea in case the image height is fixed or known:
.container {
border:2px solid;
min-height:200px; /* same as image height */
font-size:19px;
}
.container img {
float:left;
margin:0 20px 20px 0;
}
<div class="container">
<img src="https://picsum.photos/id/1014/200/200" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum quis mi vitae molestie. Sed scelerisque fringilla interdum. Duis ac purus nisl. Nulla vehicula vehicula turpis id convallis. Etiam nec nisl nibh. Mauris lorem mauris, vehicula nec massa in, accumsan egestas eros. Integer vehicula nulla sed enim laoreet maximus. Vestibulum at interdum sem. Sed interdum volutpat massa,
</div>
Yes, you can do it. Follow this example for HTML and css.
body {
margin: 20px;
text-align: center;
}
img {
float: left;
margin: 0px 10px 5px 10px;
}
p {
text-align: justify;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>
Wraping an Image with the text
</title>
</head>
<body>
<div class="square">
<div>
<img src= "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1024px-Image_created_with_a_mobile_phone.png" alt="Longtail boat in Thailand" width="300px">
</div>
<p>
How many times were you frustrated while looking
out for a good collection of programming/algorithm
/interview questions? What did you expect and what
did you get? This portal has been created to
provide well written, well thought and well
explained solutions for selected questions.
An IIT Roorkee alumnus and founder of GeeksforGeeks.
He loves to solve programming problems in most
efficient ways. Apart from GeeksforGeeks, he has
worked with DE Shaw and Co. as a software developer
and JIIT Noida as an assistant professor. It is a
good platform to learn programming. It is an
educational website. Prepare for the Recruitment
drive of product based companies like Microsoft,
Amazon, Adobe etc with a free online placement
preparation course.
</p>
</div>
</body>
</html>

How to inline a textarea with a label so that the textarea keeps its normal flow and wraps around the label

I've searched for similar questions but none seem to address this specific issue, what I'm trying to do is accomplish something like this:
Label -------------------
-------------------------
-------------------------
where the "Label" is the actual label and the "-" represents my text area, I've tried everything from floats to inline the elements but I just can't figure this out, is there a way to accomplish this without having the label to be absolute therefore hiding the text when the textarea is scrollable?
I Don't know about doing this with a <textarea> without involving JS, But you can always use contenteditable
div[contenteditable] {
border: 2px solid;
font-size: 1.2em;
width: 200px;
height: 200px;
}
[contenteditable]>span {
color: orange;
}
<div contenteditable>
<span contenteditable="false">Label:</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae rhoncus felis, vel auctor tortor. Nunc porttitor arcu eget luctus feugiat.
</div>
There's room for improvements still and require management of course.

Applying background color for paragraphs having -ve text indent

In one of my html page i have paragraph tags like shown below.
<P style="MARGIN-LEFT: 0.5in; BACKGROUND-COLOR: #656565;TEXT-INDENT: -0.25in; TEXT-ALIGN: justify;" >my text here</P>
In vb6 web browser control we load these pages and highlight background colour according certain conditions. It was working properly for all text and html elements. but for paragraphs having TEXT-INDENT with -ve value it does not work properly and highlight will not be complete and it will not highlight starting .25 in of text. So how it can be highlighted? in below picture first one is the error case(with text-indent) and second one is without indent.
So now how to apply background color for those text even if text indent is specified?
You cant do this in the way you may anticipate, but you can reduce the margin and add padding to the element by the amount relating to the indent value specified.
Demo Fiddle
<P style="MARGIN-LEFT: 0.25in; BACKGROUND-COLOR: #656565;TEXT-INDENT: -0.25in;padding:0 .25in; TEXT-ALIGN: justify;" >my text here<br />more text here</P>
Note that you should always try to use lowercase characters for your CSS, and favour using stylesheets instead of inline values.
HTML
<p>
my text here
<br />
more text here
</p>
CSS
p {
margin-left: 0.25in;
background: #656565;
text-indent: -0.25in;
padding:0 .25in;
text-align: justify;
}
if you want first-line a bit wider than other, you may use an absolute tag or pseudo of 0.25in width and average 1.2em height.
DEMO
p{
margin-left: 0.5in;
background-color:#656565;
text-indent:-0.25in;
text-align:justify;
box-sizing:border-box;
}
p:before {
content:'';
height:1.4em;/* average height of a line , to reset to match line-height if set on parent */
width:0.25in;/* at least equal to negative indent */
position:absolute;/* but no coordonates, let it follow text flow */
z-index:-1;/* under text plz*/
background-color:#656565; /* value can be inherit */
}
Ideally, you can't do it to the <p> itself. You have to create a container for it and then do so. It is always best when you wrap elements inside divs. It's good site architecture practice.
Here is a DEMO
And here's the code
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
</div>
.box{
background-color:#656565;
width:600px;
height:100%;
padding: 10px 30px 10px 0px;
}
p{
margin-left: 0.5in; /* WHY INCHES? CAN YOU DO EM OR PX? */
text-indent:-0.25in;
text-align:justify;
box-sizing:border-box;
}

CSS: Align image right bottom of a div filled with text

I'm making myself a website but I'm a little stuck on an issue I am having.
Inside a div I have a block of text with variable height.
At the right side of the text I want to position an image width a variable width & height. It has to be aligned to the bottom
Above the image may not come any text.
It needs to be like this: https://www.dropbox.com/s/pqpttrvefrvci52/example.jpg
Here is the code I'm currently having:
HTML:
<div id="section">
<div id="image">
<img src="example.jpg" alt="image"/>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.
Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.
</p>
</div>
CSS
#section {
position: relative;
}
#image {
float: right;
margin-left: 20px;
position: absolute;
bottom: o;
right: 0;
}
With this code the image is aligned to the bottom right corner of the div, but the height of the div is lower then the height of the image.
Also the text just goes through the image.
you need a couple of things to fix this.
1) add padding-right to the section so it does not overlap with the image.
#section {
position: relative;
padding-right:<at least image width so the text doesn't overlap>
}
2) when you add a div and float in it, the float remove the image from the flow of the document so you need to add another internal div with the same height or make the height of the div the same height as your image or just add a floater div..
<div id="image">
<img src="example.jpg" alt="image"/>
</div>
<div style="clear:both"></div>
</div>
Here is a working solution: http://jsfiddle.net/zV3wm/
I can think of a way with variable image widths and text amounts, but it requires some duplication in the markup.
The gist is that you right-float a hidden version of the image, and then use overflow:hidden so that the paragraph against the float doesn't flow under it. Then, we use absolute positioning to place the non-hidden version of the image at the bottom of the container.
I have prepared a mockup at http://jsfiddle.net/UmGNZ/ (I have given the hidden image partial opacity, so you can see where it's being added to the document), but for a pseudo-HTML example:
<container with position:relative>
<right-float>
<hidden img tag with opacity: 0 />
<actual img tag with absolute positioning, bottom: 0, right: 0 />
</right-float>
<p with overflow:hidden (or auto) />
</container>
You could also try a pure CSS solution using CSS tables if you don't have to support IE7, but otherwise this should work down to IE6 if you use visibility:hidden in favour of opacity, and add a zoom:1 to the paragraph style.
This idea which allows a flexible image size: http://jsfiddle.net/David_Knowles/F3zZU/4/
.cell {display:table-cell;}
#section {
position: relative;
width:300px;
}
#image {
vertical-align: bottom;
}
<div id="section">
<div class="cell">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.</p>
</div>
<div id="image" class="cell">
<img src="http://placeimg.com/120/80/any" alt="image"/>
</div>
</div>
I dont thing I am correct but you can achieve that by float right and margin-top.
#img {
float: right;
margin-top: -140px;
}
Check this out: http://jsfiddle.net/wrujx/
I think best solution is to use a little bit of jQuery (JavaScript) and let each part do its job keeping it as simple as possible. Here's what you'd have:
HTML
<div id="wrapper">
<p>yourtexthere</p>
<img src="whatever.jpg"/>
</div>
CSS
#wrapper{
width:600px;
border:1px solid #000000;
}
p{
display:inline-block;
margin-right:20px;
}
img{
vertical-align:bottom;
}
jQuery
var parentWidth = $('#wrapper').width()
var imgWidth = $('img').width()
$('p').width((parentWidth - imgWidth) - 20)
And there you go plain and simple without extra tags and messy positioning.

Place 'floating' contents at the bottom right of a paragraph of text

Here is the code: http://jsfiddle.net/ym2GQ/
p {
background: lightblue;
}
.end {
background: orange;
float: right;
display: inline;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing orci at tortor bibendum suscipit et eu eros. Nunc congue, ante nec egestas fringilla, ipsum est porttitor leo, tempus lacinia augue erat posuere elit.
</p>
<div class="end">$$</div>
I want the floating $$ to be within the paragraph before it. It should align with the lasts line in the paragraph but it should be floated to right.
How can this be done? Please note that I have to solve this problem under the constraint that I can not float the paragraph element that comes before the div element. I can do whatever I want with the DIV element though. I can also move around the DIV element to some other part of the code if necessary.
Given your new information that you want it at the bottom right of the paragraph, see this live example: http://jsfiddle.net/AGEus/1/
In short:
Make the <div> a <span> and place it as a child of the paragraph.
Make the paragraph position:relative (so that it establishes its own coordinate system)
Put some padding in the paragraph on the right side so that the contents of .end won't overlap the text.
Absolutely position and size the .end to the bottom right of the paragraph.
HTML:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
<span class="end">$$</span>
</p>
CSS:
p { position:relative; padding-right:2em }
p .end { position:absolute; right:0; bottom:0; width:2em }
​
Replacing the DIV with a SPAN, and moving the inside the P seems to work. You can optionally set the SPAN to inline-block depending on the contents.
If you put the SPAN before the text, it will be near the top. If you put it after, it will be at the bottom.
demo
Ok, played with your code and found the solution. You need to set the p tag to display: inline and float the div to the right. I updated your fiddle for you.
If I understand you right, you want that the div is displayed over your paragraph.
For that you could just set the div to position absolute and set the exact position with top, left, right, bottom.