Hi. I decided to try my hand @ DIV alignment and well... it's not going to good. lol I have a large div that is set up for a 'transparent scrollbars' type deal, and now I'm trying to div position some images and they aren't showing up (actually, I think they're showing up inside the 'transparent scrollbars' area instead of on the main part of the layout. so that's why they aren't visible.)<br />
<br />
Does that make sense at all?? lol<br />
<br />
<!-- m --><a class="postlink" href="http://apparitions.abbeyhosiery.com/help/index2.htm">http://apparitions.abbeyhosiery.com/help/index2.htm</a><!-- m --> <-- to see the layout<br />
<br />
Here's the code:<br />
<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br />
<html><br />
<br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><br />
<meta http-equiv="Content-Language" content="en-us"><br />
<title>apparitions - version 10.0 { doin' it PiNk style }</title><br />
<link rel="stylesheet" type="text/css" href=http://www.htmlforums.com/archive/index.php/"stylesheet.css" /><br />
</head><br />
<br />
<body bgcolor="#FFFFFF"><br />
<br />
<div style="position: absolute; top: 2px; left: 2px;"><img src=http://www.htmlforums.com/archive/index.php/"layout.png" border="0" width="700" height="400"></div><br />
<br />
<div id="content" style="position:absolute; left:2px; top:155px; width:465px; height:300px; z-index:1; overflow: auto; padding: 0px; border: 0; background= none; filter: Alpha(Opacity=50, FinishOpacity=0);"><div style="margin-left: 2px; margin-right: 5px; margin-top: 0px" align="justify"><br />
<br />
<p><br />
ujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfuj djdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfv<br /><br /><br />
ujdjdjdjadfadf ujdjdjdjadfadf ujdjdjdjadfadf ujdjdjdjadfadf ujdjdjdjadfadf<br />
<br /><br />
<a href=http://www.htmlforums.com/archive/index.php/"ADfa.html">adf</a> adfaf<br />
</p><br />
</div> <br />
<br />
<div style="position: absolute; top: 200px; left: 500px;"><img src=http://www.htmlforums.com/archive/index.php/"main.png" border="0" width="100" height="10"></div><br />
<div style="position: absolute; top: 210px; left: 500px;"><img src=http://www.htmlforums.com/archive/index.php/"blog.png" border="0" width="100" height="10"></div><br />
<div style="position: absolute; top: 220px; left: 500px;"><img src=http://www.htmlforums.com/archive/index.php/"interact.png" border="0" width="100" height="10"></div><br />
<br />
</body><br />
</html><br />
<br />
<br />
the three images I and trying to position but wont show up are the last 3 div's in the code. (main.png, blog.png, interact.png) I want them to show up underneath the pink swirlies.<br />
<br />
Also.... I want to create those as hyperlinks. How would I do that? like this??<br />
<br />
<br />
<div style="position: absolute; top: 200px; left: 500px;"><a href=http://www.htmlforums.com/archive/index.php/"main.htm"><img src="main.png" border="0" width="100" height="10"></a></div><br />
<br />
<br />
Thanks in advance, and I hope I haven't confused anyone.<!--content-->first off your link..fine<br />
give your divs a z-index, should solve the problem, i moved things around a bit and it worked:<br />
<br />
<br />
<META content="MSHTML 5.50.4922.900" name=GENERATOR></HEAD><br />
<BODY bgColor=#ffffff><br />
<DIV style="LEFT: 2px; POSITION: absolute; TOP: 2px"><IMG height=400 <br />
src=http://www.htmlforums.com/archive/index.php/"apparitions - version 10_0 { doin' it PiNk style }_files/layout.png" <br />
width=700 border=0></DIV><br />
<DIV style=" POSITION: absolute;LEFT: 500px; TOP: 200px;z-index: 1;"><IMG height=10 <br />
src=http://www.htmlforums.com/archive/index.php/"apparitions - version 10_0 { doin' it PiNk style }_files/main.png" <br />
width=100 border=1></DIV><br />
<DIV style="LEFT: 500px; POSITION: absolute; TOP: 210px; z-index: 1;"><IMG height=10 <br />
src=http://www.htmlforums.com/archive/index.php/"apparitions - version 10_0 { doin' it PiNk style }_files/blog.png" <br />
width=100 border=0></DIV><br />
<DIV style="LEFT: 500px; POSITION: absolute; TOP: 220px;z-index: 1;"><IMG height=10 <br />
src=http://www.htmlforums.com/archive/index.php/"apparitions - version 10_0 { doin' it PiNk style }_files/interact.png" <br />
width=100 border=0></DIV></DIV></BODY></HTML><br />
<br />
<br />
<br />
<DIV id=content <br />
style="BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; Z-INDEX: 1; BACKGROUND: none transparent scroll repeat 0% 0%; FILTER: Alpha(Opacity=50, FinishOpacity=0); LEFT: 2px; PADDING-BOTTOM: 0px; OVERFLOW: auto; BORDER-LEFT: 0px; WIDTH: 465px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 155px; HEIGHT: 300px"><br />
<DIV style="MARGIN-TOP: 0px; MARGIN-LEFT: 2px; MARGIN-RIGHT: 5px" align=justify><br />
<P>ujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfuj djdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfv<BR><BR>ujdjdjdjadfadf <br />
ujdjdjdjadfadf ujdjdjdjadfadf ujdjdjdjadfadf ujdjdjdjadfadf <BR><A <br />
href=http://www.htmlforums.com/archive/index.php/"http://apparitions.abbeyhosiery.com/help/ADfa.html">adf</A> adfaf <br />
</P></DIV><!--content-->See the link for 2 little problems with the [CSS (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fapparitions.abbeyhosiery.com%2Fhelp%2Findex2.htm&warning=1&profile=css2">http://jigsaw.w3.org/css-validator/vali ... ofile=css2</a><!-- m -->)].<br />
<br />
<br />
Two semi-colons need to be added to the code.<br />
<br />
<br />
<br />
<br />
In the [HTML (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fapparitions.abbeyhosiery.com%2Fhelp%2Findex2.htm">http://validator.w3.org/check?uri=http% ... index2.htm</a><!-- m -->)] there a couple of minor things to fix.<br />
<br />
<br />
The </div> tag is missing or in the wrong place.<br />
<br />
<br />
Remove the / from the end of the meta tag, as that is not reuired in HTML. It would only be required if you were writing XHTML code. That is waht is causing the </head> and <body> errors.<br />
<br />
<br />
Add alt="some text" to every <img > tag, the text reflecting what is in the dispayed image. On unimportant images, like spacer elements, a minimum of alt="" is fine. For bullet-point images, alt="*" is often used. Search engines do index the alt text. The alt attribute is a required element.<!--content-->Someone fix the darn thread stretch!<!--content-->Originally posted by giz <br />
<br />
Remove the / from the end of the meta tag, as that is not reuired in HTML. It would only be required if you were writing XHTML code. That is waht is causing the </head> and <body> errors.<br />
<br />
<br />
OK I understood everything except that META tag thing.<br />
<br />
which / are you talking about?<br />
<br />
<br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><br />
<meta http-equiv="Content-Language" content="en-us"><br />
<title>apparitions - version 10.0 { doin' it PiNk style }</title><br />
<link rel="stylesheet" type="text/css" href=http://www.htmlforums.com/archive/index.php/"stylesheet.css" /><br />
</head><br />
<br />
<br />
And leoo24, thank you for that piece of coding.
I think I understand what you did to change it, and it works perfectly. <!--content-->your welcome <br />
i think giz means this one :<br />
<link rel="stylesheet" type="text/css" href=http://www.htmlforums.com/archive/index.php/"stylesheet.css" /><br />
<br />
<br />
should end href=http://www.htmlforums.com/archive/index.php/"stylesheet.css"><!--content-->oooo. OK. Thank you again. hehe<!--content-->Click this [link (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fapparitions.abbeyhosiery.com%2Fhelp%2Findex2.htm&charset=%28detect+automatically%29&doctype=%28detect+automatically%29&ss=1&outline=1&sp=1">http://validator.w3.org/check?uri=http% ... ine=1&sp=1</a><!-- m -->)] and this [link (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fapparitions.abbeyhosiery.com%2Fhelp%2Findex2.htm&warning=1&profile=css2">http://jigsaw.w3.org/css-validator/vali ... ofile=css2</a><!-- m -->)] for a list of things to do.<br />
<br />
Instuctions as to what to do, are in my previous post above.<!--content-->
<br />
Does that make sense at all?? lol<br />
<br />
<!-- m --><a class="postlink" href="http://apparitions.abbeyhosiery.com/help/index2.htm">http://apparitions.abbeyhosiery.com/help/index2.htm</a><!-- m --> <-- to see the layout<br />
<br />
Here's the code:<br />
<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br />
<html><br />
<br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><br />
<meta http-equiv="Content-Language" content="en-us"><br />
<title>apparitions - version 10.0 { doin' it PiNk style }</title><br />
<link rel="stylesheet" type="text/css" href=http://www.htmlforums.com/archive/index.php/"stylesheet.css" /><br />
</head><br />
<br />
<body bgcolor="#FFFFFF"><br />
<br />
<div style="position: absolute; top: 2px; left: 2px;"><img src=http://www.htmlforums.com/archive/index.php/"layout.png" border="0" width="700" height="400"></div><br />
<br />
<div id="content" style="position:absolute; left:2px; top:155px; width:465px; height:300px; z-index:1; overflow: auto; padding: 0px; border: 0; background= none; filter: Alpha(Opacity=50, FinishOpacity=0);"><div style="margin-left: 2px; margin-right: 5px; margin-top: 0px" align="justify"><br />
<br />
<p><br />
ujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfuj djdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfv<br /><br /><br />
ujdjdjdjadfadf ujdjdjdjadfadf ujdjdjdjadfadf ujdjdjdjadfadf ujdjdjdjadfadf<br />
<br /><br />
<a href=http://www.htmlforums.com/archive/index.php/"ADfa.html">adf</a> adfaf<br />
</p><br />
</div> <br />
<br />
<div style="position: absolute; top: 200px; left: 500px;"><img src=http://www.htmlforums.com/archive/index.php/"main.png" border="0" width="100" height="10"></div><br />
<div style="position: absolute; top: 210px; left: 500px;"><img src=http://www.htmlforums.com/archive/index.php/"blog.png" border="0" width="100" height="10"></div><br />
<div style="position: absolute; top: 220px; left: 500px;"><img src=http://www.htmlforums.com/archive/index.php/"interact.png" border="0" width="100" height="10"></div><br />
<br />
</body><br />
</html><br />
<br />
<br />
the three images I and trying to position but wont show up are the last 3 div's in the code. (main.png, blog.png, interact.png) I want them to show up underneath the pink swirlies.<br />
<br />
Also.... I want to create those as hyperlinks. How would I do that? like this??<br />
<br />
<br />
<div style="position: absolute; top: 200px; left: 500px;"><a href=http://www.htmlforums.com/archive/index.php/"main.htm"><img src="main.png" border="0" width="100" height="10"></a></div><br />
<br />
<br />
Thanks in advance, and I hope I haven't confused anyone.<!--content-->first off your link..fine<br />
give your divs a z-index, should solve the problem, i moved things around a bit and it worked:<br />
<br />
<br />
<META content="MSHTML 5.50.4922.900" name=GENERATOR></HEAD><br />
<BODY bgColor=#ffffff><br />
<DIV style="LEFT: 2px; POSITION: absolute; TOP: 2px"><IMG height=400 <br />
src=http://www.htmlforums.com/archive/index.php/"apparitions - version 10_0 { doin' it PiNk style }_files/layout.png" <br />
width=700 border=0></DIV><br />
<DIV style=" POSITION: absolute;LEFT: 500px; TOP: 200px;z-index: 1;"><IMG height=10 <br />
src=http://www.htmlforums.com/archive/index.php/"apparitions - version 10_0 { doin' it PiNk style }_files/main.png" <br />
width=100 border=1></DIV><br />
<DIV style="LEFT: 500px; POSITION: absolute; TOP: 210px; z-index: 1;"><IMG height=10 <br />
src=http://www.htmlforums.com/archive/index.php/"apparitions - version 10_0 { doin' it PiNk style }_files/blog.png" <br />
width=100 border=0></DIV><br />
<DIV style="LEFT: 500px; POSITION: absolute; TOP: 220px;z-index: 1;"><IMG height=10 <br />
src=http://www.htmlforums.com/archive/index.php/"apparitions - version 10_0 { doin' it PiNk style }_files/interact.png" <br />
width=100 border=0></DIV></DIV></BODY></HTML><br />
<br />
<br />
<br />
<DIV id=content <br />
style="BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; Z-INDEX: 1; BACKGROUND: none transparent scroll repeat 0% 0%; FILTER: Alpha(Opacity=50, FinishOpacity=0); LEFT: 2px; PADDING-BOTTOM: 0px; OVERFLOW: auto; BORDER-LEFT: 0px; WIDTH: 465px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 155px; HEIGHT: 300px"><br />
<DIV style="MARGIN-TOP: 0px; MARGIN-LEFT: 2px; MARGIN-RIGHT: 5px" align=justify><br />
<P>ujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfuj djdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfujdjdjdjadfadfv<BR><BR>ujdjdjdjadfadf <br />
ujdjdjdjadfadf ujdjdjdjadfadf ujdjdjdjadfadf ujdjdjdjadfadf <BR><A <br />
href=http://www.htmlforums.com/archive/index.php/"http://apparitions.abbeyhosiery.com/help/ADfa.html">adf</A> adfaf <br />
</P></DIV><!--content-->See the link for 2 little problems with the [CSS (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fapparitions.abbeyhosiery.com%2Fhelp%2Findex2.htm&warning=1&profile=css2">http://jigsaw.w3.org/css-validator/vali ... ofile=css2</a><!-- m -->)].<br />
<br />
<br />
Two semi-colons need to be added to the code.<br />
<br />
<br />
<br />
<br />
In the [HTML (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fapparitions.abbeyhosiery.com%2Fhelp%2Findex2.htm">http://validator.w3.org/check?uri=http% ... index2.htm</a><!-- m -->)] there a couple of minor things to fix.<br />
<br />
<br />
The </div> tag is missing or in the wrong place.<br />
<br />
<br />
Remove the / from the end of the meta tag, as that is not reuired in HTML. It would only be required if you were writing XHTML code. That is waht is causing the </head> and <body> errors.<br />
<br />
<br />
Add alt="some text" to every <img > tag, the text reflecting what is in the dispayed image. On unimportant images, like spacer elements, a minimum of alt="" is fine. For bullet-point images, alt="*" is often used. Search engines do index the alt text. The alt attribute is a required element.<!--content-->Someone fix the darn thread stretch!<!--content-->Originally posted by giz <br />
<br />
Remove the / from the end of the meta tag, as that is not reuired in HTML. It would only be required if you were writing XHTML code. That is waht is causing the </head> and <body> errors.<br />
<br />
<br />
OK I understood everything except that META tag thing.<br />
<br />
which / are you talking about?<br />
<br />
<br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><br />
<meta http-equiv="Content-Language" content="en-us"><br />
<title>apparitions - version 10.0 { doin' it PiNk style }</title><br />
<link rel="stylesheet" type="text/css" href=http://www.htmlforums.com/archive/index.php/"stylesheet.css" /><br />
</head><br />
<br />
<br />
And leoo24, thank you for that piece of coding.
I think I understand what you did to change it, and it works perfectly. <!--content-->your welcome <br />i think giz means this one :<br />
<link rel="stylesheet" type="text/css" href=http://www.htmlforums.com/archive/index.php/"stylesheet.css" /><br />
<br />
<br />
should end href=http://www.htmlforums.com/archive/index.php/"stylesheet.css"><!--content-->oooo.
OK. Thank you again. hehe<!--content-->Click this [link (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fapparitions.abbeyhosiery.com%2Fhelp%2Findex2.htm&charset=%28detect+automatically%29&doctype=%28detect+automatically%29&ss=1&outline=1&sp=1">http://validator.w3.org/check?uri=http% ... ine=1&sp=1</a><!-- m -->)] and this [link (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fapparitions.abbeyhosiery.com%2Fhelp%2Findex2.htm&warning=1&profile=css2">http://jigsaw.w3.org/css-validator/vali ... ofile=css2</a><!-- m -->)] for a list of things to do.<br /><br />
Instuctions as to what to do, are in my previous post above.<!--content-->