how to implement border-image for old browsers?
I have 8 images:
4 border images (border-top.gif, border-right.gif, border-bottom.gif, border-right.gif)
and 4 border conners (outer part of conners is transparent, it is important) : border-top-left.gif, border-top-right.gif, border-bottom-right.gif, border-bottom-left.gif, also I have next markup:
<div class"block">
<div class="content">A lot of text with images and tables</div>
<div class="border-top"></div>
<div class="border-right"></div>
<div class="border-bottom"></div>
<div class="border-left"></div>
<div class="border-top-left"></div>
<div class="border-top-right"></div>
<div class="border-bottom-right"></div>
<div class="border-bottom-left"></div>
</div>
any CSS solutions? if it is need I can add classes to markup.
UPD: I know that is easy do with table, but I want find solution for divs.
UPD2: images with gradient, so there is no way to do it without images.
relative positioning of your container ( .block )
absolute positioning of your corner div elements inside the container.
<style type="text/css">
.block { display:block;position:relative; }
.border-top-left {
display:block;
background-image:url(/folder/topleftcorner.png);
background-repeat:no-repeat;
width:10px; height:10px; /* size of your corner graphic above */
/* this puts it where you want it */
position:absolute;
top:0;
left:0;
}
</style>
Use from ...
right:0; bottom:0
to match up the rest to suit
I suggest using CSS sprites. This way you don't have to waste time slicing up images. Allow the CSS background-position declaration do the work for you.
See: http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
Related
This question already has an answer here:
Ribbon with a "3D" effect
(1 answer)
Closed 8 years ago.
what would the best way to create a div that overlaps its parent container. im using bootstrap and want to create a banner that goes larger than its container, i want to create the following:
This is the code i have so far:
<div class="container container-white no-pd">
<div class="service-banner">
<div class="text-center">
Headline title here Our Services
</div>
</div><!--/service banner-->
</div><!--/container-->
This gives me the following:
any advice?
You could use pseudo elements for this sort of functionality:
.gray{
height:300px;
width:100px;
background:darkgray;
position:relative;
}
.banner{
position:absolute;
width:350px;
height:100px;
background:blue;
top:20px;
left:80px;
}
.banner:after{
position:absolute;
content:"";
height:0px;
width:0px;
border-left:20px solid transparent;
border-top:20px solid gray;
bottom:-20px;
left:0;
}
<div class="gray">
<div class="banner">Heading here</div>
</div>
Please Note the following for further understanding:
I've been able to use the top, bottom, left and right properties in my css since I have set that element to position:absolute;. When an element is positioned like this, It means they can be manipulated using these.
It's also important to note how i made the 'triangle shadow'. This was achieved through using the 'border hack', in which allows you to set a transparent border, and a 'coloured one' in order to make this: see here for more info about this.
pseudo elements need to contain a content and usually are positioned absolutely in order for you to position them nicely in your markup.
I'm sure this is super simple, but I'm new to css. I'm essentially trying to position some rendered typography and make it stay centred no matter what the size of the browser is. I've tried using margins with percents, but that doesn't seem to work.
Here's my code.
html
<div class="weare">
<img src="image/textrenders/weare.png" />
</div>
<div class="shaftesburytv">
<img src="image/textrenders/Shaftesburytv.png" />
</div>
<div class="awebbasedstudio">
<img src="image/textrenders/awebbasedstudio.png" />
</div>
css
.weare {}
.shaftesburytv {}
.awebbasedstudio {}
I want the result to look something like this
Any help would be appreciated.
Simplify your content:
<div id="container">
<img src="http://placekitten.com/200/50">
<img src="http://placekitten.com/300/100">
<img src="http://placekitten.com/250/75">
</div>
Then ensure the container has the same width as the largest contained image, and apply margin:0 auto; to it to center. Finally put display:block on the images to make them all stack vertically:
#container {
margin:100px auto;
width:300px;
}
#container img {
display:block;
}
Sample here.
Alternatively, if you also want to center vertically, you can also use absolute positioning and then negative margins on the absolute size of the object - no problem for you since the image sizes are fixed:
#container {
margin-left:-150px;
margin-top:-112px;
left:50%;
position:absolute;
top:50%;
}
#container img {
display:block;
}
Sample of this approach here.
Since you're using images, you could
margin: 0 auto;
to them. For text, you could
text-align:center;
With divs, you could also center align them (in HTML).
You could also use center tags: http://jsfiddle.net/A33J2/
It can be verry simple.
If you do not split your image and gather all text of it into one.
html
<img id="my-whole-image" src="http://placekitten.com/300/250" />
css
#my-whole-image {
margin-left:-150px;
margin-top:-125px;
left:50%;
position:absolute;
top:50%;
display:block;
}
jsFiddled here
Just a tip, ence you're saying you are new to css, i presume you are new to html too : always use the minimum required to build your webpages. Those 3 images had to be merged into one for many reasons like server request, bandwidth, browser redraw, dom elements number.
I am using the columnal(http://www.columnal.com/) responsive grid framework and am trying to create a vertical divider line in between columns that will stay centered in the right margin as the viewport is resized.
I have tried a couple of solutions using background images and pseudo elements but neither has been successful. The right margin is used by the columnal framework so this can't be used as part of the solution which is why I think a vertically repeating background image or pseudo element is required.
I am also trying to avoid using additional html elements in the code, I would like to keep this as clean as possible. However if that's the only solution, then so be it.
Here's the HTML:
<div class="container">
<div class="row">
<div class="col_4 vertical_divider">
<div class="content">I want a vertical divider line to appear in the centre of the margin to the right of this grey box ->
<br/>
<br/>If you don't see columns to the right re-size this window to make it bigger.</div>
</div>
<div class="col_4 vertical_divider">
<div class="content">This example uses the Columnal responsive framework</div>
</div>
<div class="col_4 last">
<div class="content">Solution could be using a repeating image, pseudo elements or something else. I would like to avoid using additional html if possible. Solution should preferably be css applied to the 'vertical_divider' class.</div>
</div>
</div>
</div>
and here's the CSS:
* {
box-sizing: border-box;
}
.content {
background-color:#ddd;
min-height:400px;
padding:5px;
}
/* Solution preferably applied to this class */
.vertical_divider {
}
I've put it up as fiddle here which also includes a little more explanation:
http://jsfiddle.net/NtuZJ/12/
I've came up with a nice solution using :after pseudo class. The only disadvantage is that you have to specify half the size of the margin (to the right setting).
jsFiddle Demo
.vertical_divider:after {
background: red;
width: 1px;
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: -15px;
}
My framework is spitting out html in the wrong order for my layout. I could change it but for other media the order is correct. Currently I have a simple line of javascript to transport the html but I was wondering if there was a css alterative.
Here is the simplefied exaple. The first example is how it should work, the second is what I have now. I'd like to know if the same layout can be accomplished on the second example, the desired version wihtout using the javascript
http://jsfiddle.net/SPgyA/1/
<div id="wrap">
<div id="right" class="somediv">
div right, dont know height in advance
</div>
<div id="main">
main text, dont know height in advance<br />
main text, dont know height in advance<br />
main text, dont know height in advance<br />
</div>
</div>
<div id="desired_wrap">
<div id="desired_main">
main text, dont know height in advance<br />
main text, dont know height in advance<br />
main text, dont know height in advance<br />
</div>
<div id="desired_right" class="somediv">
div right, dont know height in advance
</div>
</div>
the javascript:
$("#desired_right").prependTo("#desired_wrap");
the css
#wrap,#desired_wrap{
width:200px;
margin:10px;
padding:10px;
border:1px dashed grey;
}
#right{
float:right;
}
#desired_right{
float:right;
}
.somediv{
color:red;
width:100px;
background-color:#eee;
}
Here the way to handle this with only CSS and without changing your HTML order, by adding a small additional html attribute*:
*In my opinion, this is only possible way to get this work, because the floating behavior, specified by the w3c, can't work this way without adding at least one html attribute.
HTML
<div id="desired_wrap">
<div id="desired_main" data-placeholder="my box text">
main text, dont know height in advance<br />
main text, dont know height in advance<br />
main text, dont know height in advance<br />
</div>
<div id="desired_right" class="somediv">
my box text
</div>
</div>
Now, we're placing the text from data-placeholder via the :before, before #desired_main via the content css property.
This way, the height of the generated element will be exactly the same as the height from #desired_right, because they contain the same text.
CSS
#desired_wrap{
width:200px;
padding:10px;
position: relative;
}
.somediv {
width: 100px;
}
#desired_main:before {
content: attr(data-placeholder);
float: right;
width: 100px;
}
Positioning #desired_right absolute to the right top, will simulate a float right, like in your first, working example:
CSS
#desired_right{
position: absolute;
top: 10px;
right: 10px;
}
Works well in:
Internet Explorer 8+
Firefox 3.6
Chrome 17+
Safari 5+
Live demo: http://jsfiddle.net/SPgyA/3/
If you want to align the inner .somediv to the top right you need to add position:relative and absolute
#wrap,#desired_wrap{
position:relative;
}
.somediv{
position:absolute;
top:0px;
right:0px;
}
EDIT:
Just realised that with that change the text no longer flows around the div...
I have the following layout: nested DIVs, the outer having 100% width and the inner having some fixed width. The inner one is centered using margin:auto.
Now I need to set different backgrounds to the DIVs. Say, the inner should be red and the remaining part of the outer should be green. The problem is that the backgrounds need to be semitransparent (using PNG or CSS3's rgba()). So, the background of the inner DIV does not look red, it becomes brown! Here is my code:
<div id="outer">
<div id="inner"></div>
</div>
and the CSS
#outer{width:100%;height:50px;background:rgba(0,255,0,0.5)}
#inner{width:800px;height:50px;margin:auto;background:rgba(255,0,0,0.5)}
I've tried to use 3 floated DIVs inside the #outer. But I can't set width for the other 2 DIVs to make the #inner to be in the center of the screen. width:auto doesn't work as well.
I know such layout is possible with tables; more precisely with elements that have display:table-cell. So when I add another "outer" DIV, I get the result I need (3 "levels" are required for table-like layout: table, row, cell). CSS:
#outer2{display:table;width:100%}
#outer{height:50px;display:table-row}
#inner{width:800px;height:50px;background:rgba(255,0,0,0.5)}
#left, #right, #inner{display:table-cell}
#left, #right {background:rgba(0,255,0,0.5)}
and the ugly HTML:
<div id="outer2">
<div id="outer">
<div id="left"></div>
<div id="inner"></div>
<div id="right"></div>
</div>
</div>
Is there any other way to put 3 DIVs in a row with such "balance"? Or, maybe, there is a completely different way to solve the original issue? I mean, the problem appeared only because of the transparency! :)
I don't like the solution with display:table, because I've added 3 additional DIVs... Also, please don't suggest any solutions using JS.
If you're feeling edgy and don't mind losing a horizontal scrollbar...
HTML
<section></section>
CSS
body { overflow-x:hidden; }
section {
width:500px;
height:50px;
margin:0 auto;
position:relative;
background:rgba(255,0,0,0.5);
}
section:before, section:after {
top:0;
bottom:0;
content:"";
width:9999px;
position:absolute;
background:rgba(0,255,0,0.5);
}
section:after { left: 100%; }
section:before { right: 100%; }
Demo: http://jsfiddle.net/6STug
Hat-tip, CSS-Tricks
Why don't you use a single background png image on the #outer? The image could contain the semitransparent red then the semitransparent green and again the semitransparent red.