Like the example above. I've found some helpful script with the a small img which I do like however I don't know how to get the padding about the title so the line doesn't go straight through.
h3.line {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url(../images/line.jpg);
background-origin: padding-box;
background-position: center;
background-repeat: repeat-x;
background-size: auto auto;
display: block;
margin-bottom: 20px;
}
Which shows this.
Any suggestion or ideas?
You can have a 1px dot image which you can place as a background on the H3. Then have a span element in between which have a background on.
CSS:
h3 {
background: url(images/dot.png) left center repeat-x;
padding: 10px;
text-align: center;
}
h3 span { background: #fff; display: inline-block; padding: 10px 15px; }
HTML:
<h3><span>About</span></h3>
You can put a <span> for example in your <h3> and make it have the same background as your <h3> but without the line so the <span> effectively overlaps the <h3>.
You can say this to your span:
span {
display: block;
margin-left: auto;
margin-right: auto;
}
to make it center. You can add width and height to it too. line-height helps place your text to the middle vertically.
If you want to spare images than you can use text-decoration: line-through; to draw a line through your text.
Here is a solution using the CSS border property instead of an image.
the html:
<h2>
<span>This is a test</span>
<div></div>
</h2>
And here is the CSS:
h2 {
text-align:center;
background-color:#EFEFEF;
line-height:26px;
position:relative;
}
span {
background-color:#EFEFEF;
padding-right:5px;
padding-left:5px;
position:relative;
z-index:2;
}
h2 > div {
border-bottom:1px solid grey;
position:relative;
z-index:1;
top:-13px; /* half the line-height of the containing element */
}
A fiddle Demonstration
The <div> is placed inside the heading element, and positioned half-way up by settings its top position to one-half the height of the heading element, which is the headings line-height. z-index is used on the span and div so that the span gets a higher stack order than the div and obscures the (border) line where there is overlap.
I just stumbled upon another way of achieving this.
h1
{
position: relative;
padding: 0 26%;
}
h1:before,
h1:after
{
width: 25%;
background-color: rgba( 0, 0, 0, .5 );
content: '';
position: absolute;
top: 0;
bottom: 0;
}
Taken from: http://osvaldas.info/blog/background-independent-css-bars
Related
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 currently have this markup:
<h1 class="title" id="page-title">
<span id="page-title-inner">Home</span>
</h1>
And this CSS:
h1#page-title {
background: transparent url(../images/line.png) 0px 6px no-repeat;
overflow: hidden;
}
#page-title-inner {
width: auto;
float: left;
background: #fff;
padding: 0 15px;
position: relative;
left: 45%;
}
This CSS slightly accomplishes what I want given that the page title is short. But if the title is quite long, it fills the space from the center to the right.
What I really want to achieve is to center the page title wrapped inside the span (which is inside the h1 tag) regardless of its width.
I have tried to do something like:
#page-title-inner {
width: auto;
float: left;
background: #fff;
margin: 0 auto;
display: block;
}
where the margin 0 auto value is what would center the span but I wonder why it doesn't work.
Is there a better way and more efficient to achieve what I want to do?
remove float:left & left:45% property of span to make it center. Also set text-align:center for your H1 tag.
Unless you do something special with the span, you dont need it:
<h1 class="title" id="page-title">
Home
</h1>
h1#page-title {
background: transparent url(../images/line.png) 0px 6px no-repeat;
overflow: hidden;
text-align: center;
}
if you do need to do something with the span:
#page-title-inner {
/*width: auto; */
/*float: left; */
background: #fff;
padding: 0 15px;
/*position: relative; */
/* left: 45%; */
}
Float left makes it, well, float left. And the percentage for the left will never work, because the content of the span can be various sizes
You actually dont need to give the span an ID, you can simple do this:
h1#page-title span{ /* ... */ }
I am using the following css
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 150px;
margin: 10px 0px 5px 0px;
background-image: linear-gradient(to top, #CACACA 0%, #EFEFEF 100%);
}
I have 2 elements contained in a div.
<div id="header">
<p:graphicImage value="/dbimages/#{accountManagedBean.imageId}" styleClass="imageResizeAccountInfo"/>
<h:outputLabel value="#{accountManagedBean.account.userName}" style="font-size:40px"/>
</div>
One is an image, and the other is text. I would like the image to be on the left, and the text to be vertically and horizontally centered.
The actual HTML that gets produced is this:
<div id="header">
<img id="mainForm:j_idt164" src="/ui/dbimages/2805" alt="" class="imageResizeAccountInfo" />
<label style="font-size:40px">dvargo</label>
</div>
Currently they are right next to each other. I am new to css and have created this using composition so far.
Is there a way to do this?
You already have the width and height set on your div, so the following additional CSS rules will allow your div to accept vertical alignment for its content, i.e., your text.
display:table-cell; vertical-align:middle
You can use float: left or position: relative; top: xxx; left: xxx; on your image to position it to the left by floating, or to left relative to the top left of the div by a precise amount. Another good solution is to use the image as the background of the div (with no-repeat), and then using padding-left on your div element to make room for the image.
JS Fiddle: example (with a cute smiley face image since I don't have the OP's original image): http://jsfiddle.net/wCpfs/
You can use line-height property to center the text vertically.
As well as using text-align:center will make your text move to the center.
Try this or something similar:
#header {
text-align:center;
line-height:150px;
}
Kinda, just because you have height specified you can position text in the middle.
.imageResizeAccountInfo {
float:left;
}
#header p {
position relative;
left: XXX;
top: YYY;
}
Adjust XXX and YYY accordingly.
You're going to want to set the label to be a display: table-cell and then vertically align it like this:
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 150px;
margin: 10px 0px 5px 0px;
background-image: linear-gradient(to top, #CACACA 0%, #EFEFEF 100%);
display: table;
}
#header label{
display: table-cell;
vertical-align: middle;
text-align: center;
}
Here's a jsfiddle with the result: http://jsfiddle.net/V7mYR/1/
I am trying to center align an image that is wrapped in a <span>, but I am having trouble doing so. I have uploaded my CSS and HTML to jsfiddle: http://jsfiddle.net/7nHhu/1/
I am trying to get the image to center align itself with the content in a "block" style (ie. all text above and below it, not wrapped to the left or right)
Any help would be greatly appreciated.
.imgframe {
border: 1px solid #EAEAEA;
display: inline-block;
margin: 8px;
}
.imgframe img {
border: 1px solid #FFFFFF;
margin: 0;
background: #F6F6F6;
padding: 8px;
-moz-box-shadow: 2px 2px 5px #CCCCCC;
-webkit-box-shadow: 2px 2px 5px #CCCCCC;
}
<span class="imgframe centerimg"><img src="http://i48.tinypic.com/31368e9.jpg" /></span>
I think it's more appropriate to use text-align for centering text rather than images. You could center an image by setting left and right margin auto.
img {
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
padding-top: 10px; //margin-top doesn't work
}
Demo
Just make image wrapper block level element and text-align:center; it.
FIDDLE
or wrap it in another element if needed;
FIDDLE
In .imgframe, add width: 100%;
Given your requirements, to keep the .imgframe element in-line, to avoid it taking up the full width of the enclosing element, and working without adding wrapping elements to your mark-up, the following works:
body {
text-align: center;
}
body p {
text-align: left;
}
JS Fiddle demo.
This would, probably, be less intrusive if you had the elements from your Fiddle wrapped in a specific, target-able, element; rather than the body, as the method, above, requires you to reset the text-align for all elements contained within the body. So, personally, I'd use:
<div id="contentWrapper">
<p>...</p>
<span class="imgframe">
<img src="..." />
</span>
<p>...</p>
</div>
And:
#contentWrapper {
text-align: center;
}
#contentWrapper p {
text-align: left;
}
Just in order to minimise the amount of work required to tidy up afterwards.
span {position: absolute; top:0; left: 0; width: 100%; text-align: center;}
img {width:yourimagewidth; heigth: width:yourimageheigth}
I have following code
div {
width: 200px;
border-bottom: 1px solid magenta;
height: 50px;
}
<div></div>
The div width is 200px so border-bottom is also 200px but what should I do if I want border-bottom only 100px without changing div width?
You can use pseudoelements. E.g.
div {
width : 200px;
height : 50px;
position: relative;
z-index : 1;
background: #eee;
}
div:before {
content : "";
position: absolute;
left : 0;
bottom : 0;
height : 1px;
width : 50%; /* or 100px */
border-bottom:1px solid magenta;
}
<div>Item 1</div>
<div>Item 2</div>
No need to use extra markup for presentational purpose. :after is also supported from IE8.
edit:
if you need a right-aligned border, just change left: 0 with right: 0
if you need a center-aligned border just simply set left: 50px;
Another way to do this (in modern browsers) is with a negative spread box-shadow. Check out this updated fiddle: http://jsfiddle.net/WuZat/290/
box-shadow: 0px 24px 3px -24px magenta;
I think the safest and most compatible way is the accepted answer above, though. Just thought I'd share another technique.
I added line under under h3 tag like this
<h3 class="home_title">Your title here</h3>
.home_title{
display:block;
}
.home_title::after {
display:block;
clear:both;
content : "";
position: relative;
left : 0;
bottom : 0;
max-width:250px;
height : 1px;
width : 50%; /* or 100px */
border-bottom:1px solid #e2000f;
margin:0 auto;
padding:4px 0px;
}
You can use a linear gradient:
div {
width:100px;
height:50px;
display:block;
background-image: linear-gradient(to right, #000 1px, rgba(255,255,255,0) 1px), linear-gradient(to left, #000 0.1rem, rgba(255,255,255,0) 1px);
background-position: bottom;
background-size: 100% 25px;
background-repeat: no-repeat;
border-bottom: 1px solid #000;
border-top: 1px solid red;
}
<div></div>
You cannot have a different sized border than the div itself.
the solution would be to just add another div under neath, centered or absolute positioned, with the desired 1pixel border and only 1pixel in height.
http://jsfiddle.net/WuZat/3/
I left the original border in so you can see the width, and have two examples -- one with 100 width, and the other with 100 width centered. Delete the one you dont wish to use.
Late to the party but for anyone who wants to make 2 borders (on the bottom and right in my case) you can use the technique in the accepted answer and add an :after psuedo-element for the second line then just change the properties like so:
http://jsfiddle.net/oeaL9fsm/
div
{
width:500px;
height:500px;
position: relative;
z-index : 1;
}
div:before {
content : "";
position: absolute;
left : 25%;
bottom : 0;
height : 1px;
width : 50%;
border-bottom:1px solid magenta;
}
div:after {
content : "";
position: absolute;
right : 0;
bottom : 25%;
height : 50%;
width : 1px;
border-right:1px solid magenta;
}
I did something like this in my project. I would like to share it here. You can add another div as a child and give it a border with small width and place it left, centre or right with usual CSS
HTML code:
<div>
content
<div class ="ac-brdr"></div>
</div>
CSS as below:
.active {
color: magneta;
}
.active .ac-brdr {
width: 20px;
margin: 0 auto;
border-bottom: 1px solid magneta;
}
This will help:
http://www.w3schools.com/tags/att_hr_width.asp
<hr width="50%">
This creates a horizontal line with a width of 50%, you would need to create/modify the class if you would like to edit the style.
I have case to have some bottom border between pictures in div container and the best one line code was - border-bottom-style: inset;
div{
font-size: 25px;
line-height: 27px;
display:inline-block;
width:200px;
text-align:center;
}
div::after {
background: #f1991b none repeat scroll 0 0;
content: "";
display: block;
height: 3px;
margin-top: 15px;
width: 100px;
margin:auto;
}
The border is given the whole html element. If you want half bottom border, you can wrap it with some other identifiable block like span.
HTML code:
<div> <span>content here </span></div>
CSS as below:
div{
width:200px;
height:50px;
}
span{
width:100px;
border-bottom:1px solid magenta;
}
I just accomplished the opposite of this using :after and ::after because I needed to make my bottom border exactly 1.3rem wider:
My element got super deformed when I used :before and :after at the same time because the elements are horizontally aligned with display: flex, flex-direction: row and align-items: center.
You could use this for making something wider or narrower, or probably any mathematical dimension mods:
a.nav_link-active {
color: $e1-red;
margin-top: 3.7rem;
}
a.nav_link-active:visited {
color: $e1-red;
}
a.nav_link-active:after {
content: '';
margin-top: 3.3rem; // margin and height should
height: 0.4rem; // add up to active link margin
background: $e1-red;
margin-left: -$nav-spacer-margin;
display: block;
}
a.nav_link-active::after {
content: '';
margin-top: 3.3rem; // margin and height should
height: 0.4rem; // add up to active link margin
background: $e1-red;
margin-right: -$nav-spacer-margin;
display: block;
}
Sorry, this is SCSS, just multiply the numbers by 10 and change the variables with some normal values.
Border right length smaller than parent div
with pseudo-elements
#import url(https://fonts.googleapis.com/css?family=Raleway);
body{
font-family: 'Raleway', sans-serif;
}
div {
width : 200px;
height : 50px;
position: relative;
z-index : 1;
background-color: #f5f5f5;
margin: 20px auto;
padding: 20px;
color:#726E97;
}
div:before {
content : "";
position: absolute;
right : 0;
top : 25%;
height : 50px;
width : 50%;
border-right:5px solid #726E97;
}
<div>BOX 1</div>