Search the Community

Hi I'm hoping someone may be able to spot something I'm missing. I have a page ART86 gallery that has 9 lines of thumbnail images that, using JS onClick opens a modal with the enlarges image displayed. All works fine for the first 4 lines of images but, from line 5 onwards, the second image only displays the cursor pointer part-way across the image with the normal arrow cursor for the remainder and the rest of the thumbnails don't display the pointer at all. Consequently, none of those displaying only the arrow cursor will not operate the onClick command. I'm using a straight crib from the W3 code at the moment so I haven't tweaked anything to cause this. The code is below and I hpe someone will be able to point me (no pun intended) where the error is. <div id="images" style="max-width:1000px; position: relative;left: auto;top: 350px;"> <img src="images/caucheteux/sculpture/20190801_183839_mod.jpg" alt="bonsai" id="myImg" style="width:150px;height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/au-carre.JPG" alt="au-carre" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/angelus.jpg" alt="angelus" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/bambou-la.JPG" alt="bambou la" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/bamboula.JPG" alt="bamboula" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/cafe-theatre-du-lac.jpg" alt="cafe theatre du lac" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/cradeau-au-bambou.JPG" alt="cradeau au bambou" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/derniere-sculpture-001.JPG" alt="le golfe" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/DSC04292.JPG" alt="assortement 1" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/DSC04308.JPG" alt="le vane" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/extracteur-et-sculpteur-008.JPG" alt="extracteur" id="myImg" style="width:150px;height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/galletjade.JPG" alt="gallet jade" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/incertitude.JPG" alt="incertitude" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/je-compose.JPG" alt="je compose" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/je-suis.JPG" alt="je suis" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/la-flamme.JPG" alt="la flamme" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/lampe-dans-la-nuit.jpg" alt="lampe dans la nuit" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/la-pagode.JPG" alt="la pagode" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/l-arc-en-ciel.JPG" alt="l'arc en ciel" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/l-artiste-au-travail.JPG" alt="l'artiste au travail" id="myImg" style="width:150px; height:auto; cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/le-baise.jpg" alt="le baise" id="myImg" style="width:150px;height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/le-chat.jpg" alt="le chat" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/le-chat-qui-lie.jpg" alt="le chat qui lie" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/l-ecritoire.JPG" alt="l'ecritoire" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/le-lezard.JPG" alt="le lezard" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/le-papillon.JPG" alt="le papillon" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/les-perles.JPG" alt="les perles" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/le-temps.JPG" alt="les temps" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/le-temps-pas.JPG" alt="les temps pas" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/lip.jpg" alt="lip" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/magie.jpg" alt="magie" id="myImg" style="width:150px;height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/moment-de-detente.jpg" alt="moment de detente" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/mon-porteur-d-eau.JPG" alt="mon porteur d'eau" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/nenuphare-musicale-002.JPG" alt="nenuphare musicale" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/nous-deux.jpg" alt="nous deux" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/parents-013.JPG" alt="parents" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/pelotte-basque.jpg" alt="pelotte basque" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/poupee-russe.JPG" alt="poupee russe" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/roulade.jpg" alt="roulade" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/saturne.JPG" alt="saturne" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/sculptures-d-alain-003.JPG" alt="sulptures 003" id="myImg" style="width:150px;height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/sculptures-d-alain-004.JPG" alt="sculptures 004" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/sculpture-volauvent-001.JPG" alt="sculpture volauvent" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/sorciere-004.JPG" alt="sorciere" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/tendance.jpg" alt="tendance" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/tete-de-cheval.JPG" alt="tete de cheval" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/tulippes.JPG" alt="tulippes" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/un-tronc.jpg" alt="un tronc" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/un-vigne-de-toi.jpg" alt="un vigne de toi" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/volauvent30.JPG" alt="volauvent" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/vue-du-ciel.jpg"alt="vue de ciel" id="myImg" style="width:150px;height:auto;cursor:pointer" onclick="onClick(this)"> </div> <div id="modal01" class="w3-modal" onclick="this.style.display='none'"> <span class="w3-button w3-hover-red w3-xlarge w3-display-topright">&times;</span> <div class="w3-modal-content w3-animate-zoom"> <img id="img01" style="width:100%"> </div> </div> <script> function onClick(element) { document.getElementById("img01").src = element.src; document.getElementById("modal01").style.display = "block"; } </script> Thanks in advance.

Hello,I'm new here and to be honest it's the first time I am writing into a Forum. Until now I was only reading through various posts which considerd the same problem as I had. But now I really have no idea what to search and where my problem is. Down here is the PHP Script I have written for a Prom Vote in a nearby school. It would be really great if someone could find my mistake and correct me. <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <?php$con = mysql_connect("localhost","xxx","xxxxxxxxx");if (!$con) { die('Could not connect: ' . mysql_error()); }mysql_select_db(bgschwechat) or die( "Unable to select database");$abfrage = "SELECT * FROM teilnehmer";$ergebnis = mysql_query($abfrage);$abfrage2 = "SELECT * FROM teilnehmer";$ergebnis2 = mysql_query($abfrage2);echo '<script>';echo 'var stimmzahl = array();';echo 'var name = array();';echo '</script>';while($row = mysql_fetch_object($ergebnis)) { echo '<script>'; echo 'stimmzahl['; echo $row->id; echo '] = 0; '; echo 'name['; echo $row->id; echo '_name'; echo '] = '; echo $row->name; echo '; '; echo 'function '; echo $row->id; echo 'plus() {'; echo 'stimmzahl['; echo $row->id; echo ']++; '; echo 'document.getElementById("'; echo $row->id; echo 'result").innerHTML = stimmzahl['; echo $row->id; echo ']; '; echo '}'; echo 'function '; echo $row->id; echo 'minus() {'; echo 'stimmzahl['; echo $row->id; echo ']--; '; echo 'document.getElementById("'; echo $row->id; echo 'result").innerHTML = stimmzahl['; echo $row->id; echo ']; '; echo '}'; echo '</script>'; } echo '<table class="teilnehmer-liste">'; while($row = mysql_fetch_object($ergebnis2)) { echo '<tr>'; echo '<td>'; echo $row->name; echo '</td>'; echo '<td>'; echo '<button id="'; echo $row->id; echo 'plus" onClick= "function '; echo $row->id; echo 'plus()">+</button>'; echo '</td>'; echo '<td>'; echo '<button id="'; echo $row->id; echo 'minus" onClick=" function '; echo $row->id; echo 'minus()">-</button>'; echo '</td>'; echo '<td>'; echo '<div id="'; echo $row->id; echo 'result">/</div>'; echo '</td>'; echo '</tr>';}mysql_free_result($ergebnis);?></table> </body> </html> The PHP Code works pretty fine but I am not happy with the result because the + and - Buttons don't work :/ Here's the result of the PHP Code in HTML : <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script>var stimmzahl = array();var name = array();</script><script>stimmzahl[1] = 0; name[1_name] = Test Person 1; function 1plus() {stimmzahl[1]++; document.getElementById("1result").innerHTML = stimmzahl[1]; }function 1minus() {stimmzahl[1]--; document.getElementById("1result").innerHTML = stimmzahl[1]; }</script><script>stimmzahl[2] = 0; name[2_name] = Test Person 2; function 2plus() {stimmzahl[2]++; document.getElementById("2result").innerHTML = stimmzahl[2]; }function 2minus() {stimmzahl[2]--; document.getElementById("2result").innerHTML = stimmzahl[2]; }</script><table class="teilnehmer-liste"><tr><td>Test Person 1</td><td><button id="1plus" onClick= "function 1plus()">+</button></td><td><button id="1minus" onClick=" function 1minus()">-</button></td><td><div id="1result">/</div></td></tr><tr><td>Test Person 2</td><td><button id="2plus" onClick= "function 2plus()">+</button></td><td><button id="2minus" onClick=" function 2minus()">-</button></td><td><div id="2result">/</div></td></tr></table> </body> </html> It would be really great if someone could help me I need to find a solution as soon as possible because I only have rare time to finish the project. Thanks in advance. ASavic P.S. Here's the Website Link - http://www.cryze.com/bgschwechat/test.php - sometimes offline because it's in development. ^^

I have a problem with my website. I'm trying to build a navigation bar that has another one underneath it and that appears after you hover a top level menu item: XHTML 1.0 <div id="navContainer"><div id="navigation"> <ul id="nav"> <li id="item1"><a href="#">Item 1</a></li> <li id="item2"><a href="#">Item 2</a> <ul id="submenu 1"> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Sub Item 2.2</a></li> <li><a href="#">Sub Item 2.3</a></li> </ul> </li> <li id="item3"><a href="#">Item 3</a> <ul> <li><a href="#">Sub Item 3.1</a></li> <li><a href="#">Sub Item 3.2</a></li> <li><a href="#">Sub Item 3.3</a></li> </ul> </li> <li id="item4"><a href="#">Item 4</a></li> </ul> </div></div> CSS 3 /* ---------- 6. CSS 3 Menu ---------- */#navigation {width: 738px;height: 40px;clear: both;background: #5d801a;-moz-border-radius: 10px;-webkit-border-radius: 10px;}/* STYLING THE FIRST-LEVEL MENU */ul#nav {float: left;width: 438px;margin: 0 150px;list-style: none;}ul#nav li {display: inline;}/* STYLING THE LINKS IN THE TOP-LEVEL MENU */ul#nav li a {float: left;font: bold 1.1em arial,verdana,tahoma,sans-serif;line-height: 40px;color: #ffffff;text-decoration: none;text-shadow: 1px 1px 1px #880000;margin: 0 0 10px 0;padding: 0 30px;background: #5d801a padding-box;-moz-border-radius-topright: 10px;-webkit-border-top-right-radius: 10px;-moz-border-radius-topleft: 10px;-webkit-border-top-left-radius: 10px;}/* APPLIES THE ACTIVE STATE FOR THE LINKS IN THE TOP-LEVEL MENU */ul#nav li:hover > a {color: #ffffff;text-decoration: none;text-shadow: 1px 1px 1px #330000;background: #6f1747 padding-box;;-moz-border-radius: 10px;-webkit-border-radius: 10px;margin: 0 0 10px 0;}/* THE SUBMENU LIST HIDDEN BY DEFAULT */ul#nav ul {display: none;}/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */ul#nav li:hover > ul {position: absolute;display: block;width: 360px;height: 30px;margin: 46px 79px;background: #6f1747;-moz-background-origin: content-box;-webkit-background-origin: content-box;-moz-border-radius: 20px/40px;-webkit-border-radius: 20px/40px;-moz-animation: cssMenu 3s;-webkit-animation: cssMenu 3s;}/* STYLING THE LINKS IN THE SUBMENU */ul#nav li:hover > ul li a {float: left;font: bold 1.1em arial,verdana,tahoma,sans-serif;line-height: 30px;color: #ffffff;text-decoration: none;text-shadow: 1px 1px 1px #110000;margin: 0 5px;padding: 0 20px;background: #6f1747;-moz-background-origin: content-box;-webkit-background-origin: content-box;-moz-animation: cssMenu 3s;-webkit-animation: cssMenu 3s;}ul#nav li:hover > ul li a:hover {color: #120000;text-decoration: none;text-shadow: none;}ul#nav li:hover > ul#submenu1{position: absolute;display: block;margin: 46px 0; <----padding: 0;margin-left: -24px;-moz-background-origin: content-box;-webkit-background-origin: content-box;-moz-animation: cssMenu 3s;-webkit-animation: cssMenu 3s;}/* ---------- 7. CSS 3 Menu's Animation ---------- */@-moz-keyframes cssMenu {0% {background: #cccccc content-box; color: #ffffff;}100% {background: #6f1747 content-box; text-shadow: 1px 1px 1px #110000; }}@-webkit-keyframes cssMenu {0% {background: #cccccc content-box; color: #ffffff;}100% {background: #6f1747 content-box; text-shadow: 1px 1px 1px #110000;}} The issue is this: Is there a way to control the timing of the :hover property?(CSS only or Javascript if it isn't possible with CSS) Because I want the submenu to be 6px under the top level menu (as you noticed from the 46px margin rule) but in the second I leave the parent item (so I stop hovering it) the submenu will instantly disappear without giving the time to the user to click on the submenu items.And if there isn't a way to control the :hover property, what's the best way to achieve the effect? Thank you all

i have been struggling with this for quite a while now... any suggestions? i am about to start tampering with the z-index...the html snippet is as follows: <div class="bodycont"> <div class="sidebar1"> </div> <div class="content"> <h1>Heading Here (as text H1 Chaparral Pro)<hr align="center" color="#c3c1ae" noshade size="1" width="98%" /></h1> <h2>Blah Blah (as text H2 Chaparral Pro)</h2> <p>Trebuchet MS - size 14 - Editable text in here Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p> <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> </div> </div> and the relative css is as follows: .bodycont {background: #fffde3;box-shadow: 0px 0px 136px 27px rgba(0, 0, 0, 0.42) inset;}.content {top: 10px;float: left;width: 649px;height: 700px;color: #343434;background: inherit;}.sidebar1 {top:10px;float: right;width: 310px;height: 700px;color: #343434;background: inherit;} the document is xhtml 1.0 transitional - and supposed to work in internet explorer, mozilla firefox, google chrome and apple safari, as well as opera. the latest versions will do which seems to work quite well, only i can just get the background and box-shadow to display on the topmost elements. if i make the background of the two children transparent or none - then the bodycont class does not have any background either. how would i get the bodycont class to display it's tan color with the inner box-shadow as specified?it's acting the same in all 5 browsers, thus it is something i do not know about, but what??? the screenshot displays with the content and sidebar1 classes having the box-shadow and it displaying, but only there and not on the bodycont class as the css specifies (see second screenshot).