|
CSS - Position: Absolute Problem For Gallery Window In Dynamic Php Page
I have an image gallery. Code for the whole thing I've set below.The main image display window is set w/ a fixed position w/ this CSS code:
Quote: #jgal li img { position: absolute; top: 20px; left: 220px; display: none; } I want to use it on dynamic php pages that have constantly changing content. I cannot w/ the fixed position. I need it to float correctly to the right of the thumb sidebar images. I've set it into my .tpl pages & it works well w/ no apparant css conflicts. But the main window is still fixed while the thumbs show wherever I place their code. Any ideas how I can float it all as a unit? Thanks, Gene PLEASE HELP ME I have an inline css tester that I built w/ help from W3Schools.com's CSS examples. > http://www.easysavannah.com/pmdinlinecsslinks.html Maybe this will help someone here. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Lightweight Image Gallery</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="imagetoolbar" content="false"> <meta name="description" content=""> <meta name="keywords" content=""> <style media="screen,projection" type="text/css"> /* general styling for this example */ * { margin: 0; padding: 0; } body { padding: 20px; } /* begin gallery styling */ #jgal { list-style: none; width: 200px; } #jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; } #jgal li img { position: absolute; top: 20px; left: 220px; display: none; } #jgal li.active img { display: block; } #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ } /* styling without javascript */ #gallery { list-style: none; display: block; } #gallery li { float: left; margin: 0 10px 10px 0; } </style> <!--[if lt IE 8]> <style media="screen,projection" type="text/css"> #jgal li { filter: alpha(opacity=50); } #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); } </style> <![endif]--> <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script> <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]--> <script type="text/javascript"> var gal = { init : function() { if (!document.getElementById || !document.createElement || !document.appendChild) return false; if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal'; var li = document.getElementById('jgal').getElementsByTagName('li'); li[0].className = 'active'; for (i=0; i<li.length; i++) { li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; li[i].style.backgroundRepeat = 'no-repeat'; li[i].title = li[i].getElementsByTagName('img')[0].alt; gal.addEvent(li[i],'click',function() { var im = document.getElementById('jgal').getElementsByTagName('li'); for (j=0; j<im.length; j++) { im[j].className = ''; } this.className = 'active'; }); } }, addEvent : function(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent("on"+type, obj[type+fn]); } } } gal.addEvent(window,'load', function() { gal.init(); }); </script> </head> <body> <ul id="gallery"> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_1.jpg" alt="Josef & Erika 1"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/roland_ads_2.jpg" alt="Roland Ads"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/cd_2.jpg" alt="CD Cover 2"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/cd_1.jpg" alt="CD Cover 1"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_3.jpg" alt="Josef & Erika 3"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_2.jpg" alt="Josef & Erika 2"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/lktrd_poster1.jpg" alt="LKTRD Poster"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_4.jpg" alt="Josef & Erika 4"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/inside_1.jpg" alt="Inside Magazine"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/oceanen_4.jpg" alt="Oceanen"></li> </ul> <p style="clear: both; padding-top: 2em;">Link back to article: <a href="/kitchen/80/lightweight-image-gallery-with-thumbnails">Lightweight Image Gallery with Thumbnails</a>.</p> </body> </html>
Similar TutorialsHi css-ers, I wonder if anyone can tell me what I've done wrong. I have an absolutely positioned div that shows up perfectly in all browsers except IE 6 (I haven't tried it in IE7 yet). I have another abs pos div on the page that behaves perfectly. Any suggestions? This is the x/html: Code: <div id="logo"> <a href="index.html"></a> </div> This is the CSS: Code: #logo {
left: 20px;
top: 0px;
position: absolute;
z-index: 5;
margin: 0pt;
border: 1px solid #315185;
}
#logo a {
background: transparent url(../images/logo.jpg) no-repeat scroll 0px 0px;
display: block;
height: 435px;
width: 140px;
}
#logo a:hover {
background: url(../images/logo.jpg) no-repeat scroll 0px -435px;
display: block;
height: 435px;
width: 140px;
}
Thanks for any tips or references. Hi, I have a table with the following div : div#mod-banner { height:60px; position:absolute; right:180px; top:22px; width:468px; } in IE7 and Opera looks ok but in IE6 it shows it like its left aligned or something. I dont have any knowledge of CSS , can anybody help me? Thanks Hi folks, Just got one of those "can I or can't I" questions that relates to position:relative and position:absolute. I have the following structure - Code: <div>
<div style="position:relative">
<ul style="position:relative">
<li>
<p>
<span style="display:block"></span>
<span style="display:block"></span>
<span style="display:block; position:absolute"></span>
</p>
</li>
</ul>
</div>
</div>
The Third Span is where I am not sure about. I'd like it to sit at the bottom right of the enclosing <p>. When I use <span style="display:absolute; bottom:2px; right:2px>, the whole span disappears - not exactly sure where it vanishes to. Without the bottom and right declarations, the span stays put. There is sufficient space within the <p> for the <span> to move about. This absolute positioning worked fine without the relative div and relative ul - so I am assuming that's where my issue lies. BUT, I need the outer structure and it's not an option to change anything except the third <span>. Question is: Is what I am attempting going against the grain and something that just isn't going to work? If so, what steps can I take to position the contents of the <span> where I need it? I have tried making the <span> fit the width of the <p> and then positioning the internal contents to text-align:right. I can't do a padding-top or margin-top as the content in the second span is variable. Any clever ideas? I have an application that includes a login form and it's positioned absolute in the upper right corner. It works great in Safari and Firefox but in IE6 it is not displayed at all. Yet, if I view the source it is there. This is what my css looks like: Code:
#header{
width:780px;
margin-bottom:10px;
background:#e4dbcc;
height:90px;
}
#header .logo{
font-size:2em;
color:#301d0e;
width:400px;
}
#header .logo_subtext{
font-size:1em;
color:#301d0e;
padding-left:80px;
border-bottom:10px solid #e2d2bb;
}
#header .login{
clear:both;
width:380px;
position:absolute;
top:20px;
left:408px;
font-size:70%;
}
Here is the html: Code:
<div id="header">
<div class="logo"> Program </div>
<div class="logo_subtext">company name</div>
<div class="login">
<form action="index.php?action=login" method="post">
login: user <input type="text" name="user_name" size="8"/> password <input type="password" name="password" size="12"/>
<input type="submit" name="Submit" value="submit"/><br />
Don't have an account? <a href="index.php?action=register">Register here</a> Forget password? <a href="index.php?action=password"> click here </a>
</form>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="index.php" id="current">ABOUT US</a></li>
<li><a href="index.php?action=program" >PROGRAM</a></li>
<li><a href="index.php?action=contact" >CONTACT</a></li>
<li><a href="index.php?action=register" >REGISTER</a></li>
</ul>
</div>
Thanks in Advance. I have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content {
position:relative;
width:320px;
margin-left: 125px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
#right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
I'm putting together a site using a CSS template, and hefty use of position: absolute. You can view it he http://www.goldenturmeric.com/layout.php The layout comes out great in FF 2.0 and IE 7. However, the main body of the site doesn't come out at all in IE 6. I've monkeyed around a little with changing to position: relative and a few other things and it completely throws it off. I'm sorry if I'm not doing this the right way or position: absolute is avoided or something. If so, I didn't know. Anyone's help is much appreciated. IE browser seems fine but mozilla display a simple table with links inside in a squished up format, not present on the web design. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<meta name="GENERATOR" content="PageBreeze Free HTML Editor (http://www.pagebreeze.com)">
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" >
<title>mybar.html</title>
</head>
<style type="text/css">
#elButton a {
color: #000000;
font-size:10px;
font-family:verdana;
font-weight:bold;
text-decoration: none;
/*border:1px outset aqua;*/
/* background-color:#00ffff;*/
border-right-style:solid;
border-right-width:1px;
width: 110px;
/* padding: 3px 5px;*/
/*margin: 1px;*/
}
</style>
<body bgcolor="#ffffff">
<p>
<table style="WIDTH: 487px; HEIGHT: 26px" cellspacing="0" cellpadding="0" width="487"
align="right" bgcolor="#00eaea" border="0">
<tr>
<td valign="top" align="middle">
<div id="elButton">
<a href="#">Java Script</a>
<a href="#">Dynamic HTML</a>
<a href="#">Server Side</a>
<a href="#">Client Side</a>
</div></td></tr></table></p>
</body>
</html>
If I do something like this: .divSubHomeRtPhoto { position: absolute; left: 340px; top: 167px; width: 420px; height: 420px; } Then <div class="divSubHomeRtPhoto"> my left and top positions don't seem to take in IE 5.2 for Mac. This seems to be fairly well known, from what I read on the internet. What this means for me though, is that I have to almost do away with positioning through CSS if I want my pages to work with IE 5.2 Mac, whcih I recently discoverd I do want to work. How do other cross browser CSS writes deal with this problem? Thanks for your help CJB Is it possible to position something below a division that has the property { position: absolute } and can expand to a varied length depending on what is contained with it? The question is "What is the positioning context of a div positioned absolutely (e.g., div#nav{position:absolute;}); that is, where is the 0,0 coordinate from which any offsets will be measured?" Is the answer "it will be measured from the top left"? Im trying to get an image to center in a div. It works as long as one part of my CSS is commented out. The issues is the part that is breaking it, is required for another script to run that I have not added in due to its vast amount of code. Can anyone tell me a workaround.. leaving the MUST have code in place. Im willing to add anything to the code, just not remove if possible. Full Code Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#image {
display: table-cell;
text-align: center;
vertical-align: middle;
width:356px;
height:356px;
border:1px solid blue;
}
#image * {
vertical-align: middle;
}
/*\*//*/
#image {
display: block;
}
#image span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if IE]><style>
#image span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
<style type="text/css">
#image img {position:absolute;}
</style>
</head>
<body>
<div id="image"><span></span><img src="http://www.google.com/logos/olympics08_rhythm.gif"></div>
</body>
</html>
Code that MUST stay in the CSS Code: #image img {position:absolute;}
Just to note, the rest of the code is for the most part an exact dup of the cross-browser image center in div code here, http://www.brunildo.org/test/img_center.html Alright, here we go again. The page in question... Various screenshots I'm working up a sample for a job I came across. The scenario: He wants a simple layout: top header, left column, mid (main), right column, and bottom header. The width of the body should be no more than 650 pixels and centered. However, he wants the html flow to be in order of: main, top header, left column, bottom header, right column. Obviously is going to require absolute positioning, right? So, using Win XP, I got it to look descent in IE 6, Net 7, and FF 1. Those are the three browser brands he's concerned about; the last two versions of each (didn't specify operating system). Basically, I'm just asking for someone to look at the source code and tell me if there's a simpler way. The way it's set up now, it renders poorly on several different versions of IE, Net, and Moz under other operating systems (which you can view in the screenshots URL above). Plus, the heights are not constant. Meaning that he will always be adding/changing content meaning he'll always have to mess with the positioning. Is this absolutely worthless? Problem is I don't want to give up because it is fun to learn (plus there's two other potential jobs behind it). It's starting to seem, however, that there will be no easy fix and perhaps the answer is unachievable in this situation. Any advice? Sorry for a link and not pasting but code but I want to be sure not to miss anything out ... There should be a menu item at the top of the page of: http://egg.epicdesigns.co.uk/home/index.php It shows up fine in Mozilla and Opera but not MSIE. Code: #menu {
z-index:1;
left:auto;
top:272px;
position:absolute;
width:631px;
margin:0px 0px 0px 12px;
padding:0px;
font:normal 110% agency fb,arial,sans-serif;
}
I notice that if I remove the <HEAD> tag int he HTML or the FLOAT:RIGHT styling on #sidebar then thigns show up as expected. Thanks in advance. Hi everyone, I found how to position imgs and txt relative to the browser window, but when i print it out it will be like 3/4 inch from the edge of the paper, even though the page border is set at 1/2 ... Anyway I can get it closer? Found this piece of code from another page but didn't seem to work <STYLE TYPE="text/css" MEDIA="print"> thanks Hi there, I have a show/hide div and want it to appear on top of my other layers, however, when I use absolute to get it to appear on top of the other layers, with left and top positions, it appears in different places when I resize my window or change my resolutions. Is there anyway to make it appear the same no matter what resolution or window size? I am using pixels by the way. Thanks. I have done alot of changing around settings, sizing from absolute to relative, margins to widths, and i still cant figure out what is urking my page when loaded from mozilla-firefox and netscape. The page works fine when used with Internet Explorer. Does anyone have a chance to take a look at it here at <a href> www.wolfdogg.soldierlink.com/html using Firefox and IE? style sheet is at <a href> http://www.wolfdogg.soldierlink.com/main-reworked.css or would you prefer i post the code is there actually a website that i can go to that will have a list of the extra styles that firefox and netscape needs that are automatic and uneccesary on internet explorer? Thanks a bunch, WolfDogg I've been tweaking a bit of the site I edit for Oxford Hash House Harriers (search Google for Oxford Hash House Harriers and our site will appear at the top) and trying to get a blue bar for the left and right side bars all down the page, which I've now succeeded in doing, however in my changes something has changed because now there is a large gap between any content and a table but only in some browsers. The tables are used for actual data, not for layout. I use CSS and <div> for layout. The layout is along these lines: Code: <body> <div id="page"> <div id="banner"> <div id="leftlogo"> <!-- logo here --> </div> <div id="rightlogo"> <!-- logo here --> </div> <div id="oh3banner"><p class="pagetitle">Oxford H3</p></div> </div><!-- close div banner --> <div id="mainbody"> <div id="wrap1"> <div id="wrap2"> <div id="leftnavigation"> </div><!-- close div leftnavigation --> <div id="rightnavigation"> </div><!-- close div rightnavigation --> <div id="content"> <h1>Oxford Hash House Harriers</h1> <h2>Oxford H3 Hash Diary </h2> <div id="hashdiary"> <table summary="Oxford H3 Run Diary"> <caption>Forthcoming Oxford H3 Hashes</caption> <colgroup> <col id="date" /> <col id="postcode" /> <col id="venue" /> <col id="hare" /> <col id="beermaster" /> <col id="chef" /> <col id="run" /> </colgroup> <thead> <tr> <th scope="col">Date</th> <th scope="col">Post Code & Grid Ref.</th> <th scope="col">Venue</th> <th scope="col">Hares</th> <th scope="col">Beer Master</th> <th scope="col">Chef</th> <th scope="col">Run#</th> </tr> </thead> <tbody> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> </tbody> </table> </div> </div><!-- close div content --> </div> <!-- close div wrap1 --> </div> <!-- close div wrap2 --> </div> <!-- close div mainbody --> </div><!-- close div page --> </body> Whilst the relevant (I think) parts of the CSS look like this: DIV#page{ margin-top: 0px; } DIV#banner{ width:100%; background-color : #06168a; height : 130px; margin-left : 0px; margin-top: 0px; position : absolute; top: 0px; float : none; } DIV#oh3banner{ clear : none; background-image : url('images/oxfordh3banner.jpg'); background-repeat : no-repeat; height : 110px; margin-top: 10px; background-position : center; } DIV#mainbody{ margin-top: 130px; } DIV#wrap1{ background-color : #06168a; } DIV#wrap2{ background-color : #06168a; } DIV#leftnavigation{ width:15%; background-color : #06168a; margin-left : 0%; float: left; } DIV#rightnavigation{ width:15%; background-color : #06168a; margin-right : 0%; margin-left : 3%; float: right; } DIV#content{ width:auto; margin-left : 15%; margin-right: 15%; padding-left: 5px; padding-right: 5px; background-color: White; } I found to begin with that there was a very large gap between the table and any content on the page in all browsers until I put a <div> </div> around the actual table itself. When I did this the page looks okay in Firefox and Safari, but still looks incorrect in Internet Explorer and Chrome. It looks to me as if the table is being pushed below the content in the right sidebar in IE or the left sidebar in Chrome for some reason. I've been messing about for a while now trying to get this to work but without success. Can anybody spot where I'm going wrong? Regards, James |
|||||||