0
午後フローティングありません。HTML CSSヘッダー画像私は左に浮い画像と右浮かぶイメージと上部に</p> <p>ホワイトスペースを基本ヘッダを作成しようとしている、すべての</p> <p>を正しく
次に、グレーの背景にいくつかのオプションがあり、左側にボタンがあり、右側にいくつかのナビゲーションボタンがあります。
ヘッダーは常に100％幅で、ページを下にスクロールすると、ヘッダーは常に先頭にとどまるという要件があります。
現在のHTMLとCSSでうまく動作しますが、画面サイズを小さくすると、私のラップトップで右にスナップするラップトップで1368x768の解像度右の画像は右側のボタンの下にあるが、グレーの枠の内側に浮かんでいますか？
左画像サイズ= 480x80 右の画像サイズ= 264x80
HTML
<div id="banner">
<img src="/images/img1.png" style="float:left"/>
<img src="/images/img2.png" style="float:right"/>
</div>
<div id="header">
<div id="header_left">
<form action= "<?php echo $_SERVER['PHP_SELF']; ?>" method ="POST">
<select name=dbselector>
<?php
echo '<option value="1"';
if ($_COOKIE[$cookie] == "x") {
echo ' selected="selected"';}
echo '>1</option>';
echo '<option value="2"';
if ($_COOKIE[$cookie] == "y")
{echo ' selected="selected"';}
echo '>2</option>';
?>
</select>
<input name="submit_button" type="submit" value="Submit"/>
</form>
</div>
<div id="header_right">
<?php date_default_timezone_set('Europe/London'); echo date('h:i:s');?>
<input type="button" value="Back" onclick="history.go(-1)">
<a href="www.google.co.uk" style="text-decoration: none">
<input type="button" value="Home">
</a>
<input type="button" value="Refresh" onClick="history.go(0)" >
<input type="button" value="Forward" onclick="history.go(1)">
</div>
</div>
CSS
#header
{
width: 100%;
position: fixed;
background:#58575b;
padding-top: 0px;
padding-bottom:0.5em;
margin: 0px
}
#banner
{
background:#fff;
width:100%;
height: 5em;
}
#header_left
{
float: left;
padding: 0em;
padding-left: 0.5em;
margin: 0em;
}
#header_right
{
float: right;
padding: 0em;
margin: 0em;
padding-right: 0.5em;
}
、それはこのように動作している理由を任意のアイデア？出発ポストのいくつかのコメントには、事前
フィヨルドをアップロードして、自分でテストしてよりうまくやってもらうようにしてください。 jsfiddle.net – Django
奇数jsfiddleで問題を再現しているようですが、それは正常に動作します – bepster
これは私のコードと同じラインです。 https://jsfiddle.net/92xs18hs/2/で動作していますjsfiddleしかし、IEやFirefoxはありません – bepster