Tekil Mesaj gösterimi - Css ve jquery Anlayan bakabilirmi

Konu Css ve jquery Anlayan bakabilirmi

19-05-2013, 16:22:18

Kimlik doğrulama veya yönetimden onay bekliyor.

http://gramerist.com/quiz2/ linkindeki css menu ile jquery kodunu birleştirdim fakat menunun ve slider in sayfanın ortasında olmasını istiyorum cunku ust tarafa birşeyler daha ekleyecegim yani css kodu sola dayalı ortada, slider in de sayfanın tam ortasında durmasını istiyorum.Nasıl Yapabilirim?

css menu style.css

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;    
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
    background-image: url(../images/home.png);
}
ul#navigation .about a      {
    background-image: url(../images/id_card.png);
}
ul#navigation .search a      {
    background-image: url(../images/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(../images/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(../images/rss.png);
}
ul#navigation .photos a     {
    background-image: url(../images/camera.png);
}
ul#navigation .contact a    {
    background-image: url(../images/mail.png);
}

jquery slider styles.css

/**
 * --------------------------------------------------------------------
 * jQuizzy - jQuery plugin for creating quizzes
 * by Siddharth S - www.ssiddharth.com
 * Copyright (c) 2011 Siddharth
 * Version: 1.0
 * --------------------------------------------------------------------
**/

.main-quiz-holder {
	margin: 0 auto;
	position: relative;background: #FCFCFC;
    border:1px solid #dedede;
	 box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
	 -o-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
	 -webkit-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
	 -moz-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
	 border-radius: 20px 2px 20px 2px;
	 position: relative;
	 width: 600px;
}

/* Low Orbit Ion Cannon! */

.main-quiz-holder *{
	margin: 0;
	padding: 0;
	font-family:  "Myriad", "Myriad Pro", "Helvetica","Segoe UI", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

/* Ok, prefix every rule with the main class since the default Tuts+ stylesheet overrides a lot of the styles here. Adding more weight to keep things in check. Ugly, but it'll do */


.main-quiz-holder a {
	text-decoration: none;
	color: #6C6C6C;
}

.main-quiz-holder  .slide-container {
    width: 500px;
	 min-height: 400px;
    padding: 20px 50px 0 50px;
}


.results-container, .intro-container {
	text-align: center;
}

.main-quiz-holder .slide-container .question, .main-quiz-holder h2.qTitle {
    margin: 10px 0 20px 0;
	 font-size: 26px;
	 font-weight: normal;
}

.main-quiz-holder  h2.qTitle {
	font-size: 32px;
	margin-top: 30px;
}

.main-quiz-holder  .question-number {
	position: absolute;
	right: 10px;
	top: 10px;
	border:1px solid #F6F6F6;
	padding: 5px;
	background: #F0F0F0;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 6px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 6px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 6px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  color: #949494;
}

.main-quiz-holder  .slide-container ul.answers {
    margin: 0px;
    padding: 5px;
	 list-style: none;
}

.main-quiz-holder .slide-container ul.answers li {
	cursor: pointer;
	padding: 5px 30px;
	margin: 12px 0;
	color: #4c4c4c;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 6px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 6px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 6px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
  background: #f6f6f6;
  background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#d4d4d4));
  background: -webkit-linear-gradient(#f6f6f6, #d4d4d4);
  background-image: -moz-linear-gradient(top, #f6f6f6, #d4d4d4);
  background-image: -moz-gradient(top, #f6f6f6, #d4d4d4);
  border: 1px solid #a1a1a1;	
}

.main-quiz-holder  .slide-container ul.answers li.selected {
	background: #6fb2e5;
  box-shadow: 0 1px 5px #0061aa, inset 0 10px 20px #b6f9ff;
   -o-box-shadow: 0 1px 5px #0061aa, inset 0 10px 20px #b6f9ff;
   -webkit-box-shadow: 0 1px 5px #0061aa, inset 0 10px 20px #b6f9ff;
   -moz-box-shadow: 0 1px 5px #0061aa, inset 0 10px 20px #b6f9ff;
}

.main-quiz-holder .slide-container .prev, .main-quiz-holder .slide-container .next {
	height: 19px; cursor: pointer; padding: 5px 10px;
   font-size: 16px;
   padding: 5px 15px;
  color: #4c4c4c;
  border-radius: 4px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  background: #6fb2e5;
  box-shadow: 0 1px 5px #0061aa, inset 0 10px 20px #b6f9ff;
   -o-box-shadow: 0 1px 5px #0061aa, inset 0 10px 20px #b6f9ff;
   -webkit-box-shadow: 0 1px 5px #0061aa, inset 0 10px 20px #b6f9ff;
   -moz-box-shadow: 0 1px 5px #0061aa, inset 0 10px 20px #b6f9ff;
  
}

.main-quiz-holder .slide-container .next  {
  background: #77d125;
  box-shadow: 0 1px 5px #3caa00, inset 0 10px 20px #c9ffb6;
   -o-box-shadow: 0 1px 5px #3caa00, inset 0 10px 20px #c9ffb6;
   -webkit-box-shadow: 0 1px 5px #3caa00, inset 0 10px 20px #c9ffb6;
   -moz-box-shadow: 0 1px 5px #3caa00, inset 0 10px 20px #c9ffb6;
}


.main-quiz-holder .progress-keeper {
    width: 553px;
    margin: 0px 12px;
	 box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
	 -o-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
	 -webkit-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
	 -moz-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
	 border-radius: 2px;
	 border:1px solid #dedede;
	 position: absolute;
	 bottom: 10px;
	 left: 10px;
}

.main-quiz-holder .progress {
    width: 0;
	 height: 20px;
  color: #4c4c4c;
  background: #f6f6f6;
  background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#d4d4d4));
  background: -webkit-linear-gradient(#f6f6f6, #d4d4d4);
  background-image: -moz-linear-gradient(top, #f6f6f6, #d4d4d4);
  background-image: -moz-gradient(top, #f6f6f6, #d4d4d4);
 }

.main-quiz-holder .result-keeper {
    margin: 10px;
	 text-align: center;
}

.main-quiz-holder .notice {
	position: absolute;
	bottom: 50px;
	right: 52px;
	color: #717171;
}

.main-quiz-holder .slide-container .prev { 
	position: absolute;
	 bottom: 75px;
	 left: 55px;
}
.main-quiz-holder .slide-container .next, .main-quiz-holder .slide-container .final{ 							    position: absolute;
	 bottom: 75px;
	 right: 55px;
}

.main-quiz-holder .nav-previous {
	padding-left: 25px;
	background: url(../img/back.png) left no-repeat;
}

.main-quiz-holder  .nav-next {
	padding-right: 25px;
	background: url(../img/forward.png) right no-repeat;
}

.main-quiz-holder .nav-show-result{
	padding-left: 25px;
	background: url(../img/confirm.png) left no-repeat;
}

.main-quiz-holder .nav-start {
	display: block;
	margin: 40px auto 0 auto;
}

.main-quiz-holder .nav-container {
	padding: 5px;
}

.main-quiz-holder .result-row {
	width: 110px;
	margin: 10px 25px;
	float: left;
	position: relative;
	margin: 2px solid #000;
}

.main-quiz-holder .result-row .resultsview-qhover{
	background: #FCFCFC;
    border:1px solid #dedede;
	 box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
	 -o-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
	 -webkit-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
	 -moz-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
	 border-radius: 2px 10px 2px 10px;
	 position: absolute;
	 width: 250px;
	 top: 43px;
	 left: 35px;
	 z-index: 200;
	 padding: 15px 30px;
	 text-align: left;
	 font-size: 22px;
}

.main-quiz-holder .resultsview-qhover ul {
	list-style: none;
	margin: 10px 0;
}

.main-quiz-holder .resultsview-qhover li {
	padding: 0 28px;
	margin: 5px 0;
	height: 20px;
	font-size: 14px;
	background: url(../img/answer.png) no-repeat 5px 2px #FCFCFC;
	border:1px solid #F6F6F6;
	border-radius: 3px;
}

.main-quiz-holder .resultsview-qhover li.selected {
	background: url(../img/incorrect.png) no-repeat 5px 2px;
}
	
.main-quiz-holder .resultsview-qhover li.right {
	background: url(../img/correct.png) no-repeat 5px 2px;
}	
	
.main-quiz-holder .correct, .main-quiz-holder .wrong {    
	height: 19px; cursor: pointer; padding: 5px 10px;
   font-size: 16px;
   padding: 5px 15px;
  color: #4c4c4c;
  border-radius: 4px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 6px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 6px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 6px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
   
}

.main-quiz-holder .correct {    
  background: #c3e462;
  background: -webkit-gradient(linear, left top, left bottom, from(#c3e462), to(#90b61e));
  background: -webkit-linear-gradient(#c3e462, #90b61e);
  background-image: -moz-linear-gradient(top, #c3e462, #90b61e);
  background-image: -moz-gradient(top, #c3e462, #90b61e);
  border: 1px solid #bfff00;
}

.main-quiz-holder .wrong {
	background: #fc5e5e;
  background: -webkit-gradient(linear, left top, left bottom, from(#fc5e5e), to(#ea4646));
  background: -webkit-linear-gradient(#fc5e5e, #ea4646);
  background-image: -moz-linear-gradient(top, #fc5e5e, #ea4646);
  background-image: -moz-gradient(top, #fc5e5e, #ea4646);
  border: 1px solid #e36d6d;
}

.main-quiz-holder .correct span {
	padding: 0 20px;
	background: url(../img/confirm.png) left no-repeat;
}

.main-quiz-holder .wrong span {
	padding: 0 20px;
	background: url(../img/delete.png) left no-repeat;
}

.main-quiz-holder .question {
	padding-left: 5px;
	line-height: 1.3em;
}

.main-quiz-holder .share-button{
	display: block;
	margin: 15px 0;
}