Üye Girişi
Bağlan Google+ ile Bağlan Facebook ile Bağlan
Yeni Kayıt
Tüm Forumlar
  • Tüm Forumlar
  • Web Tasarım - Programlama
  • Tasarım ve grafik
  • Web Tasarım ve Hazır Kodlar
  • Bu Konuda
Şimdi Ara

admin giris paneli css yardim

Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Bu Konudaki Kullanıcılar:
1 Misafir - 1 Masaüstü
5 sn
9
Cevap
0
Favori
832
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
Konuya Özel
0 oy
Öne Çıkar
Cevapla
Sayfa: 1
Giriş
Mesaj
  • Iyigunler arkadaslar ben forumda yeniyim. Bugun basit bir admin giris paneli yazmak istedim ama bir turlu istedigim sonucu alamadim.

    input kutucuklarinin yanina ikon koyuyorum ama ne yazik ki kutucuklar ile ikonlar birbirine esit olmuyor bunu nasil duzeltebilirim acaba?
    admin giris paneli css yardim


    Resimde gordugunuz gibi ikonlar kutucuklarla ayni seviyede degil. 

     
      * { 
       
      	font-family: 'Open Sans', sans-serif; 
      } 
       
      body { 
      	background: url("C:/Users/mralp/Desktop/DreamMc/Images/background.png"); 
          background-size: cover; 
      } 
      .container { 
      	width: 300px; 
      	height: 300px; 
      	text-align: center; 
      	background-color: #e67e22; 
      	margin: 150px auto; 
      	border-radius: 5px; 
      	border-color: #34495e; 
      	border-style: solid; 
      } 
       
      h1 { 
          color: #34495e; 
          cursor: context-menu; 
      } 
       
      input[type="text"],[type="password"] { 
      	color: #34495e; 
      	width: 200px; 
      	height: 30px; 
      	font-size: 15px; 
      	padding-left: 10px; 
      	margin-bottom: 15px; 
      	border-style: solid; 
      	border-radius: 5px; 
      } 
       
      .form-input:before { 
      	content: url("C:/Users/mralp/Desktop/DreamMc/Icons/username.png"); 
      	padding: 10px; 
      } 
       
      .form-input:nth-child(2):before { 
      	content: url("C:/Users/mralp/Desktop/DreamMc/Icons/password.png"); 
      } 
       
      ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
        color: #34495e; 
      } 
      ::-moz-placeholder { /* Firefox 19+ */ 
        color: #34495e; 
      } 
      :-ms-input-placeholder { /* IE 10+ */ 
        color: #34495e; 
      } 
      :-moz-placeholder { /* Firefox 18- */ 
        color: #34495e; 
      } 
       
      .login { 
      	width: 100px; 
      	height: 30px; 
      	font-weight: bold; 
      	background: #34495e; 
      	color: #e67e22; 
      	border-style: solid; 
      	border-radius: 5px; 
      	border-color: transparent; 
      	margin-bottom: 10px; 
      	cursor: pointer; 
       
      } 
       
      span { 
      	font-size: 12px; 
      	color:  #34495e; 
      } 
       
      a { 
      	text-decoration: none; 
      	color: #34495e; 
      }







  • Bunu yapmanın css ile birçok yolu var. Mesela ikonları margin-top:5px; ile birazcık aşağı kaydırabilirsiniz.

    html kodunu yazmadığınız için html yapısını göremedim ama css'den anlaşılan, kutunun hemen öncesine css content ile ikonu ekliyorsunuz. Daha basit seçiciler kullanmanızı tavsiye ederim, en azından şu aşamada. ikonları ve inputları ayrı elementler (div/span) içine koyabilir, istediğiniz gibi marginlerini ayarlayabilirsiniz.

    Bu hazır bir şablon, html yapısını değiştirmeyeceğim diyorsanız, böyle sorular sorarken hem html hem css kodlarını verebilirsiniz. Hatta kolay yardım almak için bir fiddle oluşturabilirsiniz:
    https://jsfiddle.net

    Mesela sizin örneğiniz burada. Buraya örnek html kodlarını da ekleyebilirsiniz. (tabi php vs'den arındırarak)
    https://jsfiddle.net/e50roqjp/




  • quote:

    Orijinalden alıntı: voenetto

    Bunu yapmanın css ile birçok yolu var. Mesela ikonları margin-top:5px; ile birazcık aşağı kaydırabilirsiniz.

    html kodunu yazmadığınız için html yapısını göremedim ama css'den anlaşılan, kutunun hemen öncesine css content ile ikonu ekliyorsunuz. Daha basit seçiciler kullanmanızı tavsiye ederim, en azından şu aşamada. ikonları ve inputları ayrı elementler (div/span) içine koyabilir, istediğiniz gibi marginlerini ayarlayabilirsiniz.

    Bu hazır bir şablon, html yapısını değiştirmeyeceğim diyorsanız, böyle sorular sorarken hem html hem css kodlarını verebilirsiniz. Hatta kolay yardım almak için bir fiddle oluşturabilirsiniz:
    https://jsfiddle.net

    Mesela sizin örneğiniz burada. Buraya örnek html kodlarını da ekleyebilirsiniz. (tabi php vs'den arındırarak)
    https://jsfiddle.net/e50roqjp/

    Cevabiniz icin tessekur ederim. Ben margin ekledigim zaman herhangi bir desigiklik olmuyor itemlerde. Onu nasil duzeltebilirim. 
    <!DOCTYPE html> 
     <html> 
     <head> 
     	<title>DreamMc</title> 
     	<link rel="stylesheet" type="text/css" href="Styles/admin-login-style.css"> 
     	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet"> 
     	<meta charset="UTF-8"> 
     </head> 
     	<body> 
     		<div class="container"> 
     			<h1> DreamMc </h1> 
     			<form> 
     				<div class="form-input"> 
     					<input type="text" name="username" placeholder="Username"> 
     				</div> 
     				<div class="form-input"> 
     					<input type="password" name="password" placeholder="Password"> 
     				</div> 
     				    <input type="submit" name="Login" value="Login" class="login"><br> 
     				    <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=126956539&url=#" data-href="#"><span> Forget your username or password? </span></a> 
     			</form> 
     		</div> 
     	</body>




  • Sizinki bu:https://jsfiddle.net/e50roqjp/1/

    Söylediğiniz gibi bu yapıda ikona margin ekleyerek olmuyor.

    Bunu bu şekliyle düzeltmek istiyorsanız:
    ".form-input:before { content: url()}" deki content yerine background kullabilir, resmin boyutunu ayarlayabilir, yukarı aşağı kaydırabilirsiniz.
    .form-input:before { background: url()}

      .form-input:before { 
      	background: url("https://image.flaticon.com/icons/png/128/42/42829.png") 0px 15px/30px 30px no-repeat; 
      	padding: 20px; 
      }


    Örneği burada:https://jsfiddle.net/e50roqjp/2/

    Ayrıca yukarıda demek istediğim; ".form-input:nth-child(2):before" şeklinde bir seçici kullanmak ve oraya resmi "content: url()" ile tıkmak pek giriş seviyesinde bir iş değil bence. Mesela resim css içinden "content: (url)" ile değil de klasik yolla html içinden <div> <img> </div> şeklinde de çağrılabilirdi. resim ve input için iki ayrı div kullanılır. bu div'ler margin: ile rahatlıkla ayarlanırdı.



    < Bu mesaj bu kişi tarafından değiştirildi voenetto -- 14 Haziran 2017; 13:16:41 >




  • anladim cok tessekurler o sorunu cozdum ama suanda bir sorunum daha var.https://jsfiddle.net/vrhamh0f/#&togetherjs=mfBhNNb87g kodlari yukledim buraya dediginiz gibi. Sorunum sliderin yanindaki remember me yazinisini slider ile ortalayamiyorum. Bunu nasil yaparim acaba?

    admin giris paneli css yardim




  • emalper E kullanıcısına yanıt
    O slider'ı biraz aşağı kaydırınca oluyor gibi.
    Bunu için .switch {..... margin-top: -4px; } yazan yeri bulup -1px yapınca sorun çözülüyor.https://jsfiddle.net/vrhamh0f/1/

    Bu tip sorunları çözmek için (eğer kullanmıyorsanız) mutlaka geliştirici araçlarını kullanın.

    Chrome ve Firefox da aynı; F12 tuşu veya ctrl+shift+I tuşlarına basıp geliştirici araçlarını açın. Sonra küçük ok ikonuna basıp ekrandan inceleyerek elementi seçin. Hangisine nasıl müdahale edileceği, buradan rahatlıkla görülüp, css kodları canlı olarak değiştirilip deneme yapılabilir.

    admin giris paneli css yardim

    Resimde ortadaki bölümde göreceğiniz gibi, ".slider" değil, "Remember me" yazan yer ile aynı seviyede olan ".switch" in "margin-top:" unu değiştiriyoruz.

    Firefox/ Chrome Geliştirici araçlarının nasıl kullanıldığını anlatan siteler veya videolar bulun. Biraz kurcalayın, yeni sitelerde deneyin, kullanmaya alışırsınız, sonra çok rahat edersiniz.



    < Bu mesaj bu kişi tarafından değiştirildi voenetto -- 14 Haziran 2017; 16:44:28 >




  • cok tessekkur ederim sorunumu cozdum) son olarak birde siteme cms kurmak istiyorum ama wordpress joomla gibi degilde kendim yazmak istiyorum. Sizce bosa zaman kaybimi bu? Yani ornek veriyorum ilerie bir gun birisini beni site yapmak kurmak icin ise aldi diyelim ama ne wordpress istedi ne baska. Bu demek oluyorki designladigim her siteye ayni zamanda bir cms yazmam mi lazim?
  • emalper E kullanıcısına yanıt
    Bu işe bakışınıza göre değişir. Web tasarımı konusunda profesyonel olarak kendi içinde dallara ayrılır; örneğin ön yüz geliştiricisi (frontend developer) ve arka plan geliştiricisi (backend developer) gibi. Wordpress ve joomla sadece hazır birer cms çözümüdür. Bu çözümler kısa vadede ihtiyaçlar için kullanılabilir. İşe girerken de sizden her iki tarafı da yapmanız istenebilir, birinde profesyonelleşmeniz istenebilir. Açıkçası iki taraf da derya deniz.
    • 
Sayfa: 1

Benzer içerikler

- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.
Hizmet kalitesi için çerezleri kullanabiliriz. DH’ye girerek kullanım izni vermiş sayılırsınız.
Anladım Veri Politikamız