0
Как получитьКак обеспечить сглаживание заголовков с горизонтальным расширением страницы?
Новости
расширить горизонтально страницы вместо того, чтобы приостанавливаться осталось?
<!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>Я приложил и обновил панель поиска, которая находится выше DIV, который содержит красный фон и новости заголовок. При горизонтальном расширении страницы браузера вы должны увидеть, как панель поиска реагирует и продолжает течь со страницей, в то время как заголовок News остается на левой стороне страницы.
Если мне нужно закрыть div по-другому или изменить расположение, пожалуйста, дайте мне знать.
в основном я пытаюсь получить веб-сайт, чтобы работать следующим образом: перейдите по ссылке http://www.completewebdevelopercourse.com/content/2-css/bbc.html
вы хотите быть в центре страницы? – repzero
Хотите, чтобы НОВОСТИ выровняли центр? –
На странице, над которой я работаю, есть панель поиска, содержащая вкладки, которые расширяются горизонтально, когда страница расширяется непосредственно над красной полосой с заголовком новостей. Проблема, с которой я сталкиваюсь, заключается в том, чтобы «новость» расширялась горизонтально в красном div, однако «новости» остаются на левой границе, а панель поиска над «новостями» расширяется, когда страница расширяется. @NiyokoYuliawan – Siemens