Draw Lines with CSS

[ronnyjljr]

Hello,

Is it possible to define two <span> tags and draw a rectangle between them? Is there an alternate way of doing this?


Thanks,
Ron

typedef map<GiantX,gold, less<std::shortestpathtogold> > AwesomeMap;

 

[vacunita]

How about using a <div> tag and setting the border of it.

Just give the div the proer dimensions, and you should be o.k.

Like:

#myrect{
width:200px;
height:80px;
border: 1px solid black;
}

[green]\\and then:[/green]
<div id=myrect></div>

This will produce a 200 by 80 px rectangle with no background.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[ronnyjljr]

Is there a way to draw these div tags on different layers?
So I could have them overlapping?

Thanks,
Ron

typedef map<GiantX,gold, less<std::shortestpathtogold> > AwesomeMap;

 

[vacunita]

Well you can absoluteley position them. inside another DIV tag. and set their top and left properties so they overlap.

<div id=container>
<div id=first></div>
<div id=second></div>
</div>

Then your CSS would be:

#first{
position:absolute;
top:100px;
left:100px;
width:200px;
height:80px;
border:1px solid red;
}

#second{
position:absolute;
top:120px;
left:150px;
width:200px;
height:80px;
border:1px solid green;
}
They should overlap.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[ChrisHunt]

Maybe if you told us what you were actually trying to achieve we could give better advice?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[dkdude]

... you're right, Chris : let's know whay we're reading this post? Then (possibly only then) we can help out better...

Ron - please elaborate

 

[ronnyjljr]

Hmm...

Better solution to this problem. This is for a calendar application. I just wanted to draw a box between two sections. I decided I could calculate the offset after I knew the first position. Then I set the z-index to 2 and made the boxes semi-transparent.

The result: Nice overlapping, semi-transparent boxes which show the scheduling block.

Image of application

Thanks,
Ron



typedef map<GiantX,gold, less<std::shortestpathtogold> > AwesomeMap;

 

[dkdude]

... hmm ... still not absolutely sure what you're asking for. Which boxes do you desire to look like what?

Maybe if you draw up an image og what your example should look like we aould help you out. That'll be a great help to help you.

Anyways -it's almost 2am here now, so I'll check in tomorrow ;-)

 

[ronnyjljr]

Thats what I wanted. I posted the image.

typedef map<GiantX,gold, less<std::shortestpathtogold> > AwesomeMap;

 

[Vragabond]

Yup, the old method is best:

1. Create relatively positioned boxes for days floated next to each other.
2. Create absolutely positioned event boxes within.

 

[ChrisHunt]

I'd use a table to define the basic days & times grid, defining the heights and widths of the cells in ems and giving the table as a whole [tt]position:relative[/tt]

I'd follow the table with a <div> for each event and absolutely position it (also in ems) to where I want it.

The whole set-up would be fairly inaccessible to blind users, you should consider adding a text-only equivalent if that's an issue.

Have you thought of using Google Calendar instead?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[ronnyjljr]

I do define a grid for the days and times and place the grid accordingly. Give me more credit than that guys!

As far as Google Calendar, this small web application isn't changing that often, once every 4 months or so and only displays office hours. If it gets any more complicated, then I would definitely use Google calendar.

-Thanks,
Ron

typedef map<GiantX,gold, less<std::shortestpathtogold> > AwesomeMap;