View Full Version : i need some help with targeting links...


silverem
07-15-2003, 05:16 AM
ok, i'm kind of in over my head here, so i'd appreciate any help anyone here could give me! heh, i feel kinda silly, cause i have no clue what i'm doing, but anyway...
basically, i have a webpage that uses css and i want to target the links so that they'll open on the left side of the page where the text is. go here (http://www.angelfire.com/ill/good-for-nothing/writings.html) to see the page so you'll know what i'm talking about. here's all the html. i'm pretty sure it needs fixing up, but i guess i'll worry about that later:
<html>
<head>
<style type="text/css"><!--
a:hover {cursor:w-resize}
--></style>

<title>With a pen in hand...</title>
<style type="text/css"><!--
body {margin:20px}

.main {position:absolute;left:10px;top:50px;width:250px; height:375px;overflow:auto; filter:alpha(Opacity=50); color:#0db2de; background:#333333;font-family:Arial,Helvetica;font-size:12px;}
.title1 {position:absolute;left:50px;top:25px;color:#0db2d e;font-family:Verdana,Arial,Helvetica;font-size:20px;font-weight:bold}
.title2 {position:absolute;left:375px;top:225px;color:#0db 2de;font-family:Verdana,Arial,Helvetica;font-size:20px;font-weight:bold}
.title3 {position:absolute;left:400px;top:50px;color:#0000 00;font-family:Verdana,Arial,Helvetica;font-size:20px;font-weight:bold}
.menu {position:absolute;left:400px;top:75px}
a {font-family:Verdana,Arial,Helvetica;font-size:11px;font-weight:bold;color:#000000;letter-spacing:1px}
a:link {color:#0066ff; text-decoration:none}
a:visted {color:#000066; text-decoration:line-through}
a:hover {color:#000000; text-decoration: overline underline}
.welcome {position:absolute;left:350px;top:250px;width:200p x;height:100px;overflow:auto; filter:alpha(Opacity=50); color:#000000; background:#cccccc;font-family:Arial,Helvetica;font-size:12px}
--></style>

<div id="image2" style="width: 725; height: 500; position: absolute; top:-10; left:-100;">
<img src="http://www.angelfire.com/ill/good-for-nothing/writings.jpg" width="725" height="500">
</div>
</head>
<body>

<!-- Begin Title -->
<div class="title1">//CONTENT\\</div>
<!-- End Title -->

<!-- Begin Title -->
<div class="title2">//ABOUT\\</div>
<!-- End Title -->

<!-- Begin Title -->
<div class="title3">//NAVIGATE\\</div>
<!-- End Title -->

<!-- Begin Menu -->
<div class="menu"><ul>
<li><a href="siteinfo.html">.siteinfo.</a></li>
<li><a href="layoutinfo.html">.layoutinfo.</a></li>
<li><a href="lyrics.html">.lyrics.</a></li>
<li><a href="shortstories.html">.short-stories.</a></li>
<li><a href="prose.html">.prose.</a></li>
<li><a href="poems.html" target="left">.poems.</a></li>
</ul></div>
<!-- End Menu -->

<div class="main">
<!-- Begin Content -->
<p>With a pen in hand<BR>
one never knows<BR>
what one will be able<BR>
to understand.<BR><BR>
to make clear<BR>
to make known<br>
to be feared<BR>
to be shown<BR><BR>
once again<BR>
with the pen<BR>
the writing is so bright<BR>
and again<BR>
soon to happen<BR>
is the coming of the light<BR><BR>
and it is finally seen<BR><BR>
With a pen in hand<BR>
one never knows<BR>
what one will be able<BR>
to understand.<BR><BR>

</p>

<p>Vetus opinio est iam usque ab heroicis ducta temporibus, eaque et populi Romani et omnium gentium firmate consensu, versari quandam inter homines divinationem, quam Graeci appellant, id est praesensionem et scientiam rerum futurarum. Magnifica quaedam res et salutaris, si modo est ulla, quaque proxime ad deorum vim natura mortalis, possit accedere. Itaque ut alia nos melius multa quam Graeci, sic huic praestantissimae rei nomen nostri a divis, Graeci, ut Plato interpretatur, a furore duxerunt.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

<p>Vetus opinio est iam usque ab heroicis ducta temporibus, eaque et populi Romani et omnium gentium firmate consensu, versari quandam inter homines divinationem, quam Graeci appellant, id est praesensionem et scientiam rerum futurarum. Magnifica quaedam res et salutaris, si modo est ulla, quaque proxime ad deorum vim natura mortalis, possit accedere. Itaque ut alia nos melius multa quam Graeci, sic huic praestantissimae rei nomen nostri a divis, Graeci, ut Plato interpretatur, a furore duxerunt.</p>
<!-- End Content -->
</div>


<!-- Begin Menu -->
<div class="welcome">
Welcome to With a Pen in Hand.
Take a look around.
and for the love of all that is good and pure, <b>please</b> don't steal anything from this site.
since everything here is all my content, it wouldn't been very nice of you to take it.
and plus, you'd get bad karma.
have a nice day =).
</div>
<!-- End Menu -->
</body>
</html>

it seems as if there isn't a way to get the links to open on the left, because the text is already there, as you can see. so what's a way for me to do that, but keep it looking the same as it does now? i don't want to make separate pages for each link, either. i'm thinking of using an inline frame, and i've tried that, but i can't get it to look the same. i want to keep the transparency and everything. and i don't know how to code it to keep it like that. so, could someone help me out with this? i haven't a clue what i'm doing, lol. i hope that all made sense.

kittycat
07-15-2003, 05:44 AM
You can't target divs, only frames. So the only thing you can do is use an iframe if you want to target them to that area. The code that you're using to make the div transparent *should* work for an iframe...

silverem
07-15-2003, 05:55 AM
yeah, i thought i'd have to do that. ok, i should be able to get it to work then. the only problem i'm having is getting the transparency thing working. i'll give it a try though. i'll just come back and ask for more help if i can't figure it out, lol. :-P
thanks alot!

silverem
07-15-2003, 11:50 AM
ok, just thought i'd say that i never got the iframes to work. :( i think it's probably because of my version of IE. so, i decided to just put the image in the background of each page, that way everyone will be able to view it the same way. but thank you for the help. :)

CryptalClear
07-16-2003, 12:39 AM
You have an awesome layout! I wish I was that talented...and at least you sort of understand what you're doing :)

MaGiCSuN
07-16-2003, 05:17 PM
the bold part was on the wrong place. it was inside the <head> and </head> while it should be after the <body> tag :)

<html>
<head>
<style type="text/css"><!--
a:hover {cursor:w-resize}
--></style>

<title>With a pen in hand...</title>
<style type="text/css"><!--
body {margin:20px}

.main {position:absolute;left:1
0px;top:50px;width:250px;
height:375px;overflow:aut
o; filter:alpha(Opacity=50);
color:#0db2de; background:#333333;font- family:Arial,Helvetica;fo
nt-size:12px;}
.title1 {position:absolute;left:5
0px;top:25px;color:#0db2d
e;font- family:Verdana,Arial,Helv
etica;font-size:20px;font-weight:bold}
.title2 {position:absolute;left:3
75px;top:225px;color:#0db
2de;font- family:Verdana,Arial,Helv
etica;font-size:20px;font-weight:bold}
.title3 {position:absolute;left:4
00px;top:50px;color:#0000
00;font- family:Verdana,Arial,Helv
etica;font-size:20px;font-weight:bold}
.menu {position:absolute;left:4
00px;top:75px}
a {font- family:Verdana,Arial,Helv
etica;font-size:11px;font- weight:bold;color:#000000
;letter-spacing:1px}
a:link {color:#0066ff; text-decoration:none}
a:visted {color:#000066; text-decoration:line-through}
a:hover {color:#000000; text-decoration: overline underline}
.welcome {position:absolute;left:3
50px;top:250px;width:200p
x;height:100px;overflow:a
uto; filter:alpha(Opacity=50);
color:#000000; background:#cccccc;font- family:Arial,Helvetica;fo
nt-size:12px}
--></style>
</head>
<body>

<div id="image2" style="width: 725; height: 500; position: absolute; top:-10; left:-100;">
<img src="http://www.angelfire.com/ill/good-for-nothing/writings.jpg" width="725" height="500">
</div>
<!-- Begin Title -->
<div class="title1">//CONTENT\\</div>
<!-- End Title -->

<!-- Begin Title -->
<div class="title2">//ABOUT\\</div>
<!-- End Title -->

<!-- Begin Title -->
<div class="title3">//NAVIGATE\\</div>
<!-- End Title -->

<!-- Begin Menu -->
<div class="menu"><ul>
<li><a href="siteinfo.html">.siteinfo.</a></li>
<li><a href="layoutinfo.html">.layoutinfo.</a></li>
<li><a href="lyrics.html">.lyrics.</a></li>
<li><a href="shortstories.html">.short-stories.</a></li>
<li><a href="prose.html">.prose.</a></li>
<li><a href="poems.html" target="left">.poems.</a></li>
</ul></div>
<!-- End Menu -->

<div class="main">
<!-- Begin Content -->
<p>With a pen in hand<BR>
one never knows<BR>
what one will be able<BR>
to understand.<BR><BR>
to make clear<BR>
to make known<br>
to be feared<BR>
to be shown<BR><BR>
once again<BR>
with the pen<BR>
the writing is so bright<BR>
and again<BR>
soon to happen<BR>
is the coming of the light<BR><BR>
and it is finally seen<BR><BR>
With a pen in hand<BR>
one never knows<BR>
what one will be able<BR>
to understand.<BR><BR>

</p>

<p>Vetus opinio est iam usque ab heroicis ducta temporibus, eaque et populi Romani et omnium gentium firmate consensu, versari quandam inter homines divinationem, quam Graeci appellant, id est praesensionem et scientiam rerum futurarum. Magnifica quaedam res et salutaris, si modo est ulla, quaque proxime ad deorum vim natura mortalis, possit accedere. Itaque ut alia nos melius multa quam Graeci, sic huic praestantissimae rei nomen nostri a divis, Graeci, ut Plato interpretatur, a furore duxerunt.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

<p>Vetus opinio est iam usque ab heroicis ducta temporibus, eaque et populi Romani et omnium gentium firmate consensu, versari quandam inter homines divinationem, quam Graeci appellant, id est praesensionem et scientiam rerum futurarum. Magnifica quaedam res et salutaris, si modo est ulla, quaque proxime ad deorum vim natura mortalis, possit accedere. Itaque ut alia nos melius multa quam Graeci, sic huic praestantissimae rei nomen nostri a divis, Graeci, ut Plato interpretatur, a furore duxerunt.</p>
<!-- End Content -->
</div>


<!-- Begin Menu -->
<div class="welcome">
Welcome to With a Pen in Hand.
Take a look around.
and for the love of all that is good and pure, <b>please</b> don't steal anything from this site.
since everything here is all my content, it wouldn't been very nice of you to take it.
and plus, you'd get bad karma.
have a nice day =).
</div>
<!-- End Menu -->
</body>
</html>

like kittycat said, you can use transparant iframes for it. Just position them like you positioned your divs and make them transparent and you should be fine. It looks the same ;)

Love,
Mirna