2017-07-18 10 views
0

私はHTMLとCSSの専門家ではありません。私はウェブページを作成するために最善を尽くしました。しかし、ズームしながらそれは壊れているようです。ロゴと言語の切り替えだけが壊れています。これを修正する方法を知らない。誰も私にこの問題を解決する方法を教えてもらえますか? これは私のウェブページのリンクです:corailhelico.comどのようにズームの影響を受けずにすべてのHTML Webページに配置するには?

答えて

1

あなたのケースでは、ロゴと言語スイッチャーのヘッダーがあります。

私は、ロゴと言語divでヘッダdivを使用しましたwith flex

Ps:整列要素に"450px"のようにpxでマージンを使用しないでください。responsive at allではありません。

フレックスガイド:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

html, body { 
 
    min-height:100%; 
 
    height:100%; 
 
} 
 

 
body { 
 
    display:flex; 
 
    flex-direction:column; 
 
    margin:0; 
 
} 
 

 
.header { 
 
    height:80px; 
 
    background:#f5f5f5; 
 
    align-items:center; 
 
    display:flex; 
 
    padding:0 10px; 
 
} 
 

 
.header .logo { 
 
    display:flex; 
 
    margin:auto; 
 
} 
 

 
.header img { 
 
    width:180px; 
 
    height:50px; 
 
} 
 

 
.header .language { 
 
    margin:0 0 auto 15px; 
 
}
<div class="header"> 
 
    <div class="logo"> 
 
    <div class="image"> 
 
     <img src="http://www.corailhelico.com/images/corail-logo.jpg"> 
 
    </div> 
 
    <div class="language">Language</div> 
 
    </div> 
 
</div>

+0

と私の2画面上の、[ここ](http://i.imgur.com/9HuT8Pe.jpg)、画面の幅でdivを使用する場合は、静的な幅を使用しないでください。 '100%'を使い、 'left、right、bottom、top'を取り除いてください。あなたの場合は役に立たないです。 – EyWN

関連する問題