My client would like to have this image as text in the sidebar:
But what I thought, would be a fairly easy task, turns out to be slightly more complicated. My first thought was to declare a general class
.sidebar .general{
width: 170px;
text-align: justify;
font-size: 23px;
color: #FFF;
}
which I could use use on different <p> tags and use various <span’s> for the different font styles. But no matter what I try the text won’t extend to the desired width (170px;
Correct me if I’m wrong, but the text is only justifying when it fills the current line of text and it extends to the next line. Then the first line will be justified. The method used to achieve that is typically to leave extra space between words as needed. Do you have words?
I’m pretty sure what you’re trying to do is doable, but by JS, not by CSS alone.
You keep posting CSS code alone. But mark-up also can have a say in the final result.
I don’t think (or better I’m sure) you’re wrong. There is not a lot of mark-up to show. I’m just testing this, with the method I described and used just one line where two different font styles are involved so If you would like to see some mark-up, this is what I have.
<p class=“general”>This is a <span>text</span></p>
It should be the exact same way as in the picture. To which JS are you referring?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>h1 underline</title>
<style type="text/css">
p.general {
width:60px;
background-color:beige;
text-align:justify;
text-justify:inter-word;
}
p.general span {
color:red;
}
</style>
</head><body>
<p class="general">This is a <span>j u s t i f i e d text</span>.</p>
<p>This text is not.</p>
</body></html>
This brings me indeed in the right direction. But what about the one word lines as in the picture. Actually every line need to be identical (170px width) with a difference in the number of words and font styles (for which i can use <span’s). Is this where JS comes in like you mentioned in post #2?
http://plugins.jquery.com/project/charjustify
http://webtoolkit4.me/2010/04/23/sweet-just-create-beautiful-justified-text-jquery-plugi/
http://www.heychinaski.com/blog/2009/01/17/character-justification-using-jquery/
Thank you so much for the links noonnoks
You’re very welkome donboks 
I think donboks should be setting the css quizzes 
I had a quick go but it didn’t work out too well 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>menu</title>
<style type="text/css">
ul.menu {
width:155px;
background:#d5b880;
text-align:justify;
color:#fff;
margin:0;
padding:0;
list-style:none;
padding:10px;
line-height:.9;
position:relative;
}
ul.menu li{
display:inline;
font-size:160%;
padding:0 2px 0 0;
letter-spacing:-2px;
}
ul.menu li a{text-decoration:none;}
.menu li a:hover{color:yellow}
.menu a{color:#fff}
.a a{color:#fff}
.b a{color:#000}
.c a{color:#f00}
.d a{color:#ffc;font-size:120%;}
.e a{color:#ffc}
.f a{color:fff}
.g a{color:#0ff}
.h a{color:#666}
.i a{color:#fcf}
/* etc...*/
b{margin-right:170px;}
.menu li span{display:block;margin-bottom:-1em}
.menu li span.close{margin:-.9em 0;}
</style>
</head>
<body>
<ul class="menu">
<li class="a"><a href="#"><span>r o l l e r <b> </b></span> b l i n d s</a></li>
<li class="b"><a href="#">v e r t i c a l b l i n d s</a></li>
<li class="c"><a href="#">v e n e t i a n b l i n d s b l i n d s</a></li>
<li class="d"><a href="#">w o o d e n b l i n d s</a></li>
<li class="e"><a href="#">r o m a n b l i n d s</a></li>
<li class="f"><a href="#">w i n d o w <b> </b> <span class="close">c o v e r i n g s <b> </b></span> </a></li>
<li class="g"><a href="#"><span class="close">s h a d e s <b> </b></span></a></li>
<li class="h"><a href="#"><span class="close">w i n d o w <b> </b></span> s h a d e s </a></li>
<li class="i"><a href="#">s u n <b> </b> <span class="close"> b l i n d s <b> </b></span></a></li>
<li class="a"><a href="#">b l i n d s c y p r u s</a></li>
<li class="b"><a href="#">e n i g m a b l i n d s </a></li>
<li class="b"><a href="#">c y p r u s l i m i t e d</a></li>
<li class="d"><a href="#">r o l l e r b l i n d s </a></li>
<li class="e"><a href="#">w i n d o w c o v e r i n g s </a></li>
<li class="f"><a href="#">w i n d o w s h a d e s</a></li>
<li class="g"><a href="#">s u n b l i n d s</a></li>
</ul>
</body>
</html>
You could probably do the whole thing as an image and place the anchors on top like this very old demo of mine. It’s a bit of a pain measuring everything up though.
You mean 'cos it’s looking like this? 
Fixed font size baby, fixed font size!!! 150% font size, says my OS.
Actually, I think the Sp example, about maps and dls, the one I liked so much, is a better way to handle this.
You could definitely look at this as a map. The initial image could also, like in the Sp example, be completed with some sprites for a hover effect on the bits. This for when CSS is available but JS is not.
When JS is available, I guess you can choose one jQuery plug-in to keep it as text, if you really want that.
And yes Paul O’Boks, donboks really cracked us lately
Or Pauloks
The problem with that is that SPs example was rectangles and the links in this example wrap to the next line and are not rectangular in shape. In the demo I posted above the target area follows the text only and doesn’t make a rectangular block. You can move from one link to the next much like an image map but its an awful lot of work.
You mean 'cos it's looking like this? :lol:
http://i1202.photobucket.com/albums/…ope/blinds.png
Fixed font size baby, fixed font size!!! 150% font size, says my OS.
Yes I said it was only rough but you get the general idea. I would have spent more time on it but I didn’t think it was going to get there. I just threw it up in the air for ideas.
You forget that for one dt you can have many dd. The reverse is also true.
The links are rectangular in shape. When they wrap to the next line they form two rectangles, hence two positioned dd for a dt.
Come to think of it, you can definitely use text also for dd. So I say it’s a clear possibility using dl with dt and absolutely positioned dds, one or two, depending on the wrapping. I’d say it’s the best choice so far. I mean, I would use the great idea Sp had, in so many scenarios, it would become an html5 element
image map? lol!!!
^ Yeah, why not?! I don’t see a problem with that.
me neither, but just the other night I was thinking of image map applications…
Only, as I said, for this case, and probably for many others, image map can be successfully replaced with a dl. Like Stomme poes showed use in her beautiful example. Am I sounding too much about it ? Sorry if so. I don’t mean to be a broken record, but I really liked the idea.
hence two positioned dd for a dt.
That still wouldn’t accomplish what my demo accomplishes You can’t wrap the anchor around 2 block elements and therefore as the word wraps to another line the other half of the word (sentence) does not become active.
However it is another solution and may be suitable if hover states aren’t required although in those types of menus a hover state is really necessary to delineate each link nicely.
In my example I place inner elements inside the anchor and then move them outside the anchor but always touching at some point. This allows only the required part of the link to be active and not the word beside it. As I said above it’s a pain to code
It all depends how much work has to go into it
Quiz time
But I’ll bet with some JS aside, it can all be arranged. Or maybe some floating, after dividing the anchor text in two spans, and playing with them, floating the second half left, or the first half right? Just thinking out load.
