I'm having trouble styling text within a div, which is in the shape of a triangle. All done with CSS.
The triangle is currently positioned absolutely as it needs to be for a larger project (I've removed the code from the larger project as it's irrelevant).
Here is a jsFiddle
See the code below:
HTML
<div>Here is a Triangle</div>
CSS
div {
text-align: center;
color: #fff;
font-size: 1.125em;
width: 100%;
}
div:nth-child(1) {
position: absolute;
top: 100px;
left: 100px;
width: 0;
height: 0;
border-left: 126px solid transparent;
border-right: 126px solid transparent;
border-bottom: 126px solid #D30000;
}
since the div has zero width, there will be a line break between each pair of words.
A solution might be to create the shape with one element, and have the text in another one.
You need to realise the triangle is actually a very thick border of a 0x0 element located at the top vertex, and position accordingly.
Here I've positioned the text at the baseline of the triangle and made its width from one vertex of the base to the other. Feel free to play with the text element's size to avoid the text overflowing the triangle. I'm afraid, however, that you can't just let the text flow inside a triangular shape:
HTML:
<div class="triangle"><div class="text">Here is a Triangle</div></div>
CSS:
div { /*your original CSS*/ }
div.triangle { /* your original CSS for div:nth-child(1) */ }
div.text {
position: absolute;
bottom: -126px; /* baseline */
left: -126px; /* left tip */
right: -126px; /* right tip */
width: auto; /* reset width:100% from div */
height: auto; /* just in case */
}
http://jsfiddle.net/honnza/UPeCf/8/
Related
I'm New to CSS.
Is there a way to move text within the following span like a non-repeated background-image?
for example: 50px from left, 40 px from left? without causing extra height and width!
div{
width: 300px;
height: 300px;
border: 1px solid black;
}
<body>
<div>
<span>Hello World</span>
</div>
</body>
Can I ask more question? how many space does a 16px character occupies? I mean what does 16px mean? 16pixel wide? 16 pixel height? when we select a character with mouse, there is a blue box around the selected character, which is bigger than that character. is this relevant to this question?
Firstly I think font-size always relates to the height of the letters and the reason the "blue box" is slightly larger is because it is highlighting the line specified by line-height.
To position the text inside your box you have a couple of options:
1) You can absolutely position the span inside the div like so:
div {
width: 300px;
height: 300px;
border: 1px solid black;
position: relative;
}
span {
position: absolute;
top: 50px;
left: 50px;
}
http://jsfiddle.net/5xukp/
2) You can set the span's display to block or inline-block and then apply margin or padding to position the span like so:
span {
display: inline-block;
margin-top: 50px;
margin-left: 50px;
}
http://jsfiddle.net/m79as/
EDIT - In response to your comment, there is no property like background-position where you can set it to be center center or center left however you can use vertical-align and text-align to position the text. In order to vertically align the span correctly you will need to set the display to table-cell
div {
width: 300px;
height: 300px;
border: 1px solid black;
display: table-cell;
text-align: center; /* left|right|center|justify */
vertical-align: middle; /* top|text-top|middle|bottom|text-bottom */
}
http://jsfiddle.net/6ExB2/
I'm trying to vertically position :before and :after pseudo-elements in a <h2>.
Each is placed in a float:left orange column, next to a another float:left column which contains a <p>.
I'd like to have at the top and the bottom of the <h2>, a thin border.
The issue is : if the text contained in the <p> float column is longer than the <h2>, the bottom-border of the <h2> is placed at the bottom of the text column, not at the bottom at the <h2> column.
Because of my "not-so-good-english", I made a fiddle : http://jsfiddle.net/vcH4T/
I'm really stuck with this :(
Thanks in advance for your help!
Camille
I'd like to have at the top and the bottom of the <h2>, a thin border.
Like this:
JSFiddle
CSS /* generic h2 */
h2 {
font-size:1.1em;
line-height: 20px;
background-color: #d8713c;
border-radius: 4px;
text-align: center;
color: #fff;
padding: 20px 10px;
position:relative;
}
h2::before, h2::after {
content:"";
position: absolute;
left:50%;
width: 10%; /* anything you like */
margin-left:-5%; /* 50% of width */
height: 0px;
border-bottom: 3px solid #efbe94;
}
h2::before {
top: 7%;
}
h2::after {
bottom: 7%;
}
I'm trying to get a gap created within a div's border to fit an image, similar to this:
Is there a way to do this in pure CSS? All I can see is:
.box {
background: url(img.png) bottom left;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
}
But my problem is border-right: 1px solid #eee; creates a line on top of my image, which is of course not desired.
It needs to be responsive. This image is an example, but you get the general idea.
Something like this?
http://jsfiddle.net/6Ufb5/
div {
border: 1px solid #ccc;
position: relative;
}
img {
position: absolute;
top: 10px;
left: 10px;
}
Give the container position relative and the img absolute, shift it to left 10px and shift it down 10px from the top and you have what you desire.
For the responsive part, that's just giving the container and/or img a % width.
Like so:
http://jsfiddle.net/6Ufb5/2/
You can achieve this by using absolute positioning of the image element - and it has to be in a <img> element, not as the background image because it will never overlap the parent border (or even if it does by adjusting the background-position property, the border will lie on top of the background image... a behavior that is expected, by the way.
<div class="box">
Content goes here
<img src="http://placehold.it/300x200" />
</div>
And the CSS:
.box {
position: relative;
border: 1px solid #333;
}
.box img {
position: absolute;
bottom: -1px;
right: -1px;
}
If you want a dynamic and/or responsive solution, you might have to resort to JS to doing so - such as resizing the image depending on the box dimensions, and assigning a height to the box to take into account of the image height (since image is absolutely positioned, it is taken out of the document flow).
See fiddle here: http://jsfiddle.net/teddyrised/xH6UV/
This might work if you can alter your markup. For accessibility I think the image should be an image and not a background, and this method is responsive (though you may want to alter margins at small sizes with media queries).
http://jsfiddle.net/isherwood/79Js5
.box {
border: 1px solid #ccc;
display: inline-block;
padding: 10px 0 10px 10px;
width: 40%;
}
.box img {
margin-right: -10%;
margin-bottom: -10%;
width: 105%;
}
<div class="box">
<img src="http://placehold.it/200x100/f3f3f3" />
</div>
I've got a set up similar to this: http://codepen.io/anon/pen/iAJnx where the main content is rather long. What I want to do is to put a border round the visible part of the screen as in this screenshot: http://i.imgur.com/ENtLau4.png
What I want to do is to create 4 divs that are positioned at the edges of the screen, but I'm struggling both with the positioning and giving the divs height and width without content. Does anyone have an idea about this?
Note: I've already tried using an overlay, but it makes the content non-clickable.
Try this:
HTML:
<div class="border-box"></div>
CSS:
body { position: relative; }
.border-box {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
How it works:
I absolutely positioned an overlay with borders, that will stick the edges of the screen by using top, bottom, left, right definitions. To make the content below selectable, you set pointer-events: none; on the overlay.
Example: http://codepen.io/anon/pen/BxJbh
If you want to achieve the same results without adding additional HTML markup, you can use the :before sudo selector to prepend a block to the body. Simply add this CSS and it will produce the same results:
body:before {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
display: block;
content: '';
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
Example: http://codepen.io/anon/pen/BDhql
you have to set in your content id (#content)
border:4px solid blue;
min-width:700px; //change accordingly.
min-height:1600px //change accordingly
The above code will fix the problem of border as well as the height & width you want to set without having any content.
I am attempting to style some html that I do not have control over. WYSIWYG. What I need to do is:
Have the text not wrap under the image.
Control the text's vertical position. I am trying to position it approximately along the horizontal centerline of the image.
Text cannot be fixed width (the image however, can and is fixed width).
I have tried display: table, floating the text element and absolute positioning text, but they all had different problems. Thank you for any further ideas.
http://jsfiddle.net/6fjCX/3/ (you may need to shrink frame width to see effect)
img {
height: 66px;
width: 165px;
border: 1px solid black;
}
#title-text {
font-size: 32px;
line-height: 36px;
}
<h1 id="title-heading" class="pagetitle">
<img class="logo global custom" src="" alt="">
<span id="title-text">
Installing Confluence 3.4 on a Windows 64 bit system
</span>
</h1>
I set a width on both elements as well as the wrapper <h1>, to make sure they would float next to each other and there would be no text underneath the image.
Try something like this: http://jsfiddle.net/6fjCX/5/
img {
height: 66px;
width: 165px;
border: 1px solid black;
background: red;
/* Float the image */
float:left;
}
#title-text {
font-size: 28px;
/* Since the element comes after in the markup */
float:right;
/* (h1 width) - (img width) - (#title-text left padding/margin) */
width:420px;
}
#title-heading {
/* set to a width that works for you */
width:600px;
}
You could also absolutely position the span and set position:relative on the h1, but I try to avoid absolute positioning when possible.
Demo: http://jsfiddle.net/6fjCX/7/
img {
height: 66px;
width: 165px;
border: 1px solid black;
background: red;
float:left;
}
#title-text {
font-size: 28px;
position:absolute;
top:0;
/* (img width) + (span left padding) */
left:175px;
}
#title-heading {
/* contain absolute positioned elements */
position:relative;
}