1
Итак, я обновляю сайт местного цирка, а нижний колонтитул не хочет оставаться внизу страницы. Я не хочу, чтобы это фиксировалось в нижней части экрана, а скорее, когда вы просматриваете нижнюю часть содержимого, в котором должен находиться нижний колонтитул. Я также пытаюсь использовать div, чтобы заполнить оставшееся пространство справа от кнопок с полупрозрачным черным фоном. Сайт должен выглядеть так: http://sdrv.ms/18Njjnw, но вместо этого он выглядит как http://sdrv.ms/17PkpdR. Благодарим вас за помощь.нижний колонтитул застрял в середине страницы div не заполняется, остается экраном
<body>
<div id="body">
<a href="index.html" ><img id="logo" src="images/logo.png" alt="circus logo" /></a>
<div id="buttons" >
<div class="opa"><a class="buttons" href="circus.html"> Circus </a></div>
<div id="currentPage" class="opa"> <a class="buttons" href="tickets.html"> Tickets </a></div>
<div class="opa"><a class="buttons" href="performers.html"> Performers </a></div>
<div class="opa"><a class="buttons" href="band.html"> Circus City Band </a></div>
<div class="opa"><a class="buttons" href="festival.html"> Circus City Festival </a></div>
<div class="opa"><a class="buttons" href="calendar.html"> Calendar </a></div>
<div class="opa"><a class="buttons" href="about.html"> About </a></div>
<div class="opa"><a class="buttons" href="forms.html"> Forms </a></div>
</div>
<div id="contentContain" >
<div id="paragraph">
<h1> Order Tickets
</h1>
<p>
Performance Dates
<br />
Family Night:<br />
Friday, July 12, 2013 - 7 p.m.<br />
General admission seating - $5.00<br />
Tickets go on sale the day of show!<br />
<br />
Regular Performances:<br />
Saturday, July 13 - 2 p.m. & 7 p.m. <br />
Sunday, July 14 - 3 p.m. <br />
Monday - Friday, July 15-19 - 7 p.m. <br />
Saturday, July 20 - 2 p.m. & 7 p.m. <br />
<br />
Order Online, at the Box Office, or by calling us at 765.472.3918
rom the barn to the big top, Circus has<br /> been a part of Peru, Indiana for over 100 years. Exp<br />erience a walk through Peru's circus history at the Circus City Museum. This popular Museum, locat<br />ed in the Circus City Center, is filled with photos,<br /> miniatures, displays, and costumes from circus past. The museum is open Monday through Friday, A<br />pril through September from 9 am to 5 pm and October throu<br />gh March 9 am to 4 pm. During circus week enjoy<br /> the many circus wagons displayed outs<br />ide the museum as well as extended hours before and after each circus performance. Admission is by <br />donation only. Group tours can be scheduled<br /> by contacting the Circus office at 765-472-3918.
Monetary and ar<br />tifact donations are accepte<br />d and greatly appreciated.
For monetary donations se<br />nd check or Mon<br />ey order to:
Circus City Museum
C/O Circus City Fest<br />ival Inc.
154 N. Broadway
Peru Indiana.
<br /><br />
Circus artifacts can al<br />so be mailed, delivered, or picked up.
Contact the Circus City Fes<br /><br />tivals office at 765-472-3918 for more details.
Circus City Gift Shop<br />
Complete your “Big Top” ex<br /><br />perience with a souvenir from our Circus City Gift Shop! Memorabilia such as post cards, t-shirts, hats, toys, and more are <br />available for purchase. The gift shop is located in the <br />Circus City Center and is open to the public Monday through Friday, <br />April through September from 9 am to 5 pm and October through March from 9 am to 4 pm.<br /> Proceeds are used to support Circus City Festivals, Inc. <br />and the Peru Amateur Youth Circus program.
</p>
<div id="ticketsbut" ><a id="order" href="http://sa1.seatadvisor.com/sabo/servlets/EventSearch?presenter=CIRCUSCITY">Place Ticket Order </a></div>
</div>
<div id="content"> </div>
</div>
<a href="http://www.firstbankofberne.com/"><img id="bank" src="images/bank.png" /></a>
<div id="footer" >
<p id="foottext"> Circus City Festival, Inc. • 154 North Broadway • Peru, IN 46970 • (765) 472-3918 • Fax:(765) 472-2826 • [email protected] </p>
</div>
</div>
</body>
</html>
</html>
body{
margin:0px;
padding:0px;
}
html{
}
div.sidebar{
background-color:black;
width:35%;
min-width:430px;
filter: alpha(opacity=50);
opacity: .5;
}
#body{
position:relative;
min-height:100%;
min-width:100%
}
#foottext{
}
#contentContain{
position:absolute;
top:0px;
left:430px;
height:auto;
z-index:1000;
color:white;
}
#content{
position:absolute;
top:0px;
left:0px;
width:100%;
background-color:black;
filter: alpha(opacity=50);
opacity: .5;
height:100%;
z-index:-1;
}
#paragraph{
text-align:center;
}
#sideBarContainer{
height:100%;
}
#logo{
width:420px;
z-index:1000;
}
#footer{
background-color:black;
width:100%;
height:35px;
position:absolute;
bottom:0px;
left:0px;
text-align:center;
color: white;
z-index:1000;
}
a.buttons{
display:block;
text-decoration:none;
color:white;
height:35px;
line-height:35px;
text-align:center;
font-family: Lucida Bright;
vertical-align:middle;
}
#currentPage{
background-color:black;
filter: alpha(opacity=50);
opacity: .5;
}
#currentPage:hover{
filter: alpha(opacity=100);
opacity: 100;
}
a.buttons:hover{
background-color:black;
filter: alpha(opacity=100);
opacity: 100;
}
#buttons{
width:430px;
}
#bank{
position:absolute;
left:0px;
bottom:35px;
}
Существует тег div кузова, из которого он должен брать свое положение. #body { позиция: относительная; мин-высота: 100%; min-width: 100% } Также, что вы подразумеваете под «вытащить все это»? –
положите контейнер div в ваше тело с объявленным относительным положением. Избавьтесь от высоты/ширины объявленных высот ... это может быть причиной проблемы. Когда я сказал «вытащить все это», я имею в виду вывести его из кода и закодировать divs inline .... возможно, слишком много работы на данный момент, но кодирование всего с абсолютным позиционированием - не лучшая практика. – hendr1x
Что вы имеете в виду «ограниченная поддержка браузера»? Вы имеете в виду мобильные браузеры? – Ryan