Правильно отображать ссылки

Question

onPage load, У меня есть набор гиперссылок, которые я пытаюсь правильно отобразить ВНУТРИ марка brand-nav. Ссылки переполнены маркой nav div. Я попытался сделать блок отображения div-nav div, но он не работает. Также было бы интересно, как я мог отображать ссылки в таблице с 4 столбцами и достаточно строк для размещения всех ссылок?

<?php 
$brand = array (
"nike" => array (
      array('logo'=>'images/nike.png', 'description' =>'some nike text'), 
      array('logo'=>'images/nike.png', 'description' =>'some nike text'), 
      array('logo'=>'images/nike.png', 'description' =>'some nike text')), 
"puma" => array(
      array('logo'=>'images/puma.png', 'description' =>'some puma text'), 
      array('logo'=>'images/puma.png', 'description' =>'some puma text'), 
      array('logo'=>'images/puma.png', 'description' =>'some puma text')), 
"addidas" => array(
      array('logo'=>'images/addidas.png', 'description'=>'some addidas text1'), 
      array('logo'=>'images/addidas.png', 'description'=>'some addidas text2'), 
      array('logo'=>'images/addidas.png', 'description'=>'some addidas text3')), 
"Asics" => array(
      array('logo'=>'images/Asics.png', 'description'=>'some Asics text'), 
      array('logo'=>'images/Asics.png', 'description'=>'some Asics text'), 
      array('logo'=>'images/Asics.png', 'description'=>'some Asics text')), 
"nike" => array (
      array('logo'=>'images/nike.png', 'description' =>'some nike text'), 
      array('logo'=>'images/nike.png', 'description' =>'some nike text'), 
      array('logo'=>'images/nike.png', 'description' =>'some nike text')), 
"test1" => array(
      array('logo'=>'images/puma.png', 'description' =>'some puma text'), 
      array('logo'=>'images/puma.png', 'description' =>'some puma text'), 
      array('logo'=>'images/puma.png', 'description' =>'some puma text')), 
"test2" => array(
      array('logo'=>'images/addidas.png', 'description'=>'some addidas text1'), 
      array('logo'=>'images/addidas.png', 'description'=>'some addidas text2'), 
      array('logo'=>'images/addidas.png', 'description'=>'some addidas text3')), 
"test3" => array(
      array('logo'=>'images/Asics.png', 'description'=>'some Asics text'), 
      array('logo'=>'images/Asics.png', 'description'=>'some Asics text'), 
      array('logo'=>'images/Asics.png', 'description'=>'some Asics text')), 
"test4" => array(
      array('logo'=>'images/puma.png', 'description' =>'some puma text'), 
      array('logo'=>'images/puma.png', 'description' =>'some puma text'), 
      array('logo'=>'images/puma.png', 'description' =>'some puma text')), 
"test5" => array(
      array('logo'=>'images/addidas.png', 'description'=>'some addidas text1'), 
      array('logo'=>'images/addidas.png', 'description'=>'some addidas text2'), 
      array('logo'=>'images/addidas.png', 'description'=>'some addidas text3')), 
"test6" => array(
      array('logo'=>'images/Asics.png', 'description'=>'some Asics text'), 
      array('logo'=>'images/Asics.png', 'description'=>'some Asics text'), 
      array('logo'=>'images/Asics.png', 'description'=>'some Asics text')), 
"test7" => array(
      array('logo'=>'images/Asics.png', 'description'=>'some Asics text'), 
      array('logo'=>'images/Asics.png', 'description'=>'some Asics text'), 
      array('logo'=>'images/Asics.png', 'description'=>'some Asics text')), 
"test8" => array(
      array('logo'=>'images/puma.png', 'description' =>'some puma text'), 
      array('logo'=>'images/puma.png', 'description' =>'some puma text'), 
      array('logo'=>'images/puma.png', 'description' =>'some puma text')), 
"test9" => array(
      array('logo'=>'images/addidas.png', 'description'=>'some addidas text1'), 
      array('logo'=>'images/addidas.png', 'description'=>'some addidas text2'), 
      array('logo'=>'images/addidas.png', 'description'=>'some addidas text3')), 
"test10" => array(
      array('logo'=>'images/Asics.png', 'description'=>'some Asics text'), 
      array('logo'=>'images/Asics.png', 'description'=>'some Asics text'), 
      array('logo'=>'images/Asics.png', 'description'=>'some Asics text')), 
"Qicksilver" => array(
      array('logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text'), 
      array('logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text'), 
      array('logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text')), 
); 
?> 

CSS

<style type="text/css"> 
a { 
margin-left:10px; 

} 
#brand-content { 
margin-top:50px; 
border:solid 1px #000; 
padding:10px; 
display:none; 
width: 50%; 
} 
#brand-nav { 
border: 1px solid #000; 
width: 500px; 
height: 200px; 
display: block; 
} 
</style> 

Сценарий:

<script> 

var brand = <?php echo json_encode($brand) ?>; // json_encode($brand) is equivalent to the following:  {"nike":[{"logo":"images\/nike.png","description":"some nike text"},{"logo":"images\/nike.png","description":"some nike text"},{"logo":"images\/nike.png","description":"some nike text"}],"puma":[{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"}],"addidas":[{"logo":"images\/addidas.png","description":"some addidas text"},{"logo":"images\/addidas.png","description":"some addidas text"},{"logo":"images\/addidas.png","description":"some addidas text"}],"Asics":[{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"}],"Qicksilver":[{"logo":"images\/Qicksilver.png","description":"some Qicksilver text"},{"logo":"images\/Qicksilver.png","description":"some Qicksilver text"},{"logo":"images\/Qicksilver.png","description":"some Qicksilver text"}]} 

function readyLinks() 
    { 
    var company, link; 
    for (company in brand) 
    { 
    link = document.createElement("a"); 
    link.innerHTML = company; 
    link.LogoDescription_Arr=brand[company]; 
    link.onclick = function() 
    { 
     var container=document.getElementById("brand-content"); 
     var LogoDescription_Arr=this.LogoDescription_Arr, i, l =LogoDescription_Arr.length, item; 
     var outPutHTML="";   
     for (i=0;i<l;i++) 
    { 
    item=LogoDescription_Arr[i]; 
    outPutHTML+= "<img src=\""+item.logo+"\"/>" + item.description + "<br>"; 
    } 
    container.innerHTML=outPutHTML;   
    container.style.display = "block"; 
    return false; 
    } 
    document.getElementById("brand-nav").appendChild(link); 
    } 
    } 
window.onload = function() { 
readyLinks(); 
} 

</script> 

<!-- body --> 

<div id="brand-nav"></div> 

<div id="brand-content"></div> 

</script> 

Volterony

Answer 1

добавить следующую строку в ваш бренд-навигационный CSS

#brand-nav { 
border: 1px solid #000; 
width: 500px; 
height: 200px; 
display: block; 
overflow:hidden; 
} 

Обновленный код JavaScript ниже:

var brand = {"nike":[{"logo":"images\/nike.png","description":"some nike text"},{"logo":"images\/nike.png","description":"some nike text"},{"logo":"images\/nike.png","description":"some nike text"}],"puma":[{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"}],"addidas":[{"logo":"images\/addidas.png","description":"some addidas text1"},{"logo":"images\/addidas.png","description":"some addidas text2"},{"logo":"images\/addidas.png","description":"some addidas text3"}],"Asics":[{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"}],"test1":[{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"}],"test2":[{"logo":"images\/addidas.png","description":"some addidas text1"},{"logo":"images\/addidas.png","description":"some addidas text2"},{"logo":"images\/addidas.png","description":"some addidas text3"}],"test3":[{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"}],"test4":[{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"}],"test5":[{"logo":"images\/addidas.png","description":"some addidas text1"},{"logo":"images\/addidas.png","description":"some addidas text2"},{"logo":"images\/addidas.png","description":"some addidas text3"}],"test6":[{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"}],"test7":[{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"}],"test8":[{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"}],"test9":[{"logo":"images\/addidas.png","description":"some addidas text1"},{"logo":"images\/addidas.png","description":"some addidas text2"},{"logo":"images\/addidas.png","description":"some addidas text3"}],"test10":[{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"}],"Qicksilver":[{"logo":"images\/Qicksilver.png","description":"some Qicksilver text"},{"logo":"images\/Qicksilver.png","description":"some Qicksilver text"},{"logo":"images\/Qicksilver.png","description":"some Qicksilver text"}]}; 

function readyLinks() 
    { 
    var company, link; 
    for (company in brand) 
    { 
     br=document.createElement("br"); 
    link = document.createElement("a"); 
    link.innerHTML = company; 
    link.LogoDescription_Arr=brand[company]; 
     link.onclick = function() 
     { 
      var container=document.getElementById("brand-content"); 
      var LogoDescription_Arr=this.LogoDescription_Arr, i, l =LogoDescription_Arr.length, item; 
      var outPutHTML="";   
      for (i=0;i<l;i++) 
     { 
     item=LogoDescription_Arr[i]; 
     outPutHTML+= "<img src=\""+item.logo+"\"/>" + item.description + "<br>"; 
    } 
     container.innerHTML=outPutHTML;   
     container.style.display = "block"; 
     return false; 
     } 
    document.getElementById("brand-nav").appendChild(link); 
    document.getElementById("brand-nav").appendChild(br); 
    } 
    } 
    readyLinks(); 
/*window.onload = function() { 
readyLinks(); 
}*/