I am trying to create header tags with a bit of fancy decoration.
Eventually, I want to arrive at this:
I am having trouble adding the trailing line decoration after the text though.
My original thoughts were to have a container, then in that container would be the h1 and a span tag that would contain the line. But I can't quite seem to get the line to be centered with the text sitting over it.
I tried:
.container {
width: 100%;
}
h1 {
display: inline;
position: relative;
z-index: 2;
}
span {
display: inline-block;
height: 50%;
width: 100%;
border-bottom: 1px solid red;
}
and the HTML
<div class="container">
<h1>Test</h1>
<span></span>
</div>
But had no luck. Anyone know any tricks that might help me accomplish this? The main thing is that the length and height of the text is variable, so I am trying to get the line to take up the remainder of the box and sit right in the middle.
I also tried display: table-cell with no luck...
You need something like this
html - <h2>Test</h2>
css
h2{
position:relative;
overflow:hidden;
}
h2:after {
content:"";
top:48%;
width:100%;
margin-left:10px;
height:5px;
position:absolute;
background:orange;
}
How about using css pseudo elements like :after?
HTML
<div class="foo">INSIGHT</div>
CSS
.foo {
position: relative;
color: orange;
overflow: hidden;
}
.foo:after {
content: "";
position: absolute;
width: 90%;
top: 50%;
margin-left: 10%;
border-top: 3px solid orange;
}
DEMO
Related
I'm trying to create the look of a recipe card online:
As such, I am trying to have the underline go the full width of the paragraph, even if the text does not. Right now, I am trying to use text-decoration: underline, but it only extends as long as the text:
HTML:
<div>
<p>Lorem ipsum...</p>
</div>
CSS:
p {
border-bottom: 1px solid #000;
display: inline;
width: 200px;
}
div {
width: 400px;
}
JSFIDDLE: http://jsfiddle.net/FYNAM/1/
Any suggestions?
Stupid solution, but if your line height is the same across all <p> (no nested elements with different line-height) you can use background image.
.rtv {
position: relative;
}
.abs {
position: absolute;
}
.full-underline {
width: 100%;
}
.full-underline span {
display: block;
width: 100%;
height: 20px;
border-bottom: 0.8px solid black;
}
<div class="content tl m20 rtv">
<div class="full-underline abs">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<h3>NAMA PEKERJAAN :</h3>
<h1>PEKERJAAN EMERGENCY PEMBERSIHAN BENDA ASING DI TOWER 07 SECTION NGENA-TUBAN</h1>
</div>
enter image description here
You can adjust the span height with the size of the text
You can solve this by modifying what happens after your p tag as follows
p:after {
content: " ______________________________________________";
}
This was a quick down and dirty solution, but I think you'll be smart enough to take it from here ;)
Good luck.. and great question! You had my vote
DEMO
add following to your css:
div { display: block; width: 100%; }
div > p { display: block; width: 100%; }
or, you could also try:
div { width: 100%; }
div > p { display: block; }
*remove width from 'p'
It should solve your issue.
I am having an issue with positioning text inside a div. I want the image on the right top corner (which I was able to do) and the text kind of center the bottom text in the box.
This is an example of what I want to do: http://jsfiddle.net/Lucky500/Nq769/
I created a div .bottom_box and added:
.bottom_box {
position: relative;
bottom: -50px;
left: 50px;
}
Is there an easier or more correct way to do this?
Alright -
Added text-align:center to your and elements.
Set your outer_box position to relative.
Set the img value to absolute and positioned with 0.25 em top and right instead of margin.
http://jsfiddle.net/mr_mayers/Nq769/2/
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: .5em;
Position: relative;
}
.bottom_box {
position: relative;
bottom: -50px;
}
p {
color: blue;
text-align: center;
}
img {
position: absolute;
padding: 3px;
top: 0.25em;
right: 0.25em;
}
h1 {
text-align: center;
color: red;
}
You can achieve your layout as follows:
For this HTML:
<div class="outer_box">
<img src="http://placehold.it/100x50">
<div class="bottom_box">
<h1>$25 OFF</h1>
<p>$25 off your first cleaning!</p>
</div>
</div>
Try the following CSS:
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: 0.5em;
}
.bottom_box {
clear: both;
border: 1px dotted gray; /* for demo only, optional */
}
img {
float: right;
padding: 3px;
margin: 0 0 1em 1em;
}
p {
color: blue;
margin-left: 50px;
}
h1 {
color: red;
margin-left: 50px;
}
Since your image is floated, simply clear the .bottom-box.
Use margin-left on the child elements to get any white space.
See sample: http://jsfiddle.net/audetwebdesign/3SjRG/
You can use text-align: center if you are centering the p and h1 content, but I was not sure if you wanted ragged left or ragged right alignment on the text block;
You'd be better off using text-align:center and position: absolute
See example
There are some solutions.
An other way is to make the box relative and positioning the text and image inside absolute.
I would create a container div with a border for your box, then set the inner divs (one with your image and one with your text) to position absolute. then you can use top:0; right:0; for the picture on the right corner. then bottom:xx; and left:yy; for positioning the text div.
This is just a different method than you used. If it works, doesn't break in any situation, and is simple, then it's correct. Many ways to skin a cat in programming.
I have 2 divs with position:absolute set, looking as such:
#nav {
position:absolute;
width: 300px;
height: 100%;
}
#content {
position: absolute;
width: 70%:
height: 100%;
}
The #content div often exceeds the pages size, requiring the user to scroll down.
But the #nav div stops at the bottom of the screen - it does not continue down the page as the user scrolls.
Is there any way to make both divs have equal height (without JQuery)?
You can do this with css tables. (but you'll have to remove position:absolute)
FIDDLE
Markup
<div id="css-table">
<div class="col narrow">some content</div>
<div class="col wide">content</div>
</div>
CSS
#css-table {
display: table;
height: 100%;
}
#css-table .col {
display: table-cell;
padding: 10px;
}
.narrow
{
background: lime;
}
.wide
{
background:aqua;
}
You could try a fixed positioning over the #nav.
So, instead of position: absolute;
try position: fixed only for the first div, i.e. #nav. This should make it always be on the screen no matter how much the user scrolls.
try these css
#nav {
position:absolute;
width: 300px;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
#content {
position: absolute;
width: 70%:
padding-bottom: 99999px;
margin-bottom: -99999px;
}
Since OP has not accepted any answer, m trying my luck.... :)I think the fault is in line width: 70%: for #content....there is : instead of ;...i tried your code here after replacing it in fiddle and looks fine to me :
Fiddle : http://jsfiddle.net/logintomyk/LDh5x/2/
HTML remaining the same, here is the CSS
#nav {
position:absolute;
border:1px solid #000; //to show the different divs
width: 300px;
height: 100%;
}
#content {
position: absolute;
width: 70%; //this was mistake point
height: 100%;
text-align:right; //to show the text
border:1px solid #CCC; //to show the different divs
}
Maybe this has been answered before but I haven't found a proper solution for my question on SO.
Ok, here goes:
I need to underline an h3 tag with 100% EXCEPT for the part where the actual text is. like so:
My super title
____________________________________________________
This has to be 100% width, so something like
h3:after {
content:"\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0";
}
with fixed number whitespaces wouldn't work.
Also the tag has to be pure. Meaning it is not surrounded with DIVs or span etc... (User submitted content from wysiwyg) It's just an h3 tag.
Is this possible in css3 at all? If not I'm willing to add some js to make it work.
UPDATE:
Here's a screenshot with expected result:
you could try in this way:
Markup
<h3>A 100% wide title</h3>
CSS
h3 {
display: block;
width: 100%;
background: #fff;
white-space: nowrap;
overflow: hidden;
}
h3:after {
content: "";
display: inline-block;
width: 100%;
margin-left: .5em;
border-bottom: 1px #767676 solid;
}
Example: http://cdpn.io/Awpef
Resulting effect
Like this? demo
h3:after {
content:"";
border-bottom: 1px solid black;
overflow: hidden;
width: 100%;
display: inline-block;
position: relative;
left: 150px;
top: -20px;
}
Try this:
CSS
h3 {
display:block;
width:100%;
overflow: hidden;
position: relative;
}
h3:after {
content:'';
border-bottom:1px solid black;
position: absolute;
width: 100%;
}
JSFIDDLE
Without using the :after pseudo element, you could do this:
<div id="wraptitle"><h3>A Second Title</h3></div>
CSS
#wraptitle {
border-bottom : 1px solid black;
position : relative;
}
#wraptitle h3 {
display : inline;
position : relative;
bottom : 0;
border-bottom : 1px solid white; /* white is actually the background color */
padding-right : 10px;
}
Make sure margin of the h3 element is set to 0, or its border wouldn't go over it.
A live example can be seen here: http://jsfiddle.net/JYNn5/
I'm having trouble forcing the text to stay relative within its div and at the same height as the image. So when the browser is resized, it doesn't overflow. I'm doing this as I'm creating a responsive webpage. I hope I've explained this clearly. Please check out my http://jsfiddle.net/DMnhB/1/
The html is as follows:
<div id="postd"><img
src="http://www.tntmagazine.com/media/content/_master/42628/images/barack-obama.jpg">
<span>
Text Here
Text Here
Text Here
</span>
</div>
And the CSS:
#postd{
width:100%;
padding-bottom: 5%;
background-color: blue;
padding-top:6%;
border-bottom: 1px dotted #ccc;
}
#postd img{
width:40%;
}
#postd span{
float:right;margin-left:1px;
position: absolute;
background-color: red;
}
Here is a start, try the following CSS:
#postd {
width:100%;
padding-bottom: 5%;
background-color: blue;
padding-top:6%;
border-bottom: 1px dotted #ccc;
}
#postd img {
width:40%;
display: inline-block;
vertical-align: top;
}
#postd span {
display: inline-block;
margin-left:1px;
background-color: red;
}
You can see how it looks at: http://jsfiddle.net/audetwebdesign/DMnhB/2/
I used inline-blocks to fix the overflow problem and vertical-align: top to place
the top of the image inline with the top of the text block.
You need to provide some additional feedback before I make any other adjustments.