2016-04-07 19 views
0

私は私たちの街のフロアボールチームのウェブサイトを作ろうとしています。 私はフロアボールのゴールのイメージを持ちたいと思っています。それにリンクやものがあります(後でイメージを提供します)。 しかし、私はレスポンシブなdesingと闘う。私はORKAヘッダは次のように配置することを希望HTML対応ウェブサイト

/* CSS Document */ 
 
body { 
 
    margin: 0px; 
 
    background-color: #D0D5D6; 
 
} 
 

 
#main { 
 
    margin: 0px; 
 
    background-image: url(http://ploca.9e.cz/branka.png); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    height: 100vh; 
 
    display: flex; 
 
    background-position: center; 
 
    min-height: 280px; 
 
    background-position: top; 
 
} 
 

 
h1 { 
 
    font-family: Montserrat; 
 
    width:100vw; 
 
    height: 100vh; 
 
    margin: 0 auto; 
 
} 
 

 
#Nadpis { 
 
    margin: 0px; 
 
    height: 100vh; 
 
    display: flex; 
 
    background-position: center; 
 
    min-height: 280px; 
 
    text-align: center; 
 
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 
<html> 
 
<head> 
 
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> 
 
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <meta charset="UTF-8"> 
 
    <meta name="Orka Cool" content="Orka Cool"> 
 
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> 
 
    <meta name="author" content="Orka Cool"> 
 
    <meta name="description" content="Orka Cool - Florbal Čelákovice"> 
 
    <meta name="keywords" content="florbal, orka, cool, čelákovice"> 
 
    <title>Orka Cool</title> 
 
</head> 
 
<body> 
 
<div id="main"> 
 
<div id="Nadpis"><h1>ORKA</h1></div> 
 
</div> 
 
</body> 
 
</html>

私ははっきりしていたとあなたが得ることを願っています:ここで The header should be fixed in place even if i resize the browser window.

コードですポイント。 私の悪い英語のために申し訳ありません私の母国語ではありません。 ありがとうございます。

+0

を(私は#NadpisにCSSプロパティを追加しました)私は強くブートストラップをチェックすることをお勧めしたい、それが始めるためには非常に簡単ですし、あなたの欲しいので、それはあなたの頭痛 –

+0

を大幅に節約します左上の「orka」 –

+0

@マルワン・アラニこれはわずかな接線ですが、ブートストラップは自動的にモバイルでウェブデザインを処理しますか、余分なことがありますか?私はウェブサイト上でブートストラップを使用しましたが、モバイルでそれをテストしたことはありません。 –

答えて

0

私はこれは何かがポジションを追加して

body { 
 
    margin: 0px; 
 
    background-color: #D0D5D6; 
 
} 
 

 
#main { 
 
    margin: 0px; 
 
    background-image: url(http://ploca.9e.cz/branka.png); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    height: 100vh; 
 
    display: flex; 
 
    background-position: center; 
 
    min-height: 280px; 
 
    background-position: top; 
 
} 
 

 
h1 { 
 
    font-family: Montserrat; 
 
    width:100vw; 
 
    height: 100vh; 
 
    margin: 0 auto; 
 
} 
 

 
#Nadpis h1 { 
 
    margin: 0px; 
 
    height: 100vh; 
 
    display: flex; 
 
    background-position: center; 
 
    min-height: 280px; 
 
    text-align: center; 
 
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 
<html> 
 
<head> 
 
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> 
 
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <meta charset="UTF-8"> 
 
    <meta name="Orka Cool" content="Orka Cool"> 
 
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> 
 
    <meta name="author" content="Orka Cool"> 
 
    <meta name="description" content="Orka Cool - Florbal Čelákovice"> 
 
    <meta name="keywords" content="florbal, orka, cool, čelákovice"> 
 
    <title>Orka Cool</title> 
 
</head> 
 
<body> 
 
<div id="main"> 
 
<div id="Nadpis"><h1>ORKA</h1></div> 
 
</div> 
 
</body> 
 
</html>

0

気軽にあれば、あなたが何をしたいと思う:相対; +トップ:右:それを中心にする。この方法では、ブラウザのサイズを変更するたびに、特定のブレークポイントを修正するためにメディアクエリを追加するだけです。それ以外は、あなたの問題を解決するはずです。

/* CSS Document */ 
 
body { 
 
    margin: 0px; 
 
    background-color: #D0D5D6; 
 
} 
 

 
#main { 
 
    margin: 0px; 
 
    background-image: url(http://ploca.9e.cz/branka.png); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    height: 100vh; 
 
    display: flex; 
 
    background-position: center; 
 
    min-height: 280px; 
 
    background-position: top; 
 
} 
 

 
h1 { 
 
    font-family: Montserrat; 
 
    width:100vw; 
 
    height: 100vh; 
 
    margin: 0 auto; 
 
} 
 

 
#Nadpis { 
 
    margin: 0px; 
 
    height: 100vh; 
 
    display: flex; 
 
    background-position: center; 
 
    min-height: 280px; 
 
    text-align: center; 
 
    position:relative; 
 
    top:18px; 
 
right:5px; 
 
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 
<html> 
 
<head> 
 
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> 
 
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <meta charset="UTF-8"> 
 
    <meta name="Orka Cool" content="Orka Cool"> 
 
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> 
 
    <meta name="author" content="Orka Cool"> 
 
    <meta name="description" content="Orka Cool - Florbal Čelákovice"> 
 
    <meta name="keywords" content="florbal, orka, cool, čelákovice"> 
 
    <title>Orka Cool</title> 
 
</head> 
 
<body> 
 
<div id="main"> 
 
<div id="Nadpis"><h1>ORKA</h1></div> 
 
</div> 
 
</body> 
 
</html>

関連する問題