Ok I'm trying to re-create the BBC website. In the process when I tried to add the search bar it seemed to wrap my top bar under itself, and I'm not sure how to fix the issue. I'll post the code (about 120 lines, not much) and a link to the reference site and hopefully somebody out there knows how to deal with this.
http://ift.tt/1gbv2PA ---- all I'm trying to do at the top bar that will take you to other portions of the website (i.e. the top tabs labelled "News, Sports, Weather,...etc." But like i said the code makes my search bar wrap down.My code.
<head>
<meta charset="utf-8">
<title>Technology - BBC News</title>
<style type="text/css">
#topbar {
width:800px;
margin: 0 auto;
height: 40px;
}
body {
margin: 0 auto;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#logo {
margin-top: 8px;
float: left;
margin-right: 8px;
}
.topbar-section {
float:left;
border-left: 1px #CCCCCC solid;
height:100%;
}
#signin-text {
font-weight: bold;
font-size: 90%;
position:relative;
top:11px;
padding-right: 65px;
}
#signin-image {
width:25px;
margin: 9px 15px;
float:left;
}
.topbar-menu {
font-weight: bold;
font-size: 80%;
padding: 10px 14px 0px 14px;
height: 27px;
}
#more-arrow {
width:6px;
margin-left: 65px;
}
#search-box {
background-color: #E4E4E4;
border: none;
font-weight:bold;
font-size: 14px;
padding:5px;
margin:7px 0px 7px;
float:left;
}
#search-icon {
height: 26px;
margin-top: 7px;
background-color:#E4E4E4;
}
</style>
<body>
<div id="topbar">
<img id="logo" src="images/bbc-blocks-dark.png">
<div id="signin-div" class="topbar-section">
<img id="signin-image" src="images/signinimage.png">
<span id="signin-text">Sign in</span>
</div>
<div class="topbar-section topbar-menu">
News
</div>
<div class="topbar-section topbar-menu">
Sport
</div>
<div class="topbar-section topbar-menu">
Weather
</div>
<div class="topbar-section topbar-menu">
Shop
</div>
<div class="topbar-section topbar-menu">
Earth
</div>
<div class="topbar-section topbar-menu">
Travel
</div>
<div class="topbar-section topbar-menu">
More
<img id="more-arrow" src="images/more-arrow.png"
</div>
<div class="topbar-section topbar-menu">
<input id="search-box" type="text" value="Search">
<input type="image" id="search-icon" src="images/search-icon.png">
</div>
</div>
</body>
</head>
Aucun commentaire:
Enregistrer un commentaire