Merhabalar,kendimi geliştirmek adına hazır şablonlar üzerinde düzenlemeler yapıyorum ve bir şekilde azda olsa bir şeyler öğreniyorum. Ancak hazır şablona hover özelliği ile menü ekleyemedim. Yardımcı olursanız sevinirim.
HTML Kodu
Burada her şey normal gözükse bile sorun şu;About'un alt menüsünü oluşturduğumda hiç bir şekilde bu alt menünün konumunu değiştiremiyorum. Sayfa yapısına ayak uydurmuyor hiç bir şekilde. Ancak CSS ile sıfırdan bir menü oluşturabiliyorum. Aynı kodları buraya kullandığımda sıkıntı oluyor.
CSS Kodu
Sizden ricam burada bana hover ile açılır menüyü buraya nasıl ekleyeceğim konusunda yardımcı olmanız.
HTML Kodu
Kod:
<!DOCTYPE HTML>
<!--
Design by Free Responsive Templates
http://www.free-responsive-templates.com
Released for free under a Creative Commons Attribution 3.0 Unported License (CC BY 3.0)
-->
<html>
<head>
<**** charset="utf-8">
<**** name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free Responsive Template #7 - frt_auroch</title>
<link href="http://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
</head>
<body>
<div class="navcontainer">
<ul class="navlist">
<li id="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<ul>
<li><a href="#">Test</a></li>
<ul>
<li><a href="#">Links</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="container">
<header>
<h1><a href="">frt_auroch</a></h1>
<p>best free responsive templates from FRT</p>
<br class="clearfloat" />
</header>
<section>
<!-- begin .slider -->
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li><img src="images/sliderPic1.jpg" alt=""><div class="sliderImageCaption"><h4>auroch pic1 description goes here</h4></div></li>
<li><img src="images/sliderPic2.jpg" alt=""><div class="sliderImageCaption"><h4>auroch pic2 description goes here</h4></div></li>
<li><img src="images/sliderPic3.jpg" alt=""><div class="sliderImageCaption"><h4>auroch pic3 description goes here</h4></div></li>
<li><img src="images/sliderPic4.jpg" alt=""><div class="sliderImageCaption"><h4>auroch pic4 description goes here</h4></div></li>
</ul>
</div>
</div>
<!-- end .slider -->
<!-- begin .sidebar1 -->
<div class="mainContent">
<div class="post">
<h2>Standard Dummy</h2>
<div class="date">June 06, 2012</div>
<div class="author">Posted by <a href="#">Username</a></div>
<br class="clearfloat" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy <strong>text ever since the 1500s</strong>, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software <a href="#">like Aldus PageMaker</a> including versions of Lorem Ipsum.
</p>
<div class="readmore"><a href="#">Read more</a> | <a href="#">Comments</a></div>
</div>
<div class="post">
<h2>Printer Took</h2>
<div class="date">June 06, 2012</div>
<div class="author">Posted by <a href="#">Username</a></div>
<br class="clearfloat" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy <strong>text ever since the 1500s</strong>, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software <a href="#">like Aldus PageMaker</a> including versions of Lorem Ipsum.
</p>
<div class="readmore"><a href="#">Read more</a> | <a href="#">Comments</a></div>
</div>
<div class="post">
<h2>Publishing Software</h2>
<div class="date">June 06, 2012</div>
<div class="author">Posted by <a href="#">Username</a></div>
<br class="clearfloat" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy <strong>text ever since the 1500s</strong>, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software <a href="#">like Aldus PageMaker</a> including versions of Lorem Ipsum.
</p>
<div class="readmore"><a href="#">Read more</a> | <a href="#">Comments</a></div>
</div>
<div class="post">
<h2>Typesetting Industry</h2>
<div class="date">June 06, 2012</div>
<div class="author">Posted by <a href="#">Username</a></div>
<br class="clearfloat" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy <strong>text ever since the 1500s</strong>, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software <a href="#">like Aldus PageMaker</a> including versions.
</p>
<div class="readmore"><a href="#">Read more</a> | <a href="#">Comments</a></div>
</div>
</div>
<!-- end .sidebar1 -->
<!-- begin .mainContent -->
<div class="sidebar1">
<h3>Search Box</h3>
<input type="text">
<div class="sidebar1Separator"></div>
<h3>Standard Dummy</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
</p>
<div class="sidebar1Separator"></div>
<h3>Categories</h3>
<ul class="sidebarlist">
<li><a href="#">Lorem Ipsum is simply dummy </a></li>
<li><a href="#">Been the industry's standard</a></li>
<li><a href="#">When an unknown printer took</a></li>
<li><a href="#">Galley of type and scrambled</a></li>
<li><a href="#">Only five centuries but also</a></li>
<li><a href="#">Into electronic typesetting</a></li>
</ul>
<div class="sidebar1Separator"></div>
<h3>Blogroll</h3>
<ul class="sidebarlist">
<li><a href="#">Lorem Ipsum is simply dummy </a></li>
<li><a href="#">Been the industry's standard</a></li>
<li><a href="#">When an unknown printer took</a></li>
<li><a href="#">Galley of type and scrambled</a></li>
<li><a href="#">Only five centuries but also</a></li>
<li><a href="#">Into electronic typesetting</a></li>
</ul>
<div class="sidebar1Separator"></div>
<h3>Archives</h3>
<ul class="sidebarlist">
<li><a href="#">Lorem Ipsum is simply dummy </a></li>
<li><a href="#">Been the industry's standard</a></li>
<li><a href="#">When an unknown printer took</a></li>
<li><a href="#">Galley of type and scrambled</a></li>
<li><a href="#">Only five centuries but also</a></li>
<li><a href="#">Into electronic typesetting</a></li>
</ul>
</div>
<!-- end .mainContent -->
<br class="clearfloat" />
</section>
</div>
<footer>
<p>
Copyright © Your Company Name. All rights reserved. Designed by <a href="http://www.free-responsive-templates.com" title="free responsive templates">Free Responsive Templates</a>, Validation
<a class="footerLink" href="http://validator.w3.org/check/referer" title="This page validates as HTML5"><abbr title="HyperText Markup Language">HTML5</abbr></a> |
<a class="footerLink" href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS3</abbr></a>
</p>
</footer>
</body>
</html>Burada her şey normal gözükse bile sorun şu;About'un alt menüsünü oluşturduğumda hiç bir şekilde bu alt menünün konumunu değiştiremiyorum. Sayfa yapısına ayak uydurmuyor hiç bir şekilde. Ancak CSS ile sıfırdan bir menü oluşturabiliyorum. Aynı kodları buraya kullandığımda sıkıntı oluyor.
CSS Kodu
Kod:
/*
Design by Free Responsive Templates
http://www.free-responsive-templates.com
Released for free under a Creative Commons Attribution 3.0 Unported License (CC BY 3.0)
*/
* {
margin:0;
padding:0;
}
body {
font-family: 'Arvo', serif;
font-size: 14px;
background: url(../images/siteBackground.jpg) repeat;
color: #4b4b4b;
text-shadow: 0px 0px, 1px 1px #ffffff;
}
a {
color:#1fc7eb;
text-decoration:none;
}
p {
line-height:140%;
}
h2 {
font-size:30px;
color:#160000;
padding:0 0 10px 0;
}
h3 {
font-size:18px;
color:#160000;
padding:0 0 10px 0;
}
h4 {
color:#9e9e9e;
font-size:18px;
}
.container {
width: 960px;
margin: 0 auto;
}
header h1 {
padding:25px 0 0 0;
}
header h1 a {
font-size: 42px;
color:#160000;
text-decoration:none;
}
.mainContent {
float: right;
width: 660px;
padding:20px 0 20px 0;
}
.post {
border-bottom: 1px dashed #4b4b4b;
box-shadow: 0 1px #F2F2F2;
margin-bottom:40px;
}
.post p {
padding:10px 0;
}
.date {
float:left;
}
.author {
float:right;
}
.readmore {
padding:0 0 20px 0;
}
.sidebar1 {
margin: 0 690px 0 0;
padding:20px 0 20px 0;
border-right: 1px solid #BBBBBB;
box-shadow: 1px 0px #ffffff;
}
.sidebar1 p {
width:220px;
}
input {
vertical-align:middle;
font-weight:normal;
padding:5px 5px 5px 5px;
margin:0;
background:#fff;
outline:none;
border:1px solid #cacaca;;
width:220px;
box-shadow: 0px 2px 4px 0px #828282;
}
.sidebar1Separator {
height:50px;
}
/*begin sidebar list*/
.sidebar1 ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
.sidebarlist a {
display: block;
width: 220px;
color: #4b4b4b;
border-bottom: 1px dashed #4b4b4b;
box-shadow: 0 1px #F2F2F2;
list-style: none outside none;
padding: 10px 0 10px 0px;
}
.sidebarlist a:link, .sidebarlist a:visited {
color: #4b4b4b;
text-decoration: none;
}
.sidebarlist a:hover {
background-color: #e6e6e6;
color: #4b4b4b;
padding: 10px 0 10px 7px;
}
/*end sidebar list*/
footer {
border-top:1px solid #bbbbbb;
background:#e1e1e1;
}
footer p {
text-align:center;
padding:30px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/*--------------------------------------------------------------------------------------------*/
/********* begin MAIN NAV ********/
/*--------------------------------------------------------------------------------------------*/
.navcontainer ul {
padding: 20px 0;
margin: 0;
list-style-type: none;
background:url(../images/menuGradient.jpg) repeat-x;
color: #FFF;
width: 100%;
text-align: center;
box-shadow: 0px 6px 7px 0px #828282;
}
.navcontainer li {
display: inline;
}
.navcontainer li a {
text-decoration: none;
color: #9c9b9b;
padding: 20px 10px;
text-shadow: none;
text-transform:uppercase;
font-weight:bold;
font-size:18px;
}
.navcontainer li a:hover {
background:url(../images/activeMenuGradient.jpg) repeat-x;
color: #fff;
}
.navcontainer #active a {
background:url(../images/activeMenuGradient.jpg) repeat-x;
color: #fff;
}
/*--------------------------------------------------------------------------------------------*/
/********* end MAIN NAV ********/
/*--------------------------------------------------------------------------------------------*/
/********* begin SLIDER ********/
/*--------------------------------------------------------------------------------------------*/
.slider {
width:956px;
position:relative;
z-index:1;
background:#fff;
margin:20px 0 80px 0;
}
.flexslider {
margin: 0;
}
.flexslider .slides > li {
display: none;
list-style:none;
}
.flexslider .slides img {
max-width: 100%;
display: block;
box-shadow: 0px 6px 7px 0px #828282;
}
.flex-pauseplay span {
text-transform: capitalize;
}
/* Clearfix for the .slides element */
.slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
/* control Nav */
.flex-control-nav {
position:absolute;
bottom:-45px;
left:434px;
}
.flex-control-nav li {
display:block;
float:left;
margin-right:1px;
}
.flex-control-nav li a {
display:block;
background:url(../images/pagination.png) 0 0 no-repeat;
width:26px; height:29px;
text-indent:-5000px;
}
.flex-control-nav li a:hover,.flex-control-nav li a.active {
background-position:0 -29px;
cursor:pointer;
}
/* Slider Image Caption */
.sliderImageCaption{
position:absolute;
color:#160000;
text-align:center;
width:100%;
bottom:-70px;
}
/*--------------------------------------------------------------------------------------------*/
/********* end SLIDER ********/
/*--------------------------------------------------------------------------------------------*/
/********* begin MEDIA QUERIES ********/
/*--------------------------------------------------------------------------------------------*/
/* for 980px or less */
@media screen and (max-width: 960px) {
.container {
width: 98%;
}
.sidebar1 {
width: 70%;
}
.mainContent {
width: 29%;
}
.slider {
width:99.6%;
}
}
/* for 768px or less */
@media screen and (max-width: 768px) {
.mainContent {
float:none;
width: 100%;
padding:0;
}
.sidebar1 {
width: 100%;
padding:0;
margin:0;
border-right: none;
box-shadow: none;
}
.sidebar1 p {
width: auto;
}
input {
width:auto;
}
.sidebar1Separator {
height:20px;
}
/*begin sidebar list*/
.sidebarlist a {
width: auto;
padding: 5px 0 5px 0px;
}
.sidebarlist a:hover {
padding: 5px 0 5px 5px;
}
/*end sidebar list*/
.slider {
margin-top:10px;
margin:20px 0 80px 0;
}
.flex-control-nav {
position:absolute;
bottom:-45px;
left:43%;
}
}
/* for 480px or less */
@media screen and (max-width: 480px) {
.slider {
margin-top:0px;
margin-bottom:0px;
}
.mainContent {
width: 100%;
padding:0;
}
.sidebar1 {
width: 100%;
padding:0;
border-right: none;
box-shadow: none;
}
.sidebar1 p {
width: auto;
}
input {
width:auto;
}
.sidebar1Separator {
height:20px;
}
/*begin sidebar list*/
.sidebarlist a {
width: auto;
padding: 5px 0 5px 0px;
}
.sidebarlist a:hover {
padding: 5px 0 5px 5px;
}
/*end sidebar list*/
.post {
margin-bottom:10px;
}
.post p {
padding:0 0 10px 0;
}
.date {
float:none;
}
.author {
float:none;
}
.sliderImageCaption {
display:none;
}
.flex-control-nav {
position:absolute;
bottom:5px;
left:50%;
}
.navcontainer ul {
padding: 5px 0;
}
.navcontainer li {
display: inline;
}
.navcontainer li a {
padding: 5px 3px;
font-size:12px;
}
}
img {
max-width: 100%;
height: auto;
width: auto;
}
/*--------------------------------------------------------------------------------------------*/
/********* end MEDIA QUERIES ********/
/*--------------------------------------------------------------------------------------------*/Sizden ricam burada bana hover ile açılır menüyü buraya nasıl ekleyeceğim konusunda yardımcı olmanız.
