19 replies [Last post]
amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 48 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

Hello All!!
I'm back with an interesting puzzle to solve. I have an image that I was given, and it's up to me to make it a reality. It's pretty simple (html wise) but I'm having a bit of a time figuring out how to style it. When you look at it, you'll see my problem. It involves having two quotes outside of the text. There is also an image to the left, that is to be a link. The issue I'm having is trying to figure out a way to put that image behind the text, but also make it resize with the text.

Things I've considered:
1)making two images, one for top, and one for bottom, that allow the text to have the top quote as the background. This causes issues however, cause I need the bottom quote to be next to, and not below the text.

2)making the quotes in HTML, and try resizing them---this would work except, the line height can't be adjusted to make them fit properly (perhaps someone can find a way to do this properly?)

3)killing the designer Tongue

This isn't too hard of a puzzle, but I'm looking to see if anyone else has a better idea.

AttachmentSize
screenshot.jpg81.69 KB

@}->-- Amanda

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The correct approach is

The correct approach is always to take the path of least resistance so that would be option three then Smile always my preferred method to sorting tricky dilemmas.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 48 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

hrmm... yes, but I like not

hrmm... yes, but I like not be in prison. I can obviously do it without making the text able to resize (by just putting it as a background image) but I'd rather not do this. There should be a way darn't!!

@}->-- Amanda

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

If sufficient detail in the

If sufficient detail in the image can you not place it in a div that is holding the text (probably floated) and that will expand then the image is given percentage dimensions to grow with parent. The quotes are spans that you can adjust using offset values ? all that may be utter gibberish though.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 48 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

Well, i tried, that, in 2 i

Well, i tried, that, in 2 i think? I put the quotes in spans, but couldn't get it to line up... offset values? perhaps... any suggestions for offsetting?

@}->-- Amanda

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Can you throw a link up

Can you throw a link up Amanda it's probably easier to understand if actually something to fiddle with

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 48 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

http://www.amadika.com/staffp

@}->-- Amanda

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Well apropos of the span

Well apropos of the span this was my thinking:

span { font-size:2.5em; position:relative; top:10px; padding:.1em; font-family:"Times New Roman", Times, serif;

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 48 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

Gets it close, but not

Sad Gets it close, but not quite. Additionally... when I was doing this earlier, the quotes looked like the ones in the picture.. but now they're not, and I'm using the same font family :?

span {
font-size:6em;
position:relative;
top: 10px;
padding: .1em;
font-family: "Times New Roman", Times, serif;
}

AttachmentSize
screenshot.jpg 49.49 KB

@}->-- Amanda

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

What's close but not quite

What's close but not quite :?

You should use entities for the quotes & # 8820; & # 8821; iirc but that may be something completely different and not quotes at all Smile

A left negative margin or left offset can pull the text across to the left, but you probably want a smaller container around the two primary elements.

At the end of the day you might consider that this whole thing is better as a image, as they will many little hurdles to struggle over yet.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 48 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

That's 8220 and 8221, but

That's 8220 and 8221, but that fixed it Tongue Now I have the quotes looking correct, and by reducing the size of the quotes, I was able to make the line spacing correct. (which was what I was referring to before)I can resize up to 9 times without problems... which is good enough for me (for now Wink )

What hurdles are you referring to? That perhaps, I can't get the whole thing to center in the browser? (horizontally?) or that if you resize the screen below 800 px, the text gets all messed up?

I refuse to accept the image!!!!

AttachmentSize
screenshot.jpg 49.58 KB

@}->-- Amanda

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 48 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

Or would it be, like I just

Or would it be, like I just noticed... that it doesn't work in IE7 Sad *sigh*

@}->-- Amanda

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Hurdles would be to do with

Hurdles would be to do with keeping everything tight when resized.

So what was 8820 ? Smile I was close though!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 48 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

it all worked great really,

it all worked great really, except for IE, and all the other crappy browsers out there. Only Firefox loves me... The new version is:
http://www.amadika.com/staffphone/index.html

@}->-- Amanda

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Try using ems for the offset

Try using ems for the offset though, it will keep the quotes proportional to the font size increase and position, try: top:.4em;

What problems in IE7 ?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 48 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

Well problems in IE would be:

Well problems in IE would be best explained by an image... *sigh* looks the same in IE6, Opera, and Safari

AttachmentSize
screenshotIE.jpg 108.41 KB

@}->-- Amanda

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Well this may not help if

Well this may not help if the same problems exist in Opera and Safari, but for IE try ensuring that elements don't require hasLayout so try zoom:1; on various of the elements as well as position relative for floats, I'll try and have a look on a IE box in a sec.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

which version of Safari are

which version of Safari are you using - it looks fine in 2.0.4

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 48 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

Safari Beta for

Safari Beta for Windows---sorry, I forgot to specify Smile

Putting relative positioning on floats doesn't help... and when I tried putting zoom:1; on stuff, the quotes disappeared in IE. :? Though it does make the text appear again. In the right spot. And apparently Opera and Safari are working now. :shrug:

Just not IE Sad

@}->-- Amanda

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 48 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

Hrm... well I'm going to

Hrm... well I'm going to compromise and use an image for IE, since it hates me Tongue I'm tired of dealing with it today. But I would appreciate it if anyone knows how you can actually fix it for IE... without Hacks Sad

@}->-- Amanda