Yeni Kayıt
Konudaki Resimler
|
Hızlı 
Bildirim
admin giris paneli css yardim
Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Bu Konudaki Kullanıcılar:
2 Misafir - 2 Masaüstü
Giriş
Mesaj
-
-
label ile form kutucuklarını birbirleriyle ilişkilendirirsen tek kutu haline gelirler. label etiketinin for özelliğine verdiğin değerle input etiketinin id özelliğine verdiğin değer aynı olmalı. <Doctype html>
<html>
<head>
<title>deneme</title>
<meta charset="utf-8">
<style>
dt {
width: 20px;
display: block;
float: left;
}
dd {
margin-left: 2em;
}
dt, dd {
padding-top: 5px;
}
dt img{
height: 20px;
width:20px;
margin-right:5px;
}
</style>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>Kullanıcı Girişi</legend>
<dl>
<dt><img src="1.png"><label for="kutu1"></label></dt>
<dd><input type="text" id="kutu1"></dd>
<dt><img src="2.png"><label for="kutu2"></label></dt>
<dd><input type="text" id="kutu2"></dd>
</dl>
</fieldset>
</form>
</body>
</html>
yukarda dl,dt,dd ile liste oluşturup öğe ekle tanımlama yoluyla form bölümünü oluşturduk.
dt {
display: block;
width: 20px;
float: left;
}
üstteki Css kodlarında sırasıyla;
resimler dt tagları arasında olduğundan onu seçtim display:block ile kutu gibi davranmasını söyledim.
kutu seviyesine çevirdikten sonra artık boyut verebiliriz width ile iki resiminde eşit boyutlarda kutunun içinde olmasını söyledim
label ile inputu zaten ilişkilendirdik floatıda yazınca inputlarla resimler yan yana geliyor.
son bir sorun çıkartacak muhabbette resimlerin aynı boyutta olmaması onlarıda aynı boyutta olması için css ile özelleştiriyoruz. yada photoshopla gibi resim düzenleme programlarıyla aynı boyuta getirebilirsin.
dt img{
height: 20px;
width:20px;
margin-right:5px;
}
form elemanlarını tablo etiketleriyle felanda yapabilirsin dl etiketlerini kullanman şart değil örnek olarak gösterdim.
< Bu mesaj bu kişi tarafından değiştirildi agarta06 -- 28 Haziran 2017; 4:16:38 >
Sayfa:
1
Ip işlemleri
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
