Tue, 2007-07-31 14:45
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 
This isn't too hard of a puzzle, but I'm looking to see if anyone else has a better idea.
| Attachment | Size |
|---|---|
| screenshot.jpg | 81.69 KB |
Tue, 2007-07-31 15:19
#1
The correct approach is
The correct approach is always to take the path of least resistance so that would be option three then 
always my preferred method to sorting tricky dilemmas.
Tue, 2007-07-31 15:22
#2
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!!
Tue, 2007-07-31 15:27
#3
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.
Tue, 2007-07-31 15:30
#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?
Tue, 2007-07-31 15:41
#5
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
Tue, 2007-07-31 16:09
#6
http://www.amadika.com/staffp
Tue, 2007-07-31 16:20
#7
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;
Tue, 2007-07-31 16:27
#8
Gets it close, but not
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;
}
| Attachment | Size |
|---|---|
| screenshot.jpg | 49.49 KB |
Tue, 2007-07-31 16:35
#9
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
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.
Tue, 2007-07-31 16:51
#10
That's 8220 and 8221, but
That's 8220 and 8221, but that fixed it 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 
)
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!!!!
| Attachment | Size |
|---|---|
| screenshot.jpg | 49.58 KB |
Tue, 2007-07-31 16:59
#11
Or would it be, like I just
Or would it be, like I just noticed... that it doesn't work in IE7 *sigh*
Tue, 2007-07-31 17:19
#12
Hurdles would be to do with
Hurdles would be to do with keeping everything tight when resized.
So what was 8820 ? I was close though!
Tue, 2007-07-31 17:31
#13
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
Tue, 2007-07-31 17:40
#14
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 ?
Tue, 2007-07-31 17:47
#15
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
| Attachment | Size |
|---|---|
| screenshotIE.jpg | 108.41 KB |
Tue, 2007-07-31 17:50
#16
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.
Tue, 2007-07-31 18:45
#17
which version of Safari are
which version of Safari are you using - it looks fine in 2.0.4
Tue, 2007-07-31 19:12
#18
Safari Beta for
Safari Beta for Windows---sorry, I forgot to specify
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
Tue, 2007-07-31 20:42
#19
Hrm... well I'm going to
Hrm... well I'm going to compromise and use an image for IE, since it hates me 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