Comment obtenir leComment faire pour que l'en-tête flotte avec l'expansion horizontale de la page?
Nouvelles
pour développer horizontal avec la page au lieu de rester à gauche?
<!doctype html> <html> <head> <title>Technology - BBC News</title> <style type="text/css"> #topbar {
width: 1050px;
margin: 0 auto;
height: 40px;
}
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#logo {
margin-top: 8px;
width: 100px;
float: left;
margin-right: 8px;
}
.topbar-section {
float: left;
border-left: 1px #CCCCCC solid;
height: 100%;
}
#signin-image {
width: 25px;
margin: 11px 15px;
float: left;
}
#signin-text {
font-weight: bold;
font-size: 90%;
position: relative;
top: 14px;
padding-right: 50px;
}
#wigglyline {
float: left;
height: 40px;
}
#bell {
height: 25px;
margin: 9px 8px 0 8px;
}
#bell-div {
float: left;
}
.topbar-menu {
font-weight: bold;
font-size: 90%;
padding: 13px 15px 0 15px;
height: 27px;
}
#more-arrow {
width: 16px;
margin-left: 20px;
}
#searchbox {
background-color: #d3d3d3;
border;
none;
font-weight: bold;
font-size: 12px;
padding: 5px;
margin: -4px 0 5px;
float: left;
}
#magnifying-glass {
height: 27px;
margin-top: -4px;
}
.clear {
clear: both;
}
#menu-bar-container {
background-color: #9e2c25;
width: 100%;
height: 70px;
margin: 0 auto;
}
#menubar {
width: 1050px;
margin: 0 auto;
}
h1 {
padding: 10px;
margin: 0 auto;
color: white;
font-size: 40px;
font-weight: normal;
text-align: justify;
text-align-last: justify
}
</style> </head><body>
<div id="topbar">
<img id="logo" src="C:\Users\Kaitlyn\Desktop\Complete Web Developer Course\images\bbc-logo.png"></img>
<div id="signin-div" class="topbar-section">
<img id="signin-image" src="C:\Users\Kaitlyn\Desktop\Complete Web Developer Course\images\signinimage.png"></img>
<span id="signin-text">Sign in</span>
</div>
<div id="bell-div">
<img id="wigglyline" src="C:\Users\Kaitlyn\Desktop\Complete Web Developer Course\images\squiggle.png">
<img id="bell" src="C:\Users\Kaitlyn\Desktop\Complete Web Developer Course\images\bell.png">
</div>
<div class="topbar-section topbar-menu">
News
</div>
<div class="topbar-section topbar-menu">
Sports
</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
<img id="more-arrow" src="C:\Users\Kaitlyn\Desktop\Complete Web Developer Course\images\downarrow.png">
</div>
<div class="topbar-section topbar-menu">
<input id="searchbox" type="text" value="Search">
<input type="image" id="magnifying-glass" src="C:\Users\Kaitlyn\Desktop\Complete Web Developer Course\images\magnifying-glass.png">
</div>
</div>
<div class="clear"></div>
<div id="menu-bar-container">
<div id="menu-bar">
<h1>News</h1>
</div>
</div>
</body>
</html>Je joins et mis à jour la barre de recherche qui est au-dessus de la div qui contient l'en-tête d'arrière-plan et des nouvelles rouge. Tout en développant la page du navigateur horizontalement, vous devriez être en mesure de voir comment la barre de recherche réagit et continue à circuler avec la page pendant que l'en-tête des News reste sur le côté gauche de la page.
Si je dois fermer un div différemment ou modifier le positionnement s'il vous plaît faites le moi savoir.
essentiellement j'essaie d'obtenir le site Web de fonctionner comme ceci: s'il vous plaît cliquez sur le lien http://www.completewebdevelopercourse.com/content/2-css/bbc.html
vous voulez qu'il soit au centre de la page? – repzero
Voulez-vous que les NOUVELLES alignent le centre? –
Dans la page sur laquelle je travaille, il y a une barre de recherche qui contient des onglets qui s'étendent horizontalement lorsque la page est élargie directement au-dessus de la barre rouge avec l'en-tête News. Le problème que j'éprouve est d'essayer d'étendre horizontalement les "news" avec le div rouge, cependant les "news" restent bloqués sur la bordure gauche alors que la barre de recherche au dessus des "news" se développe quand la page est élargie. @NiyokoYuliawan – Siemens