 [CSS] Problem z ustawieniem divów jeden pod drugim |
| [CSS] Problem z ustawieniem divów jeden pod drugim |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 8 Pomógł: 0 Dołączył: 16.03.2015 Ostrzeżenie: (0%) 
 |
Witam. Nie mogę sobie poradzić z ustawieniem divów, jeden pod drugim. Ten co teraz wskoczył pod warstwę z kropkami na białym tle, chciałbym żeby był - jak każdy kolejny - jeden pod drugim. Czyli: najpierw div z grafiką główną i tymi gradientami, pod nim ten slogan i dalej każdy następny div ma być w podobny sposób usytuowany, pod poprzednim.
Zdaję sobie sprawę, że jest to proste, ale chyba za długo nad tym siedzę dzisiaj i nie potrafię znaleźć rozwiązania. Dzięki za pomoc;) LINK: http://ffstudiofilm.pl/pg/oferta.html Kod <BODY> <header class="top"> <center><nav id="menu"> <ul class="left"> <li><a href="http://ffstudiofilm.pl"><img class="logo" src="../img/logo.png"></a></li> </ul> <ul class="right"> <li><a href="../index.html">Start</a></li> <li><a href="oferta.html">Oferta</a></li> <li><a href="media.html">Media</a></li> <li><a href="kontakt.html">Kontakt</a></li> </ul> </nav></center> </header> <div id="all"> <div id="container1-img"> <div class="gradtop"></div> <div class="cont_gradtop"></div> <div class="cont_dots"></div> <div class="cont_gradbottom"></div> <div class="gradbottom"></div> </div> <div id="container2"> <div class="title"> FF STUDIO to my! <br> Profesjonalne usługi wideofilmowania <hr> </div> </div> </div> <footer><div class="container"> <div class="left">© 2015 <a href="http://ffstudiofilm.pl">ffstudiofilm.pl</a> Wszelkie prawa zastrzeżone.</div> <div class="right">Wykonanie <a href="mailto:mbaton14@o2.pl">mortas</a></div> </div></footer> </div> </BODY> Kod * {margin: 0; padding: 0;}
html, body {background: none; background-color: #333333; height: 100%; text-align: center; font: 100% Tahoma;} @font-face { font-family: Dosis-Light; src: url('../fonts/Dosis-Light.otf'); } @font-face { font-family: Open Sans Medium; src: url('../fonts/OpenSans-Regular.ttf'); } @font-face { font-family: Raleway Regular; src:url('../fonts/Raleway-Regular.ttf'); } img{ max-width: 100%; height:auto; width:auto; } #menu { height: 100%; } #menu ul.left { float: left; } #menu ul.right { float: right; padding-top: 22px;} #menu ul.right li a { text-shadow: 0px 0px 2px #333333; font: 180% Dosis-Light; margin-left: 15px; color:#DCDCDC; text-transform:uppercase; text-decoration:none; transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } #menu ul.right li a:hover { color:#E43E3E; } #menu li { display: inline-block; } header.top { height: 75px; position: fixed; width:100%; background: rgba(51, 51, 51, 1); margin:0px; padding: 15px 0 15px 0; z-index: 3; } #all { width: 100%; margin: 0 auto; text-align: center; position: relative; } #container1-img { position: relative; top: 111px; border-top: #171717 1px solid; border-bottom: #171717 1px solid; background: url('../img/img_main1.jpg') no-repeat center center;background-size:cover; width: 100%; height: 350px; } #container1-img .gradtop { position: absolute; top: -8px; background: url('../img/gradmin.png') repeat-x; width: 100%; height: 8px; z-index: 2; } #container1-img .gradbottom { position: absolute; bottom: -8px; background: url('../img/gradmin2.png') repeat-x; width: 100%; height: 8px; z-index: 2; } #container1-img .cont_gradtop { position: absolute; top: 0px; background: url('../img/gradmax.png') repeat-x; width: 100%; height: 30px; z-index: 3; } #container1-img .cont_gradbottom { position: absolute; bottom: 0px; background: url('../img/gradmax2.png') repeat-x; width: 100%; height: 30px; z-index: 3; } #container1-img .cont_dots { background: url('../img/dots3x3.png'); background-repeat: repeat; width: 100%; height: 100%; opacity: 0.5; position: absolute; top: 0px; left: 0px; z-index: 1; } #container2 { position: relative; clear: both; display: block; background: #fff; width: 100%; padding: 30px 0 30px 0; height: auto; } #container2 .title { position: relative; text-align: center; } |
 |
 
|
 |
|
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 219 Pomógł: 10 Dołączył: 9.01.2005 Ostrzeżenie: (0%)
|
w akruszu w sekcji #container2 usun position:relative
|
|
|
|
|
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 8 Pomógł: 0 Dołączył: 16.03.2015 Ostrzeżenie: (0%)
|
Nie pomaga....
|
|
|
|
|
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 7 Pomógł: 0 Dołączył: 8.03.2015 Ostrzeżenie: (0%)
|
Problemem jest wartość top: 111px dla #container1-img.
Powinieneś albo ustawić dla każdego następnego diva tą wartość, co jest bezsensowne. Podkreślam bezsensowne. Drugą opcją, która jest dużo lepsza to usunięcie wartości position: fixed dla header.top i wartości top: 111px dla #container1-img. Ten post edytował jack1142 18.03.2015, 00:44:15 |
|
|
|
|
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 146 Pomógł: 3 Dołączył: 28.10.2014 Ostrzeżenie: (10%) 
|
Sprawa nie jest trudna. Napisz mi co chciałbyś osiągnąć i jak miałaby wyglądać ta strona, a zaraz Ci ją zrobie, bo widzę w kodzie tyle młynu, że nie wiem czy jest sens to porawiać i chyba lepiej napisać od nowa.
|
|
|
|
|
Post
#6
|
|
|
Grupa: Zarejestrowani Postów: 8 Pomógł: 0 Dołączył: 16.03.2015 Ostrzeżenie: (0%)
|
Cytat(jack1142 @ 18.03.2015, 00:43:37 )  Problemem jest wartość top: 111px dla #container1-img. Powinieneś albo ustawić dla każdego następnego diva tą wartość, co jest bezsensowne. Podkreślam bezsensowne. Drugą opcją, która jest dużo lepsza to usunięcie wartości position: fixed dla header.top i wartości top: 111px dla #container1-img. A no faktycznie, rozumiem już zachowanie tych divów. Też wydawało mi się niepraktyczne wstawienie tego odsunięcia o 111px od góry, ale chciałbym zachować moje menu cały czas u góry strony. Często gęsto spotyka się takie menu, nie jest to po prostu rozwiązane właśnie atrybutem position: fixed? @castagir poszło pw |
|
|
|
 |
|
Aktualny czas: 22.08.2025 - 05:42 |
