WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > [SOLVED] Adding scalloped border image to .content-outer ?

Reply
  Thread Tools Display Modes
Old 23rd June 12, 03:50 AM   #1
omgitschelsea
WLC Member
 
Join Date: May 2012
Posts: 13
Default Adding scalloped border image to .content-outer ?

Hi there, thanks in advance for your help.

I am designing a blog layout for use on Blogger.
I am trying to achieve a scalloped edge on the outside of the content area like this: http://www.puglypixel.com/2011/11/10...logger-layout/
but on a TWO column layout.

I've got this far:
http://yourstruly-blogdesigns.blogspot.co.nz/
by using a repeat-y on the background image... but now it's just made my side bar disappear. If I have no repeat-y, then the image repeats across and leaves a space between the sidebar and the content area and looks weird.

Last edited by omgitschelsea; 23rd June 12 at 04:48 AM.
omgitschelsea is offline   Reply With Quote
Old 23rd June 12, 04:14 AM   #2
omgitschelsea
WLC Member
 
Join Date: May 2012
Posts: 13
Default Re: Adding scalloped border image to .content-outer ?

this problem still remains unsolved, gah.

Last edited by omgitschelsea; 23rd June 12 at 04:44 AM.
omgitschelsea is offline   Reply With Quote
Old 23rd June 12, 09:48 AM   #3
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Adding scalloped border image to .content-outer ?

WoW! A whole 25 minutes worth of patience, you need far more than that for developing HTML & CSS layouts.

Well, until you have a LOT more experience behind you that is.

So; is it something like this http://examples.webmaster-talk.eu/ch.../thread-34619/ you are after
chrishirst is offline   Reply With Quote
Old 23rd June 12, 10:36 AM   #4
omgitschelsea
WLC Member
 
Join Date: May 2012
Posts: 13
Default Re: Adding scalloped border image to .content-outer ?

Quote:
Originally Posted by chrishirst View Post
WoW! A whole 25 minutes worth of patience, you need far more than that for developing HTML & CSS layouts.

Well, until you have a LOT more experience behind you that is.

So; is it something like this http://examples.webmaster-talk.eu/ch.../thread-34619/ you are after

Thanks Chris, I will check that out but no need to be rude.. I only posted that second thing with more info to add to my post but edited it because I edited my original post when my problem changed a bit. I had marked the post as resolved but it became unresolved again. Thanks. I do realize CSS takes more than 25 minutes.
omgitschelsea is offline   Reply With Quote
Old 23rd June 12, 02:40 PM   #5
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Adding scalloped border image to .content-outer ?

It was just the wording of the post, a simple explanation that didn't make you appear impatient would have avoided the misunderstanding.
chrishirst is offline   Reply With Quote
Old 24th June 12, 12:13 AM   #6
omgitschelsea
WLC Member
 
Join Date: May 2012
Posts: 13
Default Re: Adding scalloped border image to .content-outer ?

Quote:
Originally Posted by chrishirst View Post
It was just the wording of the post, a simple explanation that didn't make you appear impatient would have avoided the misunderstanding.
Well I really appreciate your help, I am going to give that a try right now.
omgitschelsea is offline   Reply With Quote
Old 24th June 12, 01:06 AM   #7
omgitschelsea
WLC Member
 
Join Date: May 2012
Posts: 13
Default Re: Adding scalloped border image to .content-outer ?

Quote:
Originally Posted by chrishirst View Post
It was just the wording of the post, a simple explanation that didn't make you appear impatient would have avoided the misunderstanding.
Hi again Chris,

I looked at what you posted but that's not quite what I mean. I want the sidebar and content area to all be connected, and the scalloping to be on the left side of the content area and the right side of the sidebar. So one big white space with scalloping on the sides, hopefully that makes sense?
omgitschelsea is offline   Reply With Quote
Old 24th June 12, 07:06 AM   #8
omgitschelsea
WLC Member
 
Join Date: May 2012
Posts: 13
Default Re: Adding scalloped border image to .content-outer ?

Finally figured it out after a few hours of messing around! Success
omgitschelsea is offline   Reply With Quote
Old 24th June 12, 09:27 AM   #9
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Adding scalloped border image to .content-outer ?

Ok. For others reading this now or in the future, would you post your solution to getting the look you actually wanted.

I can think of these off the top of my head.

1: Make the scalloped image an the content area wider and move the "sidebar" into the content area with a transparent background.

1a: split the image into two pieces (left and right) and use CSS multiple backgrounds to allow the content area to be a variable width (or apply the multiple backgrounds to the body element"

2/ split the image and use the right edge on the sidebar and left edge on the content.

3/ use ther CSS3 border-image property, not that well supported by browsers currently, only Safari of the ones I tried.
chrishirst is offline   Reply With Quote
Old 25th June 12, 12:07 AM   #10
omgitschelsea
WLC Member
 
Join Date: May 2012
Posts: 13
Default Re: Adding scalloped border image to .content-outer ?

Quote:
Originally Posted by chrishirst View Post
Ok. For others reading this now or in the future, would you post your solution to getting the look you actually wanted.

I can think of these off the top of my head.

1: Make the scalloped image an the content area wider and move the "sidebar" into the content area with a transparent background.

1a: split the image into two pieces (left and right) and use CSS multiple backgrounds to allow the content area to be a variable width (or apply the multiple backgrounds to the body element"

2/ split the image and use the right edge on the sidebar and left edge on the content.

3/ use ther CSS3 border-image property, not that well supported by browsers currently, only Safari of the ones I tried.

Sure! So my first problem was that I didn't have my content areas background set to transparent, so I wasn't seeing my image at all. My other problem that took me forever to solve was stupid really...I just didn't have the width of my content/sidebar area matching the width of my background so my background image (scalloping) wasn't showing up properly. That was an easy fix that took me hours haha.
omgitschelsea is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:50 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.