4
У меня есть вертикальная навигация и еще одна <div>, где должно быть содержимое. Когда я пытаюсь расположить те <div> s бок о бок, другой <div> (текстовое поле) идет под основным контейнером, и я не могу получить его там, независимо от того, что я пробовал. Я надеюсь, что вы можете мне помочь.Вертикальная навигация и Div Side by Side
HTML
<body>
<!--Main Container-->
<div class="container-main">
<!--Main Navigation-->
<nav class="main-nav">
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<?php
include($_GET['site'].".php");
?>
</div>
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--Arrow Navigation-->
<a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
<div id="thumb-tray" class="load-item">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>
<!--Time Bar
<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
</div>-->
<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
<div id="controls">
<a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
<!--Slide counter
<div id="slidecounter">
<span class="slidenumber"></span>/<span class="totalslides"></span>
</div>-->
<!--Slide captions displayed here-->
<div id="slidecaption"></div>
<!--Thumb Tray button-->
<a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
<!--Navigation-->
<ul id="slide-list"></ul>
</div>
</body>
CSS
/*MAIN BODY STYLING*/
html{
height: 100%;
}
body{
font-family: 'Lato', sans-serif !important;
min-height: 100%;
}
/*MAIN BODY STYING ENDS*/
ul#demo-block{
margin:0 15px 15px 15px;
}
ul#demo-block li{
margin:0 0 10px 0; padding:10px; display:inline; float:left; clear:both; color:#aaa; background:url('styles/bg-black.png'); font:11px Helvetica, Arial, sans-serif;
}
ul#demo-block li a{
color:#eee; font-weight:bold;
}
.container-main{
height: 100%;
margin: 0 auto;
width: 100%;
}
.container-textbox{
background-color: rgba(112,128,144, 0.6);
width: 30em;
height: 20em;
}
.main-nav{
background-color: rgba(192,192,192, 0.3);
}
.navigation{
}
nav {
padding-left: 0;
margin-left: 0;
height: 100%;
width: 250px;
font-size: 11pt;
position: relative;
margin-left: 230px;
}
nav ul {
padding-top:60px;
}
nav li {
margin-bottom:5px;
}
nav a {
color: #fff;
display: block;
width: 100px;
background-color: rgba(192,192,192,0);
text-decoration: none;
text-shadow: 1px 1px 0px #283744;
width: 8em;
line-height:60px;
padding-left:45px;
font-size:20px;
word-spacing:10%;
}
nav li a {
/* In the transition you define the property that
you want a transition attached to and the duration*/
transition: background .3s;
-moz-transition: background .3s; /* Firefox 4 */
-webkit-transition: background .3s; /* Safari and Chrome */
-o-transition: background .5s; /* Opera */
background-color: rgba(0, 0, 0, 0.4);
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
text-shadow: 0.5px 0.5px #fff;
}
nav li:last-child a {
}
nav a:hover, nav a:active {
background-color: rgba(112,128,144, 0.4);
}
BUMP! Любая помощь ребята, пожалуйста? – raqulka
Привет, просто интересно, какой div вы пытаетесь поплавать в сторону вашей навигации. Я не вижу одно для текстового поля только для кода слайдера изображения. –
Эй, парень! Спасибо за вашу помощь, но посмотрите на дату, когда она была спрошена :). Я давно это понял, глупая ошибка хе. Но спасибо за помощь! – raqulka