нажатие div вверх внутри контейнера

Я пытаюсь выяснить, как нажимать div внутри контейнера. Я установил край 500px сверху, и он сбрасывает все остальные div внутри контейнера. Я включил две фотографии того, что я получаю, и как я хочу, чтобы это выглядело. Также я включил код.нажатие div вверх внутри контейнера

Это, как она должна выглядеть это мой фотомагазин рендеринг готового сайта Proper

Это то, что она выглядит сейчас я просто работаю над раскладывать цветные коробки. background image - это градиент, установленный на странице body. header должен быть белой частью в приведенном выше изображении с вкладками кнопок, изображения и входа. core должен быть площадью непосредственно ниже header с небольшой белой линией вправо. bottomOutsideBox должен быть светло-серым ящиком, который находится непосредственно под градиентом снаружи, а рядом с core он должен быть расположен 500px внизу страницы, так как header установлен в 500px сверху. Маленькая зеленая щель в верхней части изображения - это всего лишь щепка, а над ней - 500px, потому что, когда я устанавливаю margin-top:500px, он все толкает ее. Я хочу, чтобы header остался наверху, затем core прямо под ним и bottomOutsideBox с внешней стороны core. У меня есть bottomOutsideBox, установленный на черном в изображении, поэтому его легче отличить. not good

/*gradient*/ 

body { 
background-image:url('../Images/gradient.gif'); 
background-color:#000000; 
} 

header { 
    width: 750px; 
    height: 500px; 
    background-color: #FFFFFF; 
    margin-left: auto; 
    margin-right: auto; 
    display:block; 
} 

div#bottomoutsidebox { 
    background-color: #000000; 
    margin-top: 500px; 
    width: auto; 
} 

/* page core */ 
div#core { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #dadbd6; 
    width: 750px; 
    height: 250px; 
    clear: both; 
} 

img.mainLogo { 
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
}

HTML:

<!doctype html> 
<head> 
    <meta charset="utf-8"> 
    <title>testing</title> 
    <meta name="description" content="Welcome to my basic template."> 
    <link rel="stylesheet" href="css/style.css?v=1"> 
</head> 

<body> 
    <div id="wrapper"> 
     <div id="bottomoutsidebox"> 
     <header> 
      <img class="mainLogo" src="Images/logo.jpg"/> 
     </header> 

     <div id="core"> 

     </div> 

     <footer> 
      <p>Some copyright and legal notices here. Maybe use the © symbol a bit.</p> 
     </footer> 
     </div> 
    </div> 

</body> 
</html>

источник

2013-08-04 Yamaha32088

Это разметка, я хотел бы предложить для этого типа макета, используйте класс контейнера для центрирования содержимого и изменить фон на основе разделов, так как вам нужны только два разных фона, тогда заголовок будет единственным разделом, в котором вы нуждаетесь.

Demo fiddle

HTML

<body> 
    <header> 
     <div class="container"> 
      <img class="mainLogo" src="Images/logo.jpg" /> 
     </div> 
    </header> 
    <div class="container"> 
     <div id="core"></div> 
    </div> 
</body>

CSS

body { 
    margin: 0; 
    background: #ccc; 
} 
.container { 
    width: 750px; 
    margin: 0 auto; 
} 
header { 
    background: lime; 
} 
header .container { 
    height: 500px; 
    background: #fff; 
} 
#core { 
    height: 250px; 
    background: #ddd; 
}

источник

2013-08-04 07:40:14

нажатие div вверх внутри контейнера

ответ

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