PDA

View Full Version : Right and Left Page Image Borders


statty
07-09-2013, 10:39 PM
Hi, I would like to add a left and right border to the content of my webpage (in my main template). I know how to add a border however the border I would like to add is an image. How can I do this? Any suggestions.
Thanks!

gentleone
07-10-2013, 04:11 PM
There are quite some ways to do this, but this depends on the type of border and also how far back do you need to support Internet Explorer.

Can you upload somewhere (photobucket or something like that) an image of the layout/design you want to create?

statty
07-10-2013, 08:46 PM
The border is for the editable region on my template. I have a header and footer that are non editable. In my 1 column editable region I simply want an image border on the right and the left hand side of the pages where text will be centred in between. (Hope this describes it for you).

I will be publishing the website so I guess IE7 would be sufficient.

Thanks for your reply.

domedia
07-11-2013, 08:19 PM
Are you just guessing or do you know that you need IE7 support?
IE support kinda changes a little how you approach a project/site from a front end development point of view.

Nice link:
http://css-tricks.com/understanding-border-image/

If you just want a border, not an image, then a regular border-left: 10px dashed #c00 will work.

gentleone
07-11-2013, 08:59 PM
Yes, if you don't have to support IE7 you can also use generated content :before & :after to fill with your (border) image.

statty
07-12-2013, 10:17 PM
Thank you all for the replies. I am only guessing IE7 support would be needed. It is an image for the border and not just a border itself.

gentleone
07-13-2013, 11:29 AM
The resson why I mentioned the :before and :after pseudo elements, is because with this method you don't need extra markup in your HTML to put those border image in.
But like I said... if I could see an image of what you want to achieve it's easier to say which method would be the best in your border situation... how do these borders look like?... can we use background-repeat or not?

statty
07-16-2013, 01:48 PM
I have attached a sample image of the border I would like to place on my page. Thanks!

gentleone
07-17-2013, 12:41 PM
I've made it with the :before and :after pseudo elements, so this won't work in IE7. Just create a fallback solution for IE7 if you have to. Also I used in this demo some fancy CSS3 stuff to flip the same image (works at the moment only in webkit browsers; Safari, Chrome and Operhahaha), cause I was too lazy to flip it with Photoshop, but you should if you want it like that :)

http://cssdeck.com/labs/full/ebtmnpbj

This is the mark-up (i've used a div for the demo, but you could even do this trick on the body tag, so you won't need a element after all):

<div class="content">

<h1>Content here</h1>

<p>Bacon ipsum dolor sit amet short loin capicola tongue chuck, pork chop frankfurter pastrami brisket tri-tip ham hock beef biltong t-bone. Ham hock pancetta fatback, pork loin pastrami cow pork venison bacon pig salami. Pork loin doner turducken ground round beef ribs, drumstick corned beef pastrami ham salami frankfurter prosciutto capicola shankle. Ham kielbasa pig tail fatback brisket bresaola. Chuck shank filet mignon, ham hock spare ribs ground round ribeye pig short ribs sirloin pork loin beef ribs bacon swine.</p>

<p>Pork loin tail fatback beef spare ribs. Jowl salami capicola, hamburger cow bacon pork. Spare ribs chicken pig, capicola pastrami pork loin short ribs shoulder pork. Meatball jerky tongue, cow venison brisket filet mignon turkey pig spare ribs t-bone. Pork belly cow fatback corned beef chicken frankfurter shankle tail sausage brisket short ribs strip steak prosciutto bacon filet mignon. Bresaola chuck pork belly, venison chicken pork spare ribs.</p>

<p>Spare ribs boudin jerky flank short ribs turkey beef. Chuck jerky ground round bacon swine hamburger jowl kielbasa sausage pig leberkas sirloin fatback pork chop tail. Pig cow frankfurter rump filet mignon ball tip. Corned beef pastrami short ribs, pancetta pork tongue venison doner beef ribs strip steak pork belly. Salami jerky pork loin shoulder. Meatloaf shoulder boudin pancetta, pastrami flank hamburger beef shank filet mignon swine tail jowl. Sausage t-bone frankfurter meatloaf.</p>

</div>


CSS:

.content {
position: relative;
height: 643px;
padding: 0 194px;
}

.content:before,
.content:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
width: 194px;
height: 100%;
}

.content:before {
left: 0;
background: url('http://www.dreamweaverclub.com/forum/attachment.php?attachmentid=1069&d=1373978854') no-repeat;
}

.content:after {
right: 0;
background: url('http://www.dreamweaverclub.com/forum/attachment.php?attachmentid=1069&d=1373978854') no-repeat;

/* the following CSS3 properties are to flip the image for this demo */
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: flip;
-ms-filter: "flip";
/* end CSS3 madness */
}





.