2016-03-22 13 views
2

Merhaba herkes şu anda bir web sitesi yapmaya çalışıyorum tasarım çizdim ve birkaç div etiketleri, bir logo görüntüsü, alt kenarlık ve düğmeleri kullanarak başlık yapmaya çalışıyorum. İşte ne im çalışırken yapılacaklarıma benim temel anahat: (Üzgünüm onun bulanık ama kullanışlı) conceptDiv Etiketler ve bir başlık

Bu kötü görünüyor mevcut sonuç olduğunu. result

Finnaly, nerede dağınık olduğumu herkesin görebileceği bir koddur! sağ tarafa logosunun sayfanın en kapsamalıdır çizgi yüzden div konteynerin

<html> 
<head> 

    <style> 
    body{ background-image: url("wood texture.jpg"); 
    } 
    .header{ 
      position:relative; 
      width:100%; 
      height:10%; 
      <!--border-style:solid; 
     border-color:black; 
     border-width:0px 0px 10px 0px;--> 

     } 

     .headlogo{ 
     width:25%; 
     height:100%; 
     position: absolute; 
     padding 0; 
     margin:0; 
     } 
     .headline{ 
     width:100%; 
     height:100%; 
     margin:0px 0px 0px 60%; 
     <!--padding:0px 0px 0px 25%; 
     position: relative; 
     left:25%; 
     top:0px;--> 
     float: right; 
     border-style:solid; 
     border-color:black; 
     border-width:0px 0px 10px 0px; 
     } 



    </style> 
</head> 
<body> 
<div id="" class="header"> 


    <div id="" class="headlogo"> 
    <img src="logo.png" alt="" style="width:25%; height:50%; margin-right:10px; float:right;" 
    </div> 

    <div id="" class="headline"> 
    Buttons will go in here and look supper cool but first this needs to stretch all the way to the right from about where the logo stops 
    </div> 
</div> 
</body> 
</html> 
+1

Sen kaçırıyorsun '/>' Sen/* yorum ile css yorum gerekir –

+1

IMG etiketinde */ve . Sonuncusu sadece html etiketleri içindir. – c00ki3s

+0

@AlonEitan Teşekkür ederiz –

cevap

4

Sadece kendi css için yanlış satır yorum kullanıyorlardı olmak zorundadır.

HTML <!-- something here -->

CSS açıklamalarda belirtildiği /* something here */

Ve benzerleri sen />

Bkz keman kullanarak görüntünüzü kapatmak vermedi geçerli: madem sordun https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/50/

yorumlarda, .html dosyasında Css satır yorumlarını ekleyeceğim notepad ++ kullanarak yorumlanmış görünmüyor, test etmek için notepad ++ kullanarak bir .css dosyasında css satır yorumlarını kullanmayı deneyin, aslında işe yarayacağını göreceksiniz. /* */'un aslında <style> etiketlerinde doğru satır yorumları olduğunu size göstermek için bu kemanı yarattım.

Ve bu küçük klibi izleyebilirsiniz soru hala varsa bütün bunlardan sonra https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/52/: http://docs.emmet.io/actions/toggle-comment/

body{ background-image: url("wood texture.jpg"); 
    } 
    .header{ 
      position:relative; 
      width:100%; 
      height:10%; 
      /*border-style:solid; 
     border-color:black; 
     border-width:0px 0px 10px 0px;*/ 

     } 

     .headlogo{ 
     width:25%; 
     height:100%; 
     position: absolute; 
     padding 0; 
     margin:0; 
     } 
     .headline{ 
     width:100%; 
     height:100%; 
     margin:0px 0px 0px 60%; 
     /*padding:0px 0px 0px 25%; 
     position: relative; 
     left:25%; 
     top:0px;*/ 
     float: right; 
     border-style:solid; 
     border-color:black; 
     border-width:0px 0px 10px 0px; 
     } 
+0

Not Defteri'nde ++ çalışır ve/* */değiştirmeyi denedim –

+2

@plook sadece bir '.html 'dosyasında css olduğundan işe yaramaz, ancak bunun için sözümü alırsanız ve her halükarda deneyin aslında çalıştığını göreceksiniz. Benim ismimi kanıtlamak için, bir '.css' dosyası oluşturun ve daha sonra css'nizi yorumlamak için'/**/'kullanmayı deneyin, sonra göreceksiniz, sonra çizgi renklerini değiştirin. –

+0

@plook bu fiddle örneğini görmek için https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/52/ –