Divのタグとヘッダー

皆さんは現在、デザインを引き出し、いくつかのdivタグ、ロゴ画像、ボトムボーダー、ボタンを使用してヘッダーを作成しようとしています。相続人は何イムしようとTODOの私の基本的な概要：（申し訳ありませんが、そのぼやけますが、使用可能な） Divのタグとヘッダー

これはそれが悪いに見える現在の結果です。

ここFinnalyはコード責任者です。それはあなたがちょうどあなたのCSSの間違った行のコメントを使用していたのdivコンテナ

<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>

出典

2016-03-22 Curtis Spence

あなたは、あなたが/ *コメントでCSSをコメントアウトする必要があり –

IMGタグに '' />不足しています*/<！ - コメント - >ではありません。最後はhtmlタグのみです。 – c00ki3s

@AlonEitanありがとうございました –

なければならないので、ラインは、ロゴから右側にページのほとんどをカバーする必要があります。

HTMLが

CSSですが/* something here */

であるとコメントで述べたように、あなたは/>

を使用して、あなたのイメージを閉じなかったフィドルを参照してください：あなたが尋ねたので、https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/50/

をコメントでは、私はここにそれを追加します.htmlファイル内のCSSの行コメントnotepad ++を使用しているときにコメントアウトされていないように見えます。それは、.cssファイルのcss行コメントを使って試してみると、notepad ++を使用すると実際に動作することがわかります。私は/* */が実際に正しい行コメントであることを示すためにこのフィドルを作成しました<style>タグ。 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; 
     }

出典

2016-03-22 19:23:16

メモ帳で+ 作品と/ * * /変更しようとしました –

@plook '.html'ファイルにcssがあるので動作しないように見えますが、とにかくそれを試してみると、それは実際には動作することがわかります。私の主張を証明するには、 '.css'ファイルを作成して'/**/'を使ってあなたのcssをコメントアウトしてみてください。 –

@plookこの例を見てください。https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/52/ –

答えて

関連する問題