2016-03-22 13 views
2

Hallo allerseits im Moment versuche ich eine Website zu machen Ich habe das Design gezeichnet, und habe angefangen zu versuchen, die Kopfzeile mit mehreren div Tags, ein Logo Bild, unteren Rand und Tasten. Heres meiner Grundzug das, was im Versuch, todo: (Leider sein verschwommen aber brauchbar) conceptDiv Tags und eine Kopfzeile

Dies ist das aktuelle Ergebnis es sieht schlecht aus. result

Finnaly hier ist der Code verantwortlich kann jemand sehen, wo ich vermasselt? die Linie sollten die meisten von der Seite aus dem Logo auf der rechten Seite bedecken, so hat es den div Container für Ihre css

<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

Sie verpassen '/>' auf dem IMG-Tag –

+1

Sie CSS mit/* Kommentar sollten */und nicht mit . Letzteres ist nur für HTML-Tags. – c00ki3s

+0

@AlonEitan danke –

Antwort

4

Sie wurden nur mit den falschen Linie Kommentare sein.

HTML ist <!-- something here -->

CSS ist /* something here */

Und wie in den Kommentaren erwähnt, Sie nicht Ihr Bild Glatt hat />

Siehe Geige mit: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/50/

da Sie gefragt in den Kommentaren werde ich es hier Css Zeile Kommentare in eine .html Datei hinzufügen wird nicht auskommentiert während der Verwendung von notepad ++, um es zu testen versuchen Sie mit der css Linie Kommentare in einer .css Datei mit Notepad ++, Sie sehen in der Tat, dass es funktioniert. Ich habe diese Geige erstellt, um Ihnen zu zeigen, dass die /* */ in der Tat die richtige Zeile Kommentare innerhalb <style> Tags ist. https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/52/

Und nach all das, wenn es noch eine Frage ist, dass Sie mit diesem kleinen Clip sehen können: 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

Im Editor ++ funktioniert und/* */wont habe ich versucht, es zu ändern –

+2

@spook es scheint nur nicht zu funktionieren, weil Sie CSS in einer '.html' Datei haben, aber wenn Sie mein Wort dafür nehmen und versuchen Sie es trotzdem, Sie werden sehen, dass es tatsächlich funktioniert. Um meinen Standpunkt zu beweisen, erstellen Sie eine '.css'-Datei und versuchen Sie dann,'/**/'zu verwenden, um Ihre CSS zu kommentieren. Sie werden sehen, dass sie die Zeilenfarben ändert. –

+0

@spook siehe diese Geige für ein Beispiel https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/52/ –

Verwandte Themen