move points circle ad the middle of a block

ساخت وبلاگ

آخرین مطالب

امکانات وب

move points circle ad the middle of a block

Hi everybody,

I seek for move a point at the middle of text,

but the stay at bottom of the block

If someone know why It's would help me


here the code

html :

Code:

        <div class="menuNavigation">

       
        <!-- The dots/circles -->
<div>
  <span class="dot" id="dotOne"  ></span>
 
  <span onclick="currentSlide(1)" id="dotOne" class="textMenuNavigation" onmouseover="changeColorBackground("red')"
        onmouseout="changeColorBackground('#FFFCE7')" > Appetizers </span>
  <br>
 
  <span class="dot" id="dotTwo" onclick="currentSlide(2)"></span>  <span  id="dotTwo"  onclick="currentSlide(2)" class="textMenuNavigation"> Soups </span> 
  <br>
 
  <span class="dot"  id="dotTwo" onclick="currentSlide(3)">  </span>  <span onclick="currentSlide(3)" class="textMenuNavigation">  Beef  </span> 
  <br>
 
 
</div>
       
      </div>


css

Code:

/*
 *
font-family: 'Macondo', cursive;
font-family: 'Lobster Two', cursive;

*/


.menuBoard {
   
 
    z-index: 90000;
}




/* Style the video: 100% width and height to cover the entire window */
#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}


#menuText {

 opacity: 1; 
 
}



/* Add some content at the bottom of the video/page */
.content {
  background-image: url("../../darkToneBackground.jpg") ;
  opacity: 0.80;
    width : 80% ;
  min-height: 80% ;
    background-size: 100%;
    margin: 5% auto ;
    padding : 2% ;
    border-radius: 3%;
}


#menuKind {
 
  color : #DCC108 ;
  font-family: 'Macondo', cursive;
 
  margin : auto;
  font-style: italic;
  opacity : 0.35;
  background-color : #110000  ;
  border-radius: 20% ;
  text-align : center ;
  width : 50% ;
}



.dishName {
 
 font-family: 'Macondo', cursive;
 font-size:  200% ;
  /*font-weight: 250%;*/
  font-style: italic;
  color : #FFFF7F;
  opacity : 0.8 ;
}



.dishIngredients      {
 
  margin-top : 3% ;
  color : #FDF6C3 ;
  font-family: 'Macondo', cursive;
 font-size : 125%;
  opacity : 0.5 ;
}



.menuNavigation {
 

 
 position : absolute ;
 height : 15% ;
 width : 25% ;
 right : 1% ;
  top : 20% ; /*20%*/
 
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 20px;
  width: 20px;
  margin:3% ;
  background-color: #FFFCE7;    /* #bbb;*/
  border-radius: 75%;
  display : inline-block ;
  transition: background-color 2s ease;
 
}

.active{
  background-color: #110000 ;
}


.dot:hover {
    background-color :  red ;

}


.textMenuNavigation {
 cursor:pointer;
 position : absolute;
right : 30% ;
 text-align :  right ;
 width : 80% ;
 color : #DCC108 ;
  font-family: 'Macondo', cursive;
  margin : auto;
  font-style: italic;
  opacity : 0.35;
  background-color : #110000  ;
  background-size : 15% ;
 font-size : 150%;
 
}


js

Code:
var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("menuSlide");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1 ;} ;
  if (n < 1) {slideIndex = slides.length ;}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("menuSlide");
  var textMenuNavigations = document.getElementsByClassName("textMenuNavigation");
  if (n > slides.length) {slideIndex = 1;}
  if (n < 1) {slideIndex = slides.length;}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < textMenuNavigations.length; i++) {
      textMenuNavigations[i].className = textMenuNavigations[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  textMenuNavigations[slideIndex-1].className += " active";
};





/* function changeColorBackground(color) {
  document.getElementsByClassName("dot").style.backgroundColor = color;
}  */

here a photo of point circle at bottom of block, just at the left of blue circle, Click image for larger version.  Name: ricePotMenu.jpg  Views: 9  Size: 39.7 KB  ID: 17703

if someone got a idea I m here ^^',


kind regard,
Laurent
Attached Thumbnails
Click image for larger version.  Name: ricePotMenu.jpg  Views: N/A  Size: 39.7 KB  ID: 17703 
CodingForums...
ما را در سایت CodingForums دنبال می کنید

برچسب : نویسنده : codingforums بازدید : 195 تاريخ : چهارشنبه 27 دی 1396 ساعت: 5:09

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه