Giriş Yap / Kayıt Ol

WM Aracı'na üyelikler tekrar açıldı! Kayıt olmak için TIKLAYIN!

1Beğeni
  • 1 Yazan enerjiveguc

Cevap Yaz Favorilerime Ekle
Seçenekler Stil
Geri Git   Forum > > HTML - CSS - XML

navbar a border-image eklemek

  #1  
Okunmamış 11 Şubat 2019, 03:49
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 03 Mart 2018
Yaş / Cinsiyet: 22 / Erkek
Meslek: öğrenci
Konum: Bursa
Ad, Soyad: Mu... Ye...
Mesajlar: 40
Beğeniler: 1 / 26
Ticaret: 0, 0%
index.html dosyası :

HTML Kodu:

<!DOCTYPE html>
<html>
<head>	
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="index.css">
	<title>mustafa</title>
</head>
<body>
	
	<div class="navbar">
		
		<ul class="navUl">
			
			<li class="NavUlLi">Sıradan</li>
			<li class="NavUlLi">Sıradan 2</li>
			<li class="NavUlLi">Sıradan 3</li>
			<li class="NavUlLi a">İşte Burası DropDown
			<div class="b">
				<div class="c">
						<ul class="">
							
							<li>Ürünler vs</li>
							<li>Ürünler vs</li>
							<li>Ürünler vs</li>
						</ul>
				</div>
				<div class="c">
						<ul class="">
							
							<li>Başka şeyler vs..</li>
							<li>Başka şeyler vs..</li>
							<li>Başka şeyler vs..</li>
						</ul>
				</div>				


			</div>

			</li>
			
			<li class="NavUlLiRight">aaa</li>
		</ul>


	</div>
</body>
</html>

index.css dosyası :

Kod:
* {
	color: black;
	margin:0px;
	padding: 0px;
	text-decoration: none;
}

.navbar {
	position: sticky;
	top: 0px;

margin-left: auto;
margin-right: auto;
width: 80%;
text-align: center;
background-color: brown;
}

.navUl {
background-color: brown;
width: 100%;
overflow:auto;
}

.NavUlLi {
list-style-type: none;
display: inline;

opacity: 0.5;
float: left;

}

.NavUlLi:not(:first-child) {
    margin-left: 25px;
}


.NavUlLiRight {
	display: inline;
	list-style-type: none;
background-color: pink;
opacity: 0.7;
float: right;
}



.b {
width: 100%;
height: auto;

display: none;
position: absolute;
left:0px;
right: 0px;
}
.a:hover .b {
display: block;

}

.c {
	float: left;
	display: inline;
	width: 50%;
	
height: auto;
	background-color: green;
}

.c ul {
	width: 100%;
	
}
.c ul li {
	width: 100%;
	list-style-type: none;
}


yukarıdaki navbar eklemek istediğim border-image şu linkteki resim : https://www.iconspng.com/image/47392/leafy-halfborder

ama bir türlü yapamadım ,hep saçma sapan yerlerde dört tane yukarıdaki resimden kalıyor; yardımcı olur musunuz ?
  #2  
Okunmamış 12 Şubat 2019, 11:22
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 28 Mayıs 2018
Yaş / Cinsiyet: 47 / Erkek
Meslek: wm
Ad, Soyad: Be... Ak...
Mesajlar: 1.273
Beğeniler: 440 / 354
Ticaret: 0, 0%
msyysm
İstediğin linkteki gibi mi?

https://www.file-up.org/52m11ud0re1b
msyysm bunu beğendi.
  #3  
Okunmamış 12 Şubat 2019, 17:09
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 03 Mart 2018
Yaş / Cinsiyet: 22 / Erkek
Meslek: öğrenci
Konum: Bursa
Ad, Soyad: Mu... Ye...
Mesajlar: 40
Beğeniler: 1 / 26
Ticaret: 0, 0%
Üstat o nasıl link virüs buluyor google chrome, kodları atabilir misin ya da resmini falan ?
Konu msyysm tarafından (12 Şubat 2019, 17:27 ) değiştirilmiştir.
  #4  
Okunmamış 13 Şubat 2019, 10:21
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 28 Mayıs 2018
Yaş / Cinsiyet: 47 / Erkek
Meslek: wm
Ad, Soyad: Be... Ak...
Mesajlar: 1.273
Beğeniler: 440 / 354
Ticaret: 0, 0%
Klasör upload etmiştim oraya, kodlar ve görsel aşağıdadır.

index.html
Alıntı:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css">
<title>mustafa</title>
</head>
<body>

<div class="navbar">

<ul class="navUl">

<li class="NavUlLi">Sıradan</li>
<li class="NavUlLi">Sıradan 2</li>
<li class="NavUlLi">Sıradan 3</li>
<li class="NavUlLi a">İşte Burası DropDown
<div class="b">
<div class="c">
<ul class="">

<li>Ürünler vs</li>
<li>Ürünler vs</li>
<li>Ürünler vs</li>
</ul>
</div>
<div class="c">
<ul class="">

<li>Başka şeyler vs..</li>
<li>Başka şeyler vs..</li>
<li>Başka şeyler vs..</li>
</ul>
</div>


</div>

</li>

<li class="NavUlLiRight">aaa</li>
</ul>


</div>
</body>
</html>
index.css
Alıntı:
* {
color: black;
margin: 10px;
padding: 10px;
text-decoration: none;
}

.navbar {
position: relative;
top: 10px;
margin-right: auto;
width: 70%;
text-align: center;
background-color: #FFF;
margin-left: auto;
}

.navUl {
background-image: url(leafy-halfborder.jpg);
background-color: white;
width: 100%;
overflow:auto;
}

.NavUlLi {
list-style-type: none;
display: inline;

opacity: 0.5;
float: left;

}

.NavUlLi:not(:first-child) {
margin-left: 25px;
font-size: 16px;
}


.NavUlLiRight {
display: inline;
list-style-type: none;
background-color: pink;
opacity: 0.7;
float: right;
}



.b {
width: 100%;
height: auto;

display: none;
position: absolute;
left:0px;
right: 0px;
}
.a:hover .b {
display: block;

}

.c {
float: left;
display: inline;
width: 50%;

height: auto;
background-color: green;
}

.c ul {
width: 100%;

}
.c ul li {
width: 100%;
list-style-type: none;
}
Cevap Yaz Favorilerime Ekle


Konuyu toplam 1 kişi okuyor. (0 üye ve 1 Ziyaretçi)
 
Seçenekler
Stil
Normal Normal

Geri Git   Forum > HTML - CSS - XML


Yetkileriniz
Konu açma yetkiniz: Yok
Cevap Yazma Yetkiniz Yok
Eklenti yükleme yetkiniz: Yok
Mesajınızı değiştirme yetkiniz: Yok

BB code: Açık
İfadeler: Açık
[IMG] Kodları: Açık
HTML kodu: Kapalı




Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şu anki Zaman: 13:07.