PDA

View Full Version : CSS Div offset


rico1931
01-19-2009, 07:53 PM
Howdy folks,

Just wondering if there was a way to offset div tags. What I am trying to do is a pop up div tag with a show/hide behavior in DW. right now I have the position absolute and top and left sitting right over it in the left top corner. Is there a way to off set it so the pop up shows to the right top corner? I guess i'm being confused with the position attribute and don't even know if I really need it.

Edit: So here is an example of what I have

<div id="pic">
<div style="a whole lot of inline style that is dynamic">
<img src="a dynamic pic" />
</div>
<div id="popup">
txt in pop
</div>
</div>


Now I have the show/Hide function working but how do I get the "popup" to show at the top right corner of the div called "pic"


Thanks
-X

domedia
01-19-2009, 11:13 PM
Set .pic to be position relative.
#pic {position: relative;}

rico1931
01-19-2009, 11:16 PM
Set .pic to be position relative.
#pic {position: relative;}


no attributes? like top, left, right? because I did try that and it just rendered itself inline with the other HTML

rico1931
01-19-2009, 11:19 PM
yup just tried and it rendered itself on top

domedia
01-19-2009, 11:55 PM
#pic you set to position relative, and the pop up you position absolute.

rico1931
01-20-2009, 01:37 PM
ok well that still did not work and I think I just have all my div tags really messed up. Here is my code


<div id="pic">
<div style="border:2px solid #FF9900; position:relative;
top:dynamic value; left:dynamic Value;">

<img src=" <%=(rsFACT.Fields.Item("GRA_SITEDIR").Value)%>\
<%=(rsFACT.Fields.Item("GRA_SOURCEDIR").Value)%>"

width="<%=(rsFACT.Fields.Item("GRA_TRG_W").Value)%>"

height="<%=(rsFACT.Fields.Item("GRA_TRG_H").Value)%>"

border="0" usemap="#Map"
/>

<map name="Map" id="Map">
<area shape="rect" coords="-5,-2,66,69" href="dynamic value" alt="image"
onmouseover="MM_showHideLayers('popup','','show')"
onmouseout="MM_showHideLayers('popup','','hide')" />
</map>
</div>


<div id="popup" style="visibility:hidden; position: absolute;" >
dynamic value
</div>

</div>
Thanks for helping Domedia

domedia
01-20-2009, 03:14 PM
Can you post the rendered HTML code instead, for the whole page.
Or URL which is even better.

rico1931
01-20-2009, 03:19 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/AdminTemplate-99.dwt.asp" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title></title>
<!-- InstanceEndEditable -->



<!-- InstanceBeginEditable name="head" -->
<!--
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<!-- InstanceEndEditable -->

<link href="CSS.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="Container">


<div id="Banner"><div id="LogIn"><!-- InstanceBeginEditable name="EditLogInRegion" -->Welcome to DMIC
xag@dmic.com

<br />
Not you? <a href="/Loggedout.asp">Log Out</a>
<br />
User's Current Level: 099 <br />

<br />

<!-- InstanceEndEditable --></div>
</div>





<div id="Menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="Default.asp">Home</a> </li>
<li><a href="Home.asp?parm=200" class="MenuBarItemSubmenu">Products</a>
<ul>
<li><a href="Home.asp?parm=210" class="MenuBarItemSubmenu">Fluid Control Valves</a>
<ul>
<li><a href="Home.asp?parm=211">Ball Valves</a></li>
<li><a href="Home.asp?parm=212">Check Valves</a></li>
<li><a href="Home.asp?parm=213">Flow Controls</a></li>
<li><a href="Home.asp?parm=214">Custom Products</a></li>
</ul>
</li>
<li><a href="Home.asp?parm=221" class="MenuBarItemSubmenu">Filtration Systems</a>
<ul>
<li><a href="Home.asp?parm=213">Spin on Filtration</a></li>
<li><a href="Home.asp?parm=222">Spin On Components</a></li>
<li><a href="Home.asp?parm=223">Suction Strainers</a></li>
</ul>
</li>
<li><a href="Home.asp?parm=230" class="MenuBarItemSubmenu">Gauges &amp; Isolators</a>
<ul>
<li><a href="Home.asp?parm=231">Pressure Gauges</a></li>
<li><a href="Home.asp?parm=232">Single Station Isolators</a></li>
<li><a href="Home.asp?parm=233">Multi Station Isolators</a></li>
<li><a href="Home.asp?parm=234">Thermometer</a></li>
</ul>
</li>
<li><a href="Home.asp?parm=240" class="MenuBarItemSubmenu">SAE Port Flanges</a>
<ul>
<li><a href="Home.asp?parm=241">Split Flanges</a></li>
<li><a href="Home.asp?parm=242">Threaded Flanges</a></li>
<li><a href="Home.asp?parm=243">Threaded 90&deg;</a></li>
<li><a href="Home.asp?parm=244">Socket Weld</a></li>
<li><a href="Home.asp?parm=245">Butt Weld</a></li>
<li><a href="Home.asp?parm=246">Stepper</a></li>
<li><a href="Home.asp?parm=247">Hardware</a></li>
</ul>
</li>
<li><a href="Home.asp?parm=250" class="MenuBarItemSubmenu">Hydraulic Accessories</a>
<ul>
<li><a href="Home.asp?parm=251">Level Gauges</a></li>
<li><a href="Home.asp?parm=252">Level Gauge Manifolds</a></li>
<li><a href="Home.asp?parm=253">Manifolds</a></li>
</ul>
</li>
<li><a href="Home.asp?parm=260" class="MenuBarItemSubmenu">Components</a>
<ul>
<li><a href="Home.asp?parm=261">Gear Pumps</a></li>
<li><a href="Home.asp?parm=262">Radial Piston Pumps</a></li>
</ul>
</li>
<li><a href="Home.asp?parm=270" class="MenuBarItemSubmenu">Power Unit Layout System</a>
<ul>
<li><a href="Home.asp?parm=271">Socket Weld To Thread</a></li>
<li><a href="Home.asp?parm=272">Hose Barb To Thread</a></li>
<li><a href="Home.asp?parm=273">Hose Barb Special Ties</a></li>
<li><a href="Home.asp?parm=274">SAE Split Flange </a></li>
<li><a href="Home.asp?parm=275">SAE 4-Bolt Companion</a></li>
<li><a href="#../Home.asp?parm=276">SAE 4-Bolt Standard</a></li>
<li><a href="Home.asp?parm=277">Reservoir Layout</a></li>
<li><a href="Home.asp?parm=278">Application Gallery</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="Home.asp?parm=300" class="MenuBarItemSubmenu">News</a>
<ul>
<li><a href="Home.asp?parm=310">News 3.1</a></li>
</ul>
</li>
<li> <a href="Home.asp?parm=400">Contact Us</a> </li>
</ul>

<ul id="MenuBar2" class="MenuBarHorizontal">

<li>
<a href="#" class="MenuBarItemSubmenu">Admin</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">Users</a>
<ul>
<li><a href="Users.asp">Users</a></li>
<li><a href="Level.asp">Level</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Graphics</a>
<ul>
<li><a href="Upload.asp">Upload Graphics</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Populate Site</a>
<ul>
<li><a href="FactKey.asp">Fact Keys</a></li>
<li><a href="Facts.asp">Edit Facts</a></li>
</ul>
</li>
</ul>


</li>
<li>

<a href="#" class="MenuBarItemSubmenu">Root</a>
<ul>
<li><a href="SiteSetup.asp" class="MenuBarItemSubmenu">System Setup</a>
<ul>
<li><a href="Lang.asp">Languages</a></li>
<li><a href="Regions.asp">Regions</a></li>
<li><a href="Tabs.asp">Tab</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">CSS Setup</a>
<ul>
<li><a href="CSScolor.asp">CSS Color</a></li>
<li><a href="CSSfont.asp">CSS Font</a></li>
<li><a href="CSSFontSize.asp">CSS Font Size</a></li>
<li><a href="CSSFontHeight.asp">CSS Font Height</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Styles Setup</a>
<ul>
<li><a href="Styles.asp">Edit Styles</a></li>
</ul>
</li>
</ul>

</li>
</ul>
</div>
<br />



<div id="MIDDLE">
<!-- InstanceBeginEditable name="ContainerEditRegion" -->
<br />
<br />

<div id="pic">
<div style="border:2px solid #FF9900; position:absolute; top:300px; left:300px;">

<img src=" SiteImages\BVAL_Images\BVAL-XL.jpg" width="100px" height="100px" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="-5,-2,66,69" href="" alt="image" onmouseover="MM_showHideLayers('popup','','show')" onmouseout="MM_showHideLayers('popup','','hide')" />
</map>
</div>
<div id="popup" style="visibility:hidden; position: relative; " >
Description of BVAL XK.jpg goes here
</div>

</div>

<br />
<table border="0" cellpadding="1" cellspacing="1">


<tr>

<td style="font-family:Biondi Regular, Copperplate Gothic Bold, Courier; line-height:2.00em ; color:#FFFFFF ; text-align:Left ; font-size:1.50em"></td>
</tr>

<tr>

<td style="font-family:Doridani Light, Candara, Arial; line-height:1.25em ; color:#883300 ; text-align:Left ; font-size:1.25em">Welcome to Xavier's Page Thanks</td>
</tr>

<tr>

<td style="font-family:Biondi Regular, Copperplate Gothic Bold, Courier; line-height:.75em ; color:#FF0000 ; text-align:Center ; font-size:2.25em">Test the Default</td>
</tr>

<tr>

<td style="font-family:Doridani Light, Candara, Arial; line-height:.75em ; color:#000000 ; text-align:Left ; font-size:1.25em">Final Line</td>
</tr>

<tr>

<td style="font-family:Biondi Regular, Copperplate Gothic Bold, Courier; line-height:2.00em ; color:#FFFFFF ; text-align:Left ; font-size:1.50em">Attach Image to this Fact</td>
</tr>

</table>
<br />
<br />

<!-- InstanceEndEditable --></div>


<div id="Footer">
<div align="center"><a href="Default.asp">Home</a> | Site Map | <a href="Home.asp?parm=300">News</a> | Job Opportunities | <a href="Home.asp?parm=400">Contact Us</a> | Search </div>
</div>

</div>


<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
<!-- InstanceEnd --></html>

Sorry no URL yet

domedia
01-20-2009, 03:56 PM
Sorry need the CSS as well. Is there any way you can upload this to the web?

rico1931
01-20-2009, 04:16 PM
@charset "utf-8";
/* CSS Document */
body{
background:#000000;
}

#Banner {
left:0px;
top:0px;
width:1200px;
height:100px;
z-index:2;
background-image: url(SiteImages/FinalBanner.jpg);
}

#LogIn {
left:900px;
top:16px;
width:200px;
height:100px;
z-index:2;
position: relative;
}

#Container {
left:0px;
top:100px;
width:1200px;
overflow: visible;
z-index:1;
background-image: url(SiteImages/ContainerBackground.jpg);
margin-right: 5%;
margin-left: 5%;
}

#LEFT {
float:left;
width: 150px;
height: 600px;
overflow:auto;

}

#MIDDLE {
margin-left:30px;
width: 1000px;
overflow: visible;

}


#Footer {
width:1000px;
height:35px;
z-index:1;
}

.HeaderCSS {
font-family:sans-serif;
font-size: 2.5em;
color: #EEEEEE;
text-decoration: underline;
}

.SubHeaderCSS {
font-family:sans-serif;
font-size: 1.5em;
color:#EEEEEE;
text-decoration:underline;
}

.ParagraphCSS {
font-family:sans-serif;
font-size:1em;
color:#C5C5C5;
}



I wish I could but this company is so worried about security that they have all outside web browsing turned off on all computers. I'm doing this off my laptop haha. They want me to work on the web pages in house before deploying onto the web. Talk about paranoid