Сайдбар падает вниз.Резиновый двухколоночный макет.

eleonore · April 14, 2013

Не могу понять,в чем проблема,сайдбар должен находиться справа,сбоку,а он упорно падает вниз!Он справа,но внизу,под #content, а не сбоку! :dash: .Почему?Люди, помогите,пожалуйста!!!))))

css код:

@charset "utf-8";

/* CSS Document */

<style>

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

html{

background:#dbe4e3 url(images/top_fon.png) no-repeat;

height:100%;

}

body{

background:url(images/flag.png) 100% 0 no-repeat;

height:100%;

}

header{

padding-top:370px;

font-family: Cambria, Georgia, serif;

font-size:12pt;

}

ul.navigation{

text-align:justify;

overflow:hidden; /* нужно чтобы обрезать разные побочные эффекты приема */

height:20px;/* нужна чтобы устранить один побочный эффект, но иногда можно обойтись без нее */

cursor:default;/* растянутый текст justify приведет к тому что почти вся плашка меню будет иметь cursor: text */

padding:5px;

margin:0px 85px 0px 85px;

}

ul.navigation li{

display:inline;/* чтобы пункты меню выступали в роли текста */

}

ul.navigation li a{

display:inline-block; /* чтобы не разрывались слова в пунктах меню */

text-decoration:none;

color:#47566b;

}

ul:after { /* эмуляция дополнительной строки, чтобы сработал justify */

content: "1";

margin-left: 100%;

height: 1px;

overflow: hidden;

display: inline-block;

}

.gallery{

position:absolute;

top:175px;

right:70px;

}

#container{

overflow:hidden;

padding:40px 20px 0px 85px;

}

aside{

float:right;

width:25%;

}

aside h1{

font-weight:bold;

font-size:12pt;

}

#content{

margin-right:26%;

color:#495d71;

}

#content h1{

font-size:14pt;

}

.invite{

width:50%;

}

p{

padding:10px 0px;

}

.invite h1{

color:#a93b30;

font:Georgia, "Times New Roman", Times, serif;

font-size:18pt;

text-decoration:underline;

}

.invite, .about{

border-bottom:1px dotted #909ba6;

padding:40px 5px 40px 5px;

font-size:12pt;

}

.about{

width:100%;

margin-bottom:30px;

}

.about h1{

color:#2b3850;

}

.about a {

color:#2a69a7;

text-decoration:none;

border-bottom:1px dashed #2a69a7;

}

.recent_news article{

background:#f8fdfe;

color:#426c93;

margin-bottom:20px;

padding:15px 10px;

-moz-box-shadow:0px 15px 15px -10px #8f9498;

-webkit-box-shadow:0px 15px 15px -10px #8f9498;

box-shadow:0px 15px 15px -10px #8f9498;

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

}

.recent_news article a{

color:#426c93;

}

time{

color:#273e53;

font-size:11pt;

}

table{

width:100%;

border:none;

}

td.pic{

width:170px;

vertical-align:central;

}

td.pic img{

-moz-box-shadow:0px 15px 15px -10px #8f9498;

-webkit-box-shadow:0px 15px 15px -10px #8f9498;

box-shadow:0px 15px 15px -10px #8f9498;

}

td.text{

vertical-align:top;

}

.all_news{

font-size:14pt;

color:#424f64;

padding-top:30px;

}

.videobox{

font-size:9pt;

color:#7f8e91

}

footer{

}

</style

html- код:

<body>

</p>

<nav>

<li><a href="#">SEARCH AIRPLANES</a></li>

<li><a href="#">RESTORATION</a></li>

<li><a href="#">MAINTENANCE</a></li>

<li><a href="#">EXHIBITIONS & AIRSHOW</a></li>

<li><a href="#">CONTACTS AND FEEDBACK</a></li>

</ul>

</nav>

</header>

<h1>We invite for cooperation</h1>

<p>We invite professionals and enthusiasts and history buffs, fans of aviation.

Any help is invaluable. Together, we will not let die the RAF Legends.</p>

</article>

<h1>ABOUT MUSEUM</h1>

<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised

words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden

in the middle of text.</p>

<p><a href="#">Full information</a></p>

</article>

<table>

<tr>

<p><a href="#">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</a></p>

</td>

</tr>

</table>

</article>

<table>

<tr>

<p><a href="#">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,making it over 2000 years old.</a></p>

</td>

</tr>

</table>

</article>

<table>

<p><a href="3">Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</a></p>

</td>

</tr>

</table>

</article>

<p><a href="#" class="all_news">All events and news</a></p>

</section>

</div>

<aside>

<p class="videobox">BATTLE OF BRITAIN LEGENDS</p>

<h1>Latest video from Dunkirk Airshow</h1>

</aside>

</div>

</footer>

</body>

Edited April 14, 2013 by eleonore

deadrash · April 14, 2013

А если для .content добавить float:left; и заменить margin-right: 26%; на width: 74%; ?

eleonore · April 14, 2013

А если для .content добавить float:left; и заменить margin-right: 26%; на width: 74%; ?

:unsure: Свежий мозг!Спасибо вам,все встало на место))).но почему,вроде проверила в учебнике,от туда и взяла образец кода,а в моем макете не сработало...?

deadrash · April 14, 2013

Свежий мозг!Спасибо вам,все встало на место))).но почему,вроде проверила в учебнике,от туда и взяла образец кода,а в моем макете не сработало...?

Да фиг знает, может там ещё position:absolute; был, а может для внутренних элементов .content был проставлен float:left; что в принципе неправильно. Может ещё что. Это же нужно полный код видеть, что бы понять как там оно работало.

eleonore · April 14, 2013

Свежий мозг!Спасибо вам,все встало на место))).но почему,вроде проверила в учебнике,от туда и взяла образец кода,а в моем макете не сработало...?
Да фиг знает, может там ещё position:absolute; был, а может для внутренних элементов .content был проставлен float:left; что в принципе неправильно. Может ещё что. Это же нужно полный код видеть, что бы понять как там оно работало.

Ну да ладно,спасибо за помощь!)

Sign In

Сайдбар падает вниз.Резиновый двухколоночный макет.

Question

eleonore

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

deadrash

Link to comment

Share on other sites

eleonore

Link to comment

Share on other sites

deadrash

Link to comment

Share on other sites

eleonore

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information