Add additional column in line

Question

Add additional column in line

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I have a Slider in my project where I have a large image displaying the image of the current slider, and soon after its right side, a column that contains several miniatures in the form of squares with the slide switching function, as you can see in the image below.

ButnowI'dliketoaddanewcolumnofboxesnexttoit.HowcanIdothis?Hereismycodebelow:

<styletype="text/css">
#tv a {
    font-size:16px;
    font-weight:bold;
}

#tv span {
    color:#FFFFFF;
    font-size:12px;
    font-weight:normal;
}

#hid {
    display:none;
    left:-5000px;
    position:absolute;
    top:-5000px;
}

#tv #nav {
    height:291px;
    left:310px;
    overflow:hidden;
    position:absolute;
    top:5px;
    width:50px;
}

#tv #nav img {
    cursor:pointer;
    height:20px;
    margin:0 0 5px;
    width:20px;
}

#tv .opac {
    margin-bottom:5px;
    opacity:1;
}

#tv .transp {
    margin-bottom:5px;
    opacity:0.1;
}


#tv img {
    display:block;
    margin-bottom:7px;
    margin-left:-5px;
    border:thin solid;
}
img {
    border:medium none;
}

#tv {
    background:url("") no-repeat scroll 0 0 transparent;
    float:left;
    height:310px;
    overflow:hidden;
    padding:0 61px 0 10px;
    position:relative;
    width:400px;
}

#corpoh {
    text-align:left;
}
</style>

<div id="tv">
<script type="text/javascript">
// JavaScript para tv //
var index = 1; var menu_time = 6000; var anterior = 10; var timer = setTimeout('trocaMsg()',menu_time);
function trocaMsg() { index = index%10 +1; channel(index); tempo(); } 
function tempo() { clearTimeout(timer); timer = setTimeout("trocaMsg()",menu_time);}
function channel(id) { index = id; document.getElementById("tvn" + anterior).className= "transp"; document.getElementById("tvn" + id).className = "opac"; document.getElementById('tvshow').innerHTML=document.getElementById('tv' + id).innerHTML; anterior = id;}
function tvch(id, out) {if (out == 1) { clearTimeout(timer); channel(id);} else { tempo();}}
//channel(1);

// JavaScript para tv-papeis //
var index_p = 1; var menu_time_p = 2800; var anterior_p = 10; var timer_p = setTimeout('trocaMsg_p()',menu_time_p);
function trocaMsg_p() { index_p = index_p%10 +1; channel_p(index_p); tempo_p(); } 
function tempo_p() { clearTimeout(timer_p); timer_p = setTimeout("trocaMsg_p()",menu_time_p);}
function channel_p(idx) { index_p = idx; document.getElementById("tvp" + anterior_p).className= "transp"; document.getElementById("tvp" + idx).className = "opac"; document.getElementById('paptv').innerHTML=document.getElementById('ptv' + idx).innerHTML; anterior_p = idx;}
function tvch_p(idx, out) {if (out == 1) { clearTimeout(timer_p); channel_p(idx);} else { tempo_p();}}
//channel_p(1);

//Função p/ n Aparecer erro de JS no navegador do Tiozinho
function semerro(){
    return true;}
window.onerror=semerro;
</script>

<div id="tvshow">
    <a href="http://s13.zetaboards.com/Blood_Palace_RPG/topic/7432060/1/" src="http://s13.zetaboards.com/Blood_Palace_RPG/topic/7432060/1/"title="Sistema de Procurados" style="width: 354px;"> Votem!! <span>Para que seja implantado novo sistema! </span></a>                           
</div>

<div id="nav">
<a href=" "><img onmouseout="tvch(1,0)" onmouseover="tvch(1,1)" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg"class="transp" id="tvn1" style="width: 20px; height: 20px;" /></a>
<a href=" "><img onmouseout="tvch(2,0)" onmouseover="tvch(2,1)" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg"class="transp" id="tvn2" style="width: 20px; height: 20px;" /></a>
<a href=" "><img onmouseout="tvch(3,0)" onmouseover="tvch(3,1)" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg"class="transp" id="tvn3" style="width: 20px; height: 20px;" /></a>
<a href=" "><img onmouseout="tvch(4,0)" onmouseover="tvch(4,1)" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg"class="transp" id="tvn4" style="width: 20px; height: 20px;" /></a>
<a href="http://narutotaisen.forumeiros.com/forum"><img onmouseout="tvch(5,0)" onmouseover="tvch(5,1)" http:="" www.asupr.com="" asureport="" wp-content="" uploads="" 2008="" 10="" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg"class="transp" id="tvn5" style="width: 20px; height: 20px;" /></a>
<a href=" "><img onmouseout="tvch(6,0)" onmouseover="tvch(6,1)" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg"class="transp" id="tvn6" style="width: 20px; height: 20px;" /></a>
<a href=" "><img onmouseout="tvch(7,0)" onmouseover="tvch(7,1)" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg"class="transp" id="tvn7" style="width: 20px; height: 20px;" /></a>
<a href=" "><img onmouseout="tvch(8,0)" onmouseover="tvch(8,1)" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg"class="transp" id="tvn8" style="width: 20px; height: 20px;" /></a>
<a href=" "><img onmouseout="tvch(9,0)" onmouseover="tvch(9,1)" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg"class="transp" id="tvn9" style="width: 20px; height: 20px;" /></a>
<a href=" "><img onmouseout="tvch(10,0)" onmouseover="tvch(10,1)" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg"class="transp" id="tvn10" style="width: 20px; height: 20px;" /></a>
</div>

<ul id="hid">
    <li id="tv1">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-deidara_zpspk89i4qu.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-deidara_zpspk89i4qu.png"title="Deidara" style="width: 291px; height: 280px;" /> 1 <span> Akatsuki </span></a>                            
    </li>

    <li id="tv2">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-hidan_zpsviw7vs30.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-hidan_zpsviw7vs30.png"title="Hidan" style="width: 291px; height: 280px;" /> 2 <span> Akatsuki </span></a>                            
     </li>

    <li id="tv3">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/Procurado-Itachi_zpspv7jm287.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/Procurado-Itachi_zpspv7jm287.png"title="Itachi" style="width: 291px; height: 280px;" /> 3 <span> Akatsuki </span></a>                            
    </li>

    <li id="tv4">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-kakuzu_zpszxuyjuva.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-kakuzu_zpszxuyjuva.png"title="Kakuzu" style="width: 291px; height: 280px;" /> 4 <span> Akatsuki </span></a>                            
    </li>

    <li id="tv5">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-Kisame_zpsckcnxkes.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-Kisame_zpsckcnxkes.png"title="Kisame" style="width: 291px; height: 280px;" /> 5 <span> Akatsuki </span></a>                            
    </li>

    <li id="tv6">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-konan_zps3y8v0xsx.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-konan_zps3y8v0xsx.png"title="Konan" style="width: 291px; height: 280px;" /> 6 <span> Akatsuki </span></a>                            
    </li>

    <li id="tv7">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-sasori_zpssfow5vb2.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-sasori_zpssfow5vb2.png"title="Sasori" style="width: 291px; height: 280px;" /> 7 <span>    Akatsuki </span></a>                            
    </li>

    <li id="tv8">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurados-nagato_zpsl4cnbmsz.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurados-nagato_zpsl4cnbmsz.png"title="Nagato" style="width: 291px; height: 280px;" /> 8 <span> Akatsuki </span></a>                            
    </li>

    <li id="tv9">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-tobi_zps3ztshwbx.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-tobi_zps3ztshwbx.png"title="Tobi" style="width: 291px; height: 280px;" /> 9 <span> Akatsuki </span></a>                             
    </li>

    <li id="tv10">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-zetsu_zpsw3r7msbv.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-zetsu_zpsw3r7msbv.png"title="Zetsu" style="width: 291px; height: 280px;" /> 10 <span>    Akatsuki </span></a>                             
    </li>
</ul>
<script type="text/javascript"> channel(1); </script> 
</div>

javascript html css

asked by anonymous 25.09.2015 / 22:47

2 answers

0

This type of question falls almost as opinionated. I would do with flexbox . Depending on which browsers you want to support , you can choose to use this property as well.

.wrapper {
  position: relative;
  height: 400px;
  width: 400px
}

.image {
  background: url(http://i.stack.imgur.com/rC9JM.jpg) no-repeat;
  left: 0;
  width: 85%
}

.blocks {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  right: 0;
  width: 15%
}

.image,
.blocks {
  position: absolute;
  top: 0;
  bottom: 0
}

.blocks div {
  height: 30px;
  width: 30px;
  background-color: #000;
  margin: 1px 0;
  color: #fff;
}

<div class='wrapper'>
  <div class='image'></div>
  <div class='blocks'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</div>

The "gain" comes at the time you need to add more blocks. Here is an example using the same structure and the same rules as the snippet above, but including more blocks:

.wrapper {
    position: relative;
    height: 400px;
    width: 400px
}

.image {
    background: url(http://i.stack.imgur.com/rC9JM.jpg) no-repeat;
    left: 0; width: 85%
}

.blocks {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    right: 0;
    width: 15%
}

.image, .blocks {
    position: absolute;
    top: 0;
    bottom: 0
}

.blocks div {
    height: 30px;
    width: 30px;
    background-color: #000;
    margin: 1px 0;
    color: #fff;
}

<div class='wrapper'>
  <div class='image'></div>
  <div class='blocks'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
</div>

Note that the only difference is the number of div within the element with class .blocks .

This article is a great reference on using flexbox .

26.09.2015 / 00:34

Help with jquery autocomplete How do I keep submit buttons with the same button-like appearance?

score 0 · Accepted Answer

To add divs inline, simply add the - float:left; property to the parent classes (or in this case, to each column) you want to be online. For example:

.colunaGrande {
    float:left; /* Propriedade adicionada à coluna grande */
    width: 70%;
    max-width: 450px;
    height: 95vh;
    background-color: burlywood;
}

.colunaPequena {
    float:left; /* Propriedade adicionada à coluna pequena */
    width: 15%;
    max-width: 80px;
    border: 1px solid #000;
}

ul.caixas {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li.box {
    width: 65%;
    height: 30px;
    background-color: #000;
    margin: 10px auto;
}
.clear{clear:both;}

<div class="colunaGrande"></div>
<div class="colunaPequena">
    <ul class="caixas">
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
    </ul>
</div>
<div class="colunaPequena">
    <ul class="caixas">
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
    </ul>
</div>
<div class="clear"></div>

You also have EXAMPLE IN JSFIDDLE if you prefer.

# Update
Remember to add a clear:both; in the end, to make sure that from here nothing else will be floated like in the update that I made to my answer, which in this case I created a specific class for this called class="clear" .