CSS - проблема с отображением размера экрана

Я застрял в двух проблемах здесь:CSS - проблема с отображением размера экрана

1) Оба заголовка должны растягиваться на весь экран. Во втором заголовке баннер плавает вправо слишком сильно во время изменения размера экрана. Он должен остановиться в пределах ширины 1200 пикселей.

2) Я также не могу поместить пункт меню в соответствующее место, как на прикрепленном изображении, - они всегда опускаются ниже.

Любая помощь была бы принята с благодарностью!

Jsfiddle example

Снимок экрана: Я разместил снимок экрана здесь http://oi57.tinypic.com/2v3rhn6.jpg

body,p,input {font-family:verdana,helvetica,arial,sans-serif;} 
img {border:0;} 

body { 
    font-size:14px;color:#555555;background-color:#f1f1f1;margin:0px;} 
h1 { 
    padding: 0px; 
    margin: 0px; 
    color:#000000; 
} 

#container { 
     margin:0px auto; 
     border:0px solid #bbb; 
     padding:4px; 
     width:1200px; 
} 
.logo { 
     margin:0px auto; 
     border:0px; 
     padding:4px; 
     width:1200px; 
} 

.white-box { 
    width: 180px; 
    margin: 0px; 
} 

#main-header { 
    height:50px; 
    background-color: #dfe5f2; 
    min-width: 1200px; 
} 
#ad-header { 

    height:96px; 
    background-color: #fff; 
    min-width: 1200px; 

} 


#top-banner { 

    float: right; 
    margin: 0 auto; 
    padding:3px; 


} 
.left-banner { 
    width: 160px; 
    margin: 0 auto; 
    padding:3px; 
} 
#main-content { 
    margin-top:10px; 
    padding-bottom:10px; 
} 
#main-body { 
    margin-left:10px; 
    width:666px; 
    height:150px; 
} 
#main-footer { 
    margin-top:10px; 
    margin-bottom:10px; 
    padding:10px; 
    font-family: Verdana, Arial, Helvetica, sans-serif; color: #000; 
    font-size:11px; 
    text-align: center; 
} 
.box { 
    padding: 8px; 
    border: 1px solid silver; 
    -moz-border-radius: 5px; 
    -o-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    background-color: #fff; 
} 
.box1 { 
    font-size:12px; 
    width: 180px; 
    float: left; 
} 
.box1 h3 {font-family: Verdana, Arial, Helvetica, sans-serif;font-size:12px;} 
.box1 ul {margin:0;padding:0;list-style:none;} 
.box1 li {margin-left:10px;padding:2px;list-style-type:none;} 
.box1 li a {text-decoration:none;} 
.box1 li a:hover {text-decoration:underline;} 
.box1 li span, .leftmenucheckcount {font-size:.95em;} 

.box2 { 
    margin-left: 210px; 
    padding: 15px; 
} 
#top-menu-black { 
    height:12px; 
    background-color: #000; 
    min-width: 1200px; 
} 
#top-menu-white { 
    height:1px; 
    background-color: #fff; 
    min-width: 950px; 
} 
#top-menu-orange { 
    height:3px; 
    background-color: #ff9401; 
    min-width: 950px; 
} 
.top-menu-text { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    color: #FFFFFF; 
    font-size:10px; 
    font-weight: bold; 
    padding:4px 4px 4px 230px; 
    min-width: 900px; 
} 
.top-menu-text a{text-decoration: none; color: #FFFFFF;} 
.top-menu-text a:link {text-decoration: none; color: #FFFFFF;} 
.top-menu-text a:visited {text-decoration: none; color: #FFFFFF;} 
.top-menu-text a:active {text-decoration: none; color: #FFFFFF;} 
.top-menu-text a:hover {text-decoration: none; color: #ff9401;} 

a:link {color:#004eff; } 
a:visited {color:#004eff; } 
a:active {color:#004eff; } 
a:hover {color:#ff9401;} 

.article {background-color: #f6f6f6;} 

img.imagerating { 
    vertical-align:middle 
} 

.TextWrap { 
    float: left; 
    margin: 10px; 
} 
.amz-button { 
    margin-left: 150px; 
} 
.amz-button2 { 
    margin-left: 450px; 
} 
.bottom-amz { 
    margin-left: 5px; 
}

источник

2015-02-26 Myroslav Tedoski

может использовать «переполнения: скрытый», чтобы остановить его от идти мимо ширины окна. не уверен, что ваша вторая проблема, не могли бы вы уточнить? – bryce

каждый раз, когда я добавляю пункты меню - не оставляйте на месте (см. Ссылку на снимки экрана). Меню опускается ниже и влево. Извините, я удалил код для меню, поскольку он не работал. –

Пожалуйста, создайте файл HTML, прежде чем копировать HTML + CSS, чтобы проверить это: HTML:

<div id="main-header"> 
<div class="wrap-content"> 
<div class="logo"><h2>My Logo</h2></div> 
<ul id="menu-top"> 
<li><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</div> 
</div> 
<div id="ad-header" > 
<div id="top-banner" class='wrap-content'><img src="http://4.bp.blogspot.com/-_wuIlLnLxsE/UioXtYApP7I/AAAAAAAABtY/-0bLO3etYa4/s1600/728x90_ELP_NewBanner_r2.gif" alt=""></div> 
</div> 
<div id="container"> 
<div id="main-content" class='wrap-content'> 
<!-- left column --> 
<div class="box box1"> 
<h3><span>Categories</span></h3> 
<br> 
<div class="left-banner"></div> 
<div style="clear:both;"></div> 
</div> 
<!-- left column --> 
<div class="box box2"> 
<p><h1>Page Title</h1> 
<br> 
</p> 
<p>Text text text text text<br><br> 
Text text text text text<br><br> 
Text text text text text<br><br> 
Text text text text text<br><br> 
Text text text text text<br><br> 
Text text text text text<br><br> 
Text text text text text<br><br> 
Text text text text text<br><br> 
Text text text text text<br><br> 
</p> 
</div> 
<div style="clear:both;"></div> 
</div> 
<!-- footer --> 
<div id="main-footer">Footer</div> 
<!-- footer --> 
</div>

CSS:

body,p,input {font-family:verdana,helvetica,arial,sans-serif;} 
img {border:0;} 

body { 
font-size:14px;color:#555555;background-color:#f1f1f1;margin:0px;} 
h1 { 
padding: 0px; 
margin: 0px; 
color:#000000; 
} 

#container { 
margin:0px auto; 
border:0px solid #bbb; 
padding:4px; 
/* width:1200px;*/ 
} 
.logo { 
margin:0px auto; 
border:0px; 
padding:4px; 
float: left; 
} 

.white-box { 
width: 180px; 
margin: 0px; 
} 

#main-header { 
height:50px; 
background-color: #dfe5f2; 
} 
#ad-header { 

height:96px; 
background-color: #fff; 

} 


#top-banner { 

margin: 0 auto; 
padding:3px; 


} 
#top-banner img{ 
float: right; 
} 
.left-banner { 
width: 160px; 
margin: 0 auto; 
padding:3px; 
} 
#main-content { 
margin-top:10px; 
padding-bottom:10px; 
} 
#main-body { 
margin-left:10px; 
width:666px; 
height:150px; 
} 
#main-footer { 
margin-top:10px; 
margin-bottom:10px; 
padding:10px; 
font-family: Verdana, Arial, Helvetica, sans-serif; color: #000; 
font-size:11px; 
text-align: center; 
} 
.box { 
padding: 8px; 
border: 1px solid silver; 
-moz-border-radius: 5px; 
-o-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius: 5px; 
background-color: #fff; 
} 
.box1 { 
font-size:12px; 
width: 180px; 
float: left; 
} 
.box1 h3 {font-family: Verdana, Arial, Helvetica, sans-serif;font-size:12px;} 
.box1 ul {margin:0;padding:0;list-style:none;} 
.box1 li {margin-left:10px;padding:2px;list-style-type:none;} 
.box1 li a {text-decoration:none;} 
.box1 li a:hover {text-decoration:underline;} 
.box1 li span, .leftmenucheckcount {font-size:.95em;} 

.box2 { 
margin-left: 210px; 
padding: 15px; 
} 
#top-menu-black { 
height:12px; 
background-color: #000; 
min-width: 1200px; 
} 
#top-menu-white { 
height:1px; 
background-color: #fff; 
min-width: 950px; 
} 
#top-menu-orange { 
height:3px; 
background-color: #ff9401; 
min-width: 950px; 
} 
.top-menu-text { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
color: #FFFFFF; 
font-size:10px; 
font-weight: bold; 
padding:4px 4px 4px 230px; 
min-width: 900px; 
} 
.top-menu-text a{text-decoration: none; color: #FFFFFF;} 
.top-menu-text a:link {text-decoration: none; color: #FFFFFF;} 
.top-menu-text a:visited {text-decoration: none; color: #FFFFFF;} 
.top-menu-text a:active {text-decoration: none; color: #FFFFFF;} 
.top-menu-text a:hover {text-decoration: none; color: #ff9401;} 

a:link {color:#004eff; } 
a:visited {color:#004eff; } 
a:active {color:#004eff; } 
a:hover {color:#ff9401;} 

.article {background-color: #f6f6f6;} 

img.imagerating { 
vertical-align:middle 
} 

.TextWrap { 
float: left; 
margin: 10px; 
} 
.amz-button { 
margin-left: 150px; 
} 
.amz-button2 { 
margin-left: 450px; 
} 
.bottom-amz { 
margin-left: 5px; 
} 
.wrap-content{ 
width: 1200px; 
margin: auto; 
} 
#menu-top { 
float: right; 
list-style: outside none none; 
margin: 0; 
padding: 0; 
} 
#menu-top > li { 
float: left; 
margin: 16px; 
} 

@media only screen and (max-width: 1199px){ 
.wrap-content{ 
width: 100%; 
} 
}

источник

2015-02-26 02:19:21

Yay! Это именно то, что мне нужно. Благодаря! Единственное, что сейчас, когда я меняю размер экрана до минимума, сжимается ... Есть ли способ остановить скручивающие столбцы с заданной минимальной шириной (например, 1200)? –

Спасибо. Если вы хотите более уместно в мини-размерах, используйте ширину процента. –

Отлично, спасибо! –

Вот мое решение для вашего макета с использованием flexboxes. Я создал div .inner, который можно использовать для указания минимальной и максимальной ширины макета.

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    background: #F1F1F1; 
 
    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
    border: none; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
header, main { 
 
    padding: 0px 40px; 
 
} 
 

 
.inner { 
 
    margin: 0px auto; 
 
    width: 100%; 
 
    min-width: 400px; 
 
    max-width: 1200px; 
 
} 
 

 
.main-header { 
 
    background: #DFE5F3; 
 
} 
 

 
.main-header .inner { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.main-header nav { 
 
    flex-shrink: 0; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.main-header nav a { 
 
    margin-left: 20px; 
 
    text-decoration: none; 
 
} 
 

 
.ad-header { 
 
    background: #FFF; 
 
    text-align: right; 
 
} 
 

 
.ad-header img { 
 
    max-width: 100%; 
 
} 
 

 
main .inner { 
 
    display: flex; 
 
    padding: 20px 0px; 
 
} 
 

 
.box { 
 
    padding: 20px; 
 
    background: #FFF; 
 
    border-radius: 4px; 
 
    border: 1px rgba(0, 0, 0, 0.2) solid; 
 
} 
 

 
.box1 { 
 
    flex-shrink: 0; 
 
    margin-right: 20px; 
 
    width: 180px; 
 
} 
 

 
.box2 { 
 
    width: 100%; 
 
}

<header class="main-header"> 
 
    <div class="inner"> 
 
    <h1>My Logo</h1> 
 
    <nav> 
 
     <a href="#">Menu 1</a> 
 
     <a href="#">Menu 2</a> 
 
     <a href="#">Menu 3</a> 
 
    </nav> 
 
    </div> 
 
</header> 
 

 
<header class="ad-header"> 
 
    <div class="inner"> 
 
    <img src="http://lorempixel.com/655/80/abstract/" /> 
 
    </div> 
 
</header> 
 

 
<main> 
 
    <div class="inner"> 
 
    <div class="box box1"> 
 
     <h2>Categories</h2> 
 
    </div> 
 

 
    <div class="box box2"> 
 
     <h2>Page Title</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec pretium ipsum. Nullam scelerisque sem eros, in varius est laoreet a. Curabitur sodales urna ac mollis rutrum. In non pretium arcu, ac dictum erat. Praesent interdum erat mauris, nec condimentum nisi dignissim at. Nam ullamcorper risus sed consequat blandit. Cras tempus sem mauris, eget lacinia risus suscipit quis. Quisque vehicula eu metus sit amet sagittis. Nam ornare nibh eu nulla bibendum consequat eleifend sed arcu.</p> 
 
    </div> 
 
    </div> 
 
</main>

источник

2015-02-26 02:41:12 phantomesse

Мне тоже нравится! –

CSS - проблема с отображением размера экрана

ответ

Смежные вопросы