Ok so i have text inside a border that's inside a bigger border. The text inside the border is in a row of 2 but the problem is the larger border doesn't go around them. Here's a picture.
The problem i'm pretty sure is either the width or the float of the inside border which makes it a row.
Here is the css:
.fifty {
width: 45%;
float: left;
}
Here is the css for the actual border:
.newspaper3 {
border-top: 3px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
padding: 5px;
margin-right: 3px;
}
Here's part of the html:
<div class="count">
<div class="fifty">
<div class="newspaper3">
text
</div>
</div>
</div>
Here's all the html and css http://jsfiddle.net/ELSaV/
Thanks for the help!
Is this what you are looking for?
http://jsfiddle.net/gespinha/ELSaV/4/
Basically your issue is caused by the float: left CSS attribute on the .fifty element. Using the float attribute removes the element from the actual document flow, so its position is ignored by other elements.
To reassign its position to the document flow, you should add an element that has a clear attribute after the one that has the float attribute. This clear should have the value which you wish to clear. In this case it should be left, but in case you need to reuse this element later in your project, you should create a class that clears both.
So, to solve your problem, and reassign .fifty to the document flow I created an empty div element with a class name .clear, and in the CSS I attributed this class a clear: both.
.clear {
clear: both;
}
In order for .fifty children to be displayed in a row, you simply need to assign them the same float attribute, which pushes them in the same direction, forcing their alignment within the parent element.
.newspaper3 {
border-top: 3px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
padding: 5px;
margin-right: 3px;
float:left; /* ADD THIS */
}
Note: as I said I just attributed the value of both to this clear element, because I am assuming you could need it later in your project, although, in this case, you only need to clear the left float. There are other ways of establishing a clear on your floats, this is just one strategy.
Related
Inside of my textarea, I wish to maintain a padding of 30px from the top.
textarea {
display: block;
width: 300px;
height: 50px;
padding-top: 30px;
}
However, once the text-area is filled with text and the content starts scrolling. The padding is no longer maintained.
http://jsfiddle.net/w47wbq77/
When you run this fiddle, initially you'll notice that the padding from top (inside of the textarea) is maintained. However, the minute you have more than 150 characters, the padding is gone.
Any solution to this ?
I would remove all styling from the text area, and wrap it in a div that looks like a text area
.wrapper {
border: 1px solid #aaa;
padding-top: 30px;
}
textarea { padding: 0 }
You might have to fiddle about with border radius etc, but that would maybe do it
It looks like for the textarea element the padding is added, but the text is still visible in the padding zone.
I haven't really found a good solution so I came up with a workaround using a combination of border and outline to mimic the padding inside the textarea:
textarea {
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 0px solid transparent;
border-left: 0px solid transparent;
outline: 1px solid #dadcde;
}
The top and bottom transparent borders are the actual padding. They add extra space between between the text and the textarea.
The left and right transparent borders prevent border artifacts left due to how the borders are calculated and drawn in the browsers.
The outline is the actual visible border of the textarea and replaces the border property.
Here's a jsFiddle example to show how it works
I think the correct it's usage a "margin", but for you request can be:
http://jsfiddle.net/Lhderpup/
.padTextarea {
background-color: white;
padding-top: 30px;
display: table;
border: 1px solid #CCC;
}
Adding a new DIV. More about, Margin, Padding, etc:
Difference between margin and padding?
I hope I have helped.
I am trying to make a CSS :after triangle the usual way. But it does not look as a triangle at all, please see http://jsfiddle.net/lborgman/eX3HL/:
/* triangle after */
#st:after {
position: relative;
margin-left: 10px;
content:"";
border-top:4px solid transparent;
border-bottom:4px solid transparent;
border-left:4px solid black;
}
#st {
line-height: 2em;
}
If I change "position:relative" to "position:absolute" the triangle will become a triangle. But that does not work where I want it (because it is on a float div).
What can I do?
Add display:inline-block to fix the triangle
#st:after {
position: relative;
margin-left: 10px;
content:"";
border-top:4px solid transparent;
border-bottom:4px solid transparent;
border-left:4px solid black;
display: inline-block;
}
JS Fiddle: http://jsfiddle.net/eX3HL/2/
It's a phenomenon that has to do with the native display of an object. The native display property of span is inline. Inline elements behave like plain text, while block elements behave more like images.
In your example when you do not override the default property of the span your element behaves like text and thus has also an font-size shadow-property which is set to inherit. It's an unexpected behavior since the shadow-properties are not visible to developers directly, so causing a lot of unclarities. You don't have to just believe my words, here is a proof: http://jsfiddle.net/eX3HL/5/
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 hoping somebody can help me answer this, as hours of Googling is not proving fruitful. I currently have this code styling my form labels:
label {
display:inline-block;
height: 15px;
width: 350px;
float: left;
padding: 5px;
border-top: 1px solid black;
color: black;
font-size: 12px;
}
I would like to style the same border-top property to my input, textarea and select tags. However, styling border-top on these elements styles the obvious, the border around the element itself. I would like to know if its possible to display the border outside, or if I need to use other properties to achieve my desired result.
If you mean that the borders look inset than you need simply
input {
border: 0;
border-top: 1px solid #333;
}
And if you literally means OUTSIDE so you can use something like shadow to spoof
Demo
CSS
input {
box-shadow: 0px -1px 1px -1px #333;
border: none;
margin: 50px;
}
If you want to have a border outside the elements, you will need a block element around each of the input, textarea or select (probably div if no element is semantically relevant). These blocks will receive the border and you can adjust the distance between the form elements and the border with padding-top on the div
This also has the advantage that border on div is way better supported than border on form elements.
How do I cut the shared border line between these two divs? I want the top small div to have border on three sides expect bottom and the larder div below that to have only top border but leaving the shared border. So it will look like a line running across both divs upper borders.
I tried overlaying top div on the bottom. But Not getting what I want.
.ihead {
background-color: #EEE;
width: 15em;
height: 3em;
text-align:center center;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:none;
}
.ibody {
background-color: #EEE;
width: 60em;
height:20em;
margin-top:3em;
border-top:1px solid black;
z-index: 10;
}
<div class="ihead"><h>Hello !</h></div>
<div class="ibody">......</div>
From -
To -
The normal way you'd achieve this effect is to have the box on top move down over the top of it's border. In your example, you can achieve this by adding position: relative; bottom: -1px to your .ihead class and removing the margin-top: 3em from your .ibody class.
See the jsFiddle.
.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
border-left: none;
}
<div class="bordered"><h1>Test1</h1></div>
<div class="bordered"><h1>Test2</h1></div>
<div class="bordered"><h1>Test3</h1></div>
This question was the first that popped up for me so i felt it was best if i answered it properly unlike the accepted answer above.
Using css:
.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
border-left: none;
}