I've got a problem with setting the width of <hr> elements. I mean I want my <hr> to be displayed half of the full width like this image:
As you can see the <hr> element is between the <h1> tag and paragraph and it's half of screen full width.
I have searched and all I got was to setting the <hr> element like this:
<hr size="30">
But that just does not work. So do you know how to set the width of <hr> element?
Set the style attributes of the hr element in css
hr {
width:50%;
margin:0 auto;
}
hr.half-width{
width:50%;
margin: 0 auto;
}
Then add class="half-width" to the hr element.
You can do the following things
Move <hr /> inside title element [<h2> in this example]
Add padding-left:25% and padding-right:25% to title element
Add text-align:center to title element
h2{
font-size:50px;
padding:0 25%;
text-align:center;
}
h2 hr{ width:100%;height:10px;background:#000;}
<h2>
This is a very big title
<hr />
</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
Hope it helps.
Fortunately, there is an attribute for this, the only thing you need to do is use the following attribute. In this case, I am going to it a width of 75%. I hope that it'll be helpful to you
<hr width="75%">
try adjusting font size of your hr tag
hr{
font-size: 1.5em;
}
It seems that is not the hr tag. probably it's the border bottom for the span container the text. so the width of the span will define the line width. use padding for the span to adjust the line-width.
I did a search and it seems this is the theme you are using: https://theme.co/x/
You can do like this also
hr {
margin: 0rem 10rem 0rem 10rem;
}
Related
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>
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
}
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;
}
<br> won't let me to display 3 buttons inline, so i need to disable it inside div, and I can't just delete them, they are automatically there.
I have:
<div style="display:block">
<p>Some text</p>
<br>
<p>Some text</p>
<br>
</div>
and I want:
<div style="display:block">
Some text Some text
</div>
More info
I do not want to have mystyle.css file.
Of course I know that way of disabling it.
I asked how to add to divs style this br { display: none; } if it is possible.
Solution:
It is not possible to remove just <p> tags without removing content inside.
It is not possible to hide <br> directly by divs style, so I make it this way:
<style type="text/css">
.mydiv {
display: block;
width: 100%;
height: 10px;
}
.mydiv br {
display: none;
}
</style>
<div class="mydiv">
Some text
Some text
</div>
http://jsfiddle.net/cGT4E/
You could alter your CSS to render them less obtrusively, e.g.
div p,
div br {
display: inline;
}
http://jsfiddle.net/zG9Ax/
or - as my commenter points out:
div br {
display: none;
}
but then to achieve the example of what you want, you'll need to trim the p down, so:
div br {
display: none;
}
div p {
padding: 0;
margin: 0;
}
http://jsfiddle.net/zG9Ax/1
or hide any br that follows the p tag, which are obviously not wanted
p + br {
display: none;
}
I used this and it had the effect of removing the line break and showing it as a space between words. I think this is closer to what you were looking for.
br {
display: inline;
content: ' ';
padding: 0 3px;
}
<p style="color:black">Shop our collection of beautiful women's <br> <span> wedding ring in classic & modern design.</span></p>
Remove <br> effect using CSS.
<style> p br{ display:none; } </style>
I came across the same problem and solved it with display: contents
Here is the demo:
.wrapper {
background: #EEE;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}
.wrapper * {
display:contents;
}
<div class="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br/>
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br/>
Pretium lectus quam id leo in vitae turpis massa sed. Lorem ipsum dolor sit amet consectetur adipiscing elit.<br/>
Sagittis id consectetur purus ut faucibus pulvinar elementum. Netus et malesuada fames ac turpis egestas sed.<br/>
Eget duis at tellus at.
</p>
<p>
Faucibus vitae aliquet nec ullamcorper sit amet risus. Tortor condimentum lacinia quis vel eros donec ac.<br/>
Tellus in hac habitasse platea dictumst vestibulum. Aliquam id diam maecenas ultricies. Tortor id aliquet lectus proin nibh nisl condimentum id.<br/>
Sed enim ut sem viverra. <br/>
Morbi tristique senectus et netus et.
</p>
</div>
So according to MDN,
These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.
What makes it worthy, (again taken from MDN)
Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements"
Here CSS Display Level 3 spec says, certain elements are rendered as display: none if display:contents applies to them:
<br>
<wbr>
<meter>
<progress>
<canvas>
<embed>
<object>
<audio>
<iframe>
<img>
<video>
<frame>
<frameset>
<input>
<textarea>
<select>
display: contents computes to display: none.
(source: https://drafts.csswg.org/css-display/#unbox)
You can usedisplay:contents, but avoid accessibility problems to apply this only on br tags:
br {
display:contents;
}
see https://developer.mozilla.org/en-US/docs/Web/CSS/display-box
[display:contents;] most browsers will remove from the accessibility tree any element with a display value of contents. [...] no longer be announced by screen reading technology.
I used it like this:
#media (max-width: 450px) {
br {
display: none;
}
}
nb: media query via Foundation
nb2: this is useful if one of the editor intend to use tags in his/her copy and you need to deal with it specifically under some conditions—on mobile for example.
I see people commenting just to remove from the html, but if you want to remove it only from certain type of #media screens, then this is the way to go:
div br {
display: none;
}
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.