Расположение всей оболочки (div) внутри основной оболочки (div)

Question

Расположение всей оболочки (div) внутри основной оболочки (div)

0

В настоящее время у меня есть сайт, над которым я работаю (копирование другого сайта как практика)

Это сайт, который я пытаюсь воссоздать http://www.north2.net/.

Я почти закончен, однако я не могу правильно расположить две боковые секции (слева и справа от основного изображения).

Может кто-нибудь мне помочь?

У меня 3 "секции" слева, середина, правая, все в обертке

я пробовал

margin-top, удаление встроенного блока на обертках

...

МОЯ ЦЕЛЬ:

Я могу поднять боковые решетки по своему вкусу, но я не вижу, как их поднять. north2.net, чтобы понять, что я имею в виду.

JSFIDDLE http://jsfiddle.net/abXk4/

Не важно :: Кроме того, когда я размещаю что-либо, мое фоновое изображение перемещается, и в нижней части страницы есть белый зазор, мой экран равен 1920 x 1080, поэтому любая настройка делает пробел, я исправляю это с помощью padding-bottom: X%;

Это что-то, что я должен сделать? Или это потому, что я неправильно закодировал.

HTML

    <title> ENTER TITLE </title>

    </head>


    <body>

    <div id='page'> 
<!--All of Left Side Bar Contents -->

<div class="swrap">     
 <div id="logo">
        <img src="img/logo_green.png">
        </div>



    <div id="about">
    <aside class="tlb"><p>About Us</p></aside>
        <p>Welcome. We are Author, nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat.</p>
        </div>

    <div id="services">
    <aside class="tlb"><p>Services</p></aside>  
        <ul>
        <li>Web Site Dev and Applications </li>
        <div class='hr'></div>  
        <li>CMS</li>
            <div class='hr'></div>
        <li>Digital Branding and Industry</li>
            <div class='hr'></div>
        <li>UI Design</li>
            <div class='hr'></div>
        <li>Social Media</li>
        <div class='hr'></div>
        <li>User Experience</li>
            <div class='hr'></div>
        <li>Creative Ingenuity</li>
        </ul>       </div>  

    </div>

<!-- Center Content ( main header, main image )     -->
    <div class="mwrap">

<!--        Main Nav Above Slider -->


            <nav class='mnav'>
     <ul>
         <li class="m1"><a href='#'>home</a></li>
         <li class="m2"><a href='#'>Author</a></li>
         <li  class="m3"><a href='#'>work</a></li>
         <li class="m4"><a href='#'>clients</a></li>
         <li class="m5"><a href='#'>contact</a></li>
            </ul>
     </nav>

        <div id="fimg">
        <img src="img/fumic_naslovna.jpg">
        </div>

        <div id="featart">
        <article>
        <h1>Lorem Ipsum</h1>
        <p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus. Aenean dignissim. Curabitur facilisis sem at nisi laoreet placerat. Duis sed ipsum ac nibh mattis feugiat. Proin sed purus. Vivamus lectus ipsum, rhoncus sed, scelerisque sit amet, ultrices in, dolor. Aliquam vel magna non nunc ornare bibendum. Sed libero. Maecenas at est. Vivamus ornare, felis et luctus dapibus, lacus leo convallis diam, eget dapibus augue arcu eget arcu.</p>
        </article>
        </div>
        </div>

        <div id="rwrap">
        <div class="rfc">
            <aside class="tlb">Featured Clients</aside>
            <p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus.</p>
            <div class='hr'></div>
            <p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat.</p>
            </div>

        </div>
        </div>
</body>
</html>

CSS

body {
background-image: url(img/brown.jpg);   
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
padding-bottom:12%;
color: #fff;
    font-weight: bold;
    font-size: large;
    text-align: left;
}

* {
border-radius: 1px; 
}

#page {

margin: 30px 25%;
width: auto;
/*  width should be 50% ... 25% on each side, 50% in middle, centered!*/
border: 2px solid black;    
}


/*Left Content Begins ------------------ */

.swrap {
    width: 23%;
    display:inline-block;
/*1% margin on each side    */
    margin-top: 100px;
}

#logo {
background-color: rgba(0,0,0,.7);   
}

#about {
margin: 3px 0;  
background-color: rgba(89, 194, 141, 1);
padding: 5%;    
}

#about aside {
margin-left: -6% !important;    

}

#services {
background-color:rgba(66, 161, 75, .96);
padding: 2%;
    margin: 3px 0;  
}

.tlb {
background-color: rgba(0,0,0,.6);
width: 75%;
margin: -10px 0 0 -2% !important;
padding-left: 4%;
}

/*Middle Content Begins ------------------ */

.mwrap {
    width: 48%; 
    margin: 0 auto;
/*1% margin on each side for .mwrap*/
    display:inline-block;

}


.mnav ul {
list-style:none;    

}

.mnav ul li {
display: inline;
font-size: large;
font-weight:bold;
padding: 2px 2%;
border-radius: 1px;

}

.mnav ul li a {
text-decoration: none;
color: #fff;

}

.m1 {background-color:rgba(46, 206, 87, 1); }
.m2 {background-color: rgba(39, 197, 80, 1); }
.m3 {background-color: rgba(70, 182, 99, 1); }
.m4 {background-color: rgba(64, 164, 90, 1);}
.m5 {background-color: rgba(63, 140, 83, 1); }

.mnav ul li:active {
background-color:none !important;   

}

.mnav li:hover {
background-color: rgba(0,0,0,.3);

}

#fimg {
width: 100%;    

}
#fimg img {
width: 100%;    
}

#featart {
margin-top: -10px;  
background-color:   rgba(64, 164, 90, .9);
padding: 1% 1%;     

}


/*Right Content Begins ------------------ */

#rwrap {
width: 23%;
display:inline-block;   
/*1% margin on each side    */

}


.rfc {
    background-color:rgba(66, 161, 75, .96);
padding: 2%;


}

.rfc .tlb {
margin-top: 9px !important; 
margin-left: -2.3% !important;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}

av17 27 апр. 2014, в 08:06

Источник

Теги:

html

css

position

wrapper

positioning

2 ответа

Ещё вопросы

av17 · Answer 1 · 2014-04-27T04-07-00.000Z

установить положение: относительное; bottom: X px;

Palmer · Answer 2 · 2014-04-27T02-38-00.000Z

Простым способом является использование относительного position: relative; bottom: [how ever many pixels] position: relative; bottom: [how ever many pixels] Лучше (и более поздний, более гибкий) способ немного изменить структуру HTML. Если бы я строил этот сайт, я бы разбил его на два оберточных divs с тремя столбцами div под каждым из них, как здесь:

 <div class="header">
      <div class="left-column">
           <img id="logo" src="img/logo.png" />
      </div>
      <div class="middle-column">
           <ul class="nav"></ul>
      </div>
      <div class="right-column">
           Put content here if you want it
      </div>
 </div>

 <div class="content">
      <div class="left-column">
           Content in left column
      </div>
      <div class="middle-column">
           Content in middle
      </div>
      <div class="right-column">
           Content on right
      </div>
 </div>

Теперь используйте CSS для размещения этих столбцов так же, как и раньше. Разница в этом заключается в том, что вы можете определить высоту заголовка, а логотип и навигация будут намного проще выровнять, поскольку они отделены от других столбцов.

Если вы хотите получить дополнительную техническую проверку CSS Flexbox, здесь все будет хорошо. http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

Мне сказали избегать поплавков, и с моим опытом они сосут, когда дело доходит до отзывчивости. Поплавки перемещаются вверх / вниз при изменении размера. НО - это мой ограниченный опыт. Я сделал это с помощью встроенного блока. Да, это выглядит интересно. Не могли бы вы привести пример того, что вы предлагаете?
Вероятно, это хорошая идея использовать display: inline-block или другие методы. Мой пример - это то же самое, что вы делаете, только я разделяю вышеперечисленные элементы и элементы контента, чтобы сделать позиционирование более плавным. Но опять же, обратите внимание на flex box, супер круто, не нужны поплавки или встроенные блоки. Я только использовал это на недавнем проекте.
Привет, извините, я не могу поместить свой комментарий в слова ха, продолжал редактировать, Flexbox выглядит интересно, у вас есть пример того, что вы предлагаете?
Предложение с Flex Box или HTML, который я разместил?
Да, проверьте эту ссылку. philipwalton.github.io/solved-by-flexbox/demos/holy-grail Это немного сложно, но работает хорошо, когда вы освоите его.