最近HTML/CSSの勉強を始めたものです。
HTML/CSSで簡単なHPを作っています
初心者なのでコードがひどいと思いますがよろしくお願いします。
発生している問題・エラーメッセージ
右の様なサイトを作りたいのですが NEWSの下に文字をうまく配置できません。
該当のソースコード
#topbar{ margin: 0 auto; width: 1000px; height: 40px; } body{ margin: 0; padding: 0; font-family: 'Source Sans Pro', sans-serif; } .topbar-section{ float: left; border-left: 1px #C0C0C0 solid; height:100%; } #logo{ margin-top: 8px; margin-right: 10px; float: left; width: 100px; } #signin-image{ width: 30px; float: left; margin-left: 10px; margin-top: 8px; } #signin-text{ font-size: 15px; margin-left: 15px; float: left; margin-top: 10px; } .bell-div{ float: left; } .wigg{ margin-top: 0; margin-right: 6px; margin-left:40px; height: 40px; float: left; } .bell-img{ width: 30px; margin-top: 6px; margin-right: 8px; } .topbar-menu{ font-weight: bold; font-size: 90%; padding: 13px 15px 0 15px; height:27px; } .more-img{ margin-top: 15px; width: 15px; } .clear{ clear: both; } #sch-txt{ margin-left: 10px; padding:5px; margin: 5px 0 5px 5px; float: left; } #btn{ height: 25px; background: #7fbfff; margin-top:5px; margin-left: 10px; } #menu-bar-container{ border-top: 1px solid #CCCCCC; background-color: #BB1919; width:100%; height:140px; } .menubar{ color: white; width:1000px; margin:0 auto; } h1{ top: -20; position: relative; float: left; font-size: 40px; } .find-local{ color: white; font-size: 30px; float:right; width:250px; padding: 5px 5px 0 10px; margin: 0px 10px 0 0; } .fl-img{ float: right; } #menubar-2{ }
<html> <head> <title>BBC News</title> <link rel="stylesheet" type="text/css" href="bbc.css"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> </head> <body> <div id="topbar"> <img id="logo" src="https://www.completewebdevelopercourse.com/content/2-css/images/bbc-logo.png"> <div id="signin-div" class="topbar-section"> <img id="signin-image" src="https://www.completewebdevelopercourse.com/content/2-css/images/signinimage.png"> <span id="signin-text"><a href=""> Sign in</a></span> </div> <div class="bell-div"> <img class="wigg" src="https://www.completewebdevelopercourse.com/content/2-css/images/wigglyline.png"> <img class="bell-img" src="https://www.completewebdevelopercourse.com/content/2-css/images/bell.png"> </div> <div class="topbar-section topbar-menu">Nwes</div> <div class="topbar-section topbar-menu">Sport</div> <div class="topbar-section topbar-menu">Weather</div> <div class="topbar-section topbar-menu">iPlayer</div> <div class="topbar-section topbar-menu">TV</div> <div class="topbar-section topbar-menu">More</div> <img class="more-img" src="https://www.completewebdevelopercourse.com/content/2-css/images/more-arrow.png"> <div class="clear"></div> <form> <input id="sch-txt"type="text" placeholder="Search"> <input id="btn" type="submit" value="検索"> </form> </div> <div class="clear"></div> <div id="menu-bar-container"> <div class="menubar"> <h1>NEWS</h1> <div class="find-local"><a href="" >Find local news</a></div> </div> <div class="clear"></div> <div id="menubar-2"> <a href="">Home</a> <a href="">UK</a> <a href="">World</a> <a href="">Business</a> <a href="">Politics</a> <a href="">Tech</a> <a href="">Science</a> <a href="">Health</a> <a href="">Education</a> <a href="">Entertainment&Arts</a> <a href="">Video&Audio</a> <a href="">More</a> </div> </div> </body> </html>
試したこと
いろいろと試しましたが原因がわかりません。
補足情報(FW/ツールのバージョンなど)
回答3件
あなたの回答
tips
プレビュー