On one of my pages I have five similar divs and I wish to add a border to the top aswell to the bottom of the first and the last div.
HTML:
<div class="info_box">
Text content is here
</div
<div class="info_box">
Text content is here
</div>
... And so on...
CSS:
.info_box{
top: 8em;
float: left;
max-width:100%;
max-height: 50px;
position: relative;
overflow: hidden;
background-color: rgba(255, 0, 0, 0.0.5);
}
.info_box:first-child{
border-top: 1 px solid #666;
}
.info_box:last-child{
border-bottom: 1 px solid #666;
}
Can someone tell me what I'm doing wrong here?
just add class "with-border" to the first and last div (or any div you want to have a border), and then add this to your css:
.with-border {
border-bottom: 1 px solid #666;
}
So your first and last divs will be:
<div class="info_box with-border">
Text content is here
</div>
How you are doing it with the CSS is absolutely fine, except you have two errors.
You need to remove the space between the 1 and px like the following.
.info_box:first-child {
border-top: 1px solid #666;
}
.info_box:last-child{
border-bottom: 1px solid #666;
}
In addition you need to close your divs, you are missing a closing >
<div class="info_box">
Text content is here
</div>
<div class="info_box">
Text content is here
</div>
That should solve it for you.
Related
I want to budge this border to the left like in this image:
My code is like this:
div{
border left: red 5px solid
}
I see what you want. So, first, you will need a class for your div, so that it doesn't affect every single div. You also need another <div> inside it for the text and the border. New code:
<div class="warn">
<div class="inner-warn">This is important note</div>
</div>
Then, here comes the CSS. First, we should style the outer <div>. We will need padding, background color and you might want some border-radius. The padding should be around 7 pixels. Your background color can be something like #ddd. It is what I saw in your picture. Finally, the border radius can be 5 pixels, even though your image didn't contain any, I think it looks better. You can remove this. Our outer <div> code looks like this:
div.warn{
padding: 7px;
background-color: #ddd;
border-radius: 5px;
}
Now we have the inner <div>. It should contain a red left border (as you said in your code) and some left padding to not "touch" the border. Our code is like this:
div.inner-warn{
border-left: red 5px solid;
padding-left: 5px;
}
Complete code:
<div class="warn">
<div class="inner-warn">This is important note</div>
</div>
<style>
div.warn{
padding: 7px;
background-color: #ddd;
border-radius: 5px;
}
div.inner-warn{
border-left: red 5px solid;
padding-left: 5px;
}
</style>
Snippet:
div.warn{
padding: 7px;
background-color: #ddd;
border-radius: 5px;
}
div.inner-warn{
border-left: red 5px solid;
padding-left: 5px;
}
<div class="warn">
<div class="inner-warn">This is important note</div>
</div>
It looks like this:
.block{
background: #ccc;
padding: 16px;
}
.note{
border-left: 5px solid red;
padding-left: 16px;
font-size: 25px;
}
<div class="block">
<div class="note">This is an important note</div>
</div>
I know this is an old question, but I wanted to know what is the best way to put text into a border of a div tag. This is what I have
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 10px;
width: 95%;
}
<div class='componentWrapper'>Text inside div </div>
I want to add a title into the border of the div tag. I know one option is to use fieldsets but I prefer not to go with this approach. Another approach is the put a box and move it up and set the background color, but I think this fails when you set a different background color on the page.
What is the best solution for this?
I would suggest something like that, using position:absolute:
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 15px 10px 10px;
width: 95%;
}
.componentWrapper .header {
position:absolute;
margin-top:-25px;
margin-left:10px;
color:white;
background:cadetblue;
border-radius:10px;
padding:2px 10px;
}
<div class='componentWrapper'><div class="header">Headline</div>Text inside div </div>
I have a question regarding the div element border
I am trying to create bunch of divs that acts like a table
so
<div class='div'>first</div>
<div class='div'>second</div>
<div class='div'>third</div>
<div class='div'>four</div>
My css is
.div{
border: solid 1px black;
}
All my divs have borders but the problem is all my divs's top and bottom border are 2 px instead of 1px because my css apply 1 px on every div. The second and the third div have thinker border on top and bottom.
I can't really change the class name because it's dynamically generated. Is there anyway to work around this issue?
Thanks a lot!
Remove the top border from every element except of the first one.
.div {
border-style: solid;
border-color: black;
border-width: 0 1px 1px 1px;
}
.div:first-child {
border-width: 1px;
}
Here's an example of the difference.
did you tryed write something like this :
.div {
border:1px solid black;
border-bottom:0;
}
.div:last-child {
border-bottom:1px solid black;
}
Try to add this to your styles.
<style>
.div{
border: solid 1px black;
border-bottom:none;
}
.div2{
border: solid 1px black;
}
</style>
Then add this to your body:
<div class='div'>first</div>
<div class='div'>second</div>
<div class='div'>third</div>
<div class='div2'>four</div>
I have paragraphs on a page which i would like to add a border.
<p class="valid">paragraph</p>
CSS
p.valid {
padding:5px;
border: 1px solid #ccc;
}
The Problem is this displays the paragrph as 100% of the page
I have also tried adding inline-block which wraps the text as i would like, but inline is like float left.
p.valid {
padding:5px;
border: 1px solid #ccc;
display: inline-block;
}
When you float the element, also set it to clear any (left) floating elements:
p.valid {
padding:5px;
border: 1px solid #ccc;
display: inline-block;
float: left;
clear: left;
}
From the MDN documentation:
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them
I would use a <span> tag instead of <p> because a paragraph is supposed to extend across the entire page, and it looks like <span> will help you more with what you're trying to accomplish.
I'm trying to figure out if the padding is adjustable in this
Here's the HTML:
<div id="branding">
<h1>
{block:IfHeaderImage}<img src="{image:Header}" alt="{Title}" /> {/block:IfHeaderImage}
{block:IfNotHeaderImage}{Title}{/block:IfNotHeaderImage}
</h1>
</div><!-- #branding -->
And the associated CSS:
#header #branding {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 0 auto 3px;
{block:IfNotHeaderImage}padding: 40px 0;{/block:IfNotHeaderImage}
width: 900px;
}
I tried: adding a height property and changing the padding, but nothing worked. This is being done in Tumblr (this site), and it has been a bit finicky.
Any help much appreciated!
It's fine in Chrome. See screenshot: http://cl.ly/3z2c3D18291K260s2D1K