I am working on an educational page, I have faced a problem I can't really figure out how to solve. As you can see here: jsFiddle the yellow box is much larger than the blue border on the left, I need that blue border to go all the way down with the yellow box (mail example), like the dotted orange border on the left. Is there any way to solve it with CSS, and HTML?
There's tons of errors in your code.
You must not give more than 1 element the same ID: #col-2.
You have given a div the class .example, and then you gave its child paragraphs the same class, so you gave each paragraph a height, so the parent took that height, that's why the border isn't stretching, because this element only has 32px height.
So...
.example {
/* background-image: url(../images/note_bg-line.jpg) repeat-y; */
background-color: yellow;
}
Then give the paragraphs another class which has 32px height.
You specified the paragraphs like this...
<p class="p example"></p>
Remove this p example and just use this in CSS:
.example p {
padding-top: 19px;
padding-left: 70px;
margin: -19px 0 0 0;
height:32px;
}
You will get the desired effect...
Playing with the height of the example-container class does the trick. As you want it to go all the way down like the orange border, height: 295px; works.
http://jsfiddle.net/xbcBz/1/
.example-container {
border-left: dotted 5px #2491F5;
padding:5px;
height: 295px;
}
Related
I want to add padding in my hr,
hr {
padding-left: 200px;
}
but it's not working. how to add padding in my hr ?
Padding does not work in hr.
You have to use margin instead:
hr {
margin-left: 200px;
}
And it'll work.
Before adding padding, you should have to set a width for your hr otherwise it will display in full width.
hr:first-of-type{
width: 100px;
padding-left: 10px;
}
hr:last-of-type{
width: 100px;
padding-left: 50px;
}
<hr>
<hr>
Thanks and best regards!
HR is slightly different from most HTML tags in its defined behaviour, as it tries to fill up the whole width of the containing element.
The only way I know to stop it expanding over any margins is to explicitly set a width attribute
hr {
width: 90%;
padding-left: 200px;
}
Even then, it seems to ignore the padding, so you should use a margin instead:
hr {
width: 90%;
margin-left: 200px;
}
It's still kind of scrappy and imprecise. If the ruled line needs to be in line with some other element, you're probably best ensuring that they are in the same DIV, so that the ruled line can start at the left margin of the div.
As Python mentioned, padding does not work with hr
A good solution would be to place the hr inside a div
Another workaround (not recommended, more like a band-aid) would be to create a div and apply styling to it to create a line, particularly add a single border to it
For example,
<div class="divider"></div>
And for the styling
.divider {
border-top: 1px solid #081521; /* Create the border, i.e. Divider */
margin: 1rem auto; /* Add a Margin and Center the divider */
}
I was trying to make a border glued to the sides of the screen how represents the picture below :
Picture of how i want
I have html code, but i don´t know if i´m doing in the best way. Can you guys help me?
DIV Rectangle HTMl
<div class="content">
This is a rectangle!
</div
DIV Rectangle CSS:
.content {
width:100%;
min-height: 150%;
border:1px solid #FFFF;
border-width: 100%;
background-color: #FFFF;
border-radius: 5px;
padding-bottom: 50%;
}
It is like this:
Picture of how it is
I want to remove this spacing between border and screen, is it possible to do that?
There are 2 solutions:
You can remove your parent block paddings (set it to 0)
You can wrap your .content with an additional block and set its margins to negative values (adjust numbers to fit your layout):
.wrapper { margin: 0 -5px; }
Divs are block-level elements and will take the full width that is available. So, the issue isn't actually the .content div. It's likely that the body has a margin still set on it. It will probably take care of it if you add:
body { margin: 0; }
This is just a guess that it's on the body, but really it's whatever parent or ancestor has margin or padding.
Same problem here
*,html {
margin:0;
padding:0;
}
Hope this helps, "*" will set the whole page to 0
I'm trying to decrease the distance between the text in the h1 element and the border to the right so it looks like a small vertical line which separates it from the following text.
This is what my current css looks like:
.test{
border-right: 2px solid black;
padding-right: 0px;
}
The right border still appears very far on the right although I thought through setting the padding to 0px at the right it should appear directly next to the text.
I guess this is a pretty dumb question, I am still a beginner!
Thanks in advance
h1 elements are display: block by default (with width: 100%), which means they stretch to the full width of their container.
If you want to have the element only be as wide as it needs to be, make it display: inline-block instead (and then use padding, as you've identified, to determine the distance between the end of the text and the right border):
.test{
border-right: 2px solid black;
padding-right: 0px;
display: inline-block;
}
<h1 class="test">This is a test</h1>
h1 elements are display:block by default, 100% width by default. Try changing width:300px or display:inline-block.
I'm new to HTML so excuse me if the question is stupid. I have tried to search but I haven't gotten the results I looked for.
Here is a link to the picture of what I'm looking for: https://i.gyazo.com/b2a8584eeb1841a71d023c605078f581.png
I don't know how to create such a yellow box (obviously through css, but more the box aspect, not color). Help?
That kind of a box is essentially just a standard <div>.
.alert {
background-color: #ff9800;
padding: 10px;
}
<div class="alert">
<p>Warning: This website is in development.</p>
</div>
I suppose you mean the placement on the (black) background. Here's one possibility:
The black background is the background of the body. The body has 100% width (which can be any value). Then there's a div with a margin (where the black background will be visible) and a padding (that creates space around he text) and an orange background.
Instead of giving the black background to the body you could also create a second DIV with those settings and wrap it around the first DIV as a parent element. This is useful especially if you want the black background NOT to coder the whole window, then you'd just make that outer DIV 80% wide (or whatever percentage or pixel value suits your needs) and give it a certain height (percentage or pixels).
body {
background: black;
height: 100%;
}
.x {
margin: 20px;
padding: 20px;
background: orange;
line-height: 18px;
height: 18px;
font-size: 18px;
}
<div class="x">
Warning: This website is in development.
</div>
I have some css:
.note {
background: red;
}
.note > div {
max-width: 780px;
margin: 0px auto;
position: relative;
padding-left: 20px;
border: 1px solid black;
}
.note > div:before {
content: '⚠';
position: absolute;
left: 0px;
}
And a corresponding html like:
<div class='note'><div>Foobar</div></div>
This creates a red line across the screen, but the content will be only in the center area. It works well so far. But I want the whole content to be in a 800px width area, so I add a container:
#container {
max-width: 790px;
margin: 0 auto;
background: green;
border-radius: 10px;
padding: 5px;
}
And some html:
<div id='container'>
<p>Lorem ipsum</p>
<div class="note"><div>foo</div></div>
<p>Foobar</p>
</div>
Of course, note won't work here (the red line doesn't extend beyond the green container). I've been trying to come up with something, but I couldn't. I can't just close the container, place my note, and open another because border-radius and (and also box shadow, but I left it out from the example) would break then. Using a negative margin on .note also doesn't work, because it adds horizontal scrollbars. I could make .note position: absolute;, but then my note would overlap whatever comes after it.
Any ideas how could I solve it?
Update: Here's a JSFiddle. The second version is what I actually want, except that it creates a vertical scrollbar. The third is like Robert's solution, and the only problem is that it takes the div out of flow, and I'd like to avoid hacks like adding a margin-top to the following element because I don't know the length of the note in advance.
.note {
background: red;
position: absolute;
left:0;
right:0;
}
Here's a jsfiddle:http://jsfiddle.net/ySVZb/
Note that I changed some widths so it's easier to see in the jsfiddle screen, but the size is irrelevant. Also note that because I've taken the note div outside the normal flow, you will need to add an appropriate margin to anything that follows or it will fall behind the note div. Some generic like .note + * {margin-top: 2em} will work in some cases, but it will override any margin top already on that element, in those cases you'll need a more specific fix like .note + p {margin-top: 3em;} jsfiddle showing that here: http://jsfiddle.net/ySVZb/1/