У меня есть две проблемы:

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

2) У меня тоже не получается поставить пункт меню в нужное место, как на прикрепленной картинке - они всегда выпадают ниже.

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

Пример Jsfiddle

Скриншот: Я разместил снимок экрана здесь 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;
}
0
Myroslav Tedoski 26 Фев 2015 в 04:43

2 ответа

Лучший ответ

Пожалуйста, создайте файл 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%;
}
}
1
Jimmy Khanh 26 Фев 2015 в 02:19

Вот мое решение для вашего макета с использованием флексбоксов. Я создал 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>
0
phantomesse 26 Фев 2015 в 02:41