When I place a border on the right of the text the border is always at the very right of the page, not to the right of the text.
I've removed the default border properties of the browser and the result is still the same.
On the code pen the third result is what I want but with the border on the right.
Example: http://codepen.io/twig941/pen/zoqEXx
Code:
<div class = "logo">
The Three Words
</div>
<br>
<br>
<br>
<br>
<div class = "ideal-logo">
The
<br>
Three
<br>
Words
</div>
<div class = "ideal-left">
The
<br>
Three
<br>
Words
</div>
.logo {
border-right: 10px solid black;
}
.ideal-logo {
border-right: 5px solid black;
}
.ideal-left {
border-left: 5px solid black;
}
Use display: inline-block; on .logo & .ideal-logo. Currently they are block elements that is why they are flowing end-to-end.
Here is the snippet, have a look:
.logo {
display: inline-block;
border-right: 10px solid black;
}
.ideal-logo {
display: inline-block;
border-right: 5px solid black;
}
.ideal-left {
border-left: 5px solid black;
}
<div class = "logo">
The Three Words
</div>
<br>
<br>
<br>
<br>
<div class = "ideal-logo">
The
<br>
Three
<br>
Words
</div>
<div class = "ideal-left">
The
<br>
Three
<br>
Words
</div>
Hope this helps!
A <div> is a block, which by default spans the entire width of the page. Thus the right edge of each <div> is the right side of the screen, and the rest is empty space.
Using display: inline-block; will make the <div> shrink-wrap around its contents. (This will also allow it to sit on the same line with text and other elements, so you might need an extra wrapper if you still want an overall block.)
This happens because you are actually applying border on <div> and div is a block element you could try setting border to paragraph ` and it will work
html
<div class = "logo">
<p>The Three Words</p>
</div>
css
p
{
border:10px dashed #000;
}
What you could also do is set a width to div and set a border around it but that is quite in-
efficient
Use display: inline-block.
The pen
.logo {
border-right: 10px solid black;
display: inline-block
}
.ideal-logo {
border-right: 5px solid black;
display: inline-block;
}
.ideal-left {
border-left: 5px solid black;
}
<div class = "logo">
The Three Words
</div>
<br>
<br>
<br>
<br>
<div class = "ideal-logo">
The
<br>
Three
<br>
Words
</div>
<div class = "ideal-left">
The
<br>
Three
<br>
Words
</div>
Related
In my Angular project, I have a div with 3 child elements which are a span, an i element (icon) and a span with innerHTML attribute. Normally, all texts should be in the same line, but innerHtml code always starts with p and I can do nothing about it, so this causes a problem. Any suggestions?
This is my output:
<div style="border: 1px solid #DDD; padding: 3px; width: 50%; margin: 0 auto;">
<span>2020.07.10</span>
<i>icon</i>
<span><p>This is an example text. This is an example text.</p></span>
</div>
This is desired output:
<div style="border: 1px solid #DDD; padding: 3px; width: 50%; margin: 0 auto;">
<span>2020.07.10</span>
<i>icon</i>
<span>This is an example text. This is an example text.</span>
</div>
<p> is a block element and you covered it by span(inline). Add style="display: inline;" to <p> element. Browsers automatically add a single blank line before and after each <p> element.
<div style="border: 1px solid #DDD; padding: 3px; width: 50%; margin: 0 auto;">
<span>2020.07.10</span>
<i>icon</i>
<span><p style="display: inline;">This is an example text. This is an example text.</p></span>
</div>
It's not clear what you mean by "innerHtml code always starts with p and I can do nothing about it."
If you entered this markup yourself, you can just omit the p tag.
If you are getting this html from a CMS or database, and you can do nothing about the p tag that's in there, then:
Your question maybe should include the binding, not just the output.
You can let the p tag exist, but add CSS to make it do nothing. In the snippet below, I replaced your inline styles with a CSS class "myDiv", and put in a rule to render the p tag useless.
.myDiv {
border: 1px solid #DDD;
padding: 3px;
width: 50%;
margin: 0 auto;
}
.myDiv span p {
display: inline;
}
<div class="myDiv">
<span>2020.07.10</span>
<i>icon</i>
<span><p>This is an example text. This is an example text.</p></span>
</div>
For example, let's say my code looks like below.
Same from css all divs vs direct child divs but, need in SASS.
<div class="Root">
<div>ddddddd</div>
<div>
<div>pppppppppp</div>
<div>pppppppppp</div>
</div>
<div>ddddddd</div>
</div>
I want to put borders on the divs that contain ddddddd, and I want to set the text color on all divs to green.
There are two rules:
I can't add class attributes.
I have to write selectors that start with .Root.
Any Ideas?
It could be like this (SASS):
.Root
padding: 1em
color: green
> div:not(:nth-of-type(2))
border: 1px solid red
which compiles to:
.Root {
padding: 1em;
color: green;
}
.Root > div:not(:nth-of-type(2)) {
border: 1px solid red;
}
<div class="Root">
<div>ddddddd</div>
<div>
<div>pppppppppp</div>
<div>pppppppppp</div>
</div>
<div>ddddddd</div>
</div>
Also the last <div> should be </div>.
I am having trouble with the styling of my webpage. I am using create-react-app repo for my react boilerplate and react-bootstrap repo for my react bootstrap.
Whenever I use a <p></p> in my page, it centers the text for me and I can't find any parent div that has this sort of styling for the paragraph in my code. Here's the code for the page.
class App extends Component {
render() {
return (
<div>
<div className="container">
<div className="col-lg-12">
<div className="col-lg-5">
<img className="img-responsive img-circle" src="http://placehold.it/120x120" alt=""/><br />
<h3 className="lead text-justify text-white">
Gulshan Jubaed Prince<br />
<span>Partner, Techynaf</span>
</h3>
<p>Test paragraph.</p>
</div>
<div className="col-lg-7"></div>
<div className="col-lg-3">
<div className="well"></div>
</div>
</div>
</div>
</div>
);
}
And here's the output on the web browser. I have added box borders in my style sheet for debugging purposes.
.container - white box
h3 - yellow box
h3 span - green box
h3 + p - red box
Note that the paragraph (enclosed in red border) is displayed outside of the .container div (enclosed with white box) even though the .container is containing the <p></p> tags.
And here's the styling for the box borders (might not be important for the question):
h3 span{
font-size: 17px;
font-weight:lighter;
color: #CCC;
font-style: italic;
border: 1px solid green;
}
.container{
border: 2px solid white;
}
h3 {
border: 1px solid yellow;
}
h3 + p {
border: 1px solid red;
}
I want the Test Paragraph to be inside the .container div and right underneath the text Parter Techynaf
Please include
clear:both;
float:left;
in your css
Please try this:
.container{
overflow:hidden;
}
I have a set of HTML elements that I need to style, which I can't change the structure of in any way (yeah, I know).
The HTML has a div that contains two nested spans. The div has padding and the overflow is hidden. The width of the div is set programatically and applied as an inline style.
I would like the text contained within the inner span to be clipped, but still retain the right hand padding as specified on the containing div.
After some research, it appears that the standard approach to this is to use a second nested div but, as I mentioned, I can't change the structure of the HTML.
Currently I have:
<!-- This is what I have to work with (I can't change the structure of this HTML!) -->
<div class="c1" style="width: 100px;">
<span class="c1-inner">
<span class="c1-inner-2">
122333444455555666666777777788888888999999999
</span>
</span>
</div>
<!-- This is how I want the HTML above to display -->
<div class="c2" style="width: 100px;">
<div class="c2-inner">
122333444455555666666777777788888888999999999
</div>
</div>
Styled by the following CSS:
.c1 {
border: 1px solid red;
border-radius: 4px;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
overflow: hidden;
}
.c1-inner {
// No relevant styles here yet
}
.c1-inner-2 {
// No relevant styles here yet
}
.c2 {
border: 1px solid red;
border-radius: 4px;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
}
.c2-inner {
overflow: hidden;
}
A jsFiddle is available here
I need to style the top "button" so that it looks like the second one only using CSS. I have reached the limits of my CSS skills and any help would be very much appreciated.
A simple fix. Most important bit: you can make a span have a display value of block rather than inline, which is its default.
Here's the relevant CSS you need and a working example:
.c1 {
border: 1px solid red;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
}
.c1-inner {
overflow: hidden;
display: block;
}
.c2 {
border: 1px solid red;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
}
.c2-inner {
overflow: hidden;
}
We want this<br>
<!-- This is what i Have to work with -->
<div class="c1" style="width: 100px;">
<span class="c1-inner">
<span class="c1-inner-2">
122333444455555666666777777788888888999999999
</span>
</span>
</div>
<!-- This displays how i want the html above to display -->
<br>
to look like this<br>
<div class="c2" style="width: 100px;">
<div class="c2-inner">
122333444455555666666777777788888888999999999
</div>
</div>
<br>
but cannot change the structure of the html!
I'm doing some formatting on a webpage and I'm wondering if it's possible to save a chunk of html code as a class and reuse it.
For example:
I want to change this -
<div>
<hr>
<p>Item 1</p>
<a href="oh.jpg" />
<hr>
</div>
<div>
<hr>
<p>Apple</p>
<hr>
</div>
To this -
<div class="section">
<p>Item 1</p>
<a href="oh.jpg" />
</div>
<div class="section">
<p>Apple</p>
</div>
With the same end result of being contained within two horizontal rules.
Is there a way of making a class that isn't just for styling but contains HTML code as well?
The closest thing to what you're describing is the CSS pseudo-elements :before and :after. You can't insert HTML, but you can insert text or images, or a simple rectangle with content:"";display:block;. With some creativity you can pull off a lot of effects with just CSS.
So while you can't insert an actual <hr> with CSS, you can psuedo-elements to draw one with whatever styles you please:
.section:before {
content: "";
display: block;
height: 2px;
border: 1px inset #000;
border-width:1px 1px 0 0;
}
.section:after {
content: "";
display: block;
height: 2px;
border: 1px inset #000;
border-width:1px 1px 0 0;
}
If you absolutely need to add HTML, you can use Javascript to find all elements with class .section and append child elements.
you can use CSS
.section{
width : 100%;
border-bottom: 2px solid #ccc;
margin-top : 5px;
}