MPVeronika Ierakstīts Maijs 25, 2013 Share Ierakstīts Maijs 25, 2013 Sveiki! Lūk ir tāda lieta, ka šobrīd izstrādāju savu diplomdarbu,kā arī 1x mūžā veidoju mājas lapu. man ir izstrādāta šāda navigācija, TAČU nemāku izdarīt tā, ka navigācijai pa vidu būtu ievietots šāds logo, kurš arī strādātu kā links uz sākumu. Varbūt kāds varētu ieteikt kā to labāk izdarīt? pagaidām man ir superneizdevies neveiksmīgs šāds variants Paldies par palīdzību. index.html <div id='cssmenu'> <ul> <li class='active'><a href='index.html'><span>Sākums</span></a></li> <li class='has-sub'><a href='#'><span>Pakalpojumi</span></a> <ul> <li><a href='kaminzale.html'><span>Kamīnzāle</span></a></li> <li><a href='kempings.html'><span>Kempings</span></a></li> <li><a href='pirts.html'><span>Pirts</span></a></li> <li class='last'><a href='pepija.html'><span>Pepija</span></a></li> </ul> </ul> </div> <div id="logo"> <a href="index.html" > <img src="gabali/logo.png" /> </a> </div> <div id='cssmenu'> <ul> </li> <li><a href='galerija.html'><span>Galerija</span></a></li> <li class='last'><a href='kontakti.html'><span>Kontakti</span></a></li> </ul> </div> stils.css #cssmenu{ height:37px; display:block; padding:0; margin:20px auto; border:1px solid; border-radius:5px; } #cssmenu > ul {list-style:inside none; padding:0; margin:0;} #cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} #cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } #cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} #cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } #cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} #cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } #cssmenu > ul > li.has-sub:hover > a:before{top:19px;} #cssmenu ul li.has-sub:hover > a{ background:#none; border-color:#none; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } #cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} #cssmenu ul li.has-sub > a:hover{background:none; border-color:#none;} #cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } #cssmenu ul li > ul{width:200px;} #cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} #cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } #cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#a67547; background:-moz-linear-gradient(top, #a67547 0%, #88583a 100%); background:-webkit-gradient(linear, left top, left bottom); background:-webkit-linear-gradient(top, #a67547 0%,#88583a 100%); background:-o-linear-gradient(top, #a67547 0%,#88583a 100%); background:-ms-linear-gradient(top, #a67547 0%,#88583a 100%); background:linear-gradient(top, #a67547 0%,#88583a 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#a67547', endColorstr='#88583a',GradientType=0 ); } #cssmenu > ul > li > a{border-right:1px solid #583926; color:#fff;} #cssmenu > ul > li > a:after{border-color:#d5a172;} #cssmenu > ul > li > a:hover{background:#7e4e31;} Link to comment Share on other sites More sharing options...
usver Maijs 25, 2013 Share Maijs 25, 2013 kods: <html> <head> <link rel="stylesheet" type="text/css" href="style.css"/> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> <div id='cssmenu' style="margin-top: 100px;"> <ul> <li class='active'><a href='index.html'><span>Sākums</span></a></li> <li class='has-sub'><a href='#'><span>Pakalpojumi</span></a> <ul> <li><a href='kaminzale.html'><span>Kamīnzāle</span></a></li> <li><a href='kempings.html'><span>Kempings</span></a></li> <li><a href='pirts.html'><span>Pirts</span></a></li> <li class='last'><a href='pepija.html'><span>Pepija</span></a></li> </ul> <li class="logo"><img src="logo.png" style="margin-top: -100px;" onClick="window.location='index.html'"></li> <li><a href='galerija.html'><span>Galerija</span></a></li> <li class='last'><a href='kontakti.html'><span>Kontakti</span></a></li> </div> #cssmenu{ height:37px; display:block; padding:0; margin:20px auto; border:1px solid; border-radius:5px; } #cssmenu > ul {list-style:inside none; padding:0; margin:0;} #cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} #cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } #cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} #cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } #cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} #cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } #cssmenu > ul > li.has-sub:hover > a:before{top:19px;} #cssmenu ul li.has-sub:hover > a{ background:#none; border-color:#none; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } #cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} #cssmenu ul li.has-sub > a:hover{background:none; border-color:#none;} #cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } #cssmenu ul li > ul{width:200px;} #cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} #cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } #cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#a67547; background:-moz-linear-gradient(top, #a67547 0%, #88583a 100%); background:-webkit-gradient(linear, left top, left bottom); background:-webkit-linear-gradient(top, #a67547 0%,#88583a 100%); background:-o-linear-gradient(top, #a67547 0%,#88583a 100%); background:-ms-linear-gradient(top, #a67547 0%,#88583a 100%); background:linear-gradient(top, #a67547 0%,#88583a 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#a67547', endColorstr='#88583a',GradientType=0 ); } #logo { background:none !important; } #cssmenu > ul > li > a{border-right:1px solid #583926; color:#fff;} #cssmenu > ul > li > a:after{border-color:#d5a172;} #cssmenu > ul > li > a:hover{background:#7e4e31;} uz firefox kā nākas, galvenā izmaiņa - nepārraut to <ul> posmu, bet vienkārši pa vidu ielikt vienu īpašu bloku, kam ar CSS pateikt, ka brūno krāsu nevajadzēs un vispār tam blokam neko īpašu nevajadzēs. tāpat bildītei fiksais risinājums <a> novākt, onclick aizstāt. nav smuki, bet ielikts lai nečakarētos ar CSS. CSSā vienīgā izmaiņa, kas jāskatās: #logo rindiņa. 1 Link to comment Share on other sites More sharing options...
MPVeronika Maijs 26, 2013 Author Share Maijs 26, 2013 Liels paldies! Jā, uz firefox iet, bet uz pārējiem diemžēl nē... ā, nē, nē, viss aizgāja! TAču, vai kads nevaretu pateikt, kā to visu navigaciju izstiept? nu ta lai smuki tas podziņas izretinās? Link to comment Share on other sites More sharing options...
Recommended Posts
Izveido kontu, vai pieraksties esošajā, lai komentētu
Jums ir jābūt šī foruma biedram, lai varētu komentēt tēmas
Izveidot jaunu kontu
Piereģistrējies un izveido jaunu kontu, tas būs viegli!
Reģistrēt jaunu kontuPierakstīties
Jums jau ir konts? Pierakstieties tajā šeit!
Pierakstīties tagad!