Slider w JSP

0

Cześć,
Tworze mały portal informacyjny coś ala auto centrum w celach aby się poduczyć spring mvc więc tak jestem nowy, mam mały problem ponieważ na stronie głównej mam wrzuconego slidera który działa przerzuca zdj itd lecz mam problem z wypoziomowaniem pola filtru. Wygląda to tak:
26fb42b66d.png . Jest szansa aby to ładnie na siebie położyć ??
HTML:

<body>

	<div id="container">

		<div class="square">
			<div class="poleText">
			<div class="searchField">Proszę wpisać markę oraz model poszukiwanego samochodu
					<div class="col-md-4 col-xs-12">
						<input autocomplete="off" name="marka" placeholder="Marka"
							options="autoCompleteOptions" ng-autocomplete=""
							details="details" ng-model="query.address"
							class="form-control"
							ng-change="resetQuery()" validate-query="" required=""
							type="text">
					</div>
					<br>
					<div class="col-md-4 col-xs-12">
						<input autocomplete="off" name="model" placeholder="Model"
							options="autoCompleteOptions" ng-autocomplete=""
							details="details" ng-model="query.address"
							class="form-control"
							ng-change="resetQuery()" validate-query="" required=""
							type="text">
					</div>
					<br>
					<div class="col-md-1 col-xs-12">
						<input value="Search" class="btn btn-default" type="submit">
					</div>
				</div>
				<div id="slider">
					<figure>
						<img src="<c:url value="/css/img/car.png"/>" alt="">
						<img src="<c:url value="/css/img/bmw.jpg"/>" alt="">
						<img src="<c:url value="/css/img/mesio.jpg"/>" alt="">
						<img src="<c:url value="/css/img/audi.jpg"/>" alt="">
						<img src="<c:url value="/css/img/maserati.jpg"/>" alt="">
					</figure>
			</div>
			<div style="clear: both;"></div>
		</div>
	</div>
</body>
0

Nikt nie wie ?! :(

0

Jak wygląda arkusz styli ?

0

Proszę bardzo:

body
{
	background: url(../css/img/back.jpg);	
	background-size: 100% 130%;
	color: #ffffff;	
	font-family: 'Lato', sans-serif; /* ustawiam rodzaj czcionki */
	font-size: 20px;
}

#container
{
	width: 1500px;
	margin-left: auto; /* wyśrodkowanie */
	margin-right: auto; /* wyśrodkowanie */
}

.rectangle /* nagłówek */
{
	width: 1500px;
	height: 50px;
	margin: 10px;
	background-color: #989898;
	margin-top:5px;
	text-align: center;
}

.square  /* odpowiedzialne za rozdzielenie "pojemników" na dwa kwadraty  */
{
	width: 100%;
	float: none;
}

#logo
{
	float: left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
	width: 1480px;
	height: 50px;
	text-align: left;	
}

.poleText
{
	margin-top:100px;
	margin-left:200px;
	width: 1100px;
	height: 400px;
	background-color: #989898;

	background-size: 100% 100%;
	text-align: justify;
	padding: 25px;
}

.searchField
{
	margin-top:60px;
	float: right;
	width: 300px;
	height: 400px;
	background-color: #008000;
	text-align:center; 
	padding: 5px;
	
}
.btn {
	float:right;
    display: inline-block;
    padding: 3px 6px;
    margin-right: 75px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.form-control {
    display: block;
    margin-left: 50px;
    width: 150px;
    height: 20px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.youtube
{
	margin: 5px;
	width: 100px;
	height: 50px;
	background-color: #d94348;
	float: right;
}

.youtube:hover /* przyciemniam kafelek po najechaniu */
{
	background-color: #c83237;
}

.facebook
{
	margin: 5px;
	width: 100px;
	height: 50px;
	background-color: #4668b3;
	float: right;
}

.facebook:hover /* przyciemniam kafelek po najechaniu */
{
	background-color: #3557a2;
}

a.tilelink
{
	color: #ffffff;
	text-decoration: none;
	display: block;
	width: 230px;
	height: 100px;
}

a.tilelinkhtml5
{
	color: #ffffff;
	text-decoration: none;
}

a.sociallink
{
	color: #ffffff;
	text-decoration: none;
	display: block;
	width: 100px;
	height: 50px;
}

@keyframes slidy {
0% { left: 0%; }
10% { left: 0%; }
15% { left: -100%; }
25% { left: -100%; }
35% { left: -200%; }
50% { left: -200%; }
60% { left: -300%; }
70% { left: -300%; }
75% { left: -400%; }
80% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}
0

Nie wszystkie divy mają swój koniec, wydaje mi się że to może mieć wpłyaw na układ strony. Blok (div) o identyfikatorze "slider" chyba nie ma swojego zakończenia. Wrzuć "</div>" pod "</figure>".

0

przydałby się tu jakiś ekspert od CSS-a
wydaje mi się, że w pliku CSS powinno być coś w stylu:
#square {
...
display:block;
...
}

0

Niestety. Brakowało div'a uzupełniłem ale nic to nie dało ;(

0

w klasie .searchField masz wpisane margin-top: 60px;

ustaw na margin-top: auto; a najlepiej na margin: 0 auto; 

.searchField
{
    margin: 0 auto;
    float: right;
    width: 300px;
    height: 400px;
    background-color: #008000;
    text-align:center; 
    padding: 5px;
 
}

pozdro

0

Zielone pole jedynie podniosło się do góry a chodzi mi o to aby pole zielone było w tym samym miejscu tylko nałożone na slidera. Slider ma być na całości pola szarego :) jeszcze jakies pomysły bo wujka już też przejrzałem ..

0

Poczytaj o position: absolute.
Ogólnie (klasy z czapy bo nie chce mi się rozszyfrowywać co jest czym u Ciebie, zresztą masz błędy w html):

.szary-kontener {
    position: relative;
}
.zielony-kontener {
    position: absolute;
    top: 0;
    right: 0;
}

1 użytkowników online, w tym zalogowanych: 0, gości: 1