Archief - HTML/CSS: Blauwe omkadering

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
D

Desert

Legacy Member
Zit met een probleem kheb in een site een dropdown menu gemaakt het probleem is echter dat hij dit nu weergeeft met een blauwe omkadering kan iemand me helpen?

HTML: 
<!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">
<head>
<style type="text/css">

#dropmenudiv{
position:absolute;
border:0 px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 0 px solid black;
padding: 0px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: blue;
}

</style>

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'



		
var menuwidth='165px' //default menu width
var menubgcolor='blue'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	background-color: #FECD66;
}
-->
</style></head>

<body>
<div align="center">
  <table width="870" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><table width="870" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><img src="images/werner_01.jpg" width="382" height="211" /></td>
          <td><img src="images/werner_02.jpg" width="26" height="211" /></td>
          <td><img src="images/werner_03.jpg" width="462" height="211" /></td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td><table width="870" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><img src="images/werner_04.jpg" width="66" height="58" /></td>
          <td><img src="images/werner_05.jpg" width="79" height="58" /></td>
          <td><img src="images/werner_06.jpg" width="140" height="58" /></td>
          <td><img src="images/werner_07.jpg" width="151" height="58" /></td>
          <td><img src="images/werner_08.jpg" width="112" height="58" /></td>
          <td><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()"><img src="images/werner_09.jpg" width="91" height="58" /></a> </td>
          <td><img src="images/werner_10.jpg" width="132" height="58" /></td>
          <td><img src="images/werner_11.jpg" width="99" height="58" /></td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td><img src="images/werner_12.jpg" width="870" height="383" /></td>
    </tr>
  </table>
</div>
</body>
</html>


Pic van het probleem: http://img299.imageshack.us/my.php?image=tempqc8.jpg
T

Tiet

Legacy Member
Is de afbeelding waar die rand rond staat toevallig werner_09.jpg?

Zet dan gewoon img { border: 0; } in je css.
S

SMa

Legacy Member
dat is gewoon blauw? if so, waarom een afbeelding?
waar tables als zoiets makkelijk kan gemaakt worden met div's
D

Desert

Legacy Member
Oke ben effe niet mee nu :)

Het probleem was denk ik dat hij deze afbeelding als een link zag en er daarom een blauwe kader rondzette dit wil ik gewoon weg ,zodanig dat het een menu laat zakken waar kan opgeklikt worden. (Was een van de weinige scripts die ik hiervoor vond)

Na de image border op 0 te zetten is men afbeelding paar mm naar boven gegaan daarom de vraag hoe komt dit .
T

Tyfius

Legacy Member
Doordat de dikte van die blauwe rand weg was. Die zet zich rond de afbeelding. Dus een afbeelding met breedte van 150px + 1px border = 152px plaats.
D

Desert

Legacy Member
Heb het even gecontroleerd en klopt niet ik werk in dreamweaver en de beginafbeelding is nog altijd dezelfde grootte .
Verder is het niet echt kleiner maar is ze omhoog "geschoven".
Het rare is dat dreamweaver het wel normaal weergeeft maar waneer ik save en de site open krijg ik die screen.

ik zou gewoon men afbeelding op de juiste plaats willen terug krijgen.
Q

Quilombo

Legacy Member
pak gewoon background-color: #weetikveelwat ipv daar een afbeelding voor te gebruiken :s ?

en dit slaat ook op niets:
border:0 px solid black;

je moet dat trouwens alleen zetten bij elementen die standaard een border hebben en waar je geen border bij wilt, niet bij het a-element dus (tenzij ik scheef zie en je ergens anders daar wél een border opgezet hebt).
D

Desert

Legacy Member
Als ik een color pak verlies ik men knop toch ? Dus daar zie ik niet echt het nut van in .

Verder over die border heb je gelijk :)
o

orez

Legacy Member
Desert zei:
Als ik een color pak verlies ik men knop toch ? Dus daar zie ik niet echt het nut van in .

Verder over die border heb je gelijk :)
Klik om te vergroten...

waarom zou jij jouw "knop" verliezen??

width: ... px
height: ... px
display: block
background-color: #....

en tadaa !
D

Desert

Legacy Member
Ok daarin heb je gelijk

maar dit verklaard nog altijd niet waarom die daar zo raar hangt
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan